Blogger Buzz: related posts

How to customize or edit the linkwithin related post widget

<div dir="ltr" style="text-align: left;" trbidi="on">
LinkWithin is a very popular widget that shows the related posts with a thumbnail and although it is not a new gadget among bloggers, many avoid using it for its lack of customization. So, in this post we will see how to add LinkWithin on a Blogger blog and how to customize it. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptd2bQn93BMhWVm17kozZjjTIGKMAwFQ7nzLQeUGmSoMxabQPXKRTqMdgZ_htl292v1WNzvcJkLiVhI43opjizbkgwkgVnX7TRkzJ1JovTkh73ur1WYriouxFGISNx3VvibOJo3Lsf4Fz/s1600/customize-linkwithin-widget-blogger-thumbnails-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="LINKWITHIN" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptd2bQn93BMhWVm17kozZjjTIGKMAwFQ7nzLQeUGmSoMxabQPXKRTqMdgZ_htl292v1WNzvcJkLiVhI43opjizbkgwkgVnX7TRkzJ1JovTkh73ur1WYriouxFGISNx3VvibOJo3Lsf4Fz/s1600/customize-linkwithin-widget-blogger-thumbnails-background.png" title="LINKWITHIN" /></a></div>
 
This is what we will do with this gadget: 
 
- Change the location of the gadget; 
- Remove the LinkWithin link; 
- Change the "You might also like" title with any other text; 
- Add rounded borders to images; 
- Remove the border that separates posts; 
- Add a background color; 
- Change the background color on mouse over; 
- Change the post titles color and font  
<h3>
Adding the LinkWithin gadget to Blogger</h3>
First of all we need to install the LinkWithin gadget - for this, we have to go to the <a href="http://www.linkwithin.com/" rel="nofollow" style="color: blue;">LinkWithin homepage</a> and type in the required information: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPGCMn2r2pRzCEo4cd1wzzaRbJhXcSAQQ1gefvoLsL-02dFE8noTAL9fnn2RnAc3hK2Z6Kp2ZDW7kR0v8XYZiNtl9xnzxYcwnM3Gw1XFjRY5JrqFzBGpH6NExsw4WIyJwVlu5TWbOaInTq/s1600/customize-linkwithin-gadget-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="linkwithin gadget, related posts widget, blogger widgets" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPGCMn2r2pRzCEo4cd1wzzaRbJhXcSAQQ1gefvoLsL-02dFE8noTAL9fnn2RnAc3hK2Z6Kp2ZDW7kR0v8XYZiNtl9xnzxYcwnM3Gw1XFjRY5JrqFzBGpH6NExsw4WIyJwVlu5TWbOaInTq/s1600/customize-linkwithin-gadget-for-blogger.png" title="how to customize or edit the linkwithin related post widget" width="400" /></a></div>
Although it gives the option to choose Blogger as a platform, we will select Other so that we'll be able to put the code directly into our template and then modify it. Select the number of posts (stories) according to the width of posts - if the width of the posts container is small, then it is recommended to display fewer related posts. 
 
By clicking on the "Get widget!" button, we'll be given the code that we need use it. It should look something like this: 
<blockquote class="tr_bq">
<script> 
var linkwithin_site_id = XXXXXXX; 
</script> 
<script src="http://www.linkwithin.com/widget.js"></script> 
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a></blockquote>
That's the basic code we need to copy. Now login into your <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blogger account</a> > select your blog to where you want to add the LinkWithin gadget and go to Template > click on the Edit HTML button: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" width="320" /></a></div>
 
Cick anywhere inside the code area and press the CTRL + F keys to search for the following line: 
<blockquote class="tr_bq">
<div class='post-footer'></blockquote>
Just above this line, paste the LinkWithin code. 
 
