Cara Menciptakan Related Box Untuk Blogger
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 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 :
1. Seperti biasa teman login dulu ke blogger > Template > Edit HTML > Salin dan tambahkan CSS dibawah ini sempurna diatas arahan ]]></b:skin> atau </style>
2. Setelah copykan arahan di bawah ini sempurna di bawah arahan <data:post.body/>
Sekian artikel untuk Cara Membuat Related Box untuk Blogger, biar artikel yang aku bagikan dapat bermanfaat bagi teman semua.
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 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'>"<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 arahan yang ditandai sesuai kebutuhan
Sekian artikel untuk Cara Membuat Related Box untuk Blogger, biar artikel yang aku bagikan dapat bermanfaat bagi teman semua.