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 :

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 : 'https://tutoorbagus.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.jsdelivr.net/gh/Arlina-Design/frame@master/related-box.js'/>

Ganti arahan yang ditandai sesuai kebutuhan

• DEMO

Sekian artikel untuk Cara Membuat Related Box untuk Blogger, biar artikel yang aku bagikan dapat bermanfaat bagi teman semua.

Tweet

Subscribe to receive free email updates: