Make Related Posts On Blogger Sidebar
Updated on April 07, 2016
Actually this is a move widgets related posts are usually always under the posts to the blog sidebar. But we will not touch gadget sidebar in layout / layout, only do this work in the edit HTML.
And related posts that we will use is related posts from DTE . Author: Adhy Suriady
And related posts that we will use is related posts from DTE . Author: Adhy Suriady
CSS code
Please use the css code below so related posts are not lined up to the side but downwards. And if you want to modify zoom to fit the theme of the blog, please modif on this css..related-bottomposts,.related-post h4 {display:none}
.related-post{margin:5% 5% 0;padding:0;font-family:'Open Sans',sans-serif;text-align:left;width:100%;position:relative;color:#000}
.related-post a{font-weight:600;color:#000;font-size:16px!important;}
.related-post a:hover{color:red}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0!important;list-style:none;word-wrap:break-word;overflow:hidden}
.related-post-style-3 .related-post-item{display:block;width:90%;max-width:300px;height:auto;padding:150px 0 10px;margin-bottom:20px!important}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0 0 5px;width:99%;height:140px;max-width:none;max-height:none;background-color:transparent;padding:0;transition:all 400ms ease-in-out;border:1px solid #ddd}
.related-post-style-3 .related-post-item-thumbnail:hover{opacity:.7}
.related-post-style-3 .related-post-item:focus,.related-post-style-3 .related-post-item:active{outline:0}
HTML code
Then please copy the code below.<b:if cond='data:blog.pageType == "item"'>And store the code above or below the following code that looks like this.
<div class='related-bottomposts'>
<div class='related-post' id='related-post'/>
</div>
<script type='text/javascript'>
var labelArray=[<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];var relatedPostConfig={widgetStyle:3,callBack:function(){if(window.addEventListener){window.addEventListener("DOMContentLoaded",insertRelatedPostMarkupToSidebar,false);window.addEventListener("load",insertRelatedPostMarkupToSidebar,false)}else{if(window.attachEvent){window.attachEvent("onload",insertRelatedPostMarkupToSidebar)}else{window.onload=insertRelatedPostMarkupToSidebar}}}};
</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<div class='clear'/> <!-- clear for photos floats -->
</div>
Code Javascript
Save the code below the above code </body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function insertRelatedPostMarkupToSidebar(){var e=document.getElementById("related"),t=document.getElementById("related-post");if(e)e.insertBefore(t,e.firstChild)};
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.kompiajaib.com/",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:300,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-titleimg" href="'+v+'"'+b+' title="'+t+'"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>
Please replace the code http://www.kompiajaib.com/ with the URL of your blog and please specify the number of related posts you want displayed in the following code numPosts: 7
Update : You can use above code or use new code (because DTE has updated code):
Update : You can use above code or use new code (because DTE has updated code):
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function insertRelatedPostMarkupToSidebar(){var e=document.getElementById("related"),t=document.getElementById("related-post");if(e)e.insertBefore(t,e.firstChild)};
var randomRelatedIndex,showRelatedPost;!function(e,t,a){var l={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:300,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:!1,moreText:"Baca Selengkapnya",callBack:function(){}};if("object"==typeof relatedPostConfig)for(var i in relatedPostConfig)l[i]=relatedPostConfig[i];l.homePage=l.homePage.replace(/\/?\?m=\d+|\/+$/,"");var s=function(e){var l=t.createElement("script");l.type="text/javascript",l.src=e,a.appendChild(l)},r=function(e,t){return Math.floor(Math.random()*(t-e+1))+e},n=function(e){var t,a,l=e.length;if(0===l)return!1;for(;--l;)t=Math.floor(Math.random()*(l+1)),a=e[l],e[l]=e[t],e[t]=a;return e},o="object"==typeof labelArray&&labelArray.length>0?"/-/"+n(labelArray)[0]:"",m=function(e){var t=e.feed.openSearch$totalResults.$t-l.numPosts,a=r(1,t>0?t:1);s(l.homePage+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+l.numPosts+"&callback=showRelatedPost")},d=function(e){var a,i,s,r,o,m=t.getElementById(l.containerId),d=n(e.feed.entry),h=l.widgetStyle,p=l.widgetTitle+'<ul class="related-post-style-'+h+'">',c=l.newTabLink?' target="_blank"':"",u='<span style="display:block;clear:both;"></span>';if(m){for(var g=d.length,b=0;b<l.numPosts&&b!==g;b++){i=d[b].title.$t,s="auto"!==l.titleLength&&l.titleLength<i.length?i.substring(0,l.titleLength)+"…":i,r="media$thumbnail"in d[b]&&l.thumbnailSize!==!1?d[b].media$thumbnail.url.replace(/\/s\d+(\-c)?\//,"/s"+l.thumbnailSize+"-c/"):l.noImage,o="summary"in d[b]&&l.summaryLength>0?d[b].summary.$t.replace(/<br *\/?>/gi," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,l.summaryLength)+"…":"";for(var A=0,f=d[b].link.length;f>A;A++)if("alternate"==d[b].link[A].rel){a=d[b].link[A].href;break}p+=2==h?'<li><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'" title="'+t+'"><a class="related-post-item-title" title="'+i+'" href="'+a+'"'+c+">"+s+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+o+'</span> <a href="'+a+'" class="related-post-item-more"'+c+">"+l.moreText+"</a></span>"+u+"</li>":3==h||4==h?'<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+a+'"'+c+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'" title="'+t+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+i+'" href="'+a+'"'+c+">"+s+"</a></div>"+u+"</li>":5==h?'<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+a+'" title="'+i+'"'+c+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'" title="'+t+'"><span class="related-post-item-tooltip">'+s+"</span></a>"+u+"</li>":6==h?'<li><a class="related-post-item-title" title="'+i+'" href="'+a+'"'+c+">"+s+'</a><div class="related-post-item-tooltip"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'" title="'+t+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+o+"</span></span>"+u+"</div></li>":'<li><a title="'+i+'" href="'+a+'"'+c+">"+s+"</a></li>"}m.innerHTML=p+="</ul>"+u,l.callBack(e)}};randomRelatedIndex=m,showRelatedPost=d,s(l.homePage+"/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>
Determining Target Gadget Sidebar
Now please read carefully at this step, because each blog sometimes has a sidebar tag is different, so you do not dwell on the sidebar tag on this code, but adapted to the template you use.
Please specify the place to bring up related posts, for example, wanted to bring sidebar And under popular posts, and example code sidebar with popular posts as below.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
...............
...............
...............
</b:includable>
</b:widget>
</b:section>
</div>
So please save the code under the right under the code </b:widget>
<b:widget id='HTML5' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content' id='related'>
<data:content/>
</div>
</b:includable>
</b:widget>
So it becomes as follows:
<div id='sidebar-wrapper'>
<b:section class='sidebar3' id='sidebar3' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
...............
...............
...............
</b:includable>
</b:widget>
<b:widget id='HTML5' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content' id='related'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Then please SAVE your template. If it turns out the template can not save because there is a double-id of HTML5 (note this code id='HTML5' gadget Related Posts), please replace the number 5 in order to avoid any double-id, for example, be id='HTML30' . The key is a code id='related' targets related posts by laying html javascript.
And if you want to change the title of his gadget, should not be changed through the layout / layout because it would be an error. But the fox in the edit HTML code is title='Related Posts' .