Membuat Related Posts Di Sidebar Blogger

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/28/2015

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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'>

          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

      </b:loop></b:if>];var relatedPostConfig={widgetStyle:3,callBack:function(){if(window.addEventListener){window.addEventListener(&quot;DOMContentLoaded&quot;,insertRelatedPostMarkupToSidebar,false);window.addEventListener(&quot;load&quot;,insertRelatedPostMarkupToSidebar,false)}else{if(window.attachEvent){window.attachEvent(&quot;onload&quot;,insertRelatedPostMarkupToSidebar)}else{window.onload=insertRelatedPostMarkupToSidebar}}}};

</script>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

  <data:post.body/>

</b:if>

      <div class='clear'/> <!-- clear for photos floats -->

    </div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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)+"&hellip;":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)+"&hellip;":"";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>

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

    <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 != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content' id='related'>

    <data:content/>

  </div>

</b:includable>

    </b:widget>

<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 != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content' id='related'>

    <data:content/>

  </div>

</b:includable>

    </b:widget>

  </b:section>

</div>