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)

Labels: Desain Blog
63 Komentar untuk "Cara Membuat Related Post dengan Gambar"

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

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 ... ;)

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

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

JW kan sudah related post thumbnail, mungkin bentrok kodenya.....

sebagai contoh ku blog ku bro

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

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

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

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

ganti kode di div h2 Related Articles dst.....

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

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

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 :)

sangat bermutu gan dan perlu dipelajari dulu. Terimakasih banyak

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

tanya dong ke desainer sang seo :)

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

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

Alhamdulillah berhasil. Terima kasih, ya

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

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

gak bisa gan gak muncul nih gak tau lah

Gmna ya biar related postnya responsip?

kasih kode responsive di @media .......

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

kalo gak dipasang kodenya ya gak muncul :)

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

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

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

hapus dulu kode related post yang lama...

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

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

Trims.. bermanfaat sekali

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

gan kalu releted post yang undifened kenapa ya?

kalau mau nama jumlah karakternya bagaimana bro?

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

jos gandos. mantap gan tutorialnya

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

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

sangat membantu sekali. terimakasih ya.

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

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

Mantap bos related postnya

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

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.

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

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

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

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

Contact Form

Name

Email *

Message *