Home » » Cara Membuat Related Post dengan Gambar

Cara Membuat Related Post dengan Gambar

Related Post dengan Gambar
Cara Membuat Related Post dengan Gambar (Thumbnail Image) plus Judul di Bawah Posting Blogger.

POSTING tentang cara membuat related post dengan foto atau gambar thumbnail (Related Posts with Thumbnail Image) ini dibuat terkait pertanyaan dan permintaan seorang pengguna template New Johny Wuss. Ia ingin menggunakan posting terkait yang menampilkan foto dan judul.

Berikut CB share kode posting terkait plus gambar thumbnail dan judul sebagaimana yang digunkana tenmplate maskolis Pak Dhe Johny.

Pengguna New Johny Wuss lainnya boleh mempraktekan ini. Caranya, sebelumnya HAPUS dulu SEMU kode di template yang bertuliskan "related post, lalu lakukan dua langkah mudah berikut ini.

Cara Membuat Related Post dengan Gambar di Blogspot

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

<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:100%;border-top:3px solid #ddd;margin:5px 0}
#related-posts .judul{background:none;color:#333;font:16px Oswald;padding:5px 0}
#related-posts .maskolis_img {padding:0 0;width:140px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#related-posts .maskolis_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
</style>
<script type="text/javascript">//<![CDATA[
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://1.bp.blogspot.com/-QjSndGbF0No/T-Nt3HgKsDI/AAAAAAAAG9o/cN6_Oy306rc/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";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('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 12px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:140px;padding:0 0;color:#666;height:35px;text-align:center;margin:0px 0px; font:bold 11px Arial; line-height:14px;">'+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>
</b:if>
<!--Related Posts with thumbnails End-->

Catatan: kode ber-warna merah adalah ukuran lebar gambar/foto. Sesuaikan dengan lebar halaman text area posting blog Anda, bisa diubah lebih kecil atau lebih besar.

2. Langkah berikutnya cara membuat Related Post dengan Gambar adalah dengan Copy + Paste kode berikut ini di atas kode <div class='post-footer'> atau di bawah kode <data:post.body/> yang kedua atau ketiga.

 <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=8&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;Related Posts :&quot;;
                            removeRelatedDuplicates_thumbs();
                            printRelatedLabels_thumbs();
                          </script>
                        </div>
                        <div class='clear'/>

Catatan: kode berwarna biru adalah jumlah related post, bisa diubah menjadi 8 atau bahkan 12. Sebaiknya empat saja, jangan terlalu banyak.

3. SAVE Template!

Jika tidak berhasil, coba pindahkan kode JavaScript di langkah No.1, yaitu kode yang diawali denngan <script type="text/javascript"> dan diakhir dengan </script>, pindahkan ke atas kode </body>

Demikian Cara Membuat Related Post dengan Gambar di bawah Posting Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Baca Juga: Cara Membuat Related Post Tanpa Gambar (Hanya Judul Posting)

Thanks for reading & sharing Cara Membuat Related Post dengan Gambar

Previous
« Prev Post

59 comments:

