// API callback
relatedposts({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243"},"updated":{"$t":"2022-03-26T23:23:54.889-07:00"},"category":[{"term":"how to"},{"term":"Blog Design"},{"term":"Widgets"},{"term":"posts"},{"term":"css"},{"term":"Comments"},{"term":"adsense"},{"term":"SEO"},{"term":"jQuery"},{"term":"social media"},{"term":"Image Effects"},{"term":"beginner's guide"},{"term":"blogger posts"},{"term":"Navigation"},{"term":"make money online"},{"term":"javascript"},{"term":"adsense optimization"},{"term":"menus"},{"term":"Facebook"},{"term":"adsense tips"},{"term":"social media plugins"},{"term":"popular posts"},{"term":"blogger"},{"term":"blogger pages"},{"term":"navigation menu"},{"term":"recent posts"},{"term":"threaded comments"},{"term":"google plus"},{"term":"related posts"},{"term":"blogging tips"},{"term":"recent comments"},{"term":"slideshows"},{"term":"static pages"},{"term":"tools"},{"term":"Templates"},{"term":"backlinks"},{"term":"custom domain"},{"term":"emoticons"},{"term":"instagram"},{"term":"labels"},{"term":"sitemap"},{"term":"RSS"},{"term":"click bombing"},{"term":"feedburner"},{"term":"firebug"},{"term":"font awesome"},{"term":"google analytics"},{"term":"homepage"},{"term":"invalid clicks"},{"term":"robots"},{"term":"statcounter"}],"title":{"type":"text","$t":"Helplogger"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/related+posts?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/search\/label\/related%20posts"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"4"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-6590088027126792597"},"published":{"$t":"2016-09-13T07:57:00.001-07:00"},"updated":{"$t":"2016-10-28T08:24:04.924-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"blogger posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"javascript"},{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"related posts"}],"title":{"type":"text","$t":"Customizable Related Posts Widget for Blogger"},"content":{"type":"html","$t":"We already posted a few tutorials on how to add \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/how-to-add-related-posts-widget-to.html\"\u003Erelated posts widget with thumbnails in Blogger\u003C\/a\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003ENow let's see what this related posts blogger widget has to offer.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"related posts widget, blogger widget\" border=\"0\" height=\"245\" src=\"https:\/\/1.bp.blogspot.com\/-klS-ZV7SIf0\/V9gOKOH_iwI\/AAAAAAAALuk\/DEUdh6GKbOY8o2y_PJY0enmUYa-LysK2ACLcB\/s400\/related-posts-widget-for-blogger.png\" title=\"Customizable Related Posts Widget for Blogger\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003ERelated Posts Widget Features:\u003C\/h3\u003E\u003Cul\u003E\u003Cli\u003E9 attractive styles to match your needs\u003C\/li\u003E\u003Cli\u003EShow Title, excerpt \u0026amp; thumbnails\u003C\/li\u003E\u003Cli\u003EDisplay simple related posts with titles \/ summaries \/ post date\u003C\/li\u003E\u003Cli\u003EChoose whether to display the post thumbnails or not\u003C\/li\u003E\u003Cli\u003EAbility to control the thumbnail image size\u003C\/li\u003E\u003Cli\u003EOption to choose square or round thumbnails\u003C\/li\u003E\u003Cli\u003EShow post text excerpts\u003C\/li\u003E\u003Cli\u003EControl the length of the post excerpt \/ title\u003C\/li\u003E\u003Cli\u003EDetermine the number of related posts to display\u003C\/li\u003E\u003C\/ul\u003E\u003Ch4\u003ERequirements:\u003C\/h4\u003E\u003Col\u003E\u003Cli\u003EThe 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.\u003C\/li\u003E\u003Cli\u003EThis widget is compatible with the standard desktop Blogger templates except Dynamic Views, which does not accept customization.\u003C\/li\u003E\u003Cli\u003EThe script does not work on private blogs, so your blog \/ site must be open to the public in order to show.\u003C\/li\u003E\u003C\/ol\u003E\u003Ch2\u003EAdding Customizable Related Posts Widget in Blogger\u003C\/h2\u003ELog into your \u003Ca href=\"https:\/\/blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger dashboard\u003C\/a\u003E, go to 'Template' and open template editor by clicking the 'Edit HTML' button below 'Live On Blog' preview.\u003Cbr \/\u003E\u003Cbr \/\u003ENext, we're going to use the template search feature, be sure to follow these directions exactly:\u003Cbr \/\u003E\u003Cbr \/\u003E1. Place your cursor on the template code.\u003Cbr \/\u003E2. Click once.\u003Cbr \/\u003E3. Press CTRL and F at the same time (PC) or Command and F (Mac).\u003Cbr \/\u003E\u003Cbr \/\u003EThe search box will open in the upper right corner of the template editor.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"344\" src=\"https:\/\/1.bp.blogspot.com\/-yrx8eK37SZQ\/V9HZFTiIITI\/AAAAAAAALtw\/V6CbW1gghmAoyryIEOZ_kPCqJgE2VomEgCPcB\/s640\/blogger-head-tag.png\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EType \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E in the search box, then press ENTER. This will take you to the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag in your template and highlight it in yellow.\u003Cbr \/\u003E\u003Cbr \/\u003ESelect and copy the entire CSS style below and paste it directly ABOVE the  \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E tag:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px \u0026amp;#39;Open Sans\u0026amp;#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 \u0026amp;#39;Open Sans\u0026amp;#39;, sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px \u0026amp;#39;Open Sans\u0026amp;#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:\u003Cspan style=\"color: red;\"\u003E22.7%\u003C\/span\u003E;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:\u003Cspan style=\"color: red;\"\u003E25%\u003C\/span\u003E !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 \u0026amp;#39;Open Sans\u0026amp;#39;, sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px \u0026amp;#39;Open Sans\u0026amp;#39;, sans-serif;color:#999999;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003ENext, we need to add the script\u0026nbsp; - search for the following line:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:includable id='postQuickEdit' var='post'\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EOnce you found it, click the small arrow not beside it but with one level above to expand code and scroll down until you see \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/b:includable\u0026gt;\u003C\/span\u003E - right below this tag, you should see the line including the \"postQuickEdit\" id.\u003Cbr \/\u003E\u003Cbr \/\u003ESee the screenshot for more help:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"212\" src=\"https:\/\/3.bp.blogspot.com\/-mHLx2gzbK_w\/U2080khO0lI\/AAAAAAAAJBA\/W_pLHwDKUUw\/s1600\/how-to-add-related-posts-widget-to-blogger.png\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EJust ABOVE the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/b:includable\u0026gt;\u003C\/span\u003E tag, add the following script:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;div class='related-posts-container' id='related-posts-widget'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;div style='clear: both;'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003Evar labelArray = [\u0026lt;b:if cond='data:post.labels'\u0026gt;\u0026lt;b:loop values='data:post.labels' var='label'\u0026gt;\u0026amp;quot;\u0026lt;data:label.name\/\u0026gt;\u0026amp;quot;\u0026lt;b:if cond='data:label.isLast != \u0026amp;quot;true\u0026amp;quot;'\u0026gt;,\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:loop\u0026gt;\u0026lt;\/b:if\u0026gt;];\u003Cbr \/\u003Evar relatedSettings = {\u003Cbr \/\u003EblogURL:\u0026amp;quot;\u0026lt;data:blog.homepageUrl\/\u0026gt;\u0026amp;quot;,\u003Cbr \/\u003ErelatedHeading:\u0026amp;quot;\u0026amp;lt;h4\u0026amp;gt;\u0026amp;lt;span\u0026amp;gt;\u003Cspan style=\"color: red;\"\u003ERelated Posts\u003C\/span\u003E\u0026amp;lt;\/span\u0026amp;gt;\u0026amp;lt;\/h4\u0026amp;gt;\u0026amp;quot;,\u003Cbr \/\u003ErelatedPosts:\u003Cspan style=\"color: red;\"\u003E4\u003C\/span\u003E,\u003Cbr \/\u003ErelatedStyle:\u003Cspan style=\"color: red;\"\u003E4\u003C\/span\u003E,\u003Cbr \/\u003EthumbnailSize:\u0026amp;quot;w\u003Cspan style=\"color: red;\"\u003E300\u003C\/span\u003E-h\u003Cspan style=\"color: red;\"\u003E200\u003C\/span\u003E-p-nu\u0026amp;quot;,\u003Cbr \/\u003EdefaultThumb:\u0026amp;quot;https:\/\/4.bp.blogspot.com\/-BLiit18tHXA\/V9gCeNNCXzI\/AAAAAAAALt8\/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB\/w\u003Cspan style=\"color: red;\"\u003E300\u003C\/span\u003E-h\u003Cspan style=\"color: red;\"\u003E200\u003C\/span\u003E-c\/no-thumb.png\u0026amp;quot;,\u003Cbr \/\u003EroundThumbs:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E,\u003Cbr \/\u003EtitleLength:\u0026amp;quot;\u003Cspan style=\"color: red;\"\u003Eauto\u003C\/span\u003E\u0026amp;quot;,\u003Cbr \/\u003EsnippetLength:\u003Cspan style=\"color: red;\"\u003E45\u003C\/span\u003E,\u003Cbr \/\u003EcenterText:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E,\u003Cbr \/\u003EopenNewTab:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E\u003Cbr \/\u003E};\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Evar 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\u0026amp;\u0026amp;labelArray.length\u0026gt;0?\"\/-\/\"+h(labelArray)[0]:\"\",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b\u0026gt;0?b:1);f(d.blogURL.replace(\/\\\/$\/,\"\")+\"\/feeds\/posts\/summary\"+i+\"?alt=json-in-script\u0026amp;orderby=updated\u0026amp;start-index=\"+c+\"\u0026amp;max-results=\"+d.relatedPosts+\"\u0026amp;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+'\u0026lt;ul class=\"related-posts-'+e+'\"\u0026gt;',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='\u0026lt;span style=\"display:block;clear:both;\"\u0026gt;\u0026lt;\/span\u0026gt;';if(b){for(var r=0;r\u0026lt;d.relatedPosts\u0026amp;\u0026amp;r!=c.length;r++){n=c[r].title.$t,o=\"auto\"!==d.titleLength\u0026amp;\u0026amp;d.titleLength\u0026lt;n.length?n.substring(0,d.titleLength)+\"\u0026amp;hellip;\":n,p=\"media$thumbnail\"in c[r]\u0026amp;\u0026amp;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\u0026lt;s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+\" \"+u+\" \"+w,q=\"summary\"in c[r]\u0026amp;\u0026amp;d.snippetLength\u0026gt;0?c[r].summary.$t.replace(\/\u0026lt;br ?\\\/?\u0026gt;\/g,\" \").replace(\/\u0026lt;.*?\u0026gt;\/g,\"\").replace(\/[\u0026lt;\u0026gt;]\/g,\"\").substring(0,d.snippetLength)+\"\u0026amp;hellip;\":\"\";for(var y=0,z=c[r].link.length;y\u0026lt;z;y++)m=\"alternate\"==c[r].link[y].rel?c[r].link[y].href:\"#\";1==e?f+='\u0026lt;li\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+\"\u0026gt;\"+o+\"\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\":2==e?f+='\u0026lt;li\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-snippets\"\u0026gt;'+q+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\":3==e?f+='\u0026lt;li class=\"related-post-item\" style=\"'+i+'\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-snippets\"\u0026gt;'+q+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\":4==e?f+='\u0026lt;li class=\"related-post-item\" style=\"'+i+'\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-date\"\u0026gt;'+postdate+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\":5==e?f+='\u0026lt;li class=\"related-post-item\" style=\"'+i+'\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+\"\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\":6==e?f+='\u0026lt;li class=\"related-post-item\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-wrapper\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-wrapper-inner\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+\"\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;\":7==e?f+='\u0026lt;li class=\"related-post-item\"\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb-large\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;':8==e?f+='\u0026lt;li class=\"related-post-item\"\u0026gt;\u0026lt;a class=\"related-post-item-wrapper\" href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-date\"\u0026gt;'+postdate+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\":9==e\u0026amp;\u0026amp;(f+='\u0026lt;li\u0026gt;\u0026lt;a href=\"'+m+'\" '+g+'\u0026gt;\u0026lt;img alt=\"\" class=\"related-thumb\" src=\"'+p+'\" style=\"'+j+'\"\u0026gt;\u0026lt;div class=\"related-title\"\u0026gt;'+o+'\u0026lt;\/div\u0026gt;\u0026lt;\/a\u0026gt;\u0026lt;div class=\"related-snippets\"\u0026gt;'+q+\"\u0026lt;\/div\u0026gt;\u0026lt;\/li\u0026gt;\")}b.innerHTML=f+=\"\u0026lt;\/ul\u0026gt;\"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(\/\\\/$\/,\"\")+\"\/feeds\/posts\/summary\"+i+\"?alt=json-in-script\u0026amp;orderby=updated\u0026amp;max-results=0\u0026amp;callback=randomRelatedIndex\")}(window,document,document.getElementsByTagName(\"head\")[0]);\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch2\u003EHow to Customize the Related Posts Widget for Blogger?\u003C\/h2\u003ETo change the 'Related Posts' text that appears above the widget, modify the text in red:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003ErelatedHeading: \u0026amp;quot;\u0026amp;lt;h4\u0026amp;gt;\u0026amp;lt;span\u0026amp;gt;\u003Cspan style=\"color: red;\"\u003ERelated Posts\u003C\/span\u003E\u0026amp;lt;\/span\u0026amp;gt;\u0026amp;lt;\/h4\u0026amp;gt;\u0026amp;quot;,\u003C\/blockquote\u003E\u003Cbr \/\u003ETo change the number of posts to display, change the '4' value from this line:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003ErelatedPosts: \u003Cspan style=\"color: red;\"\u003E4\u003C\/span\u003E,\u003C\/blockquote\u003E\u003Cbr \/\u003ENote: 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.\u003Cbr \/\u003E\u003Cbr \/\u003ETo change the style of the related posts widget, modify the '4' value from:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003ErelatedStyle: \u003Cspan style=\"color: red;\"\u003E4\u003C\/span\u003E,\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch4\u003EAvailable Related Posts Styles\u003C\/h4\u003E\u003Col\u003E\u003Cli\u003Esimple related posts widget that will show post titles only\u003C\/li\u003E\u003Cli\u003Edisplay post titles and snippets\u003C\/li\u003E\u003Cli\u003Edisplay post thumbnails, titles and snippets\u003C\/li\u003E\u003Cli\u003Edisplay related posts thumbnails, titles and post date (shows by default)\u003C\/li\u003E\u003Cli\u003Edisplay related posts thumbnails and titles\u003C\/li\u003E\u003Cli\u003Epost titles in front of thumbnails, instead of having them below the thumbnail\u003C\/li\u003E\u003Cli\u003Edisplay thumbnails only\u003C\/li\u003E\u003Cli\u003Esmall thumbnail with titles on the right and date below\u003C\/li\u003E\u003Cli\u003Esmall thumbnails with post titles and excerpts on the right\u003C\/li\u003E\u003C\/ol\u003E\u003Ch3\u003ECustomizing the Related Post Thumbnail Size \u0026amp; Style\u003C\/h3\u003EBy 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:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003EthumbnailSize: \u0026amp;quot;w\u003Cspan style=\"color: red;\"\u003E300\u003C\/span\u003E-h\u003Cspan style=\"color: red;\"\u003E200\u003C\/span\u003E-p-nu\u0026amp;quot;,\u003Cbr \/\u003EdefaultThumb: \u0026amp;quot;https:\/\/4.bp.blogspot.com\/-BLiit18tHXA\/V9gCeNNCXzI\/AAAAAAAALt8\/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB\/w\u003Cspan style=\"color: red;\"\u003E300\u003C\/span\u003E-h\u003Cspan style=\"color: red;\"\u003E200\u003C\/span\u003E-c\/no-thumb.png\u0026amp;quot;,\u003C\/blockquote\u003ENote: '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.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you want thumbnails have rounded corners, change 'false' with 'true':\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003EroundThumbs:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E,\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003ECustomizing Related Titles \u0026amp; Excerpts \u003C\/h3\u003ETo shorten the post title, change \u003Cspan style=\"color: red;\"\u003Eauto\u003C\/span\u003E with the number of characters to show:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003EtitleLength: \u0026amp;quot;\u003Cspan style=\"color: red;\"\u003Eauto\u003C\/span\u003E\u0026amp;quot;,\u003C\/blockquote\u003E\u003Cbr \/\u003ETo reduce or add more characters to the snippets, change the \"45\" value:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003EsnippetLength: \u003Cspan style=\"color: red;\"\u003E45\u003C\/span\u003E,\u003C\/blockquote\u003E\u003Cbr \/\u003EIf you want to center text (title and summary), change 'false' to 'true':\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003EcenterText:\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E,\u003C\/blockquote\u003E\u003Cbr \/\u003ETo open links in a new tab when visitors click on a related post, change \"false\" to \"true\":\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003EopenNewTab: \u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E\u003C\/blockquote\u003E\u003Cbr \/\u003EOnce 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch4\u003EFinal words\u003C\/h4\u003EThat'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."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/6590088027126792597\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/09\/new-related-posts-widget-for-blogger.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6590088027126792597"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6590088027126792597"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2016\/09\/new-related-posts-widget-for-blogger.html","title":"Customizable Related Posts Widget for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-klS-ZV7SIf0\/V9gOKOH_iwI\/AAAAAAAALuk\/DEUdh6GKbOY8o2y_PJY0enmUYa-LysK2ACLcB\/s72-c\/related-posts-widget-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-3559949399357296965"},"published":{"$t":"2014-02-10T15:03:00.001-08:00"},"updated":{"$t":"2016-10-31T10:07:46.186-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"related posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"How to customize or edit the linkwithin related post widget"},"content":{"type":"html","$t":"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.\u003Cbr \/\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-mYbt0wBul9I\/UvlaqXnEDpI\/AAAAAAAAGE4\/F1y8tm660Jg\/s1600\/customize-linkwithin-widget-blogger-thumbnails-background.png\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EThis is what we will do with this gadget: \u003Cul\u003E\u003Cli\u003EChange the location of the gadget;\u003C\/li\u003E\u003Cli\u003ERemove the LinkWithin link;\u003C\/li\u003E\u003Cli\u003EChange the \"You might also like\" title with any other text;\u003C\/li\u003E\u003Cli\u003EAdd rounded borders to images;\u003C\/li\u003E\u003Cli\u003ERemove the border that separates posts;\u003C\/li\u003E\u003Cli\u003EAdd a background color;\u003C\/li\u003E\u003Cli\u003EChange the background color on mouse over;\u003C\/li\u003E\u003Cli\u003EChange the post titles color and font\u003C\/li\u003E\u003C\/ul\u003E\u003Ch3\u003EAdding the LinkWithin gadget to Blogger\u003C\/h3\u003EFirst of all we need to install the LinkWithin gadget. For this, we have to go to the \u003Ca href=\"http:\/\/www.linkwithin.com\/\" rel=\"nofollow\" target=\"_blank\"\u003ELinkWithin homepage\u003C\/a\u003E and type in the required information:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"linkwithin gadget, related posts widget, blogger widgets\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-yHHcUYZaV0g\/UvlPvHc7FRI\/AAAAAAAAGEc\/vlqNV_wJ-Cc\/s1600\/customize-linkwithin-gadget-for-blogger.png\" height=\"270\" title=\"how to customize or edit the linkwithin related post widget\" width=\"400\" \/\u003E\u003C\/div\u003EAlthough it provides the option to choose Blogger as a platform, we will select \u003Cb\u003EOther\u003C\/b\u003E 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.\u003Cbr \/\u003E\u003Cbr \/\u003EBy clicking on the \"\u003Cb\u003EGet widget!\u003C\/b\u003E\" button, we'll be given the code that we need use it. It should look something like this:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script\u0026gt;\u003Cbr \/\u003Evar linkwithin_site_id = XXXXXXX;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/www.linkwithin.com\/widget.js\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"http:\/\/www.linkwithin.com\/\"\u0026gt;\u0026lt;img src=\"http:\/\/www.linkwithin.com\/pixel.png\" alt=\"Related Posts Plugin for WordPress, Blogger...\" style=\"border: 0\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u003C\/blockquote\u003EThat's the basic code we need to copy. Now login into your \u003Ca href=\"http:\/\/blogger.com\/\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger account\u003C\/a\u003E \u0026gt; select your blog to where you want to add the LinkWithin gadget and go to \"Template\" \u0026gt; click on the \"Edit HTML\" button:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-rP7Xdxqm5W0\/UaJpKUUs7pI\/AAAAAAAADfc\/NP9sNObx2l4\/s1600\/blogger_blogspot_template_edit_html_tutorial.png\" height=\"256\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003ECick anywhere inside the code area and press the CTRL + F keys to search for the following line:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class='post-footer'\u0026gt;\u003C\/blockquote\u003EJust above this line, paste the LinkWithin code.\u003Cbr \/\u003E\u003Cbr \/\u003EBy doing so you already have the LinkWithin gadget on your blog and the result will be like this:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"linkwithin gadget, related posts widget, blogger widgets\" border=\"0\" src=\"https:\/\/1.bp.blogspot.com\/-d7NM5Nqvlb0\/UvlRPellG5I\/AAAAAAAAGEo\/7ZfpukZr53c\/s1600\/linkwithin-related-posts-gadget-for-blogger.png\" height=\"186\" title=\"how to customize or edit the linkwithin related post gadget\" width=\"400\" \/\u003E\u003C\/div\u003ENote: If you would like to display it only in post pages, you can enclose the code using a \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/hideshow-widgetsgadgets-in.html\"\u003EBlogger conditional tag\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EChange the LinkWithin gadget location\u003C\/h3\u003EBy default, this widget will always appear right at the end of your posts. In the \u003Ca href=\"http:\/\/www.linkwithin.com\/faq\" rel=\"nofollow\" target=\"_blank\"\u003ELinkWithin FAQ page\u003C\/a\u003E we can find solutions on how to fix this - simply add the code below where we want the widget to appear:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cb\u003E\u003Cspan style=\"color: #444444;\"\u003E\u0026lt;div class='linkwithin_div'\/\u0026gt;\u003C\/span\u003E\u003C\/b\u003E\u003C\/blockquote\u003EThis 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.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EReplacing the \"You might also like\" LinkWithin text\u003C\/h3\u003EBy default, the LinkWithin gadget shows the \"\u003Cb\u003EYou might also like\u003C\/b\u003E\" title but we can change the text to anything we want. Just add the line below in blue within the LinkWithin code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u003Cb\u003E\u003Cspan style=\"color: #444444;\"\u003E\u0026lt;div class='linkwithin_div'\/\u0026gt;\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E\u0026lt;script\u0026gt;\u003Cbr \/\u003Evar linkwithin_site_id = XXXXXXX;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u003Cspan style=\"color: blue;\"\u003E\u0026lt;script\u0026gt;linkwithin_text='\u003Cb\u003ERelated Posts:\u003C\/b\u003E'\u0026lt;\/script\u0026gt;\u003C\/span\u003E\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/www.linkwithin.com\/widget.js\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;a href=\"http:\/\/www.linkwithin.com\/\"\u0026gt;\u0026lt;img src=\"http:\/\/www.linkwithin.com\/pixel.png\" alt=\"Related Posts Plugin for WordPress, Blogger...\" style=\"border: 0\" \/\u0026gt;\u0026lt;\/a\u0026gt;\u003C\/blockquote\u003EAnd change the text - in this case, it will show \"\u003Cb\u003ERelated posts\u003C\/b\u003E\" instead of \"\u003Cb\u003EYou may also like these stories\u003C\/b\u003E\".\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EChanging the LinkWithin background color and thumbnails style\u003C\/h3\u003EWithin the template's code, search for the \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E tag and just above it, add the following CSS styling:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.linkwithin_div {\u003Cbr \/\u003Ebackground: #EEEEEE; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Background color for the related posts container *\/\u003C\/span\u003E\u003Cbr \/\u003Epadding: 0 10px;\u003Cbr \/\u003Eborder-top: 1px solid #DBDBDB;\u0026nbsp; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Top border for the related posts container *\/\u003C\/span\u003E\u003Cbr \/\u003Eborder-bottom: 1px solid #DBDBDB;\u0026nbsp; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Bottom border for the related posts container *\/\u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E.linkwithin_text {\u003Cbr \/\u003Efont-family: Cambria,Georgia,sans-serif;\u003Cbr \/\u003Efont-size:18px;\u003Cspan style=\"color: #6aa84f;\"\u003E \/* Size for the related posts title *\/\u003C\/span\u003E\u003Cbr \/\u003Ecolor:#898989; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Color for the related posts title *\/\u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003Ea#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 {\u003Cbr \/\u003Edisplay:none;\u003Cbr \/\u003E}\u003Cbr \/\u003E.linkwithin_posts {\u003Cbr \/\u003Ewidth: 500px !important; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Width for the related posts container *\/\u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E.linkwithin_posts a {\u003Cbr \/\u003Eborder: 0 !important;\u003Cbr \/\u003Epadding-right: 10px !important;\u003Cbr \/\u003E}\u003Cbr \/\u003E.linkwithin_posts a:hover {\u003Cbr \/\u003Ebackground: #F5F5F5 !important; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Background color on mouseover *\/\u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E.linkwithin_img_0 {\u003Cbr \/\u003Ebackground: #F5F5F5;\u003Cbr \/\u003Eborder: 1px solid #C1C1C1;\u003Cbr \/\u003Epadding: 2px !important;\u003Cbr \/\u003Etransition:all .2s linear;\u003Cbr \/\u003E\u0026nbsp;-o-transition:all .5s linear;\u003Cbr \/\u003E-moz-transition:all .2s linear;\u003Cbr \/\u003E-webkit-transition:all .2s linear;\u003Cbr \/\u003E}\u003Cbr \/\u003E.linkwithin_img_0:hover {\u003Cbr \/\u003Ebackground: #ffffff;\u003Cbr \/\u003Epadding: 2px !important;\u003Cbr \/\u003Eopacity:.6;\u003Cbr \/\u003Efilter:alpha(opacity=60)\u003Cbr \/\u003E}\u0026nbsp; \u003Cbr \/\u003E.linkwithin_img_0 div, div.linkwithin_img_0,\u003Cbr \/\u003E.linkwithin_img_1 div, div.linkwithin_img_1,\u003Cbr \/\u003E.linkwithin_img_2 div, div.linkwithin_img_2,\u003Cbr \/\u003E.linkwithin_img_3 div, div.linkwithin_img_3,\u003Cbr \/\u003E.linkwithin_img_4 div, div.linkwithin_img_4,\u003Cbr \/\u003E.linkwithin_img_5 div, div.linkwithin_img_5,\u003Cbr \/\u003E.linkwithin_img_6 div, div.linkwithin_img_6,\u003Cbr \/\u003E.linkwithin_img_7 div, div.linkwithin_img_7,\u003Cbr \/\u003E.linkwithin_img_8 div, div.linkwithin_img_8,\u003Cbr \/\u003E.linkwithin_img_9 div, div.linkwithin_img_9,\u003Cbr \/\u003E.linkwithin_img_10 div, div.linkwithin_img_10,\u003Cbr \/\u003E.linkwithin_img_11 div, div.linkwithin_img_11,\u003Cbr \/\u003E.linkwithin_img_12 div, div.linkwithin_img_12,\u003Cbr \/\u003E.linkwithin_img_13 div, div.linkwithin_img_13,\u003Cbr \/\u003E.linkwithin_img_14 div, div.linkwithin_img_14,\u003Cbr \/\u003E.linkwithin_img_15 div, div.linkwithin_img_15,\u003Cbr \/\u003E.linkwithin_img_16 div, div.linkwithin_img_16,\u003Cbr \/\u003E.linkwithin_img_17 div, div.linkwithin_img_17,\u003Cbr \/\u003E.linkwithin_img_18 div, div.linkwithin_img_18,\u003Cbr \/\u003E.linkwithin_img_19 div, div.linkwithin_img_19,\u003Cbr \/\u003E.linkwithin_img_20 div, div.linkwithin_img_20 { \u003Cbr \/\u003E\u003Cspan style=\"color: #cc0000;\"\u003E-webkit-border-radius: 100px; \u003Cbr \/\u003E-moz-border-radius: 100px; \u003Cbr \/\u003Eborder-radius: 100px; \u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E.linkwithin_title {\u003Cbr \/\u003Ecolor: #242424 !important; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Color for titles *\/\u003C\/span\u003E\u003Cbr \/\u003Efont-family: Cambria,Georgia,sans-serif;\u003Cbr \/\u003Efont-size: 12px !important; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Font size of posts titles *\/\u003C\/span\u003E\u003Cbr \/\u003Eline-height: 24px !important;\u003Cbr \/\u003Etext-align:center;\u003Cbr \/\u003Etext-decoration: none;\u003Cbr \/\u003E}\u003Cbr \/\u003E.linkwithin_title:hover {\u003Cbr \/\u003Ecolor: #000 !important; \u003Cspan style=\"color: #6aa84f;\"\u003E\/* Color of posts titles on mouseover *\/\u003C\/span\u003E\u003Cbr \/\u003E}\u003C\/blockquote\u003EAfter adding this CSS, the LinkWithin gadget will look like this:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"linkwithin gadget, related posts widget, blogger widgets\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-JMuLmDB19Yw\/UvlOOvuOhUI\/AAAAAAAAGEQ\/0IAtMq3ss_A\/s1600\/customize-linkwithin-widget-blogger-thumbnails-background.png\" height=\"188\" title=\"how to customize or edit the linkwithin related posts widget\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EIf 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.\u003Cbr \/\u003E\u003Cbr \/\u003EAfter you've made the changes, click on the \"Save Template\" button. So this is how we can \u003Cb\u003Ecustomize the LinkWithin related posts widget\u003C\/b\u003E. Enjoy!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/3559949399357296965\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/02\/customize-linkwithin-gadget-related-posts-gadget.html#comment-form","title":"29 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3559949399357296965"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3559949399357296965"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/02\/customize-linkwithin-gadget-related-posts-gadget.html","title":"How to customize or edit the linkwithin related post widget"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/4.bp.blogspot.com\/-mYbt0wBul9I\/UvlaqXnEDpI\/AAAAAAAAGE4\/F1y8tm660Jg\/s72-c\/customize-linkwithin-widget-blogger-thumbnails-background.png","height":"72","width":"72"},"thr$total":{"$t":"29"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-6879184601087923597"},"published":{"$t":"2013-03-31T08:03:00.003-07:00"},"updated":{"$t":"2016-05-16T07:01:56.058-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"how to"},{"scheme":"http://www.blogger.com/atom/ns#","term":"related posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Related Posts Widget with Thumbnails and Summary for Blogger"},"content":{"type":"html","$t":"There are several tutorials quite old in which you have seen different methods for displaying related posts in Blogger like the \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/how-to-add-related-posts-widget-to.html\"\u003E\u003Cspan style=\"color: blue;\"\u003Erelated posts widget with thumbnails\u003C\/span\u003E\u003C\/a\u003E and \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/simple-related-posts-widget-for-blogger.html\"\u003E\u003Cspan style=\"color: blue;\"\u003Esimple related posts with post titles only\u003C\/span\u003E\u003C\/a\u003E. 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.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you want to get an idea of how it looks like, please visit \u003Ca href=\"http:\/\/demo-blog761.blogspot.com\/2014\/07\/lorem-ipsum-dolor-sit-amet-consectetur_3053.html\" rel=\"nofollow\" style=\"color: blue;\" target=\"_blank\"\u003Ethis demo blog\u003C\/a\u003E.\u003Cbr \/\u003E\u003Cbr \/\u003ENow let's see \u003Cb\u003Ehow to add the related posts widget with thumbnails and summary in Blogger\u003C\/b\u003E:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EAdding Related Posts Widget with Snippets to Blogger Posts\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"related posts widget with thumbnails and summaries\" border=\"0\" height=\"256\" src=\"https:\/\/1.bp.blogspot.com\/-OdZsO5Tmghg\/VznNX_QII-I\/AAAAAAAALjY\/dCqGdOj7RZsRC7i257RPuoQFi5cx2vQsQCLcB\/s640\/related-posts-widget-with-post-thumbnails-summary-for-blogger.png\" title=\"Related Posts Widget with Thumbnails and Summary for Blogger\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EStep 1. From your \u003Ca href=\"https:\/\/www.blogger.com\/home\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger Dashboard\u003C\/a\u003E, go to \u003Cb\u003ETemplate\u003C\/b\u003E and click on \u003Cb\u003EEdit HTML\u003C\/b\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"137\" src=\"https:\/\/1.bp.blogspot.com\/-9PJxe92QMdU\/UTOPNGadxaI\/AAAAAAAAC5Y\/FvfeI-b1ymo\/s1600\/blogger-template-edit-html.png\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EStep 2. Click anywhere inside the code area and then press CTRL + F to open the Blogger search box\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"153\" src=\"https:\/\/4.bp.blogspot.com\/-pNjafQlLYFU\/U69TmT3-feI\/AAAAAAAAJZQ\/BRdO0NS6vvc\/s1600\/open-blogger-search-box-ctrl%252Bf.png\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003EStep 3. Type or paste this tag inside the search box and hit enter to find it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003EAfter you found it, paste this script just above it:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Evar relatedTitles = new Array();\u003Cbr \/\u003Evar relatedUrls = new Array();\u003Cbr \/\u003Evar relatedpSummary = new Array();\u003Cbr \/\u003Evar relatedThumb = new Array();\u003Cbr \/\u003Evar relatedTitlesNum = 0;\u003Cbr \/\u003Evar relatedPostsNum = \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E4\u003C\/b\u003E\u003C\/span\u003E; \/\/ number of entries to be shown\u003Cbr \/\u003Evar relatedmaxnum = \u003Cspan style=\"color: #6aa84f;\"\u003E\u003Cb\u003E75\u003C\/b\u003E\u003C\/span\u003E; \/\/ the number of characters of summary\u003Cbr \/\u003Evar relatednoimage = \"\u003Cspan style=\"color: blue;\"\u003Ehttps:\/\/3.bp.blogspot.com\/-PpjfsStySz0\/UF91FE7rxfI\/AAAAAAAACl8\/092MmUHSFQ0\/s1600\/no_image.jpg\u003C\/span\u003E\"; \/\/ default picture for entries with no image\u003Cbr \/\u003Efunction readpostlabels(e){for(var t,r,l,a=0;a\u0026lt;e.feed.entry.length\u0026amp;\u0026amp;(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\u0026amp;\u0026amp;(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\u0026lt;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\u0026lt;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\u0026lt;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\u0026lt;relatedPostsNum\u0026amp;\u0026amp;(relatedUrls[o]==f||(u=\"\u0026lt;div class='relatedsumposts'\u0026gt;\",u+=\"\u0026lt;a href='\"+relatedUrls[o]+\"' title='\"+relatedTitles[o]+\"'\u0026gt;\u0026lt;img src='\"+relatedThumb[o]+\"' \/\u0026gt;\u0026lt;\/a\u0026gt;\",u+=\"\u0026lt;h6\u0026gt;\u0026lt;a href='\"+relatedUrls[o]+\"' target='_self'\u0026gt;\"+relatedTitles[o]+\"\u0026lt;\/a\u0026gt;\u0026lt;\/h6\u0026gt;\",u+=\"\u0026lt;p\u0026gt;\"+relatedpSummary[o]+\" ... \u0026lt;\/p\u0026gt;\",u+=\"\u0026lt;\/div\u0026gt;\",document.write(u),h++,h!=relatedPostsNum))\u0026amp;\u0026amp;(o\u0026lt;relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split(\"\u0026lt;\"),l=0;l\u0026lt;r.length;l++)-1!=r[l].indexOf(\"\u0026gt;\")\u0026amp;\u0026amp;(r[l]=r[l].substring(r[l].indexOf(\"\u0026gt;\")+1,r[l].length));return r=r.join(\"\"),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r\u0026lt;e.length;r++)if(e[r]==t)return!0;return!1}\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003ENote:\u003Cbr \/\u003E- To change the number of posts that are being displayed, modify \u003Cspan style=\"color: red;\"\u003Ethe value in red (4)\u003C\/span\u003E\u003Cbr \/\u003E- To change the number of characters to be shown in posts summary, modify\u003Cspan style=\"color: #6aa84f;\"\u003E the value in green (75)\u003C\/span\u003E\u003Cbr \/\u003E- To change the default pic for posts with no images, add your URL instead of the one \u003Cspan style=\"color: blue;\"\u003Emarked in blue \u003C\/span\u003E\u003Cbr \/\u003E Step 4. Now that we added the script, we will need to add the CSS style. Just paste the following code above the same \u003Cb\u003E\u0026lt;\/head\u0026gt;\u003C\/b\u003E tag:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style\u0026gt;\u003Cbr \/\u003E.relatedsumposts {\u003Cbr \/\u003Epadding: 0px 10px;\u003Cbr \/\u003Etext-align: center;\u003Cbr \/\u003E\/* width of the related posts area *\/\u003Cbr \/\u003Ewidth: \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003E120px\u003C\/span\u003E\u003C\/b\u003E;\u003Cbr \/\u003Efloat:left;margin-bottom:15px;\u003Cbr \/\u003Eborder-right: 1px dotted #E5E5E5;\u003Cbr \/\u003Edisplay: inline-block;\u003Cbr \/\u003E}\u003Cbr \/\u003E.relatedsumposts h6 {\u003Cbr \/\u003Emargin: 5px 0;\u003Cbr \/\u003E}\u003Cbr \/\u003E.relatedsumposts h6 a {\u003Cbr \/\u003E\/* link properties *\/\u003Cbr \/\u003Ecolor: \u003Cspan style=\"color: blue;\"\u003E#linkcolor\u003C\/span\u003E;\u003Cbr \/\u003Etext-transform: uppercase;\u003Cbr \/\u003Efont-size:12px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.relatedsumposts img {\u003Cbr \/\u003E\/* thumbnail properties *\/\u003Cbr \/\u003Eheight: \u003Cb\u003E\u003Cspan style=\"color: #674ea7;\"\u003E82px\u003C\/span\u003E\u003C\/b\u003E;\u003Cbr \/\u003Ewidth: \u003Cspan style=\"color: #674ea7;\"\u003E\u003Cb\u003E82px\u003C\/b\u003E\u003C\/span\u003E;\u003Cbr \/\u003E\u003Cspan style=\"color: orange;\"\u003E-webkit-border-radius: 50%;\u003Cbr \/\u003E-moz-border-radius: 50%;\u003Cbr \/\u003Eborder-radius: 50%;\u003C\/span\u003E\u003Cbr \/\u003E}\u003Cbr \/\u003E.relatedsumposts p {\u003Cbr \/\u003E\/* summary properties *\/\u003Cbr \/\u003Eborder-top: 1px dotted #E5E5E5;\u003Cbr \/\u003Eborder-bottom: 1px dotted #E5E5E5;\u003Cbr \/\u003Ecolor: \u003Cspan style=\"color: magenta;\"\u003E#summarycolor\u003C\/span\u003E;\u003Cbr \/\u003Efont-size: 10px;\u003Cbr \/\u003Eheight: 4em;\u003Cbr \/\u003Eline-height: 1;\u003Cbr \/\u003Emargin: 5px 0 0;\u003Cbr \/\u003Epadding: 5px 0 15px 0;\u003Cbr \/\u003E}\u003Cbr \/\u003E#relatedpostssum {\u003Cbr \/\u003Ewidth: 100%;\u003Cbr \/\u003E}\u003Cbr \/\u003E.relatedpoststitle {\u003Cbr \/\u003Efont-size: 19px;\u003Cbr \/\u003Emargin-bottom:15px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003ECustomizing the Related Posts Widget:\u003C\/h3\u003E- Modify the value in red  (\u003Cspan style=\"color: red;\"\u003E120px\u003C\/span\u003E) to adjust the width of the widget area\u003Cbr \/\u003E- Replace \u003Cspan style=\"color: blue;\"\u003E#linkcolor\u003C\/span\u003E with the hex value of your color to change the color of post titles\u003Cbr \/\u003E- If you want to change the size of thumbnails, modify the values marked in violet \u003Cspan style=\"color: #674ea7;\"\u003E(\u003Cb\u003E82px\u003C\/b\u003E)\u003C\/span\u003E \u003Cbr \/\u003E- To determine the border roundness, modify the values in orange \u003Cspan style=\"color: #e69138;\"\u003E(50%)\u003C\/span\u003E\u003Cbr \/\u003E- To change the color of the post snippet, change \u003Cspan style=\"color: magenta;\"\u003E#summarycolor\u003C\/span\u003E with color hex value\u003Cbr \/\u003E\u003Cbr \/\u003EStep 5. Next, search (CTRL + F) for the following code snippet:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:includable id='postQuickEdit' var='post'\u0026gt;\u003C\/blockquote\u003EWhen you find it, click the sideways arrow to expand the code and scroll down until you find \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/b:includable\u0026gt;\u003C\/span\u003E - see the screenshot for more help:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cimg border=\"0\" height=\"212\" src=\"https:\/\/3.bp.blogspot.com\/-mHLx2gzbK_w\/U2080khO0lI\/AAAAAAAAJBA\/W_pLHwDKUUw\/s640\/how-to-add-related-posts-widget-to-blogger.png\" width=\"640\" \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EStep 6. Just ABOVE the \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/b:includable\u0026gt;\u003C\/span\u003E tag, add the following html code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;!-- Related Posts with Thumbnails Code Start--\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:loop values='data:post.labels' var='label'\u0026gt;\u003Cbr \/\u003E\u0026lt;b:if cond='data:label.isLast != \u0026amp;quot;true\u0026amp;quot;'\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;script expr:src='\u0026amp;quot;\/feeds\/posts\/default\/-\/\u0026amp;quot; + data:label.name + \u0026amp;quot;?alt=json-in-script\u0026amp;amp;callback=readpostlabels\u0026amp;amp;max-results=50\u0026amp;quot;' type='text\/javascript'\/\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026lt;div class='post-footer-line post-footer-line-4'\u0026gt;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp; \u0026lt;div class='relatedpoststitle'\u0026gt;RELATED POSTS\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;div id='relatedpostssum'\u0026gt;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;script type='text\/javascript'\u0026gt;showrelated();\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026nbsp;\u0026nbsp;\u0026nbsp; \u0026lt;div style='clear:both;'\/\u0026gt;\u003Cbr \/\u003E\u0026nbsp; \u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;\/b:if\u0026gt;\u003Cbr \/\u003E\u0026lt;!-- Related Posts with Thumbnails Code End--\u0026gt;\u003C\/blockquote\u003E\u003Ctable align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"tr-caption-container\" style=\"margin-left: auto; margin-right: auto; text-align: center;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"text-align: center;\"\u003E\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-p38Io1c3L1U\/UXql83dX2iI\/AAAAAAAADUY\/DumkaB5ohQU\/s1600\/4-26-2013+7-02-56+PM.png\" style=\"margin-left: auto; margin-right: auto;\"\u003E\u003Cimg border=\"0\" height=\"153\" src=\"https:\/\/1.bp.blogspot.com\/-p38Io1c3L1U\/UXql83dX2iI\/AAAAAAAADUY\/DumkaB5ohQU\/s640\/4-26-2013+7-02-56+PM.png\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/td\u003E\u003C\/tr\u003E\u003Ctr\u003E\u003Ctd class=\"tr-caption\" style=\"text-align: center;\"\u003EScreenshot\u003C\/td\u003E\u003C\/tr\u003E\u003C\/tbody\u003E\u003C\/table\u003E\u003Cbr \/\u003EStep 7. Click on the \"Save Template\" button to save the changes and you're done!\u003Cbr \/\u003E\u003Cbr \/\u003ENote: 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. "},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/6879184601087923597\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/03\/related-posts-widget-with-thumbnails.html#comment-form","title":"108 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6879184601087923597"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/6879184601087923597"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/03\/related-posts-widget-with-thumbnails.html","title":"Related Posts Widget with Thumbnails and Summary for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-OdZsO5Tmghg\/VznNX_QII-I\/AAAAAAAALjY\/dCqGdOj7RZsRC7i257RPuoQFi5cx2vQsQCLcB\/s72-c\/related-posts-widget-with-post-thumbnails-summary-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"108"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-4276490130078469104"},"published":{"$t":"2012-04-05T07:53:00.002-07:00"},"updated":{"$t":"2016-10-27T19:50:29.994-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"related posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"A Simple Related Posts Widget For Blogger"},"content":{"type":"html","$t":"In the last tutorial, we wrote about \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/03\/how-to-add-related-posts-widget-to.html\" target=\"_blank\"\u003Ehow to add the Related Posts widget with thumbnails in Blogger\u003C\/a\u003E to display related posts from the same category based on the given labels, which would appear just at the end of your blog posts. However, maybe some of you may prefer a simple version of this related posts widget to display only the posts titles.\u003Cbr \/\u003E\u003Cbr \/\u003EIf you want to add it, follow the next steps below:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"simple related posts widget\" border=\"0\" src=\"https:\/\/3.bp.blogspot.com\/-xWsAasUTMuc\/U9rIlC_EmtI\/AAAAAAAAJxk\/EVU6RgBnrQU\/s1600\/simple-related-posts-titles-for-blogger.png\" title=\"Simple Related Posts Widget For Blogger\/Blogspot\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003EHow to add Related Posts Widget to Blogger\u003C\/h2\u003EStep 1. Go to 'Template' and hit the 'Edit HTML' button.\u003Cbr \/\u003E\u003Cbr \/\u003EStep 2. Once the template editor opens, click anywhere inside the code area and press the CTRL + F keys, then type the following tag inside the search box (hit Enter to find it):\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003EStep 3. Just above the \u0026lt;\/head\u0026gt; tag, paste the following CSS code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u0026lt;style type='text\/css'\u0026gt;\u003Cbr \/\u003E#related-posts {\u003Cbr \/\u003Emargin: 15px 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E#related-posts h2 {\u003Cbr \/\u003Efont-size: \u003Cspan style=\"color: red;\"\u003E27\u003C\/span\u003Epx;\u003Cbr \/\u003Efont-weight: normal;\u003Cbr \/\u003Ecolor:\u003Cspan style=\"color: red;\"\u003E #fff\u003C\/span\u003E;\u003Cbr \/\u003Etext-shadow: 1px 0px 2px #888;\u003Cbr \/\u003Emargin-bottom: 0.75em;\u003Cbr \/\u003E}\u003Cbr \/\u003E#related-posts a {\u003Cbr \/\u003Efont-size: 13px;\u003Cbr \/\u003Ecolor: \u003Cspan style=\"color: #6aa84f;\"\u003E#949494\u003C\/span\u003E;\u003Cbr \/\u003Etext-transform: capitalize;\u003Cbr \/\u003Eborder-bottom:1px dotted #E2E2E2;\u003Cbr \/\u003Edisplay:block;\u003Cbr \/\u003Epadding:13px;\u003Cbr \/\u003Etext-decoration: none;\u003Cbr \/\u003E}\u003Cbr \/\u003E#related-posts a:hover {\u003Cbr \/\u003Ecolor: #555;\u003Cbr \/\u003Ebackground: \u003Cspan style=\"color: red;\"\u003E#F4F4F4\u003C\/span\u003E;\u003Cbr \/\u003E}\u003Cbr \/\u003E#related-posts ul {\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003Elist-style-type: none;\u003Cbr \/\u003Ebackground: \u003Cspan style=\"color: red;\"\u003E#f9f9f9\u003C\/span\u003E;\u003Cbr \/\u003Eborder-left: 5px solid #f2f2f2;\u003Cbr \/\u003E}\u003Cbr \/\u003E#related-posts li {\u003Cbr \/\u003Epadding: 0px;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003Evar relatedpoststitle=\u0026amp;quot;Related Posts\u0026amp;quot;;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Evar relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i\u0026lt;json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k\u0026lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i\u0026lt;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]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j\u0026lt;a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i\u0026lt;relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length\u0026gt;1){document.write('\u0026lt;h2\u0026gt;'+relatedpoststitle+'\u0026lt;\/h2\u0026gt;')}document.write('\u0026lt;ul\u0026gt;');while(i\u0026lt;relatedTitles.length\u0026amp;\u0026amp;i\u0026lt;20\u0026amp;\u0026amp;i\u0026lt;maxresults){document.write('\u0026lt;li\u0026gt;\u0026lt;a href=\"'+relatedUrls[r]+'\"\u0026gt;'+relatedTitles[r]+'\u0026lt;\/a\u0026gt;\u0026lt;\/li\u0026gt;');if(r\u0026lt;relatedTitles.length-1){r++}else{r=0}i++}document.write('\u0026lt;\/ul\u0026gt;');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u0026lt;\/b:if\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003ECustomizing Simple Related Posts widget for Blogger\u003C\/h3\u003E- To change the size (27px) and color (#fff) of 'Related Posts' title, change the values in red.\u003Cbr \/\u003E- For the related post link color, replace the #949494 value in green.\u003Cbr \/\u003E- To change the background color, replace the #f9f9f9 hex color in red.\u003Cbr \/\u003E- For the background color on mouseover, change the #F4F4F4 value in red.\u003Cbr \/\u003E\u003Cbr \/\u003ENote: You can use this \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/02\/color-code-generator.html\" target=\"_blank\"\u003EColor code generator\u003C\/a\u003E to pick your favourite color.\u003Cbr \/\u003E\u003Cbr \/\u003EStep 4. Now that we added the script to make the related posts work, we need to add the code that will display it at the end of our blog posts. Find the line below:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:includable id='postQuickEdit' var='post'\u0026gt;\u003C\/blockquote\u003EStep 5. Once you found it, you need to click the sideways arrow that will expand the code. Scroll down until you find the \u0026lt;\/b:includable\u0026gt; tag - see the screenshot for more info:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cimg border=\"0\" height=\"212\" src=\"https:\/\/3.bp.blogspot.com\/-mHLx2gzbK_w\/U2080khO0lI\/AAAAAAAAJBA\/W_pLHwDKUUw\/s640\/how-to-add-related-posts-widget-to-blogger.png\" width=\"640\" \/\u003E\u003Cbr \/\u003E\u003Cbr \/\u003EStep 6. Just above the \u0026lt;\/b:includable\u0026gt; tag, paste the code below:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt;\u0026lt;div id='related-posts'\u0026gt;\u0026nbsp;\u0026lt;b:loop values='data:post.labels' var='label'\u0026gt; \u0026lt;b:if cond='data:label.isLast != \u0026amp;quot;true\u0026amp;quot;'\u0026gt; \u0026lt;\/b:if\u0026gt; \u0026lt;b:if cond='data:blog.pageType == \u0026amp;quot;item\u0026amp;quot;'\u0026gt; \u0026lt;script expr:src='\u0026amp;quot;\/feeds\/posts\/default\/-\/\u0026amp;quot; + data:label.name + \u0026amp;quot;?alt=json-in-script\u0026amp;amp;callback=related_results_labels\u0026amp;amp;max-results=6\u0026amp;quot;' type='text\/javascript'\/\u0026gt;\u0026lt;\/b:if\u0026gt;\u0026lt;\/b:loop\u0026gt;\u003Cbr \/\u003E\u0026lt;script type='text\/javascript'\u0026gt; var\u003Cb\u003E maxresults=5\u003C\/b\u003E; removeRelatedDuplicates(); printRelatedLabels(\u0026amp;quot;\u0026lt;data:post.url\/\u0026gt;\u0026amp;quot;); \u0026lt;\/script\u0026gt;\u0026lt;a style=\"font-size: 9px; color: #CECECE; float: right;\" href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/simple-related-posts-widget-for-blogger.html\" rel=\"nofollow\" \u0026gt;Simple Related Posts Widget\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;\/b:if\u0026gt; \u003C\/blockquote\u003ENote: To change\u0026nbsp;the number of maximum related posts for each label,  change the \"5\" value from \u003Cb\u003Emax-results=5\u003C\/b\u003E \u003Cbr \/\u003E\u003Cbr \/\u003EStep 7. Save the changes by clicking the 'Save Template' button and visit your blog. Now, go to any of your posts to see this simple related posts widget for Blogger in action."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/4276490130078469104\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2012\/04\/simple-related-posts-widget-for-blogger.html#comment-form","title":"48 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4276490130078469104"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/4276490130078469104"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2012\/04\/simple-related-posts-widget-for-blogger.html","title":"A Simple Related Posts Widget For Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/3.bp.blogspot.com\/-xWsAasUTMuc\/U9rIlC_EmtI\/AAAAAAAAJxk\/EVU6RgBnrQU\/s72-c\/simple-related-posts-titles-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"48"}}]}});