Hello friend in this posts you will learn how add thumbnails and related box in you posts pages here you can see this image in whic related posts and subscibe button is showing you can add this following set up
- First you must first login to blogger
- Then click on Template > select Edit HTML check expand widget templates
- Do not forget to backup your template first, just in case if there are errors in the editing later.
- After that, place the following code in the code ]]> </ b: skin>
# Related {background: # 222; border: 1px solid # 000; border-bottom: 1px solid # 444; border-right: 1px solid # 444; text-shadow: 0 1px 0 # 000; margin: 0 0 5px; padding : 10px}
# related-posts ul {font: bold 11px Arial; list-style: none; text-transform: none; margin: 10px 0; padding: 0}
# related. related-posts {font-weight: 400; width : 50%; float: right}
# related. related-posts p {margin: 0}
# related-posts ul li {float: left; height: auto; list-style-type: none; margin: 0 5px; padding: 2px 1px}
* html ul.rp # related-posts li {margin: 0 13px}
# related-posts ul li a {-moz-box-shadow: 0 1px 2px RGBA (0,0,0,0.15); border: 2px solid 1px 0 # 000}
# related-posts ul li. overlay {height: 66px; line-height: 16px; position: absolute; width: 66px; z-index: 10; padding: 6px 0 0 6px}
ul # related-posts li a: hover. overlay {background: # 000; display: block! important; opacity: 0.7}
# related-posts ul li img {bottom: 0; padding: 0! important}
# related-posts ul li a: hover { -moz-box-shadow: 3px 1px 0 rgba (0,0,0,0.25)}
# related. subscribe {width: 43%; float: left; color: # bdbdbd;}
# related. subscribe p.intro {font -weight: 400}
# related. subscribe 0 50%
- Still in the position of the Edit HTML , place the code below after <data:post.body/> (if there are 2 or 3 select the final code)Description:
<b:if cond='data:blog.pageType == "item"'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p> Related Articles </ p>
<script type='text/javascript'>
var
maxresults = 6;
</ script>
<script src='http://johnytemplate.googlecode.com/files/related.js' type='text/javascript'/>
<b: loop values = 'data: post.labels 'var =' label '>
<b:if cond='data:label.isLast != "true"'>
</ b: if>
<script expr: src = '"/ feeds/posts/default/- / "+ data: label.name +"? alt = json-in-script & callback = related_results_labels_thumbs & max-results = 6 "'type =' text / javascript '/>
</ b: loop> <script class = 'subscribe'> <p class='intro'> If you enjoyed this article just <a href = "http://feeds.feedburner.com/ myTemplat 'target =' _blank 'title =' feedburner '> <b > click here </ b> </ a>, or subscribe to receive more great content just like it. </ p> <p class='feed'> <a href = ' http://newtricksforblogger.blogspot.com/ / feeds / posts / default '> Subscribe via RSS Feed </ a> </ p> <form action = 'http://feedburner.google.com/fb/a/mailverify' method = 'post' onsubmit = 'window. open ('http://feedburner.google.com/fb/a/mailverify?uri = myTemplate ',' popupwindow ',' scrollbars = yes, width = 550, height = 520 '); return true' target = 'popupwindow'> <input name = 'uri' type = 'hidden' value = ' myTemplate '/> <input name='loc' type='hidden' value='en_US'/> <input id = 'botsub 'name =' email 'onblur = "if (this.value ==" ") {this.value =' Enter your email";} 'onfocus = "if (this.value ==" Enter your email " ;) {this.value = "";} 'type =' text 'value =' Enter your email .... '/> <input id = 'botsubbutton' type = 'submit' value = 'Submit' / > <br/> <small> Your information will not be shared. Ever. </ Small> <br/> <a href = "http://feeds.feedburner.com/ btb '> <img alt ='' height = '26' src = 'http://feeds.feedburner. com / ~ fc / btb ? ceaa6c & bg = fg = 444 444 & anim = 1 'style =' border: 0 'width = '88' /> </ a> </ form> </ div> </ div> < / b: if>
color blue : replace with your feed address.
color red : replace with your URL. - Last Save Templates , and see the results on the bottom of your posts.
Tutorial make a feature related post above thumbnail to FeedBurner suitable for blogs that have a background color or black background. But if your blog has a background color of white or bright colors you just modify the CSS code number 4 above. Thus this tutorial, good luck and hopefully useful.