How To Customize Blog Post Title With Extra CSS In Blogspot?

How To Customize Blog Post Title With Extra CSS In Blogspot?

The Blogger post title of article is one of many important factors in order to encourage readers on reading our blog articles. That's because the Blogger post title is the first thing that visitors will see at the first time when landing to your blog homepage. So, no wonder that many bloggers i've met around the blogosphere always maximize the interface of blogger post title of their blogs.

There are many benefits that we can get if we can maximize the interface of the Blogger post title, and one of those benefits is to increase the number of pageviews of our blog. Interested to style the Blogger post title in your blog into the CSS Capitalize, Uppercase or Lowercase character with the CSS property "text-transform", here's how to do that...

The default Blogger-Blogspot layouts (like Minima) don't allow you to change or customize the look of post title font through Fonts & Colors tab. An HTML/CSS expert can easily change the post title font from the Edit HTML tab but that's not easy for a non-technical person. In this tutorial, I'll tell you how to fully customize the post title font by going to Advanced.

Many of the templates both from the Blogger template designer and Custom templates leave the post titles fairly standard.When it comes to fonts, sizes, colors etc.. the post titles on almost all blogs have the same design.But you can add some spice to your post titles without too much hard work and adding even a few minor customizations can make all the difference.Every Blogger template has a small piece of Css that controls how the Post titles appear and by adding or changing small pieces of code we can change the appearance.

So in this post among other changes to your blog titles we will see, How To Add CSS, Change The Size, Change The Color, Change The Background Color or add A Background Image, Change The Font Family and more..
First make sure to back up your template, I'm sure you wont make a mistake but just in case.With that done lets look at some of the effects we can add to Blogger post titles.

Features:

1.) You Can Spice Up Your Blog Post Title Only.
2.) Full CSS Support/Code.
3.) Easy To Add And Awesomer In Look.
4.) Can Add Every CSS Property.
5.) It Will Be Displayed On Every Places, Labels Page, Main Page, Search Page, Article Page.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Template.
4.) Click "Edit HTML".
5.) Now Find "]]></b:skin>"
6.) Now Copy The Below Code And Paste Before It.
7.) Customize It.
8.) Click Save, Now You Are Done.

h3.post-title{
background:#FEBBFF;
border: 10px outset #CC0099;
padding: 5px;
//Your Extra CSS Here//
}

Customization:

1.) Change The CSS Codes With Your Desire.
2.) Add Extra CSS In Space Of //Your Extra CSS Here//.
3.) Feel Free To Ask More.

You Like It, Please Share This Article Using...



22 comments:

  1. Adjusting the Title is fine by me as it is the most eye catching part of the page anyways. SEO Wise, it does nothing but that can be negated with a good and proper title. This could be very useful for our blogger templates over at web design west sussex.

    ReplyDelete
    Replies
    1. Yes, You Are Right, The Title And Tile Design, Both Should Be Awesome In Order To Keep Hot...

      Delete
  2. Sir I do want to make my blog's post subtitle with #2992C6 text colour and dotted top and upper border style with also #2992C6 colour.so as far I tried two different css code
    #1).post h3 {
    color:#2992C6;
    padding:5px;
    font-size:16px;
    font-style:bold;
    font-style:italic;
    border-top-style:1px dotted #2992C6;
    border-bottom-style:1px dotted #2992C6;
    }


    #2)
    h3.post-title{
    color:#2992C6;
    padding:5px;
    font-size:16px;
    font-style:bold;
    font-style:italic;
    border-top-style:1px dotted #2992C6;
    border-bottom-style:1px dotted #2992C6;
    }

    both cases I failed,now I need your help.advance thanks to you.

    ReplyDelete
  3. already checked and done but that css also doesn't working on my blog :(

    ReplyDelete
    Replies
    1. sir I just put my desire css

      .post h3 {
      color:#2992c6;
      border:1px solid #2992c6;
      -moz-border-radius: 10px;
      border-radius: 10px;
      padding:3px;
      font-size: 12pt;
      -webkit-box-shadow: 0 8px 6px -6px black;
      -moz-box-shadow: 0 8px 6px -6px black;
      box-shadow: 0 8px 6px -6px black;}

      on my demo blog and I got the result as I want.U can see it here
      http://demoofmyblogspot.blogspot.com/2013/02/123659.html

      but the same css doesn't work when I put on my exact blog,which is http://techtrickhome.blogspot.com/2013/03/make-money-with-fiverr.html

      plez check and tell me the solution.

      Delete
    2. Your Main Blogs Did Not Contain Sub-Headings, It's Wrap Into span Tags. First Add H2 H3 H4 Tags To Your Post Heading In Order To Work Our Code. Your DEMO Blog Contain These Tags...

      Delete
    3. plez tell me how to add this h3 tag on my blog post subheading?

      Delete
    4. Edit Post In HTML And Add H3 Tage Around Your Headings Or Use Heading Sub-Menu In Blogger Post Editor...

      Delete
    5. for that I have to edit every single post,which need much time.don't you have any way to do this by simple template html tweaking at once?

      Delete
    6. No, You Must Have To Edit All Of Your Post...

      Delete
    7. sir as per your instruction I edit the blog post and still it's not working check this plez
      Free .in Domain

      Delete
    8. You Are Using Custome Template, Add The Below Code Instead Of Previous One...
      .post-body h3 {
      color:#2992c6;
      border:1px solid #2992c6;
      -moz-border-radius: 10px;
      border-radius: 10px;
      padding:3px;
      font-size: 12pt;
      -webkit-box-shadow: 0 8px 6px -6px black;
      -moz-box-shadow: 0 8px 6px -6px black;
      box-shadow: 0 8px 6px -6px black;}

      Delete
  4. Replies
    1. I Did What I Can, Now I Have To Use Your Dashboard To Check Out This Problem...

      Delete
    2. Finally I made this work,please take a look on my blog and tell me how the template is now and also tell me what more I should do to improve it's look?

      Delete
    3. Cool Dude, Just Make Your Template Simple And Awesome...

      Delete
  5. Hello... Can U please please please please and infinity x please tell me how to add this on my blog? the SHARE this off your website... but after the blog post... prntscr.com/10y6dt [screenshot]
    this is what i have on my blog prntscr.com/10y6ia [screenshot].. i wanna replace it with "share this" please help me.. i have tried everything but m unable to do it.. please help!! <3

    ReplyDelete

Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Subscribe by email" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quiries contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) You comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfill the requirements.

Be Socialized And Subscribed
Be Socialized And Subscribed
Recive All Latest And Hottest Articles,Tips And Tricks,Awesome Widgets Directly Into Your Inbox And Stay UpDate With Us...!!!

E-Mail Will Be Delivered By FeedBurner.