Cara Membuat Related Box Untuk Blogger » Hallo juragan, kali ini admin ingin mengembangkan tutorial membuat Related Box di blogger/blogspot, Realated blog ini bergotong-royong seolah-olah dengan punyanya kaskus dulu, Namun kini entak kenapa kaskus sudah tidak lagi menggunakanya.
Oia Related Box ini berbeda lo dengan Related post pada umumnya, Related Box ialah related yang hanya akan muncul kalau blog di scroll kebawah, dengan related box ini aku jamin blog juragan akan meningkat pagr viewnya.
Oke tanpa banyak basa-basi lagi eksklusif saja simak yuk Cara Membuat Related Box Untuk Blogger
1. Masuk pada halaman dasboard blogger kamu.
2. Kemudian pilih Tema/Template » Edit HTML
3. Cari code ]]></b:skin>
4. Lalu Pastekan code dibawah ini sempurna di atas tersebut
#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);
}
5. Cari lagi arahan <data:post.body/>
6. dan Copy Kode dibawah ini, lalu letakan di atas arahan tersebut
<script type=”text/j4vascript”>
// 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/j4vascript” src=”http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js”></script>
7. Kemudian ganti pada kepingan text yang bewarna putih sesuai dengan cita-cita juragan
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
};
8. Terahir klik Save/Simpan Template
Sekian artikel Cara Membuat Related Box Untuk Blogger semoga artikel ini dapat menjadi asbab kesuksesan teman-teman blogger yang bersedia membaca artikel ini.
Sumber aciknadzirah.blogspot.com