Membuat Artikel Terkait Di Sidebar Blogger

Sebenarnya ini adalah memindahkan widget Artikel Terkait  yang biasanya selalu berada di bawah postingan ke sidebar blog. Namun kita tidak akan menyentuh gadget sidebar di layout/tata letak, hanya melakukan pekerjaan ini di edit HTML.

Dan Artikel Terkait  yang akan digunakan adalah Artikel Terkait  dari DTE. Cara memindahkan related posts ke sidebar ini sebenarnya sudah diberitahukan oleh mas Taufik pada komentar di postingannya, namun tidak terperinci.

Setelah nyuksruk kesana-kemari dapatlah dari  kompiajaib.com yang lengkap dan  lebih mudah memasang  related posts ini pada sidebar blogger. Bagi yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.
Kode CSS

Silahkan gunakan kode css di bawah ini agar Artikel Terkait tidak berjejer ke samping tapi ke bawah. Dan jika Anda ingin memodif tampilannya agar sesuai dengan tema blog, silahkan modif pada css ini.

2.Copy / Paste kode di bawah ini dan letakan di atas kode ]]></b:skin>

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

2.Kode HTML

Kemudian silahkan copy kode di bawah ini.

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

Dan simpan kode di atas tadi di bawah kode berikut atau yang mirip seperti ini.

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

3.Kode Javascript

Simpan kode di bawah ini di atas kode </body>

<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.dangstars.blogspot.co.id/",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>

Silahkan ganti kode http://www.dangstars.blogspot.co.id/ dengan URL blog Anda dan silahkan tentukan jumlah related posts yang ingin ditampilkan pada kode berikut numPosts:7

4.Menentukan Target Gadget Sidebar

Nah silahkan simak dengan teliti pada langkah ini, karena tiap blog kadang-kadang memiliki tag sidebar yang berbeda-beda, jadi Anda jangan terpaku pada tag sidebar pada kode ini, namun sesuaikan dengan template yang anda gunakan.

Silahkan tentukan tempat untuk memunculkan related posts, misalnya And ingin memunculkan sidebarnya di bawah popular posts, dan misalnya kode sidebar dengan popular posts seperti di bawah ini.

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

Nah silahkan simpan kode di bawah ini tepat di bawah kode </b:widget> 

    <b:widget id='HTML15' 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>

Sehingga menjadi seperti berikut:

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

5.Selesai Kemudian silahkan SAVE template Anda.

Dan jika ingin merubah title gadget-nya, jangan dirubah melalui tata letak/layout karena akan error. Tapi rubah pada edit HTML pada kode ini title='Related Posts'.

Selamat mencoba

Dan widget artikel terkait ini  Ini tidak menggangu terhadap  Structured Data Testing Tool