It's been few weeks since the launch of shoutmeloud thesis theme. I received few complaints regarding the template. One of my readers pointed that the Facebook share buttons on the homepage do not share the post - meaning to say, it shares the blog URL instead of the post URL. So, the bug has been fixed and its tutorial along with the customization of navigation bars are explained in this post.
Let me first tell you how to solve the Facebook Share Button issue.
1. Navigate to "Design->Edit HTML" from your blogger dashboard. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Expand your template. To do so, ensure that you have a tick mark on the box next to the line that says 'Expand Widget Templates". Now, search for the following block of code in your template.
<div class='facebook-share'>
<script>var fbShare =
size: "small",
google_analytics: "true"
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
3. Replace the above block of code with the following block of code.
<div class='facebook-share'>
<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
4. That's it, the bug is solved!!! Save your template.
Next, we move on to the customization with the navigation bars. The template has two navigation bars. One above the header and one below it. To those who do not know what navigation bars are, just take a look at the following picture for better understanding. To customize these two bars and add a google adsense link unit, we just need to replace/add few lines of code. So, let's start the customization...
1. Navigate to "Design->Edit HTML" from your blogger dashboard. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Look out for the following piece of code. Note the links highlighted in green and the corresponding names highlighted in blue.
<ul id='secnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='
http://www.newbloggingtipz.com/p/advertise-on-everything-about-blogging.html' shape='rect' target='_blank'>
Advertise</a></li>
<li><a href='
#'>
Make Money Online</a>
<ul class='children'>
<li><a href='
#'>
Via Blogging</a></li>
</ul>
</li>
<li/>
<li><a href='
#'>
Join Us</a>
<ul class='children'>
<li><a href='
#'>
Write For Us</a></li>
</ul>
</li>
<li><a href='
http://www.newbloggingtipz.com/2011/04/shoutmeloud-thesis-theme-for-blogger.html'>
Download This Theme</a></li>
</ul>
3. Just replace all the highlighted links in green with the links you wish to point out. This is self explanatory. Also, replace the names highlighted in blue with the names you wish to have.
4. Repeat the above two steps for the bottom navigation bar too. The coding for the bottom navigation bar is as follows - links are highlighted in green and names are highlighted in blue (similar to the coding in step 2).
<ul id='subnav'><li>
<a href='
#'>
Label One</a>
</li>
<li>
<a href='
#'>
Label Two</a>
</li>
<li>
<a href='
#'>
Label Three</a>
</li>
</ul>
5. Next, you need to create a Google Adsense Link Unit of the following dimensions - 728x15. Obtain the coding for the same.
6. Search for the following line in your template. Use CTRL+F to fasten your search results.
<div id='adnav'>
7. Erase the following block of code that lies just below the line you searched in step 6 and save your template.
<script type="text/javascript"><!--google_ad_client = "pub-5551438321907005";
google_ad_host = "pub-1556223355139109";
/* 728x15, created 10/3/10 */
google_ad_slot = "2535927729";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
8. Go to the following link -
SimpleCode. Paste the coding you obtained from the Adsense unit on the first block and hit the "Process" tab. You will find the processed code the block below. Leaving the two tags at the top and at the bottom (that is, <code> and </code> tags), paste the remaining code, that lies in between them, just after the line you searched in step 6. (
Note: Ensure that there are not break tags at the end of each line after you process the coding on SimpleCode site.)
9. Now, save your template. That's it!
I hope you enjoyed this customization. If you have any other issues regarding the template, then feel free to leave your comments below and we will address it in our upcoming posts. So, don't forget to subscribe to our blog. We have lots more interesting articles coming up!!!