By doing so you already have the LinkWithin gadget on your blog and the result will be like this: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLqMaTqb19V5lh6rEb4WscWfIbBPWIYzN3RFZi_8Cer5_PSsbZOo4nhJxUQ6cmkeR2PfBeiyrWKijbNI2IC8-WtiUMHitTZJLaB1OnRBO04ImUTHNZzqOemUF4Y1vANsvG3Xu9GOVNJtIO/s1600/linkwithin-related-posts-gadget-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="linkwithin gadget, related posts widget, blogger widgets" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLqMaTqb19V5lh6rEb4WscWfIbBPWIYzN3RFZi_8Cer5_PSsbZOo4nhJxUQ6cmkeR2PfBeiyrWKijbNI2IC8-WtiUMHitTZJLaB1OnRBO04ImUTHNZzqOemUF4Y1vANsvG3Xu9GOVNJtIO/s1600/linkwithin-related-posts-gadget-for-blogger.png" title="how to customize or edit the linkwithin related post gadget" width="400" /></a></div>
Note: If you would like to show only in the individual post, you can enclose the code using a <a href="http://buzzblogger.blogspot.com/2012/03/hideshow-widgetsgadgets-in.html" rel="nofollow" target="_blank">conditional</a>. 
 
 
<h3>
Change the LinkWithin gadget location</h3>
You will notice that this widget will always appear right at the end of your posts. In the <a href="http://www.linkwithin.com/faq" rel="nofollow">LinkWithin FAQ page </a>we are explained how to fix this - simply add the code below where we want the widget to appear: 
<blockquote class="tr_bq">
<div class='linkwithin_div'/></blockquote>
This will make the gadget to display right where we added the code. Even if we don't want to change the gadget location, this line is required so that we can customize it later. 
 
 
<h3>
Replacing the "You might also like" text</h3>
By default, the LinkWithin gadget will have the title "You might also like" and we can change that text to anything we want. Just add the line below in blue within the LinkWithin code: 
<blockquote class="tr_bq">
<div class='linkwithin_div'/> 
<script> 
var linkwithin_site_id = XXXXXXX; 
</script> 
<script>linkwithin_text='Related Posts:'</script> 
<script src="http://www.linkwithin.com/widget.js"></script> 
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a></blockquote>
Here you can change the text - in this case, it will say "Related posts" instead of "You may also like these stories". 
 
 
<h3>
Changing the LinkWithin background color and thumbnails style</h3>
Within the template's code, search for the ]]></b:skin> tag and just above it, add the following CSS styling: 
<blockquote class="tr_bq">
.linkwithin_div { 
background: #EEEEEE; /* Background color for the related posts container */ 
padding: 0 10px; 
border-top: 1px solid #DBDBDB;  /* Top border for the related posts container */ 
border-bottom: 1px solid #DBDBDB;  /* Bottom border for the related posts container */ 
} 
.linkwithin_text { 
font-family: Cambria,Georgia,sans-serif; 
font-size:18px; /* Size for the related posts title */ 
color:#898989; /* Color for the related posts title */ 
} 
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 { 
display:none; 
} 
.linkwithin_posts { 
width: 500px !important; /* Width for the related posts container */ 
} 
.linkwithin_posts a { 
border: 0 !important; 
padding-right: 10px !important; 
} 
.linkwithin_posts a:hover { 
background: #F5F5F5 !important; /* Background color on mouseover */ 
} 
.linkwithin_img_0 { 
background: #F5F5F5; 
border: 1px solid #C1C1C1; 
padding: 2px !important; 
transition:all .2s linear; 
 -o-transition:all .5s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear; 
} 
.linkwithin_img_0:hover { 
background: #ffffff; 
padding: 2px !important; 
opacity:.6; 
filter:alpha(opacity=60) 
}  
.linkwithin_img_0 div, div.linkwithin_img_0, 
.linkwithin_img_1 div, div.linkwithin_img_1, 
.linkwithin_img_2 div, div.linkwithin_img_2, 
.linkwithin_img_3 div, div.linkwithin_img_3, 
.linkwithin_img_4 div, div.linkwithin_img_4, 
.linkwithin_img_5 div, div.linkwithin_img_5, 
.linkwithin_img_6 div, div.linkwithin_img_6, 
.linkwithin_img_7 div, div.linkwithin_img_7, 
.linkwithin_img_8 div, div.linkwithin_img_8, 
.linkwithin_img_9 div, div.linkwithin_img_9, 
.linkwithin_img_10 div, div.linkwithin_img_10, 
.linkwithin_img_11 div, div.linkwithin_img_11, 
.linkwithin_img_12 div, div.linkwithin_img_12, 
.linkwithin_img_13 div, div.linkwithin_img_13, 
.linkwithin_img_14 div, div.linkwithin_img_14, 
.linkwithin_img_15 div, div.linkwithin_img_15, 
.linkwithin_img_16 div, div.linkwithin_img_16, 
.linkwithin_img_17 div, div.linkwithin_img_17, 
.linkwithin_img_18 div, div.linkwithin_img_18, 
.linkwithin_img_19 div, div.linkwithin_img_19, 
.linkwithin_img_20 div, div.linkwithin_img_20 { 
-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; 
} 
.linkwithin_title { 
color: #242424 !important; /* Color for titles */ 
font-family: Cambria,Georgia,sans-serif; 
font-size: 12px !important; /* Font size of posts titles */ 
line-height: 24px !important; 
text-align:center; 
text-decoration: none; 
} 
.linkwithin_title:hover { 
color: #000 !important; /* Color of posts titles on mouseover */ 
}</blockquote>
After adding this CSS, the LinkWithin gadget will look like this: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwOliQ09inTE4EJvsYZTSyZNsBPEYvBLAFE6kAqiYzzzkwOqStZ0eAc26uO4uvYawR3bdj3l7BEst8p33jZh80kUGJhUZUDzc9dDboLEyhmelRBtDCzDgIELSLSqUYwZizEcb5dW9T35Vl/s1600/customize-linkwithin-widget-blogger-thumbnails-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="linkwithin gadget, related posts widget, blogger widgets" border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwOliQ09inTE4EJvsYZTSyZNsBPEYvBLAFE6kAqiYzzzkwOqStZ0eAc26uO4uvYawR3bdj3l7BEst8p33jZh80kUGJhUZUDzc9dDboLEyhmelRBtDCzDgIELSLSqUYwZizEcb5dW9T35Vl/s1600/customize-linkwithin-widget-blogger-thumbnails-background.png" title="how to customize or edit the linkwithin related posts widget" width="400" /></a></div>
 
