Cara Sangat Mudah Memasang Related Post with Thumbnail di Bawah Postingan ~ Download Tips Trik Gratis : Oke Reload™

Cara Sangat Mudah Memasang Related Post with Thumbnail di Bawah Postingan

Download Gratis, Info Unik, Tutorial Blog, Tips dan Trik Internet

Cara Sangat Mudah Memasang Related Post with Thumbnail di Bawah Postingan

Related Post with Thumbnail™

Cara Sangat Mudah Memasang Related Post with Thumbnail di Bawah Postingan

Pada postingan sebelumnya saya ada menulis artikel tentang cara termudah membuat dan memasang artikel terkait bergambar atau related posts with thumbnails di bawah postingan dengan menggunkan widget Link Within. Dengan widget tersebut kita tidak perlu susah-payah mengotak-atik HTML di blog karena cara memasangnya sangat mudah di mana kita tinggal isi alamat blog, email, dan jumlah artikel terkait yang ingin ditampilkan di bawah postingan. 

Selain memiliki kemudahan dan kelebihan dalam penggunaannya, Link Within juga memiliki kekurangan antara lain foto atau gambar dari artikel terkait terkadang tidak muncul dan jika kita ganti gambar dari suatu postingan dengan gambar yang baru, gambar yang muncul tetap gambar lama. Ditambah lagi postingan yang dihapus tetap muncul walaupun postingan yang dihapus itu sudah tidak ada lagi. Hal tersebut tentu bukan hal yang kita inginkan. Oleh sebab itu, ada baiknya kita juga harus tahu cara memasang artikel terkait bergambar (related posts with thumbnails) secara manual karena memiliki kelebihan berupa hasilnya yang sesuai keinginan kita. Bagaimana cara memasangnya? Caranya sangat mudah dan bisa dilakukan oleh siapa saja asal punya blog dengan platform Blogger dan bisa menggunakan internet. Silakan cek langkah-langkah pemasangannya berikut ini.

Pertama, silakan masuk ke akun Blogger sobat masing-masing.

Kedua, silakan cari dan klik tulisan template.

Ketiga, silakan klik tulisan edit HTML dan tunggu sampai muncul kotak berisi kode-kode HTML/Java Script.

Keempat, silakan cari kode </head> dan letakkan kode berikut ini tepat di atasnya:

<!--Related Posts with Thumbnails-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size:1.0em;
font-weight:bold;
color:green;
font-family:Arial, Times New Roman , Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:red;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLNK_LHm91OdbMn1rKe3D0E3m2P0XDrMC3ukZYyAGl9JZMnzPReBq2BtykWSa8SQQez6Ng6_-QvK_rmd3X3dzOvBkyXzK3K11wy0hAfWrEeHHGrqM076vEvptj1N0xkALVm8NTMEkh0r0C/s72/No+Image.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts with this Article:&quot;;
</script>
<script type="text/javascript" src="http://yourjavascript.com/1512957539/related-post.js"></script>
<!-- remove --></b:if>
<!--Related Posts with Thumbnails-->

Kelima, silakan cari lagi kode <data:post.body/> dan biasanya ada tiga kode tersebut bila belum pernah diubah kode atau templatenya. Lalu, silakan letakkan kode berikut ini di bawah kode <data:post.body/> pada urutan ketiga:

<!-- Related Posts with Thumbnails-->
<!-- remove --><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>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails-->

Keterangan:
- Color:green adalah warna tulisan Related Posts with this Article.

- Font-family:Arial, Times New Roman , Times, Serif adalah jenis teks dari artikel terkait dan bisa diganti sesuai hati kita misalnya menjadi font-family:Georgia, Times New Roman , Times, Serif.

- Color:blue adalah warna tulisan di bawah gambar artikel terkait dan bisa diganti bisa warna lain misalnya black, red, yellow, dan lain-lain.

- Color:red adalah warna tulisan atau judul artikel terkait bergambar saat disorot dengan kursor dan bisa diganti juga dengan warna kesukaan kita misalnya green, orange, pink, dan lain-lain.

