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 

1 Comments:

saya ibu lilis posisi sekarang di malaysia
bekerja sebagai pembantu gaji tidak seberapa
setiap gajian selalu mengirimkan orang tua
sebenarnya pengen pulang tapi gak punya uang
sempat saya putus asah dan secara kebetulan
saya buka internet ada seseorng berkomentar
tentang MBAH LIMPAH katanya perna di bantu
melalui jalan togel saya coba2 menghubungi
karna di malaysia ada pemasangan
jadi saya memberanikan diri karna sudah bingun
saya minta angka sama MBAH LIMPAH
angka yang di berikan 6D TOTO tembus 100%
terima kasih banyak MBAH
kemarin saya bingun syukur sekarang sudah senang
dan rencana mau pulang ke indo untuk buka usaha
bagi penggemar togel ingin merasakan kemenangan
terutama yang punya masalah hutang lama belum lunas
jangan putus asah HUBUNGI MBAH LIMPAH
DI NOMOR HP: 085~312~407~999
tak ada salahnya anda coba
karna angka ritual MBAH tidak perna meleset
saya jamin MBAH LIMPAH tidak akan mengecewakan..

Reply