Cara Membuat Related Box Untuk Blogger Yang Keren
Desaign By Bloggerku

Cara Membuat Related Post Box untuk Blogger - Oke Brother Saudara Jauh :D, kali ini saya Akan Memberikan Cara Membuat Related Box untuk Blogger Yang Keren Untuk Anda , Desaign kali ini Cukup Keren Karna Kerenlah :D , Oke , Desaign ini Saya Lihat Di Blogger http://www.iumari.com , Saya Akan Memberikan Cara Memasang Atau Membuat Related Box Untuk Blogger , Dengan Cara Yang Simple , Oke Lagsung Saja Kita Praktekkan Untuk  Brother Saudara Jauh, Oke.

Cara Membuat Related Box Untuk Blogger 

Pertama Baca Do'a Dulu, Oke
Lalu Buka Blogger Anda , Pilih Menu Template ===>  Edit Template , 
Lalu Anda Cari Kode </style> atau ]]></b:skin> , Dengan Cara Tekan CTRL + F / CTRL G
Tarok Kode Di Bawah Ini Tepat Diatas kode ,</style> atau ]]></b:skin>

CSS Code

/* Related Box  */
#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)}

Lalu Anda Cari Kode <data:post.body/>; di Template Anda , Lalu Pastekan Kode Di Bawah ini, Tepat Di Bawah Kode <data:post.body/> , Tepat di Bawahnya, Oke

Code Abang Java :D ( JavaScript )

<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://www.hekthatman.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 bloggerku.com
};
</script>
<script type="text/javascript" src="http://cdn.rawgit.com/Dihak/bloggerku/5048c6bd13c0d02a5ae41cfb6827a33a18d53d50/relatedbox/relatedbox.min.js"></script>

Oke, lalu Ubah Dikit Di Kode Abang Java , URLnya , "http://www.hekthatman.com" , Masukan Atau Ganti URL Saya Dengan URL  Anda

Lalu Anda Simpan Template Anda .

Oke Semoga Bermanfaat Untuk Anda Kalau mau Bertanya Silahkan , Oke No SPAM , Oke , Sekian Dan Terima Kasih , Komenrt Yang Relavan Oke


EmoticonEmoticon