RSS Follow us on Google+ Follow us on Twitter! Follow us on Facebook! Follow us on Linkedin!

Attention

Permohonan maaf

Mohon maaf yang sedalam-dalamnya kepada seluruh pengunjung Blog AsalNy@mbung dikarenakan Blog masih dalam modifikasi jadi seluruh konten atau artikel belum tertata secara benar, baik tampilan maupun designnya, sekali lagi admin AsalNy@mbung Mohon maaf. dan terimaksih banyak sudah berkunjung, salam sukses selalu untuk sahabat blogger semuanya.

Home » » Related Post Widget For Blogger without Thumbnails

Related Post Widget For Blogger without Thumbnails

Written By Asal Nyambung on Friday, April 5, 2013 | 10:07 PM


Hello Friends, Welcome Back on Asal Ny@mbung, Today we Have Come with a wonderful widget for displaying links to related posts below each of your blog posts. The related articles are chosen from other posts in that same category/label/tag. With this widget many of your readers will remain on your site for longer periods of time when they see related posts of interest.It is very bueatiful widget developed my me which also increases the beauty of your posts. Installation is very easy just follow my steps to install it.

How to add Related posts widget without thumbnails..........?
1)  Go to Layout >Edit HTML in your Blogger Dashboard.
2)  Back up your existing Template before making any changes!
3)  Make sure to check the "Expand Widget Templates" box.
4)  Search for the </head> tag.
5)  Add the following code just before the </head> tag.

 <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/10121340032/btsnts_related_posts.js' type='text/javascript'/>
 
6) Now search for <data:post.body/> In some of the templates this code may look like this
<div class='post-body>
7)  Add the following code just below/after <div class='post-body>

 <b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot;   data:label.name   &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if> 
8)  Now save your template.

Customization :-
In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.
Share this article :

0 comments:

Post a Comment

Terimakasih atas kunjungannya
Demi Perubahan Blog Ini Ke Arah Lebih Baik Saran Agan-Agan Sangat Bermanfaat, Terimakasih......!!!

 
Support : Kolom Tutorial™ | MPI. Al-Munfardiyyah
Copyright © 2013. Asal Ny@mbung - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger