How To Add Adsense Ad Beside Sharing Button Below Every Post Title of Blogger Blog?

Every blogger are always willing to have a more and more visitors to there blog. Its is completely based on how attractive your blog is? For that we have to arrange element is such a way so as it catch eyes of the reader. This post is all about How to add Adsense along with sharing button beside of it below every post title. i have added parameter of hide and show gadget code so as adsense and sharing button appear only on post page and not on home page. So as it will not take too much time to load home page.

How To Add Adsense Ad With Sharing Button Below Every Post Title of Blogger Blog?

I observe that many blogger use afraid to adding there template. i don’t know why is it so? Here i share all the tips related to blogger. you can back up your blogger template before adding  anything. If you fill that you make a mistake in your template than you will be restore your previous backup template. Now lets move to our main topic. Following are the simplest step which you required to follow step by step. Don’t be tense we are here if you facing any kinds of difficulties.

Step 1: Login in to your blogger account. Click here.
Step 2: backup your template. ( How to backup your blogger template? )
Step 3: Now select Template > Edit HTML > Proceed button.
Step 4: Check ( Tick) on “Expand Widget Templates“
Step 5: Find following code by pressing Ctrl+F.

<data:post.body/>

Step 6: Copy following code and past it above <data:post.body/> code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='left' style='float: left; width: 340px;'>
Past your Parser Adsense ad code here.
</div>
<div id='right' style='float: right; width: 250px;'>
<div class="addthis_toolbox"><div class="vertical">
<a class="addthis_button_email">Email</a>
<a class="addthis_button_print">Print</a>
<a class="addthis_button_twitter">Twitter</a>
<a class="addthis_button_facebook">Facebook</a>
<a class="addthis_button_myspace">MySpace</a>
<a class="addthis_button_stumbleupon">Stumble</a>
<a class="addthis_button_digg">Digg</a>
<div class="more">
<a class="addthis_button_expanded">More Destinations</a>
</div></div></div></div>
<div style='clear: both;'/>
</b:if>

Step 7: Now we need to add CSS code for that we need to find following code ( Ctrl+F )

]]></b:skin>

Step 8: Copy following code and past it above ]]></b:skin> code.

.addthis_toolbox .vertical {
    background: #fff;
    width: 136px;
    padding: 1px;
    border: 3px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.addthis_toolbox .vertical a {
    position: relative;
    display: block;
    background: #fff;
    width: 102px;
    padding: 4px 0 4px 34px;
    text-decoration: none;
    color: #00bff3;
}
.addthis_toolbox .vertical a:hover { 
    background: #f5f5f5;
    color: #027999;
    text-decoration: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.addthis_toolbox .vertical span {
    position: absolute;
    left: 14px;
    top: 4px;
}
.addthis_toolbox .vertical .more {
    border-top: solid 1px #eee;
    padding: 10px 0 0 0;
    margin: 10px 10px 0 10px;
    text-align: center;
}
.addthis_toolbox .vertical .more a {
    padding: 4px 0;
    margin: 0;
}
.addthis_toolbox .vertical .more a:hover {
    background: none;
}
.addthis_toolbox .vertical .more span {
    display: none;
}

Step 9: Save your template That set and see your post page.