Monday, July 28, 2014

Membuat artikel terkait bergambar di sidebar

Sebelumnya di blog ini saya sudah pernah membahas tentang membuat artikel terkait bergambar dibawah posting blog. Namun timbul pertanyaan, bagaimana kalau artikel terkait di letakkan di sidebar kiri atau kanan blog?
Setelah utak-atik template blog, maka membuat artikel terkait di sibebar dapat diterapkan dengan cara dibawah ini.

  • Login pada blogger.com dan pilih menu template disebelah kiri, lalu  klik edit html.
  • Letakkan kode dibawah ini diatas </head>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    .post{border-bottom:none !important;}
    #related_posts{}
    #relpost_img_sum{margin:0px; padding:0px;}
    #relpost_img_sum:hover{background:none}
    #relpost_img_sum ul{list-style-type:none; margin:0px; padding:0px;}
    #relpost_img_sum li{border-bottom:1px solid #d3d3d3; background:#fff; margin:0px 0px 5px 0px; padding:0px;  list-style:none;height:65px;overflow:hidden;}
    #relpost_img_sum .news-title{display:block;}
    #relpost_img_sum .news-text{display:block; font-size:80%; text-transform:none; color:#999999 !important;}
    #relpost_img_sum img{float:left; margin-right:5px; padding:0px; border:2px solid #d3d3d3 !important; width:55px; height:55px; background:#ffffff;}
    #relpost_img_sum img:hover{border:2px solid yellow !important;}
    </style>
    <script type='text/javascript'>//<![CDATA[
    var relnojudul = 0;
    var relmaxtampil = 15;
    var numchars = 200;
    var morelink = "";
    //]]></script>
    <script type='text/javascript'>//<![CDATA[
    function saringtags(e,t){var n=e.split("<");for(var r=0;r<n.length;r++){if(n[r].indexOf(">")!=-1){n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length)}}n=n.join("");n=n.substring(0,t-1);return n}function relpostimgcuplik(e){for(var t=0;t<e.feed.entry.length;t++){var n=e.feed.entry[t];reljudul[relnojudul]=n.title.$t;postcontent="";if("content"in n){postcontent=n.content.$t}else if("summary"in n){postcontent=n.summary.$t}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail"in n){postimg=n.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var r=0;r<n.link.length;r++){if(n.link[r].rel=="alternate"){relurls[relnojudul]=n.link[r].href;break}}relnojudul++}}function contains(e,t){for(var n=0;n<e.length;n++)if(e[n]==t)return true;return false}function artikelterkait(){var e=new Array(0);var t=new Array(0);var n=new Array(0);var r=new Array(0);for(var i=0;i<relurls.length;i++){if(!contains(e,relurls[i])){e.length+=1;e[e.length-1]=relurls[i];t.length+=1;t[t.length-1]=reljudul[i];n.length+=1;n[n.length-1]=relcuplikan[i];r.length+=1;r[r.length-1]=relgambar[i]}}reljudul=t;relurls=e;relcuplikan=n;relgambar=r;for(var i=0;i<reljudul.length;i++){var s=Math.floor((reljudul.length-1)*Math.random());var o=reljudul[i];var u=relurls[i];var a=relcuplikan[i];var f=relgambar[i];reljudul[i]=reljudul[s];relurls[i]=relurls[s];relcuplikan[i]=relcuplikan[s];relgambar[i]=relgambar[s];reljudul[s]=o;relurls[s]=u;relcuplikan[s]=a;relgambar[s]=f}var l=0;var c=Math.floor((reljudul.length-1)*Math.random());var h=c;var p;var d=document.URL;while(l<relmaxtampil){if(relurls[c]!=d){p="<li class='news-title clearfix'>";p+="<a href='"+relurls[c]+"' rel='nofollow' target='_blank' title='"+reljudul[c]+"'><img src='"+relgambar[c]+"' alt='"+reljudul[c]+"'/></a>";p+="<a href='"+relurls[c]+"' target='_top'>"+reljudul[c]+"</a>";p+="<span class='news-text'>"+relcuplikan[c]+" ... <a href='"+relurls[c]+"' target='_blank'>"+morelink+"</a></span>";p+="</li>";document.write(p);l++;if(l==relmaxtampil){break}}if(c<reljudul.length-1){c++}else{c=0}if(c==h){break}}}var reljudul=new Array;var relurls=new Array;var relcuplikan=new Array;var relgambar=new Array
    //]]></script>
    </b:if>
  • Masih di menu edit html, cari kode <data:post.body/>. letakkan kode dibawah ini di bawah <data:post.body/>.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=15&quot;' type='text/javascript'/>
    </b:loop>
    </b:if>
  • Simpan Template.
  • Sekarang beralih ke menu tata letak, tambahkan gadget di bagian sidebar. Pilih HTML/Javascript.
  • Letakkan kode dibawah ini.
    <ul id='relpost_img_sum'>
    <script type='text/javascript'>artikelterkait();</script>
    </ul>
  • Klik Simpan.