Related Posts atau artikel terkait dengan gambar (thumbnail) perlu dipasang di blog untuk mempermudah pembaca blog dalam melihat artikel lain di blog anda. Ada banyak macam widget related posts atau artikel terkait yang bisa dipasang di blog dan biasanya para blogger meletakkan artikel terkait berada di bawah postingan blog, seperti related posts dengan scroll atau related post link witihin dan lain-lain. Nah sekarang simak bagaimana cara membuat dan memasang related posts atau artikel terkait dibawah postingan blog.
Baca juga : Membuat Related Posts Link Within
Cara Membuat dan Memasang Related Posts Thumbnail di Bawah Postingan
1. Buka blog anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan Ctrl+F, cari kode
</head> dan letakkan kode berikut diatasnya<b:if cond='data:blog.pageType == "item"'> <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: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJwlmpTZt_UDfJbhrfQcIWHdaGki43XkMc5XQrboHW3xMHiglclZ9XVERUcvfa3IxIX1aZzFNlAilvBD362irAO1K_xp8_wd8xG2t6fOIDLMPKdfQvLgmuIcxc5odP3goSLhDZaacMR2xn/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script> <script src='https://sites.google.com/site/lintastutor/rudy/related-posts-thumbnails.js' type='text/javascript'/></b:if>
5. Cari kode
<div class='post-footer-line post-footer-line-1'>6. Letakkan kode berikut dibawahnya
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://lintas-tutor.blogspot.com'><img alt='Terlintas' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicz2qce-SKhr5RDYwFwhavDV_wULrenmHJEFxUm7Fz0NTQj4_a1yTM8_fysmZvYbqa-lnraXEk-LG6Nl0WjtmsADr5PrtXDKQhb8p2nPzo1CVvKliK1fRQXdhrnY48zU6cfUiToH9BDC9b/s1600/best+blogger+tips.png'/></a> </b:if></b:if>
Keterangan :
- max-results=5 adalah jumlah artikel yang ditampilkan
- Ganti teks warna biru
7. Simpan Template
Demikianlah cara membuat artikel terkait / related posts dengan gambar, silahkan dicoba.
Related Posts
tutorial blog
- How to Use Pokespy
- Cara Membuat Link Download dari MediaFire
- Menambah Elemen Sidebar Sebelah Kiri di Blogspot
- Cara Mendaftar Blog ke Dmoz
- Begini Cara Daftar Blog di Technorati
- Cara Claim Token Di Technorati
- Menyembunyikan Titel Blog Untuk Diganti Logo Di Header
- Membuat Header dan Menu Navigasi Tidak Bergerak (Tetap Diatas)
- Membuat Ruang Posting Blog Menjadi 2 Kolom Di Homepage
- Static Pages Blogger Bermasalah? Solusinya Begini
- Memasang Widget Cek No Resi JNE, TIKI, Pos Indonesia
- Membagi Elemen Postingan Blog Menjadi Dua Kolom Tanpa Edit HTML
- Cara Mengganti Template Baru di Blogspot
- Membuat Efek Marquee di Blogspot
- Cara Membuat Tabel dan Thumbnail di Postingan Blog
- Cara Membuat Artikel Terbaru Dengan Thumbnail di Blogspot
- Cara Mengganti Warna Link di Blogspot
- Cara Memberi Tombol Scroll di Kotak Komentar Blog
- Cara Membuat Related Posts Super Cepat
- Cara Pasang Tombol Spoiler di Komentar Blogspot Versi 2
- Cara Memasang Google Translate di Blog
- Cara Membuat Blockquote di Postingan Blog
- Inilah Widget Random Post Fast Loading Plus Thumbnail
- Merubah Tampilan Blog Yang Berbeda Pada Homepage dan Halaman Posting
