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 it. Now 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.
Excellant just got it in one go
ReplyDeleteThat looks great. Happy blogging!
DeleteSame here a beautiful explanation!
ReplyDeleteIt worked like a charm!!!!!!!!!!!!!
ReplyDeletewhat an explanation this is very good for non technical people!
ReplyDeleteLovely! I have done it
ReplyDeleteYou hv also added author name date and comment counter just above it. How can I also do that. Hope you can help
ReplyDeleteYou 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.
ReplyDeleteThanks a lot. I ll be looking forward to it!!!!
DeleteI am on it!
DeleteI have just wrote an article for you here
Deletehttp://www.ptetech.blogspot.com/2012/10/put-date-name-and-comment-counts-under.html
Thanks! It really helped me a lot.
DeleteI spend 6 hours learning it but failed. But with your tutorial it took me 5 minutes!!!
ReplyDeleteSalute to you Mahfooz!!!
Thanks Ana!
DeleteI am just a biggener but I did it great post boss!!!!
ReplyDeleteHello 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!
ReplyDeleteRohit I have applied css formatting for it. Let me get back to you on this!!!
DeleteSorry for ridiculously late response you should add below code to your css. Change the font as per your choice!
Deleteh3.post-title {font-family: 'Verdana', serif;}
#header h1 {font-family: 'Verdana', serif;}
.sidebar h2 {font-family: 'Verdana', serif;
}
Thanks buddy! it worked like a charm..
DeleteYou are welcome!
DeleteThanks for the nice info!
ReplyDeleteYou are welcome!
DeleteBeautifully explained.
ReplyDelete