Customizable Related Posts Widget for Blogger

We already posted a few tutorials on how to add <a href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html">related posts widget with thumbnails in Blogger</a> with summaries or only titles, which can be compiled into a single All-In-One Widget with powerful options. This new customizable related posts widget for Blogger integrates all the features we've seen before and more, such as thumbnails (square or round), post dates, excerpts, display only titles / thumbnails.<br /><br />Now let's see what this related posts blogger widget has to offer.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="related posts widget, blogger widget" border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb231YloYP9kuecZUsNQvtaQwzIP2LQbewtR6_Yayy4Vb__5fjL8jwB_9cYvgICAbNx3j4YhPCJw3jHtOV95fxYZjetK1-NmZJSra1FASI1KaAjdVaO1FoKa7sHxdp4jvK7uo9U51qhF_J/s400/related-posts-widget-for-blogger.png" title="Customizable Related Posts Widget for Blogger" width="400" /></div><br /><h3>Related Posts Widget Features:</h3><ul><li>9 attractive styles to match your needs</li><li>Show Title, excerpt & thumbnails</li><li>Display simple related posts with titles / summaries / post date</li><li>Choose whether to display the post thumbnails or not</li><li>Ability to control the thumbnail image size</li><li>Option to choose square or round thumbnails</li><li>Show post text excerpts</li><li>Control the length of the post excerpt / title</li><li>Determine the number of related posts to display</li></ul><h4>Requirements:</h4><ol><li>The related posts widget recognizes post thumbnails uploaded through Blogger itself (or Picasa Web Albums), other images from Photobucket, Flickr, or other non-Blogger hosts will not be supported.</li><li>This widget is compatible with the standard desktop Blogger templates except Dynamic Views, which does not accept customization.</li><li>The script does not work on private blogs, so your blog / site must be open to the public in order to show.</li></ol><h2>Adding Customizable Related Posts Widget in Blogger</h2>Log into your <a href="https://blogger.com/" rel="nofollow" target="_blank">Blogger dashboard</a>, go to 'Template' and open template editor by clicking the 'Edit HTML' button below 'Live On Blog' preview.<br /><br />Next, we're going to use the template search feature, be sure to follow these directions exactly:<br /><br />1. Place your cursor on the template code.<br />2. Click once.<br />3. Press CTRL and F at the same time (PC) or Command and F (Mac).<br /><br />The search box will open in the upper right corner of the template editor.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKAYwt8Ozijk1Jjg0mhmtNWl0iBO5mws7pnOR1xQMj7Qs8RqJUGYS1mNvB0QGziaBdJOZs20RYrzSMsTdT8N0GLmjbFWIfH0VaR52xb0Ij9dDlxK6vjdoX1MOK9O1aMKLOMGhwpEiUEA5g/s640/blogger-head-tag.png" width="640" /></div><br />Type <span style="background-color: yellow;"></head></span> in the search box, then press ENTER. This will take you to the <span style="background-color: yellow;"></head></span> tag in your template and highlight it in yellow.<br /><br />Select and copy the entire CSS style below and paste it directly ABOVE the <span style="background-color: yellow;"></head></span> tag:<br /><blockquote class="tr_bq"><style type='text/css'><br />.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px &#39;Open Sans&#39;, sans-serif;margin-bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px &#39;Open Sans&#39;, sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px &#39;Open Sans&#39;, sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:<span style="color: red;">22.7%</span>;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:<span style="color: red;">25%</span> !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px &#39;Open Sans&#39;, sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px &#39;Open Sans&#39;, sans-serif;color:#999999;}<br /></style></blockquote><br />Next, we need to add the script  - search for the following line:<br /><blockquote class="tr_bq"><b:includable id='postQuickEdit' var='post'></blockquote><br />Once you found it, click the small arrow not beside it but with one level above to expand code and scroll down until you see <span style="background-color: yellow;"></b:includable></span> - right below this tag, you should see the line including the "postQuickEdit" id.<br /><br />See the screenshot for more help:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjx4jSCTVp5qGDMR7L7qaxFRAkgiIiH3y14ITraI6gumLI2SJxgwlGwoI3RhyEcaDajVpDg5196GuFhMJ2tL2dZK8t_FPqQmWj5Vx281kcpe7GlYji8GnurnffjSMAk0roBCfvW4A_Y3GR/s1600/how-to-add-related-posts-widget-to-blogger.png" width="640" /></div><br />Just ABOVE the <span style="background-color: yellow;"></b:includable></span> tag, add the following script:<br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div class='related-posts-container' id='related-posts-widget'/><br /><div style='clear: both;'/><br /><script type='text/javascript'><br />var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];<br />var relatedSettings = {<br />blogURL:&quot;<data:blog.homepageUrl/>&quot;,<br />relatedHeading:&quot;&lt;h4&gt;&lt;span&gt;<span style="color: red;">Related Posts</span>&lt;/span&gt;&lt;/h4&gt;&quot;,<br />relatedPosts:<span style="color: red;">4</span>,<br />relatedStyle:<span style="color: red;">4</span>,<br />thumbnailSize:&quot;w<span style="color: red;">300</span>-h<span style="color: red;">200</span>-p-nu&quot;,<br />defaultThumb:&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicL26nXbHwB5cU07UxIRVmNZ4dnsK2aIjoAf5jR6fKG2VAY6DRrlunSAoRaUlBogfBmn7vJp_6mHKVvfXf2wfG8YJCmiHhNm_dLV_7x3w8uPEaEh5e8BdaY2ngGVs7V8j0m7wB9HpsfCt/<span style="color: red;">300</span>-h<span style="color: red;">200</span>-c/no-thumb.png&quot;,<br />roundThumbs:<span style="color: red;">false</span>,<br />titleLength:&quot;<span style="color: red;">auto</span>&quot;,<br />snippetLength:<span style="color: red;">45</span>,<br />centerText:<span style="color: red;">false</span>,<br />openNewTab:<span style="color: red;">false</span><br />};</script><br /><script type='text/javascript'><br />//<![CDATA[<br />var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"&hellip;":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"&hellip;":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);<br />//]]><br /></script><br /></b:if></blockquote><br /><h2>How to Customize the Related Posts Widget for Blogger?</h2>To change the 'Related Posts' text that appears above the widget, modify the text in red:<br /><blockquote class="tr_bq">relatedHeading: &quot;&lt;h4&gt;&lt;span&gt;<span style="color: red;">Related Posts</span>&lt;/span&gt;&lt;/h4&gt;&quot;,</blockquote><br />To change the number of posts to display, change the '4' value from this line:<br /><blockquote class="tr_bq">relatedPosts: <span style="color: red;">4</span>,</blockquote><br />Note: you may need to change the percentages in the CSS styles above in order to make posts fit the related container. Just follow the values in red and play with them until you get the best results.<br /><br />To change the style of the related posts widget, modify the '4' value from:<br /><blockquote class="tr_bq">relatedStyle: <span style="color: red;">4</span>,</blockquote><br /><h4>Available Related Posts Styles</h4><ol><li>simple related posts widget that will show post titles only</li><li>display post titles and snippets</li><li>display post thumbnails, titles and snippets</li><li>display related posts thumbnails, titles and post date (shows by default)</li><li>display related posts thumbnails and titles</li><li>post titles in front of thumbnails, instead of having them below the thumbnail</li><li>display thumbnails only</li><li>small thumbnail with titles on the right and date below</li><li>small thumbnails with post titles and excerpts on the right</li></ol><h3>Customizing the Related Post Thumbnail Size & Style</h3>By default, thumbnails are resized and cropped automatically to be 300px wide by 200px tall. If you want to change the width and height of the thumbnails, modify the '300' and '200' values from:<br /><blockquote class="tr_bq">thumbnailSize: &quot;w<span style="color: red;">300</span>-h<span style="color: red;">200</span>-p-nu&quot;,<br />defaultThumb: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjicL26nXbHwB5cU07UxIRVmNZ4dnsK2aIjoAf5jR6fKG2VAY6DRrlunSAoRaUlBogfBmn7vJp_6mHKVvfXf2wfG8YJCmiHhNm_dLV_7x3w8uPEaEh5e8BdaY2ngGVs7V8j0m7wB9HpsfCt/<span style="color: red;">300</span>-h<span style="color: red;">200</span>-c/no-thumb.png&quot;,</blockquote>Note: 'w' comes from width, 'h' comes from height. To make the thumbnails square, change the 'h' (height) value and make it equal with 'w' (width) value. A higher value will result in more high-res images.<br /><br />If you want thumbnails have rounded corners, change 'false' with 'true':<br /><blockquote class="tr_bq">roundThumbs:<span style="color: red;">false</span>,</blockquote><br /><h3>Customizing Related Titles & Excerpts </h3>To shorten the post title, change <span style="color: red;">auto</span> with the number of characters to show:<br /><blockquote class="tr_bq">titleLength: &quot;<span style="color: red;">auto</span>&quot;,</blockquote><br />To reduce or add more characters to the snippets, change the "45" value:<br /><blockquote class="tr_bq">snippetLength: <span style="color: red;">45</span>,</blockquote><br />If you want to center text (title and summary), change 'false' to 'true':<br /><blockquote class="tr_bq">centerText:<span style="color: red;">false</span>,</blockquote><br />To open links in a new tab when visitors click on a related post, change "false" to "true":<br /><blockquote class="tr_bq">openNewTab: <span style="color: red;">false</span></blockquote><br />Once you're done with the settings, click the 'Save Template' button and now you can see the related posts widget live on your Blogger blog.<br /><br /><h4>Final words</h4>That's it! With the new customizable Related Posts widget for Blogger you will be able to add unique features to the related content section of your blog. However, all of these styles look and work slightly different, so take your time, and pick your favorite.

