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)

Labels: Desain Blog

Related Posts

74 Komentar untuk "Cara Membuat Related Post dengan Gambar"

Makasih Gan.. It's work in my blog

thanks gan... di tunggu kunjungan baliknya...

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

Hah??? Kode iklan??? wkwkwkwk... sadar euy... !!!!

anjaiiii itu mah script kode iklan ente...

SEMUA related post blogger berdasarkan label, lihat kodenya

mau tanya kalau related post sesuai label saja gimana ya,

Thanks banget gan,it's work

kayaknya bisa di coba nih, maksih gan infonya.

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

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

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

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.

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

Mantap bos related postnya

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

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

sangat membantu sekali. terimakasih ya.

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

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

jos gandos. mantap gan tutorialnya

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

kalau mau nama jumlah karakternya bagaimana bro?

gan kalu releted post yang undifened kenapa ya?

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

Trims.. bermanfaat sekali

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

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

hapus dulu kode related post yang lama...

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

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

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

kalo gak dipasang kodenya ya gak muncul :)

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

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

Gmna ya biar related postnya responsip?

gak bisa gan gak muncul nih gak tau lah

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

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

Alhamdulillah berhasil. Terima kasih, ya

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

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

tanya dong ke desainer sang seo :)

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

sangat bermutu gan dan perlu dipelajari dulu. Terimakasih banyak

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

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

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

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

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

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

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

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

sebagai contoh ku blog ku bro

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

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

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

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

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

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *