Salah satu hal yang bisa untuk menurunkan bounce rates adalah dengan ditambahkannya widget artikel terkait di bawah setiap postingan blog kamu. Karena mungkin pengunjung blogkamu akan tertarik dengan artikel lain dengan topik yang sama di blog kamu.
Oleh karena itu, pada kesempatan kali ini saya akan berbagi cara untuk membuat atau menambahkan widget artikel terkait atau yang sering juga disebut dengan related posts atau apa lah tergantung dengan orang yang memberikan nama kepadanya.
Namun yang perlu diingat bahwa widget ini tidak disertai thumbmail, namun dilengkapi dengan effek yang bagus sehingga bisa menarik pembaca blog kamu untuk membaca tulisan kamu yang lainnya. So, nggak usah lama-lama mari kita mulai tutorialnya.
Cara Membuat Artikel Terkait Keren Di Blogger
Ikuti langkah demi langkah yang akan saya berikan di bawah ini. Namun saya sarankan untuk setiap mengedit template blog kamu, untuk selalu membackup template blog kamu supaya ketika nanti terjadi kesalahan dalam editing bisa kamu kembalikan lagi seperti semula.Rekomendasi :
#Cara untuk membackup template blogger
#Cara untuk restore/install xml template blogger
Kalau sudah berikut langkah-langkahnya :
Yang pertama kali harus kamu lakukan adalah : Masuk ke blogger >> Dashboard >> Template
Setelah masuk ke submenu template kemudian kamu pilih Edit Html kemudian Lanjutkan (jangan lupa untuk mencentang expand widget template)
Temukan kode di bawah ini di template blogger kamu :
</head>Kamu bisa menggunakan CRTL + F untuk menampilkan search box atau kalau mau yang repot ya kamu telusuri satu per satu kode yang ada pada template blog kamu.
Nah taruh kode yang ada di bawah ini tepat di atas </head>
<!--Related Posts Scripts and Styles Start-->Sudahkah kamu menyelesaikannya? nah kalau sudah kita teruskan. Kemudian lanjutkan dengan mencari kode di bawah ini (Gunakan CTRL + F)
<!--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;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #000000;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}
#related-posts ul li:hover{
background-color: #b0520e;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src=' http://onenaijablog.googlecode.com/files/related post widget.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
<div class='post-footer'>
Sudahkan kamu menemukannya? biasanya kode ini ada dua. Letakkan kode di bawah ini di bawah kedua kode <div class='post-footer'>.
<!-- Related Posts 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> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->
Setelah itu, coba lihat pratinjaunya dulu. Jika blog kamu bisa dimuat dan tidak ada eror maka baru kamu simpan. Dan sudah selesai tinggal kamu melihat hasilnya kawan. Jangan lupa juga untuk melihat widget lainnya : Membuat recent posts yang keren !
Semoga bisa bermanfaat dan bisa menbantu kamu untuk membuat blog kamu jadi lebih keren.
Jillur Rahman
I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.
Website: http://masala-jr.blogspot.com/
sipp gan, boleh di coba tips nya..
ReplyDeleteSalam coffeemix ya.. Hehee..
Blog saya juga coffeemix namanya,, berarti satu perguruan donk.. Xixixi
Izin follow ya mas..
Mungkin sama-sama suka kopi kali ya mas... Tapi sayangnya ane salah tu nulisnya... yang bener kan F nya dua .... haha
Deletewkwkwk :p
DeleteGak ada demo nya ya sob! :D
ReplyDelete