How to add stylish related post widget with adsense to blogger
Follow simple easy step to add this widget in your blogger blog----->>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger template now.
* Now find this code ]]></b:skin> with CTRL+F key.
* Now copy below code and paste before ]]></b:skin>
.cps { background:none repeat scroll 0 0 #ddd; border-top:3px solid #000; margin-top:5px; padding:10px; width:570px; } #end { -moz-background-inline-policy:continuous; background:none repeat scroll 0 0 #f9f9f9; border-bottom:3px solid #000; border-top:3px solid #000; float:left; font-family:arial; font-size:12.2px; margin:0 0 40px; padding:14px 0 12px 25px; width:565px; } .actions { float:left; margin:0 20px 0 0; padding-left:0; padding-top:0; text-align:left; width:23%; } .tips { float:left; margin:0; padding-left:0px; padding-top:0; text-align:left; width:65%; } #end ul.tips li { -moz-background-inline-policy:continuous; background:url() no-repeat scroll 0 3px transparent; margin:0 0 9px; padding-left:14px; margin-left:-34px; } a.digg { -moz-background-inline-policy:continuous; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjoQZ8XGH8mXSEvk3KrU4Z3aJ3HMiyHFzwM7RGWZcmT5WfnXiec6nKgUKMFxMXfybUgkMDIXJaZS_keXUtqcdKLeUB9Oi61NujObQKR40rgXNsjneQVsH30AKAXpSoSJhyRNRYjWjtrQ/s400/digg-1.png") no-repeat scroll 0 1px transparent; padding:2px 0 2px 20px; } #end ul.actions li { -moz-background-inline-policy:continuous; background:none repeat scroll 0 0 transparent; margin:0 0 9px; } #end ul li { } #end ul { list-style-type:none; } a.delicious { -moz-background-inline-policy:continuous; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCOmkqedMTnAT1JeTHWqxl6asZFnrstJB5bU6z4frKkoNJUT3pVhb26Apg762eojt5kPkovK1wuQqY9oOTI3jMXvnCISJA2cwuvruZ_1dDYLwI-dSFhEzb_FGGUYyeIeN9rg_KKZICLUk/s400/delicious-1.png") no-repeat scroll 0 2px transparent; padding:2px 0 2px 20px; } a.subscribemini { -moz-background-inline-policy:continuous; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpFCJPFPFFPI5b6AczHE_7YpLrMukDipMdhhA-uWIXYwVKF2wFFClPRRpQmSXXr7YVNJkLJHo2DagOKGALTLo1y5HQusb_uSF8LOeOGSTiKBa5EOMMYvNuGUVyQv3s7yaBhBRms-LLmsw/s400/feed.png") no-repeat scroll 0 1px transparent; padding:2px 0 2px 20px; } a.comment { -moz-background-inline-policy:continuous; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtmCshxY9p41YqTXpoznqczuwjfNV7fhelhgoLR_brmvSUmVbAMy2bEicYcKo5runU4DeFT4kpbqTCuE-M_R6uNcZD282nr3QoXmuREHDtOOukrcENrYpnfbAzL-v-p_J14lGZCVe0Vw/s400/comment.gif") no-repeat scroll 0 0 transparent; padding-left:20px; } a.stumble { -moz-background-inline-policy:continuous; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9fTVuIGRkRIiQ6IcKrKXiNfu9yL8L1R3tOdqYRkAF9_mKE0uNtiAJ6T9nkEp_ARL3O4tOj1wKwSc38VuBRix3aAcLUNZTLHREKJz6uOh9oc0nduhtzgyaePNDVLnf24M505c9e-Ewko/s400/stumble.png") no-repeat scroll 0 1px transparent; padding:2px 0 2px 20px; } a.twit { -moz-background-inline-policy:continuous; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtjlA1oCVuRIPE9QE1qPt90ZbDTQf2K48sg7DOf88Yu25X6GJnxpZaeHkA0v2X8KLwlW38Q5KmPTw8TwxYRRhcgNHrAz51pR_IGGCW53PdIwgsCkB-oYs2i5jAN7m8l7vs2bEWEoV5UwU/s400/twitter_16.png") no-repeat scroll 0 0 transparent; padding-left:20px; } #end h3 { color:#000000; font-size:13px; margin-bottom:11px; margin-top:4px; font-weight:bold; } .hidden { display:none; }
* Now again find this code --->>>>
<data:post.body/>
<div style='clear: both;'/>
</div>
<div style='clear: both;'/>
</div>
* Now copy below code and paste after above line.
<div class='cps'> <script type="text/javascript"><!-- google_ad_client = "pub-1169679658259735"; google_ad_host = "pub-1556223355139109"; /* 468x15, created 12/03/11 */ google_ad_slot = "0907748093"; google_ad_width = 468; google_ad_height = 15; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <div id='end'> <ul class='actions'> <h3>What's Next?</h3> <li><a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Digg it</a></li> <li><a class='stumble' expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>StumbleUpon</a></li> <li><a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Save on Del.icio.us</a></li> <li><a class='subscribemini' href='YOUR FEEDBURNER ADDRESS' rel='nofollow'>Subscribe via RSS</a></li> <li><a class='comment' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' rel='nofollow'>Leave a comment</a></li> </ul> <ul class='tips'> <h3>Other Recommended Posts</h3> <li><div style='display:none;'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop></div> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></li></ul> </div>
Note:- Now change adsense code which is show by red color by your adsense code , your adsense code must encode by html encoder. and change feedburner url with your feed url.
* Now save your blogger template now you are done.
3 Responses So Far:
Appreciate it for this post, I am a big fan of this internet site would like to continue updated.
:e:e
:e