-->

Ad Unit (Iklan) BIG

Cara Membuat Related Post Di Blog

Post a Comment
Cara Membuat Related Post Di Blog
image via pixabay

Blogger Media- Untuk memudahkan pengunjung dan pembaca blog dalam mencari artikel sesuai dengan kebutuhannya adalah dengan adanya menu navigasi blog yang baik. Selain menu navigasi, sebuah blog juga di lengkapi dengan beberapa widget tambahan yang akan semakin memudahkan pengunjung blog. Salah satu widget tambahan yang sering di pasang adalah widget related post. 

Salah satu fungsi dari adanya widget  related post pada sebuah blog adalah  untuk memudahkan bagi pengunjung ketika membaca artikel yang mempunyai topik atau label yang mempunyai kesamaan dengan artikel yang sedang mereka  buka. 

Berikut ini adalah contoh dari widget related post pada akhir artikel  sebuah blog :

Cara Membuat Related Post Di Blog


Letak widget related post bervariasi tergantung keinginan anda. Anda bisa meletakaannya di tengah - tengah artikel atau di mana yang anda suka. Namun secara umum widget related post biasanya di letakkan pada akhir postingan artikel.

CARA MEMBUAT WIDGET RELATED POST

Untuk membuat sebuah widget related post dan meletakkannnya pada blog tidaklah sulit. Sebagai contoh anda bisa mengikuti cara - cara yang saya sampaikan berikut ini dengan menggunakan script dari Arlina yang telah di bagikan dalam salah satu artikel di blognya.

1. Copy code HTML berikut ini dan letakkan (pastekan) sebelum kode ]]></b.skin> atau </style> 

Caranya : 
a. Log in ke dashboard blog anda
b. Klik Tema kemudian menu HTML
c. Untuk memudahkan pencarian kode di atas gunakan tombol Ctrl + F
d. Ketikan kode diatas lalu tekan enter

/* Arlina Related Post */ #related_posts{margin-top:20px} #related_posts h4{color:#fff;background:#3498db;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:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;} #related_img li a{color:#2672a0;} #related_img li a:hover{text-decoration:underline} #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;} #related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;} #related_img img{float:left;margin-right:10px;width:60px;height:60px;max-width:100%;background:#fff}


2. Kemudian copy kode HTML berikut ini dan pastekan sebelum kode </head>

<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;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:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/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>

3. Setelah itu copy kode HTML pemanggil berikut ini dan pastekan di bawah kode <data:post.body/>


<div id='related_posts'> <h4>Artikel Terkait</h4> <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=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='related_img'> <script type='text/javascript'>relatpost();</script> </ul> </div>

Bagaimana ? Cukup mudah bukan ?  Walaupun anda tidak paham dengan kode - kode HTML namun anda harus mencobanya. Ingat adanya kita bisa karena kita berani mencobanya bukan? Selamat mencoba dan berkreasi.

Related Posts

Post a Comment

Subscribe To Our Newsletter