Cara Membuat Artikel Terkait dengan Thumbnail – Cara memberi/menciptakan related post dengan thumbnail gambar atau cara menjadikan artikel terkait muncul dengan gambar
Halo sobat, bagaimana kabar kalian hari ini? Saya harap kalian baik-baik saja
Setelah beberapa waktu Blogaul tidak update artikel tentang tips trik blog dikarenakan admin lagi sibuk di dunia nyata, maka di kesempatan yang baik ini saya akan mulai kembali posting artikel-artikel seputar tips trick blog dan SEO. So, stay with Blogaul ya..
Kali ini saya akan posting artikel tentang cara membuat related post dengan thumbnail gambar di blog.
Beberapa waktu lalu saya juga sudah update artikel tentang related
post, tapi waktu itu related post biasa, tapi bagi yang tertarik boleh
juga koq mencobanya. Silahkan dibaca: cara membuat related post atau artikel terkait. Tapi, membuat related post dengan thumbnail gambar
pastinya lebih keren dan membuat pengunjung lebih betah di blog kita,
silahkan lihat contoh di atas. Nah, bagi yang tertarik untuk membuatnya,
silahkan ikuti langkah-langkah di bawah ini:
1. Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Dengan menggunakan CTRL+F atau F3, cari kode berikut: </head>
4. Pastekan kode di bawah tepat di atas kode nomor 3 di atas
<!–Related Posts with thumbnails Scripts and Styles Start–>
<!– remove –><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 type=’text/javascript’>
var defaultnoimage=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTven492nsj5AP-sCgnQwqT8-gWzD7ziCUpJDIqMv4wuuq-AnKfqzcsBTsa6YdQM8CvHeHVkck_OY2cEZvKPETRAb9d1TJ_4T63XTgRM3B9_PZ5dLJPDO6pn8yBSY_skIKy6l9SAXvhq4/s400/noimage.png”;
var maxresults=5;
var splittercolor=”#d4eaf2″;
var relatedpoststitle=”Related Posts”;
</script>
<script src=’http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js’ type=’text/javascript’/>
<!– remove –></b:if>
<!–Related Posts with thumbnails Scripts and Styles End–>
5. Lanjutkan dengan mencari kode <data:post.body/> dan pastekan kode berikut tepat di bawah kode <data:post.body/> tadi
<!– Related Posts with Thumbnails Code Start–>
<!– remove –><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=6"’ 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>
<!– Related Posts with Thumbnails Code End–>
6. Simpan template sobat dan lihat hasilnya
Keterangan :
var maxresults = 5 adalah jumlah artikel akan ditampilkan di related post blog sobat.
var relatedpoststitle=”Related Posts”; kamu bisa ganti kata Related Posts atau kalimat lain yang sobat inginkan.
Sumber : http://www.amronbadriza.com/feeds/posts/defaultvar maxresults = 5 adalah jumlah artikel akan ditampilkan di related post blog sobat.
var relatedpoststitle=”Related Posts”; kamu bisa ganti kata Related Posts atau kalimat lain yang sobat inginkan.
Nah Itu Tadi informasi yang dapat CaraBaru.Info sampaikan. Semoga bermanfaat dan Beguna Hendaknya Buat anda semua pengunjung Blog Ini. dan Terima kasih Telah membaca artikel yang Berjudul Cara Membuat Artikel Terkait dengan Thumbnail
0 komentar:
Posting Komentar