Home » » Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul

Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul

Cara Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul

BERIKUT ini CB share kode dan cara membuat Related Post, Posting Terkait, atau Artikel Terkait, berupa Gambar Thumbnail dan Judul di bawah atau di akhir tiap posting blog.

Bahasa Inggrisnya mah Cool Related Posts with Thumbnail Image. Penampakannya seperti ini:

Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul

Cara membuat related post yang satu ini Cepat, Mudah, Gak Pake Ribet! CB sudah pasangkan di salah satu blog klien CB, yaitu Sepakbola Magz. Silakan lihat demonya di salah satu posting sana.

Anda juga bisa langsung menggunakan kode aslinya. Sumbernya di DTE. Ada banyak pilihan di sana, mulai related post simple (judul doang) hingga plus gambar thumbnail.

Kode related post di bawah ini sudah CB edit, modif, dan dijamin berhasil dipasangkan karena sering CB gunakan dalam desain template, termasuk sejumlah template yang ada di Galeri Template CB.

Lumayan Fast Loading, meski pake gambar, karena kode javascriptnya langsung dipasang di template, tidak ngelink keluar.


Fungsi Related Posts

Sebelum ke action, kita bahas sebentar fungsi Related Post atau kalu dalam situs berita istilahnya "Berita Terkait" atau "Artikel Lainnya".

Fungsi utama Widget Related Posts adalah memberikan pilihan bagi pembaca untuk melanjutkan baca-baca posting blog kita, sehingga menaikkan Pageviews dan popularitas blog.

Fungsi lainnya adalah sebagai Navigasi Internal atau Link Internal yang dianjurkan Google, guna memudahkan pengunjung mengeksplorasi konten blog kita.

Related Post ini menampilkan posting yang ada dalam satu Tag atau Label. Jadi, pastikan posting Anda diberi label. Jika tidak ada label, maka kemungkinan muncul error. (Baca: Cara Mengatasi Error Related Post Undefined).

Cara Membuat Related Post Gambar Thumbnail & Judul

Hapus dulu semua kode Related Post yang ada di template Anda. Kalo belum ada, tinggal lakukan langkah mudah berikut ini:

1. Copy + Paste kode berikut ini DI ATAS kode </head>


<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;border-bottom:3px solid #48d;border-top:2px solid #ddd;margin-top:2px} #related-posts a{border-right:none} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:16px Oswald;padding:3px;color:#555; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:128px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:left;padding:5px;font-size:13px Arial;line-height:15px;height:75px;width:128px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=30;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<30&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]></script><!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->


2. Copy & Paste Kode HTML & XML JavaScript berikut ini DI ATAS kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'> atau di mana saja asalkan di dalam kode <b:includable id='post' var='post'/> and <b:includable id='mobile-post' var='post'/>

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=4; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://contohblognih.blogspot.com'><img alt='Blogger Widgets' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

3. Save Template!

Jika ingin Related Post Simple, Judulnya doang, gunakan kode yang ada di sini: Cara Membuat Related Post Simple.

Demikian Cara Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul di Bawah Postingan Blog secara cepat, mudah, hanya dalam tiga langkah. Good Luck! (www.contohblog.com).*

Thanks for reading & sharing Membuat Related Post (Tulisan Terkait) dengan Gambar Thumbnail & Judul

Previous
« Prev Post

3 comments:

Comment Page:
  1. Saya sudah pakai template-nya, keren banget! Dan sudah berhasil saya coba dan muncul di post. Tapi kalo mau ngilangin related post bawaan johnywuzz-nya gmana mas, biar nggak dobel. Terimakasih

    ReplyDelete
    Replies
    1. cari semua kode yang ada kata related-nya dan hapus

      Delete
  2. Terima kasih sudah menyediakan template CB Theme simpel. Sederhana, bersih, dan cepat. Tapi saya ridak bisa munculin Related Postsnya. Mohon dibantu infonya. Terima kasih.

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox