Monday, October 01, 2012

How to Add Stuff Below Post Title - Blogger

Monday, October 01, 2012

Ever wonder how can you put the stuff just below the post title and that too only on post pages and not on front page or home page, as you can see the social networking sites sharing options on this blog. The simple trick which has taken away pretty much of my time to learn the correct configuration of any site including blogger. Following the below mentioned instructions very carefully and enjoy:

1. Sign in to your Blogger Account, Go to Dashboard, Layout, Edit HTML, Expand Widget Templates. Make sure you backup your template and save a copy of it. Notice the “.xml” file type – make sure you maintain that extension throughout this process.

3. Now you will need to open your template file using a program that can handle .xml files. Do not use Word or Pages to open this file, as it will garble the file contents. You need Komodo Edit (a free, open source, text editor available for both PC and Mac users).

4. You will want to rename the file to be something like “modified-template.xml”, to keep the original file with you. To do this, select File > Save As > and save it as “modified-template.xml”.  Make sure you maintain the .xml file type.
  • Open your text editor
  • Select File
  • Select Open
  • Locate and select your template .xml file

5. Get the code for the button at AddThis or ShareThis (if you opt for the ShareThis button click on “Any Website” when asked to “Choose Your Service”). Your code should look like this. Notice the code is in two parts consisting of <script > tags and <span> tags.
6. Make sure to add <b:if cond='data:blog.pageType == "item"'> on top of your first part of code and add </b:if> below itNow you need to locate the <div class='post-header-line-1'/> by pressing CTRL+F.
7. Place the first part of code <span> tags you got at AddThis or ShareThis right above said line and your code will look like this:
8. Now we have to add the second part of code just above the header </head>. So go ahead and search for </head> and place the second part of code <script > tags just above it and your code will look like this:
Now go ahead and upload the template to your blog or website and see if everything is working fine. For any kind of support leave your comments below.

23 comments:

  1. Excellant just got it in one go

    ReplyDelete
  2. Same here a beautiful explanation!

    ReplyDelete
  3. It worked like a charm!!!!!!!!!!!!!

    ReplyDelete
  4. what an explanation this is very good for non technical people!

    ReplyDelete
  5. Lovely! I have done it

    ReplyDelete
  6. You hv also added author name date and comment counter just above it. How can I also do that. Hope you can help

    ReplyDelete
  7. You can add the desired code just above the code of sharethis and it should work like a charm. I ll also post an article about it shortly.

    ReplyDelete
    Replies
    1. Thanks a lot. I ll be looking forward to it!!!!

      Delete
    2. I have just wrote an article for you here

      http://www.ptetech.blogspot.com/2012/10/put-date-name-and-comment-counts-under.html

      Delete
    3. Thanks! It really helped me a lot.

      Delete
  8. I spend 6 hours learning it but failed. But with your tutorial it took me 5 minutes!!!

    Salute to you Mahfooz!!!

    ReplyDelete
  9. I am just a biggener but I did it great post boss!!!!

    ReplyDelete
  10. Hello I have noticed you are using thumbnails with summaries on ur front pages I have done that also but my front page font has been disturbed due to this I have seen yours is still same is there a tweak can you help!

    ReplyDelete
    Replies
    1. Rohit I have applied css formatting for it. Let me get back to you on this!!!

      Delete
    2. Sorry for ridiculously late response you should add below code to your css. Change the font as per your choice!

      h3.post-title {font-family: 'Verdana', serif;}
      #header h1 {font-family: 'Verdana', serif;}
      .sidebar h2 {font-family: 'Verdana', serif;
      }

      Delete
    3. Thanks buddy! it worked like a charm..

      Delete
  11. Thanks for the nice info!

    ReplyDelete
  12. Beautifully explained.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...