Inilah Cara Menciptakan Related Box Untuk Blogger

Diposkan oleh fezarzone December 13, 2017 Post a Comment

Cara Membuat Related Box untuk Blogger - Kali ini aku akan membagikan cara untuk menciptakan related box untuk blogger,

Related box ini berbeda dengan related post pada umumnya yang terpasang di blog. Related box ialah related post yang akan muncul saat 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 arahan ]]></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 arahan di bawah ini sempurna di bawah arahan <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'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if>]; var relatedbox = {     homepage : 'http://fezarzone.blogspot.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'/>