Cara Buat Related Post Box

Mei 13, 2017
SERPChecker - Get deep insights into Google SERP
Cara Buat Related Post Box
Related Post Box
XDTPD Blogs | Hallo sahabat semuanya, update tutorial kali ini kita akan memabahas cara membuat widget related post box diblogger. Widget related post box ini akan muncul saat blog sobat di scroll kebawah dan tampil disisi kanan blog sobat. Widget ini sangat bermanfaat untuk merekomendasikan artikel lainnya kepada para pembaca blog kita.

Baca Juga : Cara Menambahkan Icon di Menu Navigasi Blog

Biasanya, related post box ini banyak digunakan di berbagai forum untuk rekomendasi berbagai artikel menarik lainnya seperti di Kaskus. Namun, saat ini widget ini tidak dipakai lagi diwebsite tersebut. Penasaran dengan demonya ? Klik aja tulosan demo dibawah ini untuk melihat tampilannya.

DEMO

Nah, bagaimana menarik untuk dicoba bukan ?
Untuk sobat yang ingin memakai widget ini diblognya, silahkan ikuti saja langkah-langkah yang ada dibawah ini dengan sesama ya. Sebelum mempraktekkannya, saya sarankan sobat membackup dulu template blog nya untuk mengantisipasi terjadinya error.

#Langkah Membuat Related Post Box

1. Seperti biasanya, sobat masuk dulu ke dashboard bloggernya dan kemudian pilih menu Theme > Edit HTML. Kemudian tambahkan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* Related Box by www.xdtpd.net */
#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:#D8335B}
#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:#D8335B;padding:7px 15px;box-shadow:2px 3px 0 rgba(0,0,0,0.29)}

2. Kemudian, Pasang juga kode dibawah ini tepat dibawah kode <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 : 'www.xdtpd.net', // 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 zynation
};
</script>
<script type='text/javascript' src='https://rawgit.com/Ojikkidiw/zynation/master/promise.js'/>

Nah, silahkan sobat ganti url blog ini dengan url blog sobat. Sobat juga bisa mengatur jumlah related post yang tampil dengan mengganti jumlah post tersebut sesuai dengan kemauan sobat. Hanya itu saja tutorial cara membuat widget related post box di bloggger semoga bermanfaat bagi semuanya. Dan jangan lupa untuk berkunjung dilain waktu, karena blog ini akan selalu update berbagai artikel menarik lainnya yang patut sobat baca.

Referensi : Zynation Design

Tampilkan Komentar