Membuat Related Posts Di Sidebar Blogger

Membuat Related Posts Di Sidebar Blogger

Bola Hero Gawai

Membuat Related Posts Di Sidebar Blogger

Related Posts Di Sidebar Blogger
Sebenarnya ini adalah memindahkan widget related posts 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 related posts yang akan kita gunakan adalah related posts dari DTE. Cara memindahkan related posts ke sidebar ini sebenarnya sudah diberitahukan oleh mas Taufik pada komentar di postingannya, namun tidak terperinci.

Nah kali ini saya akan melengkapinya agar Anda 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 related posts tidak berjejer ke samping tapi ke bawah. Dan jika Anda ingin memodif tampilannya agar sesuai dengan tema blog, silahkan modif pada css ini.


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

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>

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

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

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

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>

Kemudian silahkan SAVE template Anda. Jika ternyata template tidak dapat di-save karena ada double id dari HTML5 (perhatikan kode ini id='HTML5' pada gadget Related Posts), silahkan ganti angka 5 dengan berapapun agar tidak terjadi double id, misalnya menjadi id='HTML30'. Kuncinya adalah kode id='related' sebagai target peletakan html related posts oleh javascript.

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×