Kali ini saya akan membagikan cara untuk membuat related box untuk blogger, sudah lama sekali saya tidak update. Adminnya lagi sibuk membuat design template yang akan dipublish nanti.
Related box ini berbeda dengan related post. Related box adalah related post yang akan muncul ketika di scroll kebawah, jadi akan menarik perhatian pengunjung. Dengan begitu akan memperbanyak pageview blog sobat.
Oke, untuk lebih jelas, sobat silahkan lihat demo dibawah ini, sobat juga bisa mendownload source codenya di sini :
Related box yang akan saya bagikan dulu terinspirasi oleh kaskus. namun, sekarang sudah tidak dipakai lagi oleh kaskus. Pasti sudah pada penasaran yah. Yuk, kita simak :
2. Masuk ke bagian Template > Edit HTML
3. Copykan CSS dibawah ini tepat diatas kode ]]></b:skin>
4. Setelah copykan kode dibawah ini tepat dibawah kode <data:post.body/>
Nah, simpan dan save yang sudah di edit. sekarang lihat blog sobat, kalau sudah muncul related boxnya maka lanjut ke bagian cara setting related boxnya. Sobat bisa rubah bagian title, max post, sembunyikan tanggal, dan lain lain.
Masih di kode yang tadi, sobat tinggal ganti kode kode yang berwarna merah di bawah ini dengan yang sobat inginkan.
Jangan lupa save lagi, selesai deh..
Sekian artikel untuk cara membuat related box pada blogger, semoga artikel yang saya bagikan bisa bermanfaat bagi sobat. Kunjungi terus bloggerku agar tidak ketinggalan update..
 |
| related box |
Related box ini berbeda dengan related post. Related box adalah related post yang akan muncul ketika di scroll kebawah, jadi akan menarik perhatian pengunjung. Dengan begitu akan memperbanyak pageview blog sobat.
Oke, untuk lebih jelas, sobat silahkan lihat demo dibawah ini, sobat juga bisa mendownload source codenya di sini :
Related box yang akan saya bagikan dulu terinspirasi oleh kaskus. namun, sekarang sudah tidak dipakai lagi oleh kaskus. Pasti sudah pada penasaran yah. Yuk, kita simak :
Cara Memasang Related Box Pada Blogger
1. Seperti biasa sobat login dulu ke blogger2. Masuk ke bagian Template > Edit HTML
3. Copykan CSS dibawah ini tepat diatas kode ]]></b:skin>
#related-box {
width: 350px;
overflow: hidden;
height: 200px;
position: fixed;
bottom: 20px;
right: 20px;
background: #fff;
box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);
transition: all 0.5s;
}
#related-box .header h2 {
font-size: 12px;
margin: 0;
}
#related-box .header {
padding: 10px 15px;
color: #fff;
background: #00ABFF;
}
#related-box .tombol {
position: absolute;
top: 10px;
right: 15px;
}
#related-box .item {
padding: 15px;
width: 320px;
float: left;
}
#related-box .list {
height: 120px;
overflow: hidden;
width: 600px;
transition: all 0.5s;
}
#related-box .gambar img {
height: 100px;
float: left;
width: 50%;
margin-right: 10px;
}
#related-box .header a {
color: #fff;
}
#related-box .info {
font-size: 12px;
}
#related-box .navigation a {
float: left;
border: 1px solid rgba(0, 0, 0, 0.32);
margin-left: 10px;
font-size: 10px;
width: 10px;
padding: 3px;
}
#related-box .navigation {
position: absolute;
width: 60px;
right: 20px;
bottom: 20px;
}
.relatedshow {
position: fixed;
bottom: 190px;
right: -50px;
transition: all 0.5s;
}
.relatedshow a {
color: #fff;
background: #00ABFF;
padding: 7px 15px;
box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.29);
}4. Setelah copykan kode dibawah ini tepat dibawah kode <data:post.body/>
<script type="text/javascript">
// Related Article Settings
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if>];
var relatedbox = {
homepage : 'http://www.bloggerku.com', // Change with your homepage url
title: 'Related Post', // Widget Title
post: 3, // Max post
date: true, // Show date
scr: 500, // Show the related box if scroll more than 500
showcredit: true // Add credit link to support bloggerku.com
};
</script>
<script type="text/javascript" src="http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js"></script>Nah, simpan dan save yang sudah di edit. sekarang lihat blog sobat, kalau sudah muncul related boxnya maka lanjut ke bagian cara setting related boxnya. Sobat bisa rubah bagian title, max post, sembunyikan tanggal, dan lain lain.
Masih di kode yang tadi, sobat tinggal ganti kode kode yang berwarna merah di bawah ini dengan yang sobat inginkan.
var relatedbox = {
homepage : 'http://www.bloggerku.com', // Change with your homepage url
title: 'Related Post', // Widget Title
post: 3, // Max post
date: true, // Show date
scr: 500, // Show the related box if scroll more than 500
showcredit: true // Add credit link to support bloggerku.com
};Jangan lupa save lagi, selesai deh..
Sekian artikel untuk cara membuat related box pada blogger, semoga artikel yang saya bagikan bisa bermanfaat bagi sobat. Kunjungi terus bloggerku agar tidak ketinggalan update..
Catatan : Sobat bisa mengedit kode yang ada di file js dengan sesuka sobat, TAPI, jangan membagikan kembali (versi sobat) ke publik tanpa seizin admin. Terima Kasih
.gif "Loading")
.gif "Loading")
.gif "Loading")
.gif "Loading")
