Adsense With Social Bookmarks On Top Of Every Post

Hi friends! I have been little busy with my exams!! So, it's been quite long since I made a new post but today, I had some time to share an unique widget which one of my friends asked through the comments namely, "Adsense With Social Bookmarking Buttons On Top Of Every Blogger Posts". Just have a look at the screen shot below.
Adsense With Social Bookmarks
Excited about the widget? Want to add this to your blog as well? Then, just follow the following steps. Before I proceed with the steps, I will would like to highlight the advantages of this widget. One main advantage is that you can increase your Adsense impressions along with click rates by adding this widget. Other would be the Social Bookmarking Buttons.

By adding the social bookmarking buttons at the top, you make it very easy for the reader to share your posts via the networking sites. Make sure you added the "Stylish Related Posts" on your blog as well so that the social bookmarking buttons are placed at the end of each blogger post as well. The widget includes buttons for Twitter,, Digg, StumbleUpon, Technorati and Facebook.

I don't want to take much of your time by making you read too much about the widget. Let me move to the procedure of installing this widget. Create a back up of your template before you modify your template. To do this, navigate to "Design->Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

1. Let's first add the CSS for the above widget. Search the for the following piece of code in your blogger template. Use "CTRL+F" to fasten your search results. 

2. Download the following text document - CSS FOR ADSENSE WITH SOCIAL BOOKMARKS. Open the text document. Copy and paste the entire code present in it just above the line mentioned in step 1.
3. CSS customization is over. You may save your template temporarily. Now, expand your template, that is, make sure you have a tick mark in box next to "Expand Widget Template".  Next, search using "CTRL+F" for the following line.

<div class='post-body entry-content'>
4. Download the following text document - WIDGET CODE FOR ADSENSE AND SB ON TOP. Open the text document and paste the entire code present in it just below the line mentioned in step 3.
Note: Replace "YOUR ADSENSE CODE" text in the file with your Account ID. Account ID will be found in the top right corner of the Adsense Dashboard. Take a look at the screen shot below for better understanding.
5. That's it!!! Save your template and check out the post pages on your blog. If you need any other networking sites apart from the ones mentioned above, you can leave your comments below and I will help you add them as well!!! 

I hope you enjoyed this widget. Meet you soon with another interesting post/widget. Don't forget to share your views about this widget/post. We love to hear from you. 

Enjoyed the article?
Subscribe to this Blog via Email:

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!

    Other Recommended Posts

  • Blogger Widgets
Alvin said on November 24, 2010 at 4:51 PM :

Nice widget, actually looks very nice on your blog. Should surely increase your Adsense CTR. thanks for the tips

Mukund said on November 24, 2010 at 5:42 PM :

@Alvin: Thanks for the comment Alvin! I hope you install the same on your blog and check if it looks good. I hope you enjoy the other updates on my blog as well!!!

Sahil @iBlognet said on November 26, 2010 at 9:59 PM :

Thanks for sharing your blog widget mukund!!!

Why don't you embed comment form below your blog posts? I hate pop ups!!!

Mukund said on November 27, 2010 at 12:38 AM :

@Sahil @iBlognet: Thanks for the comment Sahil! Basically, there is a bug with the comment form. It works well with my another blog for the same template! But for this blog, it is not! I tried changing so many codes but no use! So, sticking with pop up stuff!

Sahil @iBlognet said on November 27, 2010 at 7:55 PM :

@Mukund Even I'm using the same template and it's working fine!!! But just for a change I have started using Intense debate from 4 months!!!

Mukund said on November 27, 2010 at 8:55 PM :

@Sahil @iBlognet: Yeah! I know it buddy! There are many people with the same template but there is some sort of bug with blogger. May be, I will change to Disqus or Intense Debate.


hey can you post on how to get the tags and author name below post title like you got and instead of the vertically arranged share buttons I want to have a horizontal line with counters somewhere around the post title like to the left of your retweet button.

Mukund said on December 16, 2010 at 7:17 PM :

@allwyn: Yeah! I will publish a post with the horizontal version, once I find the code for it. Thanks for the comment!!!


@Mukunddont forget d tags and 'posted by' line

Mukund said on December 18, 2010 at 10:16 PM :

@allwyn: Sure!! Make sure I add that too! The code for what you asked is pretty simple!!!


Very useful trick

Mukund said on January 24, 2011 at 3:14 PM :

@Anonymous: Thanks for the comment! Leave your name and blog URL next time! And make your comment more descriptive! We would love to hear more from you!!!

ifootballvideo said on March 5, 2011 at 6:01 AM :

This is most amazing i ever seen on blogger..f...briliant..i wonder for long time how to do this on blog..just amazing.. i just add it and looks perfect..thanks a lot !!!

Mukund said on March 5, 2011 at 10:03 AM :

@ifootballvideo: Thanks buddy! I'm glad to know that it fits perfect for your blog! Hope you enjoy the other tricks on my blog as well!!


Soo Nice widget, Thank you very much
i bookmarked your site :)

can i add the rss link
like "Subscribe via rss" how i can add it?

have a nice day

Mukund said on April 19, 2011 at 8:32 PM :

@Sarout113: Well, Absolutely, you can! It is very easy. Just email me with the problem and I will send you the coding!!!

Sudeep Acharya said on May 6, 2011 at 1:20 AM :