- Background-color:#d4eaf2 adalah latar belakang dari artikel terkait berwarna biru muda dan bisa diganti dengan kode warna lain misalnya #fff untuk warna putih atau #ff0000 untuk warna merah atau #000 untuk warna hitam dan seterusnya.

- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLNK_LHm91OdbMn1rKe3D0E3m2P0XDrMC3ukZYyAGl9JZMnzPReBq2BtykWSa8SQQez6Ng6_-QvK_rmd3X3dzOvBkyXzK3K11wy0hAfWrEeHHGrqM076vEvptj1N0xkALVm8NTMEkh0r0C/s72/No+Image.png adalah gambar pengganti untuk postingan yang tidak ada gambarnya. Bisa diganti dengan url gambar kita setelah kita upload ke blog atau situs penyedia layanan penyimpanan file.

- Var maxresults=6 adalah jumlah maksimal artikel terkait yang ingin ditampilkan dan silakan ganti dengan angka lain bila ingin jumlahnya sesuai hati kita.

- Related Posts with this Article: adalah tulisan di atas artikel terkait bergambar dan bisa diganti dengan tulisan lain misalnya Artikel Terkait dengan Tulisan Ini: atau lainnya sesuai kehendak kita.

Keenam, bila sudah selesai mengedit kodenya silakan klik tombol simpan template dan lihat hasilnya apakah artikel terkaitnya sudah muncul di bawah postingan atau belum. Bila belum, coba lihat lagi apakah ada langkah yang yang belum dikerjakan. Selamat mencoba bagi yang ingin mempunyai artikel terkait bergambar di blog seperti blog ini. Sekian dan terima kasih banyak atas kunjungan dan perhatian Anda.
7 komentar

blog yang sangat keren, artikelnya juga semuanya keren dan bermanfaat, keep it up!

Terima kasih atas kunjungan balik, sobat. Saya merasa blog saya ini tidak sebagus punya orang lain seperti punya mas Rozikin sebab saya akui saya masih. Oleh sebab itu, tampilannya tidak memenuhi standar SEO tapi saya berusaha menyenangkan pengunjung blog saya dengan isi blog yang diperlukan oleh banyak orang walaupun belum tentu orang lain suka dengan apa yang saya posting. Saya juga berusaha menanggapi komentar semampu saya. Saya do'akan mas bro tetap eksis di dunia blog dan dapat berkah. Semoga juga kita bisa menjadi blogger profesional dan tetap rendah hati bila sudah menjadi ahli dalam dunia blog seperti admin blog www.maskolis.com atau kang Ismet.

WAKTU MENYIMPAN HTML SELALU TIDAK BISA KI KENAPA YA OM MOHON BANTUANYA MALAH MUNCUL KAYAK GINI TERUS
More than one widget was found with id: HTML10. Widget IDs should be unique

Kemungkinan ada kode yang sama sehingga terjadi tumpang-tindih seperti apa yang tertulis di blog sobat bahwa ada lebih dari satu widget ditemukan dengan id: HTML 10. Seharusnya hanya ada 1 widget dengan id HTML 10. Untuk lebih jelasnya, kalau saya boleh tahu widget apa yang ada pada id HTML 10 itu? Kalau bisa juga kirim kode atau gambar ke email saya toppulsa123@gmail.com biar saya bisa bantu mengatasinya.

WADUH SAYA juga kurang tau gan widget apa atau perlu saya kirim semua Html saya menurut saya mana yang sama itu saya bingung

Wah related post yang seperti ini nih yang saya cari-cari.. terimakasih sob..

Related post with thumbail ini katanya kurang SEO friendly sebab menambah berat loading blog kecualis script-nya dikompres dulu tapi saya sukanya dengan related post bergambar supaya lebih menarik perhatian. Terima kasih lagi atas kunjungan sobat ke blog yg masih dalam tahap awal pengoptimasian ini.

7 Komentar untuk "Cara Sangat Mudah Memasang Related Post with Thumbnail di Bawah Postingan"

Aturan Berkomentar di Blog Ini:

1. Gunakan anonim bila tidak punya akun Google atau blog dan tidak ingin diketahui orang siapa Anda.

2. Gunakan akun Google atau nama dan url blog atau open id jika ingin mendapatkan kunjungan balik.

Back To Top