Membuat related post dengan gambar
Sebelumnya saya telah diposting tentang bagaimana membuat judul posting terkait untuk menampilkan daftar posting yang berkaitan dengan pos utama. Sehingga memudahkan pembaca untuk menemukan topik terkait. Untuk mempelajari lebih lanjut tentang posting terkait baca di sini.
Nah hari ini saya ingin membahas bagaimana membuat related post lebih menarik dengan menambahkan thumbnail atau gambar di dalamnya. Agar lebih jelas lihat gambar di bawah.
Untuk membuat related post dengan gambar seperti di atas;
<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Simpan Template
Selesai ........
Widget Tulisan / Artikel Terkait dengan Gambar / thumbnail Terkait akan menampilkan 5 Artikel Terkait berbasis label artikel. Jika Anda ingin menambah atau mengurangi jumlah Terkait Pos dalam acara itu, silahkan ganti angka 5 (lima) pada var maxresults=5; menjadi lebih atau kurang.
Jika Anda ingin mengubah Posting terkait menulis dengan kata / kalimat lain, silahkan ganti tlisan Related Post (jangan menghapus tanda petiknya) pada kode var relatedpoststitle="Related Posts";
Semoga tutorialny berguna.
Nah hari ini saya ingin membahas bagaimana membuat related post lebih menarik dengan menambahkan thumbnail atau gambar di dalamnya. Agar lebih jelas lihat gambar di bawah.
Untuk membuat related post dengan gambar seperti di atas;
- Halaman DRAFT, klik EDIT HTML Tab.
- Checklist Tick / Tick / Tick atau apa pun yang Anda menyebutnya dalam sebuah kotak kecil di depan tulisan BUKA WIDGET TEMPLATE. Di bawah tulisan membentang kotak sempit yang berisi kode HTML yang membuat BLOG TEMPLATE sakit kepala.
- Cari kode </ head> di kotak HTML. Lakukan pencarian cepat menggunakan CTRL + (plus) huruf F pada keyboard Anda dan kemudian tekan ENTER yang akan menampilkan kotak HALUS di sudut kiri bawah browser Anda. Jenis berikutnya </ head> pada kotak. Itu menjadi kode?
- Salin kode HTML berikut:
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='https://sites.google.com/site/bloggerbugis/js/relatedthumbsbloggerbugis4U.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
- Masukan / Paste kode di atas </ head> template blog Anda.
- Kemudian melihat <div class='post-footer-line post-footer-line-1'> pada kode template blog Anda. Jika Anda tidak dapat menemukan kode dalam template blog Anda, cari kode ini:
<p class='post-footer-line post-footer-line-1'> Masukan / Copy dan paste kode di bawah BAWAH salah satu kode di atas. Berikut kode:
<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Simpan Template
Selesai ........
Widget Tulisan / Artikel Terkait dengan Gambar / thumbnail Terkait akan menampilkan 5 Artikel Terkait berbasis label artikel. Jika Anda ingin menambah atau mengurangi jumlah Terkait Pos dalam acara itu, silahkan ganti angka 5 (lima) pada var maxresults=5; menjadi lebih atau kurang.
Jika Anda ingin mengubah Posting terkait menulis dengan kata / kalimat lain, silahkan ganti tlisan Related Post (jangan menghapus tanda petiknya) pada kode var relatedpoststitle="Related Posts";
Semoga tutorialny berguna.
Ijin Copas ! sangat bermanfaat !!! Terimakasih
BalasHapusmas kalo udah ada "read more" gmana...??
BalasHapusterimakasih banyak sobat, oh ya untuk wordpressnya gimana??
BalasHapusinfo artikelnya sangat bermanfaat sob, salam kenal boleh kan
BalasHapusWah, makasih Mas Bro. udah jadi tuh di blog ane.
BalasHapusgaaaaaaaaaaaaakkkkkkkkkkkk bisaaaaaaaaaaaaaaaa.......
BalasHapusmantab gan,, izin pakek ya? kunjgannya
BalasHapusmantap gan, tapi saya terlanjur membuat artikel terkait tnpa gambar ni, kalo digabungin sama ini tar malah terlihat jelek
BalasHapusMakasi gan atas infonya! Tapi kok di blog ane ga berfungsi ya?
BalasHapusKunjungi Blog Ane!
gan knp yh setiap kali sy mencoba membuat related pos dg gambar selalu gagal?
BalasHapusMenangkan Jutaan Rupiah dan Dapatkan Jackpot Hingga Puluhan Juta Dengan Bermain di www(.)SmsQQ(.)com
BalasHapusKelebihan dari Agen Judi Online SmsQQ :
-Situs Aman dan Terpercaya.
- Minimal Deposit Hanya Rp.10.000
- Proses Setor Dana & Tarik Dana Akan Diproses Dengan Cepat (Jika Tidak Ada Gangguan).
- Bonus Turnover 0.3%-0.5% (Disetiap Harinya)
- Bonus Refferal 20% (Seumur Hidup)
-Pelayanan Ramah dan Sopan.Customer Service Online 24 Jam.
- 4 Bank Lokal Tersedia : BCA-MANDIRI-BNI-BRI
8 Permainan Dalam 1 ID :
Poker - BandarQ - DominoQQ - Capsa Susun - AduQ - Sakong - Bandar Poker - Bandar66
Info Lebih Lanjut Hubungi Kami di :
BBM: 2AD05265
WA: +855968010699
Skype: smsqqcom@gmail.com