Customizable Related Posts Widget for Blogger

We already posted a few tutorials on how to add related posts widget with thumbnails in Blogger with summaries or only titles, which can be...

Read more »

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 avoid using it for its lack of customization. So, this tutorial will show you how to add LinkWithin on a Blogger blog and how to customize it.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicW4-mZxyJh63ZpnraWJia2gWKGckoYiYG72o1yefBA13DEFGMvwV60sI8mjR4vehAvRmfakXGo1Ckz3Ws7RahgpDTmenwXqfATD4Fo1DVm44NZGDYxv9cqSMUlMZflkqYHiGQfxwjDpHW/s1600/customize-linkwithin-widget-blogger-thumbnails-background.png" /></div><br />This is what we will do with this gadget: <ul><li>Change the location of the gadget;</li><li>Remove the LinkWithin link;</li><li>Change the "You might also like" title with any other text;</li><li>Add rounded borders to images;</li><li>Remove the border that separates posts;</li><li>Add a background color;</li><li>Change the background color on mouse over;</li><li>Change the post titles color and font</li></ul><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" target="_blank">LinkWithin homepage</a> and type in the required information:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="linkwithin gadget, related posts widget, blogger widgets" border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeib5LiQeVkRvKpRyUxYzcAwJ6gLtByG8wiWWWWle2846V3reMnHw39qsTKi4ncqCu44-yTmlFl89wdu4emqBJSIVXYl9TRcuHHwn7wb94bj7LcBBcTMyvbP58uM41Mly5dEuubnMZzxCZ/s1600/customize-linkwithin-gadget-for-blogger.png" title="how to customize or edit the linkwithin related post widget" width="400" /></div>Although it provides the option to choose Blogger as a platform, we will select <b>Other</b> in order to implement the code directly into our template and then modify it. Select the number of posts (stories) according to the width of the content area - if the width of the posts container is narrower, then it is recommended to display fewer related posts.<br /><br />By clicking on the "<b>Get widget!</b>" button, we'll be given the code that we need use it. It should look something like this:<br /><blockquote class="tr_bq"><script><br />var linkwithin_site_id = XXXXXXX;<br /></script><br /><script src="http://www.linkwithin.com/widget.js"></script><br /><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" target="_blank">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:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div><br />Cick anywhere inside the code area and press the CTRL + F keys to search for the following line:<br /><blockquote class="tr_bq"><div class='post-footer'></blockquote>Just above this line, paste the LinkWithin code.<br /><br />By doing so you already have the LinkWithin gadget on your blog and the result will be like this:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="linkwithin gadget, related posts widget, blogger widgets" border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAk3e5FzMrFdqCq-eEZaI-Jou49p2BjuEA_3O9X_rQrOpxQ_q-UlZxP4Ze8jjsWjkkRid2fdym6ElsxrtRzS4w4ckKY8Zdxu7LAaRCNAk3Ui_YioM5KA54mOXfbz_rq7RXgT5d8lvS4FAv/s1600/linkwithin-related-posts-gadget-for-blogger.png" title="how to customize or edit the linkwithin related post gadget" width="400" /></div>Note: If you would like to display it only in post pages, you can enclose the code using a <a href="http://helplogger.blogspot.com/2012/03/hideshow-widgetsgadgets-in.html">Blogger conditional tag</a>.<br /><br /><h3>Change the LinkWithin gadget location</h3>By default, this widget will always appear right at the end of your posts. In the <a href="http://www.linkwithin.com/faq" rel="nofollow" target="_blank">LinkWithin FAQ page</a> we can find solutions on how to fix this - simply add the code below where we want the widget to appear:<br /><blockquote class="tr_bq"><b><span style="color: #444444;"><div class='linkwithin_div'/></span></b></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.<br /><br /><h3>Replacing the "You might also like" LinkWithin text</h3>By default, the LinkWithin gadget shows the "<b>You might also like</b>" title but we can change the text to anything we want. Just add the line below in blue within the LinkWithin code:<br /><blockquote class="tr_bq"><b><span style="color: #444444;"><div class='linkwithin_div'/></span></b><br /><script><br />var linkwithin_site_id = XXXXXXX;<br /></script><br /><span style="color: blue;"><script>linkwithin_text='<b>Related Posts:</b>'</script></span><br /><script src="http://www.linkwithin.com/widget.js"></script><br /><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>And change the text - in this case, it will show "<b>Related posts</b>" instead of "<b>You may also like these stories</b>".<br /><br /><h3>Changing the LinkWithin background color and thumbnails style</h3>Within the template's code, search for the <span style="background-color: yellow;">]]></b:skin></span> tag and just above it, add the following CSS styling:<br /><blockquote class="tr_bq">.linkwithin_div {<br />background: #EEEEEE; <span style="color: #6aa84f;">/* Background color for the related posts container */</span><br />padding: 0 10px;<br />border-top: 1px solid #DBDBDB;  <span style="color: #6aa84f;">/* Top border for the related posts container */</span><br />border-bottom: 1px solid #DBDBDB;  <span style="color: #6aa84f;">/* Bottom border for the related posts container */</span><br />}<br />.linkwithin_text {<br />font-family: Cambria,Georgia,sans-serif;<br />font-size:18px;<span style="color: #6aa84f;"> /* Size for the related posts title */</span><br />color:#898989; <span style="color: #6aa84f;">/* Color for the related posts title */</span><br />}<br />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 {<br />display:none;<br />}<br />.linkwithin_posts {<br />width: 500px !important; <span style="color: #6aa84f;">/* Width for the related posts container */</span><br />}<br />.linkwithin_posts a {<br />border: 0 !important;<br />padding-right: 10px !important;<br />}<br />.linkwithin_posts a:hover {<br />background: #F5F5F5 !important; <span style="color: #6aa84f;">/* Background color on mouseover */</span><br />}<br />.linkwithin_img_0 {<br />background: #F5F5F5;<br />border: 1px solid #C1C1C1;<br />padding: 2px !important;<br />transition:all .2s linear;<br /> -o-transition:all .5s linear;<br />-moz-transition:all .2s linear;<br />-webkit-transition:all .2s linear;<br />}<br />.linkwithin_img_0:hover {<br />background: #ffffff;<br />padding: 2px !important;<br />opacity:.6;<br />filter:alpha(opacity=60)<br />}  <br />.linkwithin_img_0 div, div.linkwithin_img_0,<br />.linkwithin_img_1 div, div.linkwithin_img_1,<br />.linkwithin_img_2 div, div.linkwithin_img_2,<br />.linkwithin_img_3 div, div.linkwithin_img_3,<br />.linkwithin_img_4 div, div.linkwithin_img_4,<br />.linkwithin_img_5 div, div.linkwithin_img_5,<br />.linkwithin_img_6 div, div.linkwithin_img_6,<br />.linkwithin_img_7 div, div.linkwithin_img_7,<br />.linkwithin_img_8 div, div.linkwithin_img_8,<br />.linkwithin_img_9 div, div.linkwithin_img_9,<br />.linkwithin_img_10 div, div.linkwithin_img_10,<br />.linkwithin_img_11 div, div.linkwithin_img_11,<br />.linkwithin_img_12 div, div.linkwithin_img_12,<br />.linkwithin_img_13 div, div.linkwithin_img_13,<br />.linkwithin_img_14 div, div.linkwithin_img_14,<br />.linkwithin_img_15 div, div.linkwithin_img_15,<br />.linkwithin_img_16 div, div.linkwithin_img_16,<br />.linkwithin_img_17 div, div.linkwithin_img_17,<br />.linkwithin_img_18 div, div.linkwithin_img_18,<br />.linkwithin_img_19 div, div.linkwithin_img_19,<br />.linkwithin_img_20 div, div.linkwithin_img_20 { <br /><span style="color: #cc0000;">-webkit-border-radius: 100px; <br />-moz-border-radius: 100px; <br />border-radius: 100px; </span><br />}<br />.linkwithin_title {<br />color: #242424 !important; <span style="color: #6aa84f;">/* Color for titles */</span><br />font-family: Cambria,Georgia,sans-serif;<br />font-size: 12px !important; <span style="color: #6aa84f;">/* Font size of posts titles */</span><br />line-height: 24px !important;<br />text-align:center;<br />text-decoration: none;<br />}<br />.linkwithin_title:hover {<br />color: #000 !important; <span style="color: #6aa84f;">/* Color of posts titles on mouseover */</span><br />}</blockquote>After adding this CSS, the LinkWithin gadget will look like this:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="linkwithin gadget, related posts widget, blogger widgets" border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4bLwEjLw46ZC0GTDH5mXm3V-HRRxgnzYdSwcEsum28hWbQE59UftV7GTqf-lJ6TOud26TupGclz11vhdL9uYy77xmGG_IlwCo4yCgUZM8JLgeC535q-sjFnxQVuMZFaqT7d3NUbLAgEBh/s1600/customize-linkwithin-widget-blogger-thumbnails-background.png" title="how to customize or edit the linkwithin related posts widget" width="400" /></div><br />If you don't want round thumbnails, remove the code in red. In green you can see the parts which can be customized - there you can apply more styles or change the background color, text size, etc.<br /><br />After you've made the changes, click on the "Save Template" button. So this is how we can <b>customize the LinkWithin related posts widget</b>. Enjoy!

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 a...

