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.

Related Posts Plugin for WordPress, Blogger...