If you don't want rounded thumbnails, remove the code in red. In green you can see the parts which can be customized - there you can add more styles or change the background color, text size, etc. 
 
After you've made the changes, click on the Save Template button and you're done. Enjoy!</div>

related posts Widgets How to customize or edit the linkwithin related post widget

LinkWithin is a very popular widget that shows the related posts with a thumbnail and although it is not a new gadget among bloggers, many ...

Related Posts Widget with Thumbnails and Summary for Blogger

There are several tutorials quite old which have explained different methods for displaying related posts in Blogger [<a href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html">1</a>] [<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html">2</a>] but in this tutorial, I will show you how to implement a very beautiful Related Posts widget that comes along with Thumbnails and Posts Snippets, as well. If you want to add it, follow the next steps below: How to Add Related Posts Widget with Summary to Blogger <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiooDQdW0RfxF7TQnrsUM1XMvUjB4l1PGg7KzAKBj55B0uxB9qKDERvQvPVLG6mS0Y8nGgP7-NLHaBgZg3ClAJVoCAGg1VvnRo1ZxdctTf6o9iaG_s_2xi6Uym9TgrvSDNoogMO1Du3pvQ5/s1600/related_posts_widget_with_summary_snippets_for_blogger_blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiooDQdW0RfxF7TQnrsUM1XMvUjB4l1PGg7KzAKBj55B0uxB9qKDERvQvPVLG6mS0Y8nGgP7-NLHaBgZg3ClAJVoCAGg1VvnRo1ZxdctTf6o9iaG_s_2xi6Uym9TgrvSDNoogMO1Du3pvQ5/s1600/related_posts_widget_with_summary_snippets_for_blogger_blogspot.png" /></a></div> Step 1. From your <a href="https://www.blogger.com/home">Blogger Dashboard</a>, go to Template and click on Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7oJbxvPBbc9AF3sFcddx3VZNS9BgRw9YmXHMkFZ07qEw5O4QcxGK05p_lYxNB4aYFXJo8EUsexdEJFC5KXLKZeS6lSK3c1blNR0FnXLiWWzFLBd9U9EKYq6ABemdBSu1uf-H92hyphenhyphenC8C3/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7oJbxvPBbc9AF3sFcddx3VZNS9BgRw9YmXHMkFZ07qEw5O4QcxGK05p_lYxNB4aYFXJo8EUsexdEJFC5KXLKZeS6lSK3c1blNR0FnXLiWWzFLBd9U9EKYq6ABemdBSu1uf-H92hyphenhyphenC8C3/s1600/blogger-template-edit-html.png" width="320" /></a></div> Step 2. Click anywhere inside the code area and then press CTRL + F to open the Blogger search box <div class="separator" style="clear: both; text-align: center;"></div>Step 3. Find (CTRL + F) this tag: <blockquote class="tr_bq"></head></blockquote>...and paste the following code just above it: <blockquote class="tr_bq"><script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedUrls = new Array(); var relatedpSummary = new Array(); var relatedThumb = new Array(); var relatedTitlesNum = 0; var relatedPostsNum = 4; // number of entries to be shown var relatedmaxnum = 75; // the number of characters of summary var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Z4YSpfasrfYJ3ki3fvh0QaXq5fCPuGNhfES1fLNwG6xTPOpxdmOLB5UUkwj5LXqplDm07yrzDfj6W0HNziJjdVblJciZ41u7rp9xrDCNCMlVM7g2Pjf1bJarB5ekjg-vmanZCgyVJ3PZ/s1600/no_image.jpg"; // default picture for entries with no image function readpostlabels(json) {   var entry, postimg, postcontent, cat;   for (var i = 0; i < json.feed.entry.length; i++) {     entry = json.feed.entry[i];     if (i==json.feed.entry.length) { break; }     relatedTitles[relatedTitlesNum] = entry.title.$t;     postcontent = "";     if ("content" in entry) {       postcontent = entry.content.$t;     } else if ("summary" in entry) {       postcontent = entry.summary.$t;     }     relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);     if ("media$thumbnail" in entry) {       postimg = entry.media$thumbnail.url;     } else {       postimg = relatednoimage;     }     relatedThumb[relatedTitlesNum] = postimg;     for (var k = 0; k < entry.link.length; k++) {       if (entry.link[k].rel == 'alternate') {         relatedUrls[relatedTitlesNum] = entry.link[k].href;         break;       }     }     relatedTitlesNum++;   } } function showrelated() {   var tmp = new Array(0);   var tmp2 = new Array(0);   var tmp3 = new Array(0);   var tmp4 = new Array(0);   for(var i = 0; i < relatedUrls.length; i++) {     if(!contains(tmp, relatedUrls[i])) {       tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];       tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];       tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];       tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];     }   }   relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;   for(var i = 0; i < relatedTitles.length; i++){     var index = Math.floor((relatedTitles.length - 1) * Math.random());     var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];     var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];     relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];     relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];     relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;     relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;   }   var somePosts = 0;   var r = Math.floor((relatedTitles.length - 1) * Math.random());   var relsump = r;   var output;   var dirURL = document.URL;   while (somePosts < relatedPostsNum) {     if (relatedUrls[r] != dirURL) {       output = "<div class='relatedsumposts'>";       output += "<a href='" + relatedUrls[r] + "' rel='nofollow'  target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";       output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";       output += "" + relatedpSummary[r] + " ... ";       output += "</div>";       document.write(output);             somePosts++;       if (somePosts == relatedPostsNum) { break; }     }     if (r < relatedTitles.length - 1) {       r++;     } else {             r = 0;     }     if(r==relsump) { break; }   } } function removetags(text,length){   var pSummary = text.split("<");   for(var i=0;i<pSummary.length;i++){     if(pSummary[i].indexOf(">")!=-1){       pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);     }   }   pSummary = pSummary.join("");   pSummary = pSummary.substring(0,length-1);   return pSummary; } function contains(a, e) {   for(var j = 0; j < a.length; j++) if (a[j]==e) return true;   return false; } //]]> </script></blockquote>Note:   <ul><li>To change the number of posts that are being displayed, modify the value in red (4)</li><li>To change the number of characters to be shown in posts summary, modify the value in green (75)</li><li>To change the default pic for posts with no images, add your URL instead of the one marked in blue </li></ul>... also paste the code below just above the </head> tag: <blockquote class="tr_bq"><style> .relatedsumposts {   float: left;   margin: 0px 5px;   overflow: hidden;   text-align: center;   /* width and height of the related posts area */   width: 120px;   height: 210px; } .relatedsumposts:hover { background-color: #F3F3F3; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .relatedsumposts img:hover { -khtml-opacity:0.4; -moz-opacity:0.4; opacity:0.4; } .relatedsumposts a {   /* link properties */ color: #linkcolor;   display: inline;   font-size: 10px;   line-height: 1; } .relatedsumposts img {   /* thumbnail properties */ margin-top: 2px;   height: 82px;   padding: 5px;   width: 82px; border: 1px solid #fff; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .relatedsumposts h6 {   /* title properties */   display: table-cell;   height: 5em;   margin: 5px 0 0;   overflow: hidden;   padding-bottom: 2px;   vertical-align: middle;   width: 130px; } .relatedsumposts p {   /* summary properties */ border-top: 1px dotted #777777; border-bottom: 1px dotted #777777; color: #summarycolor;   font-size: 10px;   height: 4em;   line-height: 1;   margin: 5px 0 0;   overflow: hidden;   padding: 5px 0 15px 0;   text-align: left; } </style></blockquote>Note:   <ul><li>Modify the values in red to adjust the width (120) and height (210) of the widget area</li><li>Replace #linkcolor with the hex value of your color to change the color of post titles</li><li>To change the size of thumbnails, modify the values marked in violet (82) </li><li>To determine the border roundness, modify the values in orange (100)</li><li>To change the color of the post snippet, change #summarycolor with color hex value</li></ul>Step 4. Search (CTRL + F) for the following fragment: <blockquote class="tr_bq"><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></blockquote>... and add this code just below it: <blockquote class="tr_bq"><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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>   </b:if></blockquote>The entire fragment should look like this: <blockquote class="tr_bq">          <b:loop values='data:post.labels' var='label'>             <a expr:href='data:label.url' rel='tag'><data:label.name/></a><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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>   </b:if>           </b:loop></blockquote>Step 5. Find this fragment of code: <blockquote class="tr_bq"></b:includable> <b:includable id='postQuickEdit' var='post'></blockquote>Note: if you can't find it, then search only for the code in red <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51VPITnLNW-Iscc-L3jcvWvCBxiUcuNQGIRtw5fDtmYryAYqlEoR9R8GDFRql5FVsP1Qa-xcAvpEQB_DtBVPA3stI2h6IHRWIb0IBEAHhUFdiYZXIIwB_GOaNyYPDaNct1FA-Hpeq_kOT/s1600/4-26-2013+7-01-35+PM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="49" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51VPITnLNW-Iscc-L3jcvWvCBxiUcuNQGIRtw5fDtmYryAYqlEoR9R8GDFRql5FVsP1Qa-xcAvpEQB_DtBVPA3stI2h6IHRWIb0IBEAHhUFdiYZXIIwB_GOaNyYPDaNct1FA-Hpeq_kOT/s640/4-26-2013+7-01-35+PM.png" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">! Click on the sideways arrow to expand the code, then scroll down until you reach to the highlighted line !</td></tr></tbody></table> ...add just ABOVE it, add the following: <blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class='post-footer-line post-footer-line-4'>     <div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>RELATED POSTS</div>       <script type='text/javascript'>showrelated();</script>     </div>     <div style='clear:both;'/>   </div> </b:if></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6m92G635Zh9C35hRkrrdelXFvdfAZbLfiUe5M7uKNvBoBicWTMjIRnbMwCQpHP-QeGpW58mmfATy74cezzqedzPUSB5VeahNLvanW5Nweh5-LNz586xUKtduEh7T-jBMIM7l8STBmWKk/s1600/4-26-2013+7-02-56+PM.png" style="margin-left: auto; margin-right: auto;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6m92G635Zh9C35hRkrrdelXFvdfAZbLfiUe5M7uKNvBoBicWTMjIRnbMwCQpHP-QeGpW58mmfATy74cezzqedzPUSB5VeahNLvanW5Nweh5-LNz586xUKtduEh7T-jBMIM7l8STBmWKk/s640/4-26-2013+7-02-56+PM.png" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table> Step 6. Save your Template... and hopefully we're done... Enjoy!