Read more »

Related Posts Widget with Thumbnails and Summary for Blogger

There are several tutorials quite old in which you have seen different methods for displaying related posts in Blogger like the <a href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html"><span style="color: blue;">related posts widget with thumbnails</span></a> and <a href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html"><span style="color: blue;">simple related posts with post titles only</span></a>. This tutorial, however, will show you how to implement a really awesome Related Posts widget with thumbnails and posts snippets that will appear in the footer of all your blog posts.<br /><br />If you want to get an idea of how it looks like, please visit <a href="http://demo-blog761.blogspot.com/2014/07/lorem-ipsum-dolor-sit-amet-consectetur_3053.html" rel="nofollow" style="color: blue;" target="_blank">this demo blog</a>.<br /><br />Now let's see <b>how to add the related posts widget with thumbnails and summary in Blogger</b>:<br /><br /><h2>Adding Related Posts Widget with Snippets to Blogger Posts</h2><br /><div class="separator" style="clear: both; text-align: center;"><img alt="related posts widget with thumbnails and summaries" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgty-6guhgn4Awhz1gIMLuvcnGpELGwGquJB7rPQkXftCyToFgYuj-VRfNSidTFvDm7D9ugP759_LwBUxCjCo3-RRPDDH7WAbyFeSSBP03ZwEJ3INyVsauM-MUaygxbcuiLKmjPikjjjom5/s640/related-posts-widget-with-post-thumbnails-summary-for-blogger.png" title="Related Posts Widget with Thumbnails and Summary for Blogger" width="640" /></div><br />Step 1. From your <a href="https://www.blogger.com/home" rel="nofollow" target="_blank">Blogger Dashboard</a>, go to <b>Template</b> and click on <b>Edit HTML</b><br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkg98s3iJp7UuhdpFe1FmlHigG5PSJuZXWlk1vs8tdfOh5rHb2Y_4xzgLUeJiC7vlysP6OiCAi8ZjoWbBbuD9JqPJHI3pDoG5ppKEkQfMPGT2lYyekBKUBR45OmU4MAVJcLyNGeuEatLNl/s1600/blogger-template-edit-html.png" width="320" /></div><br />Step 2. Click anywhere inside the code area and then press CTRL + F to open the Blogger search box<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTB9B6haG3lHQgVxNVR0Ovj6pQT0aRvxVcIgpwZZiTGvzIzcJmsMUP-eV0rswDQk8CPy_5GlQluN6Z6zm-h2-mS3-BC2QXUXs2ZPfY2b9Nws0gK7bZY6f5Npdhntl33tc0ZYtg9oWcFS8/s1600/open-blogger-search-box-ctrl%252Bf.png" width="400" /></div><br />Step 3. Type or paste this tag inside the search box and hit enter to find it:<br /><blockquote class="tr_bq"></head></blockquote>After you found it, paste this script just above it:<br /><blockquote class="tr_bq"><script type='text/javascript'><br />//<![CDATA[<br />var relatedTitles = new Array();<br />var relatedUrls = new Array();<br />var relatedpSummary = new Array();<br />var relatedThumb = new Array();<br />var relatedTitlesNum = 0;<br />var relatedPostsNum = <span style="color: red;"><b>4</b></span>; // number of entries to be shown<br />var relatedmaxnum = <span style="color: #6aa84f;"><b>75</b></span>; // the number of characters of summary<br />var relatednoimage = "<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUe5bguK9H2niFlIRA1hvzLkD5r9Re5xX7zimJj8Sr9UjPXwDiErMmUwJrzPPaJJ75BHD428aPxsjxh62TulInN9w4pRh3o2hckSdNStrb8_cqUDg4qIcdi1TGPq9ij2kVEkkIp35F2dSG/s1600/no_image.jpg</span>"; // default picture for entries with no image<br />function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1}<br />//]]><br /></script></blockquote><br />Note:<br />- To change the number of posts that are being displayed, modify <span style="color: red;">the value in red (4)</span><br />- To change the number of characters to be shown in posts summary, modify<span style="color: #6aa84f;"> the value in green (75)</span><br />- To change the default pic for posts with no images, add your URL instead of the one <span style="color: blue;">marked in blue </span><br /> Step 4. Now that we added the script, we will need to add the CSS style. Just paste the following code above the same <b></head></b> tag:<br /><blockquote class="tr_bq"><style><br />.relatedsumposts {<br />padding: 0px 10px;<br />text-align: center;<br />/* width of the related posts area */<br />width: <b><span style="color: red;">120px</span></b>;<br />float:left;margin-bottom:15px;<br />border-right: 1px dotted #E5E5E5;<br />display: inline-block;<br />}<br />.relatedsumposts h6 {<br />margin: 5px 0;<br />}<br />.relatedsumposts h6 a {<br />/* link properties */<br />color: <span style="color: blue;">#linkcolor</span>;<br />text-transform: uppercase;<br />font-size:12px;<br />}<br />.relatedsumposts img {<br />/* thumbnail properties */<br />height: <b><span style="color: #674ea7;">82px</span></b>;<br />width: <span style="color: #674ea7;"><b>82px</b></span>;<br /><span style="color: orange;">-webkit-border-radius: 50%;<br />-moz-border-radius: 50%;<br />border-radius: 50%;</span><br />}<br />.relatedsumposts p {<br />/* summary properties */<br />border-top: 1px dotted #E5E5E5;<br />border-bottom: 1px dotted #E5E5E5;<br />color: <span style="color: magenta;">#summarycolor</span>;<br />font-size: 10px;<br />height: 4em;<br />line-height: 1;<br />margin: 5px 0 0;<br />padding: 5px 0 15px 0;<br />}<br />#relatedpostssum {<br />width: 100%;<br />}<br />.relatedpoststitle {<br />font-size: 19px;<br />margin-bottom:15px;<br />}<br /></style></blockquote><br /><h3>Customizing the Related Posts Widget:</h3>- Modify the value in red (<span style="color: red;">120px</span>) to adjust the width of the widget area<br />- Replace <span style="color: blue;">#linkcolor</span> with the hex value of your color to change the color of post titles<br />- If you want to change the size of thumbnails, modify the values marked in violet <span style="color: #674ea7;">(<b>82px</b>)</span> <br />- To determine the border roundness, modify the values in orange <span style="color: #e69138;">(50%)</span><br />- To change the color of the post snippet, change <span style="color: magenta;">#summarycolor</span> with color hex value<br /><br />Step 5. Next, search (CTRL + F) for the following code snippet:<br /><blockquote class="tr_bq"><b:includable id='postQuickEdit' var='post'></blockquote>When you find it, click the sideways arrow to expand the code and scroll down until you find <span style="background-color: yellow;"></b:includable></span> - see the screenshot for more help:<br /><br /><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjx4jSCTVp5qGDMR7L7qaxFRAkgiIiH3y14ITraI6gumLI2SJxgwlGwoI3RhyEcaDajVpDg5196GuFhMJ2tL2dZK8t_FPqQmWj5Vx281kcpe7GlYji8GnurnffjSMAk0roBCfvW4A_Y3GR/s640/how-to-add-related-posts-widget-to-blogger.png" width="640" /><br /><br />Step 6. Just ABOVE the <span style="background-color: yellow;"></b:includable></span> tag, add the following html code:<br /><blockquote class="tr_bq"><!-- Related Posts with Thumbnails Code Start--><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != &quot;true&quot;'><br /></b:if><br /><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'/><br /></b:loop><br />  <div class='post-footer-line post-footer-line-4'><br />   <div class='relatedpoststitle'>RELATED POSTS</div><br /><div id='relatedpostssum'><br />      <script type='text/javascript'>showrelated();</script><br />    </div><br />    <div style='clear:both;'/><br />  </div><br /></b:if><br /><!-- Related Posts with Thumbnails Code End--></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/AVvXsEhRjj69TItmlyBdlzgV0OJAgX6Gk13XdjZ-8z8mCNU5Rym0l8Rtr1mkWkPk5B-OZOjwLsh_lNpeqC5zmXJeXMXaSDJi8se_cpqqqz6zEjIn3-bTbuaYNgzzkudrTlRtpuL0QEh0aU4RkyMH/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/AVvXsEhRjj69TItmlyBdlzgV0OJAgX6Gk13XdjZ-8z8mCNU5Rym0l8Rtr1mkWkPk5B-OZOjwLsh_lNpeqC5zmXJeXMXaSDJi8se_cpqqqz6zEjIn3-bTbuaYNgzzkudrTlRtpuL0QEh0aU4RkyMH/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><br />Step 7. Click on the "Save Template" button to save the changes and you're done!<br /><br />Note: in case you see the 'undefined' message, make sure that you have added the appropriate labels to your posts - which can be found in at least one more post, otherwise the script might not be able to find any related posts for that entry.

Related Posts Widget with Thumbnails and Summary for Blogger

There are several tutorials quite old in which you have seen different methods for displaying related posts in Blogger like the related post...

Read more »