Hey man please post social bookmarking with related posts widget for us.

Mukund said on May 6, 2011 at 8:38 PM :

@Sudeep Acharya: It is already posted on my blog buddy! Check out the post that says new stylish related posts for blogger blogs. You should be able to find the widget!!

Ramin said on May 21, 2011 at 6:15 PM :

I can't find (class='post-body entry-content) in my template
,my template don't have this tag.
Help me,plz


Mukund said on May 21, 2011 at 9:22 PM :

@Ramin: Contact me via email with your template and I will help you out!

Troy Janda said on June 30, 2011 at 9:56 PM :

Can you show me how to implement this on WP blog?

Mukund said on June 30, 2011 at 11:02 PM :

@Troy Janda: Well, I'm not a WP geek. However, I know that you can include the same CSS and the HTML coding in your word-press template. So, just try to Google about adding external coding onto your WP theme! Hope that helps! Thanks for the comment!

Sadr-ı Cihan said on July 3, 2011 at 4:17 PM :

I want to make it as yours.Twitter,facebook, google + count button.How can I fix the code.When I arrange twitter and facebook count button they are not at the same line.

Mukund said on July 3, 2011 at 7:23 PM :

@Sadr-ı Cihan: Well, to have them on the same line, you need to define them within a table. If you want the coding for the same, just contact me via email.

Haz Issac said on August 4, 2011 at 2:40 AM :

its it the adsense we can put the another script ads? or only for adsense? err.. i have a little bit confuse now.. hehehe i dont have a adsense ads but have another ads at my blog.. google not approved my request yet..

Mukund said on August 4, 2011 at 11:59 AM :

@Haz Issac: You can add any code instead of the Adsense code there! It is not specific that you should run only Adsense ads up there!

Haz Issac said on August 4, 2011 at 4:53 PM :

@Mukund wow!!!! its working great at my blog!! thanks bro.. i search n try many tutorial to do like this.. but all not working.. finally, i find ur tutorial.. thanks so much to u bro!

one more, can i change the sosial bookmarking with the related post every post? like ads at the right n the related post at the left.. how to do like that?

Mukund said on August 4, 2011 at 5:24 PM :

@Haz Issac: Yup! Thanks for the comment! Please share the same with your friends so that they benefit as well! Yes! It is possibly! Search for new stylish related posts on my blog and you'll find one!

Haz Issac said on August 4, 2011 at 6:58 PM :

@Mukund thanks.. i have a look ur post.. but how can i change n remove or edit for the script? i just want put the related post on the left n ads at the right.. which code to edit boss?

Mukund said on August 4, 2011 at 8:09 PM :

@Haz Issac: Just ping me on gtalk because I cannot explain the same here! Moreover, I need to design one as per your requirement because by default the code will show only the social bookmarking stuffs!

Haz Issac said on August 4, 2011 at 8:40 PM :

@Mukund yes, i think better u design first because i not so familiar to edit the code or script.. i just follow the tutorial n from that i learn something :) i hope you can do the tutorial for my request .. thanks :)

Mukund said on August 4, 2011 at 11:05 PM :

@Haz Issac: Yeah! I'll do it! But, you know, it definitely takes time:)

Reyad010 said on September 8, 2011 at 3:10 PM :

Just a question, is it allowed to change the adsense code? (As far I know, no one is allowed to go even near the code!)
Like you encoded the html.

Mukund said on September 8, 2011 at 6:27 PM :

@Reyad010: I've not altered the Adsense code anywhere. I'm just saying to change the Adsense Id. That's it:)

Reyad010 said on September 8, 2011 at 7:00 PM :

Sorry, let me clear, is it allow to encode the html characters like < or >

Mukund said on September 9, 2011 at 1:32 AM :

@Reyad010: We can parse the HTML codes but not modify the script! Hope that clears all your doubts. If not ping me on gtalk and I'll explain you:)

nobord3r said on September 27, 2011 at 1:08 AM :

Hi Mukund.

Could you update it for the new version of SB?


Mukund said on September 27, 2011 at 11:38 AM :

@nobord3r: May I know exactly what you want me to update the article with? The new block type sharing icons - is it?

nobord3r said on October 5, 2011 at 9:52 PM :


Exactly yes.


nobord3r said on October 5, 2011 at 11:14 PM :

And one more question. Could you add button for

Thank you.

Mukund said on October 7, 2011 at 12:14 AM :

@nobord3r: Nope! I'm afraid I can't do that because it works on Sprites and it'll take a hell lot of time to explain about the same! So, adding additional share counters is little complicated. If you want one, then hire me and I'll do it exclusively for you:)

allwyn said on November 19, 2011 at 9:33 PM :

pls update this post and give the steps to make the same widget like the one you have in your blogger posts right looks better!

Mukund said on November 26, 2011 at 11:27 PM :

@allwyn: Hmmm! I'll publish it later some day! Not now! Because people can easily customize a site like mine if I publish every code that I innovate! I would lose my individuality!

Mohd Alamin said on January 14, 2012 at 3:22 AM :

i have a suggestion for u take that image of which have your Publisher ID on it. Its really bad people may miss use it

Mukund said on March 3, 2012 at 3:24 PM :

@Mohd Alamin: People have already misused it and my Adsense account got banned. I never came online for a long time and all this happened during that time.


Use the tab below to comment. No spam please!!!