Comment Page:
  1. kalau menurut saya sih lebih baik pake yang tidak pake gambar soalnya lebih ringan untuk loading blog, untuk tutorial di atas saya beri upluse...

    ReplyDelete
  2. gan...
    request cara membuat slider dg bxslider dong...
    aku udah ubek2 google tetap aja ga ketemu caranya (ga ngerti sama maksud yg dijelaskannya)

    tolong ya gan ... ;)

    ReplyDelete
    Replies
    1. Slider gak bagus buat SEO... silakan cari penjelasannya di blog ini.....

      Delete
  3. gan.. kuterapkan di blogku ko' gak bisa gan?padahal juga pake template johy w?terimakasih

    ReplyDelete
    Replies
    1. JW kan sudah related post thumbnail, mungkin bentrok kodenya.....

      Delete
  4. sebagai contoh ku blog ku bro

    ReplyDelete
  5. gan klau related postnya dibuat model icon next post / previous post bisa nggak ?

    ReplyDelete
    Replies
    1. bisa.... itu otomatis dari blogger, fungsikan saja feed link-nya....

      Delete
  6. gan...
    kalau kode "div class='post-footer'" ada dua gimana ???
    taro yang di atas apa di bawah...

    ReplyDelete
    Replies
    1. di bawah ... kalo gagal, hapus dan coba simpan di atas.... :)

      Delete
    2. saya udah coba simpan di bawah dan di atas tapi ga muncul ? kenapa ya?

      Delete
  7. mas gan..
    mohon pencerahannya donk untuk pasang yang related post model begini tapi ane pakai templatenya johny ganteng banget
    thanks

    ReplyDelete
    Replies
    1. ganti kode di div h2 Related Articles dst.....

      Delete
  8. Hebat boss, pakai skrip ini ane akhirnya baru bisa, terima kasih telah berbagi.

    ReplyDelete
  9. nyoba dulu gan, ini yang ane cari, related post lain thumbnailnya cuma resize bikin lemot!
    kalo yang ini lihat demonya bener2 dibuat thumb, 72px72, ringan betul :)

    ReplyDelete
  10. sangat bermutu gan dan perlu dipelajari dulu. Terimakasih banyak

    ReplyDelete
  11. gan, ane kesulitan nih cari kode yang keduamya gan, ane pake template sang seo

    ReplyDelete
    Replies
    1. tanya dong ke desainer sang seo :)

      Delete
  12. saya kemarin memasang recent post dengan thumnail dan related post, trus related postnya tiba" hilang. apakah bentrok dengan recent post...?

    ReplyDelete
  13. mas CB,,, template CIBIMAGZ itu gx di share ya... :D

    ReplyDelete
  14. Alhamdulillah berhasil. Terima kasih, ya

    ReplyDelete
  15. mantapp gan....
    langsung saya ke tkp dah..
    thanks infonya ya gan sipp
    lam kenal

    ReplyDelete
  16. informasi bermanfaat.....
    tapi setelah di coba ga bisa,,,,

    ReplyDelete
  17. gak bisa gan gak muncul nih gak tau lah

    ReplyDelete
  18. Gmna ya biar related postnya responsip?

    ReplyDelete
    Replies
    1. kasih kode responsive di @media .......

      Delete
  19. Related post punya saya koq ngga muncul ya gan....

    ReplyDelete
    Replies
    1. kalo gak dipasang kodenya ya gak muncul :)

      Delete
  20. maaf bro, ketika gambar diubah menjadi lebih besar, letak hurufnya atau kalimatnya pun tidak sesuai gambar, mohon penjelasannya bro

    ReplyDelete
    Replies
    1. makanya gak usah diubah-ubah, sudah dibuat baik dan pas sedemikian rupa :)

      Delete
  21. gan ko punya ane related post nya jadi ada 2.. 1 yang ke samping 1 nya lagi ke bawah

    ReplyDelete
    Replies
    1. hapus dulu kode related post yang lama...

      Delete
  22. Thank gan Inpohnya ,, tapi kok yang muncul relatednya kok malah 6 biji gan ? .. mohon pencerahannya :)

    ReplyDelete
  23. bagus gan, ane udah terapin. tapi bisa bantu gak gan. judul artikelnya bukan dibawah gambar, tapi muncul pas kursor diarahin kesitu kaya image title?

    ReplyDelete
  24. Trims.. bermanfaat sekali

    ReplyDelete
  25. saya sudah berkali kali mencoba tutorial dari embah saya dan salah satunya punya juragan ini tetapi tetap saja related post tidak muncul ....

    ReplyDelete
  26. gan kalu releted post yang undifened kenapa ya?

    ReplyDelete
  27. kalau mau nama jumlah karakternya bagaimana bro?

    ReplyDelete
    Replies
    1. jumlah karakter = jumlah HURUF, bisa itung manual, bisa copas ke MS Word, bisa juga pake http://www.lettercount.com/

      Delete
  28. jos gandos. mantap gan tutorialnya

    ReplyDelete
  29. terimaksih Aa CB blogger telah bagiin template NJW V2 pd 17 agustus tepat pada hari kemerdekaan RI saya download,sy lagi belajar iseng2 buat blog. tapi sayangnya setelah proses download komputer saya kena gangguan Mallware. setelah itu saya pusing dan cari penangkalnya ,lumayan bisa di bersihkan. kemudian sy coba ganti ganti warna, templatenya saya terapkan ke lapakpulsamurah.blog dan sekarang coba ganti related post nya ,tidak bisa (BERANTEM KALI SAMA BAWAANNYA) ada rekomendasi biar muncul related post dgn gambar

    ReplyDelete
  30. gan, udah saya ikuti semua petunjuknya, tapi ko ga muncuk juga related pos nya...mohon bantuannya gan, maklum newbie

    ReplyDelete
  31. sangat membantu sekali. terimakasih ya.

    ReplyDelete
  32. udah ane coba dan berhasil. Terimakasih gan , sangat bermanfaat.

    ReplyDelete
  33. Mantap bos related postnya

    ReplyDelete
  34. artikelnya sangat membantu sip pkokonya
    salam kenal wat semua muanya -title keyword blog uang

    ReplyDelete
  35. boleh nanya nih gan..
    apa kode related post diatas bekerja di templatenya brosense? soalnya di template brosense ngak muncul tuh..trims dan segera di coba trik dari agan..salam hangat.

    ReplyDelete
  36. help. di versi selular muncul tapi di versi web gak munccul gimana?

    ReplyDelete
  37. Replies
    1. Link Google Codenya mati, pake yang ini: http://www.contohblog.com/2016/08/membuat-related-post-gambar-thumbnail.html

      Delete

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