Related box ini berbeda dengan related post pada umumnya yang terpasang di blog. Related box ialah related post yang akan muncul dikala di scroll kebawah, jadi akan menarik perhatian pengunjung. Dengan begitu akan memperbanyak pageview blog sobat.
Related box yang akan aku bagikan dulu terinspirasi oleh lembaga Kaskus. namun, kini sudah tidak dipakai lagi oleh kaskus. Pasti sudah pada ingin tau yah. Yuk, kita simak :
Cara Membuat Related Box untuk Blogger
1. Seperti biasa teman login dulu ke blogger > Template > Edit HTML > Salin dan tambahkan CSS dibawah ini sempurna diatas isyarat ]]></b:skin> atau </style>
/* Related Box by www.arlinadzgn.com */ #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)}2. Setelah copykan isyarat di bawah ini sempurna di bawah isyarat <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.arlinadzgn.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 arlinadzgn.com }; </script> <script type='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/frame/22f69f94/related-box.js'/>Ganti isyarat yang ditandai sesuai kebutuhan
Sekian artikel untuk Cara Membuat Related Box untuk Blogger, biar artikel yang aku bagikan dapat bermanfaat bagi teman semua.