Cara Membuat Artikel Terkait dengan Tumbnail di Blog
Cara Membuat Artikel Terkait dengan Tumbnail di Blog - Posting terkait atau yang lebih akrab disebut dengan artikel terkait mempunyai peran yang sangat penting bagi jumlah pageview blog (baca: Cara Meningkatkan Pageview Blog). Hal itu dikarenakan dengan memasang related post diakhir postingan, akan menarik minat baca para visitor kita. Apalagi bila tampilan artikel terkait berbentuk gambar (tumbnail), tentu visitor akan semakin penasaran ingin membacanya lebih lanjut. Oleh karena itu eksistensi posting terkait menjadi sangat penting bagi kemajuan suatu blog.
Pada beberapa waktu yang lalu, saya sudah memposting tata Cara Membuat Related Post Tanpa Tumbnail yang berupa judul-judul artikel saja disetiap akhir postingan, dalam kesempatan kali ini saya ingin membahas tentang tata Cara Membuat Artikel Terkait dengan Tumbnail (Gambar). Hal tersebut dimaksudkan agar anda tidak membuat Artikel Terkait secara manual di blog. Dengan menerapkan cara yang saya berikan ini, posting terkait akan muncul dengan sendirinya (otomatis) disetiap akhir postingan. Berikut langkah-langkahnya.
Cara Membuat Artikel Terkait dengan Tumbnail di Blog
1. Silahkan anda Log In ke blog anda masing-masing dengan menggunakan username dan pasword anda. Setelah itu, pilih tab Template, kemudian pilih Edit HTML.
2. Setelah masuk ke Edit HTML, silahkan anda cari kode </head>. Untuk mencari kode tersebut, silahkan Klik Control F pada keybord komputer anda, nanti akan muncul Kotak Pencarian di Pojok Kanan Atas. Silahkan masukkan kode </head> pada kotak pencarian, dan kemudian Klik Enter.
3. Setelah kode </head> sudah anda temukan, silahkan letakkan Kode Berikut ini tepat diatas kode </head>.
<!--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/AVvXsEjYc_nocLCYwKxJ27pMNx0DHWRSL4C0XOr1kl-XvGVS8EWAokjzoNaJjtEj5s3ZpDilqQ58AoyU9wDs588chryIjYXXTs8btVeQyfJAQMKigQiyrq0F5KALfS5_w12leIo12JcqK-SwATM/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-->
Keterangan:
var maxresults=5 adalah jumlah artikel yang ditampilkan dalam posting terkait
var relatedpoststitle="Related Posts" adalah tampilan tulisan artikel terkait
4. Untuk selanjutnya, silahkan anda cari kode <data:post.body/>. Biasanya jumlah kode <data:post.body/> itu lebih dari satu. Silahkan pilih kode yang kedua atau yang ketiga. Setelah ketemu, silahkan Letakkan Kode Berikut ini tepat dibawah kode <data:post.body/>.
<!-- 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-->
5. Setelah itu, Klik Save dan lihat hasilnya. Apabila sudah berhasil, hasilnya akan terlihat seperti gambar dibawah ini.
Demikian panduan tentang bagaimana Cara Membuat Artikel Terkait dengan Tumbnail di Blog. Apabila ada kekeliruan dalam tata tulis maupun substansi, saya mohon maaf yang sebesar-besarnya. Atas atensinya saya sampaikan ucapan terimakasih. Salam.
Categories:
Blogging
2 komentar:
Ini cara editan dengan template yang baru nenk??
Iya mas itu editan template yag baru :)
Post a Comment