|
|
|
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>
<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>
<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>
<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>
<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>
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!!!
Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!
Gr8 ! the facebook share button is fixed and is working .
REPLYFor the next customization of this theme I would like you to add the Facebook Like and the new send buttons in the posts. :)
And also the auto slideshows for posts on the homepage like on the shoutmeloud website.
I noticed on the shoutmeloud website that the images 'preview' that appear on the homepage for the 'read more' hack are placed normally, I mean the allignment is 'centre' and size is shrunk automatically.
It would be great if you implement this customization as then the images will be automatically placed and will look good on posts.
After some research I found the template which has this customization, I have sent you an email with the template attached which will make your job easy and help you with other customizations.
thanks. .
@Sagar: You are right Sagar! The reason why I did not implement such a technique is to provide the user with more control on his post. If I shrink the images to fit the read more hack, it will look ugly on the home page. Yes! My next work would be on the slider that runs on shoutmeloud blog!
REPLYhow to erase o remove HOSTGATOR affiliate code from inside blogger templaet? please reply
REPLYfriend, i want to show adsense under post title i m blog Science n Technology
REPLYHow to enable this?
@ManiVasagaM: Sure buddy! Just remove the affiliate coding after expanding your template. I will post an article about the same in few days. So, please wait for the same or else just email me and I will fix it in minutes for you!
REPLYReally helpful of you to post these simplistic tutorials just moved started with blogger and this has been great help in customization!
REPLY@Viktminskning: I hope you enjoy the other customizations which will updated in a few weeks time. Thanks for the comment buddy!
REPLYThanks for the small tutorial :) It was very useful !
REPLY@Stefan Liviu: Thanks for the comment Stefan!! I hope you enjoy the other articles on my blog as well!
REPLYHii Mukund Thanks for sharing this wonder theme. I installed your theme in my blog but it was not showing summarized posts. Please help me to summarizing my posts on front page with thumbnail photos.
REPLY@Raghav: Thanks for the comment Raghav! I already mentioned about the read more hack in my previous customization. Look into the comments section of my previous post. You will find the answer!
REPLY@Mukund
REPLYHi,frnd,mail me the steps to remove the hostgator affiliate code links in that theme,to me likescarlet@gmail.com .Please..
how do I place adsense beside the social bookmarking icons below the post ?
REPLYI tried replacing the hostgator link with my adsense code n also tried parsing the code with simplecode, but its not working. please help m out.
@Sagar: If you parse out the code and place them, it should work. Just send me an email and I will you figure it out!
REPLYYea it worked ! thanks. . how do I add the ad banner above the fold ?
REPLYI mean above the header/title like on shoutmeloud ? I tried googling it but the coding in this template is a little different..
You mentioned how to put the link unit of the dimensions-728x15. But when I replaced my code with the one mentioned above, The space got filled up below the "Labels" navigation menu, this looks quite ugly, I also tried replacing the labels menu with the adsense code, it works fine but, the link list does not blend with the colors of the "labels menu" i.e Black. it becomes white and on the RHS there is black solid color.
REPLYHow do I blend the link list to the color aka black of the template ?
I hope u got wat i'm trying to say. lol. :)
I've sent u an email with visual explanation.
Thanks. ! :)
@Sagar: Yup! I received your mail and I have fixed your issues as well! So, let me know what more problems you face! May be we can post another articles with the bugs you face!
REPLY@ManiVasagaM: Yes! I have replied to the mail address you sent me.
REPLYCan you post here ads placement on thesis theme plz.
REPLY@lovely: May I know about what ads placement you talking about?
REPLYGreat job Mukund.
REPLYCan you tell me how to customize the top nav background colour (BLUE)
@shyam: Yes! You need to change the HTML color code for that! Just contact me via email with your problem! I will help you change the color of your navigation bar!
REPLYHi, Can You tell me how to add a drop down menu in second navigation bar?
REPLY@Himanshu Raut: Yes! We can add a drop down menu to the second navigation bar, as well! Just ping me via gtalk and I'll try to help you out!
REPLYVery efficiently written information. It will be precious to anybody who usess it, including myself. Keep up the great work – for certain i will take a look at extra posts.
REPLYHi Mukund what is the colour setting for adsense
REPLYplz have look at my blog the black colour behind link unit is incomplete.
http://traderadda.com
@SAM: Well, I'm not able to view your site! To blend colors, use the color picker add-on with Firefox!
REPLYChange the background color of the link unit to #616161 and it will blend with the color of the template.
REPLYHi sagar and Mukund thank you for reply... but I request you to once again check my site... the link unit was not coming fully
REPLYMukund I have made some changes but I want the same ads like your demo theme so what will be setting for colour in adsense selection?
Mukund thanks for your reply ... tried some thinds and worked the link unit.
REPLYBut I now want to know how to place adsense code in the header banner 468* and how do I place adsense code in place of hostgator ad(in posts)
thanks
REPLYIf you develop on downloading multiple files at the unchanging mores via [url=http://katalog.wp.pl/torrent/469107-wpis/]Torrent[/url], you impecuniousness to unprotected up joined mooring with a view each file. This enchiridion make display you how to open up harmonious seaport for each file. If you chose to consign haven 12540 into the Starting at Harbour hem in and wanted to hold five files going at the same in days of yore, you should forward ports 12540 to 12544. To setup mooring forwarding on this router your computer needs to be subjected to a unchanging ip address. Try our free PF Setup Stagnant IP Speech Program which purpose setup a unvarying ip approach devote for the sake you.
REPLYOr you can go over alook at our Unmoving IP Give a speech to conduct to setup a static ip address. When you are finished background up a immovable ip apply oneself to, please come uphold to this time and enter the ip oration you setup in the Fixed IP Address crate below. Do not leap this movement!
Unhampered a web browser like Internet Explorer or Firefox. Set the internal IP sermon of your router in the greet bar of your browser. If you do not be acquainted with your routers internal IP discourse entertain assume from our How To Find Your Routers IP Speech guide.
In the spit over the speech bar has http://www.google.com in it. Fitting replace all of that with the internal IP speak of your router. By non-performance the IP location should be stipulate to 192.168.1.1. You should accompany a coffer prompting you appropriate for your username and password. Puncture your username and password now. By lapse the username is unrelieved, and the password is admin. Click the Ok button to log in to your router.
Wish visit our Default Router Passwords recto if the username and shibboleth shown out of reach of did not work for you.
Click the Asylum connection wellnigh the garnish of the page. Dismiss the checkmark from the Slab Anonymous [url=http://katalog.di.com.pl/detail/link-49569.html]Torrent[/url] Internet Requests checkbox. Click the Save Settings button within easy reach the bottom of the page. Click the Applications & Gaming relation near the lid of the page. You should at this very moment grasp a brand-new menu. In this late menu, click Refuge Range Forward.
We discretion cant a series of lines here that determination may be seen you accurately how to unashamed the ports you beggary to forward. BitTorrent requires you to forward the following ports: 100000. Set on and enter the settings shown mainly into the Harbour Range Forward menu.
Use the tab below to comment. No spam please!!!
POST YOUR COMMENT