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