BLOG DESIGN, WIDGET "YOU MIGHT ALSO LIKE"

Ref. : Arlina Design

Langsung saja ya, pada prinsipnya teknik yang digunakan sama dengan teknik pemasangan widget terdahulu. Yang beda cuma script kodenya saja.

Untuk penampakan, silahkan lihat pada bagian bawah setiap artikel di blog ini. Sayangnya karena menjaga template saya tetap responsive (mobile friendly), maka widget ini (dan widget serta pop-up lainnnya) tidak muncul di mobile view mode, hanya pada web view saja. Jadi silahkan anda aktifkan web view mode anda jika ingin melihat penampakan widget² pada blog ini.

Ada banyak versi tampilan widget related posts yang menarik. Anda biisa melihat² di site Arlina Design untuk mencari versi mana yang paling menarik buat anda. Disini saya cuma sekedar "write-down" saja versi widget yang saya pakai di blog ini. Sebagai dokumentasi pribadi. Siapa tahu kelak saya perlu memasang ulang widget ini, tidak perlu susah mencarinya lagi.

Ok. Langkah pertama, login ke blogger, masuk ke "Theme", "Edit HTML", kemudian copy-paste-kan kode CSS dibawah ini 👇 pada baris sebelum/diatas </head>

<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=3;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4lzV33eeolQCrvztOBsQS0iNhvI3v0SxLAPN6duobvF_L7NyQH5CDwZMKh460ia8Yxvo1j_TaqrZsjPNGfma1pLtzKjQWLjXEqYNrOvNEuzVNh-7TRMmgDCfuP1ex7367eiG62gb-W58n/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g=" <li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li> ",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>

Berikutnya search ]]></b:skin> atau </style>, lalu copy-paste-kan kode dibawah ini 👇 pada baris sebelum/diatasnya :

/* PENGATURAN WIDGET 'YOU MIGHT ALSO LIKE', ARLINA DESIGN */ #related_posts{margin-top:20px} #related_posts h4{color:#fff;background:#878787;padding:10px;margin:0 0 5px;font-size:110%;} #related_img{margin:0;padding:0;} #related_img:hover{background:0} #related_img ul{list-style-type:none;margin:0;padding:0} #related_img li{min-height:60px;border-bottom:0px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;} #related_img li a{color:#141414;} #related_img li a:hover{text-decoration:underline} #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:13px;} #related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#323232;font-size:12px;} #related_img img{float:left;margin-right:10px;width:60px;height:60px;max-width:100%;background:#fff}

Lakukan customisasi disini jika diinginkan.

Langkah selanjutnya, search <data:post.body/>. Jika ada beberapa, pilih yang sesuai dengan keinginan, hendak ditempatkan dimana widget ini mau ditempatkan, sesuaikan dengan tag kondisionalnya (baca posting² terdahulu tentang hal ini). Di blog saya, saya tempatkan widget ini hanya pada halaman postingan saja, tidak di halaman utama. Kemudian copy-paste-kan kode dibawah ini 👇 pada baris setelah <data:post.body/>

<div id='related_posts'> <h4> YOU MIGHT ALSO LIKE :</h4> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/> </b:loop> <ul id='related_img'> <script type='text/javascript'>relatpost();</script> </ul> </div>

Langkah terakhir "Save Theme". Selesai.
Cek dengan View Blog, sudah sesuai dengan yang diinginkan atau belum. Jika belum lakukan lagi penyesuaian (customisasi).

Jika anda ingin melihat contoh penampakannya, lihat pada bagian bawah setiap artikel di blog ini.

Jangan pernah berhenti belajar

SALAM PUSTAKA

You might also like :