Blog Design how to related posts Widgets Related Posts Widget with Thumbnails and Summary for Blogger

There are several tutorials quite old which have explained different methods for displaying related posts in Blogger [ 1 ] [ 2 ] but in thi...

A Simple Related Posts Widget For Blogger

In the last tutorial, i've been talking about the<a href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html"> Related Posts widget</a> that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it! <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizHytchYflbB3_IJv915l8_XJZiqnx91A9SeEn8mMIzO4LTdB7Mt-f4yb8DkqZt-gyOmf2VlzA2EeRIoBhGNStlB8upqwrSk4RhiQ9A7HcOTTqUUAoGMv2Vkqs7tPsKxHmwqJsl5QrxzDv/s1600/simple-related-posts-widget-blogger.png" imageanchor="1"><img alt="related post, related post blogger, blogger tricks" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizHytchYflbB3_IJv915l8_XJZiqnx91A9SeEn8mMIzO4LTdB7Mt-f4yb8DkqZt-gyOmf2VlzA2EeRIoBhGNStlB8upqwrSk4RhiQ9A7HcOTTqUUAoGMv2Vkqs7tPsKxHmwqJsl5QrxzDv/s1600/simple-related-posts-widget-blogger.png" title="Simple Related Posts Widget For Blogger/Blogspot" /></a></div> How to add Related Posts Widget to Blogger Step 1. Go to Template >> Edit HTML and click anywhere inside the code area Step 2. Press the CTRL + F keys and type this tag inside the search box: <blockquote class="tr_bq"></head></blockquote>Step 3. Just above the </head> tag paste the following: <blockquote class="tr_bq"> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; margin-top: 20px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #related-posts h2{ font-size: 17px; font-weight: normal; color: black; font-family: Arial Narrow; margin-bottom: 0.75em; padding-top: 0em; } #related-posts a{ font-size:16px; color: #555555; font-variant:small-caps; } #related-posts a:hover{ text-decoration: none; color: #ffffff; font-weight: bold; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:none; text-color:#000000 } #related-posts ul li{ list-style-type: none; border-left: 2px solid #1399CF; border-bottom: 1px dotted #1399CF; margin-bottom: 3px; padding-left: 30px; padding-top:0px; } #related-posts ul li:hover{ background-color: #1399CF; border-left: 2px solid #B3CA3D; border-bottom: 1px dotted #B3CA3D; } </style> <script type='text/javascript'> var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/> </b:if> </blockquote> Note: - if you want to change the size and color of 'Related Posts' title, change the bolded values (17 for the font size and black for the color) <div>-to change the related post title color, replace the value in red; -to change the background color on mouseover, replace the color value in blue; Step 4. Now find (CTRL + F) the below line: <blockquote class="tr_bq">    <div class='post-footer'> </blockquote>Step 5. Just above it, paste the code below: <blockquote class="tr_bq">  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <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=6&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> </b:if> </blockquote>Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number. Step 6. Save Template Enjoy!!!</div>

posts related posts Widgets A Simple Related Posts Widget For Blogger

In the last tutorial, i've been talking about the Related Posts widget that shows related posts along with thumbnails just at the end ...