How To Add Adsense Ad With Sharing Button Below Every Post Title of Blogger Blog?
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 == "item"'> <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.