April 29, 2014

Cara Membuat Related Post dengan Gambar

April 29, 2014

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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUpE20W5kVVsVcOYCiMkASIB3pa9PQV_2upUMQ36MeVR2Ubbkj0C-x1VmRZ8FBUsVC79CahUsJmR5IObNr_zorPN36eTsHSfe9_MHSt2hgqJ3RdIzjMwARt-5zBhHKJiImqpZYKlJcD7R/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)

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

78 comments on Cara Membuat Related Post dengan Gambar

  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
  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. Keren mas, terima kasih banyak?

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

    ReplyDelete
  24. 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
  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. artikelnya sangat membantu sip pkokonya
    salam kenal wat semua muanya -title keyword blog uang

    ReplyDelete
  34. 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
  35. help. di versi selular muncul tapi di versi web gak munccul gimana?

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

      Delete
  37. Yess,,, Gan.. Berhasilll... Makasih yach.. :D And semoga sukses

    ReplyDelete
  38. kayaknya bisa di coba nih, maksih gan infonya.

    ReplyDelete
  39. Thanks banget gan,it's work

    ReplyDelete
  40. mau tanya kalau related post sesuai label saja gimana ya,

    ReplyDelete
    Replies
    1. SEMUA related post blogger berdasarkan label, lihat kodenya

      Delete
  41. anjaiiii itu mah script kode iklan ente...

    ReplyDelete
    Replies
    1. Hah??? Kode iklan??? wkwkwkwk... sadar euy... !!!!

      Delete
  42. Admin plis bantu ane...!!

    Gmana si yang bener?

    Kode nya itu dikasih diatas kyak mana?
    Kayak ini gak;

    (seumpamanya kode)
    (head)

    Atau

    $eumpamanya kode/)(head)

    Jelasin min
    Ane masih bingung


    Bantu ane
    Bantu ane
    Bantu ane

    ReplyDelete
  43. thanks gan... di tunggu kunjungan baliknya...

    ReplyDelete
  44. Makasih Gan.. It's work in my blog

    ReplyDelete
  45. Mantap gan! scriptnya bekerja. visit ya.

    ReplyDelete
  46. biar bisa agak ketengah gimana gan, punya ane agak ke kiri nih posisinya

    ReplyDelete
    Replies
    1. atur di kode magin #related-posts, kode pertama, angka-angka itu mengatur jarak dan posisi

      Delete
  47. Mutar-mutar cari tutorial buat related post, belum ada yang berhasil pasang di blogku, ada sempat terpaaang, pas diklik tidak bisa alias linknya ga hidup. Ketemu blog CB ini besok mo dicoba, mudah-mudahan berhasil. Capek berapa hari ini bolak-bolak edit html bongkar pasang yg tidak kunjung berhasil.

    ReplyDelete

Contact Form

Name

Email *

Message *