Cara Membuat Slide Box Rekomendasi Artikel Blog

Hey sob? kali ini saya akan membagikan sebuah cara bagaimana caranya untuk membuat sebuah slide box rekomendasi atau yang biasa yang anda lihat di blog seperti munculnya kotak rekomendasi artikel yang muncul ketika kita scroll ke bawah dan menghilang jika kita scroll ke atas, mungkin orang-orang akan menyangka bahwa membuat sebuah fitur widget slide box rekomendasi itu hanya untuk wordpress namun kali ini saya akan bagikan untuk para pengguna blogger.

Widget Slide Box Rekomendasi Artikel juga diterapkan pada blog sejuta umat ini, jadi anda bisa dengan mudah langsung lihat hasil jadinya. Membuat box rekomendasi yang muncul pada blog di samping kanan bawah menjadikan blog yang anda miliki dapat mengurangi bounce rate pada alex, ini diakibatkan dengan adanya slide box, artike yang terdapat pada blog yang anda miliki dapat dengan mudah di jangkau oleh para pengujung, hasilnya visitor akan makin bertambah banyak. Oke bagi anda yang ingin memasangkan sebuah gadget slide box rekomendasi bisa simak pembahasannya berikut ini,

Cara Mudah Membuat Widget Slide Box pada Blog

1. Login ke Blog yang anda miliki.

2. Lalu masuk menu "Template" dan klik "Edit HTML".

3. Setelah itu anda bisa cari kode "]]></b:skin>" atau "</style>" (gunakan ctrl+f untuk mempermudah pencarian).

4. Jika kode ]]></b:skin> atau </style> sudah ketemu, anda bisa letakan kode di bawah ini tepat diatas kode ]]></b:skin>.

#bsuslidingbox{background:#fff;border-top:1px solid #bbb;width:320px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}

.bsuslidingbox-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}

.bsuslidingbox-title span a{float:right;height:35px;width:25px;}

a#bsuslidingbox-close, a#bsuslidingbox-close {margin-right:15px;}

.bsuslidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}

.bsuslidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}

.bsuslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}

.bsuslidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}

.bsuslidingbox-container > div > span {font-size:14px;}

.bsuslidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}

.show{bottom:80px;}

.hide{bottom:-145px;}

.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}

.related-post h4 {font-size:150%;margin:0 0 .5em;}

.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}

.related-post-style-2 li {margin-left:-35px;style:none;}

.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}

.related-post-style-2 li:first-child {border-top:none}

.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}

.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}

a.related-post-item-title {color :#333 !important;}

a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}

.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}

.related-post-style-2 .related-post-item-more {}

5. Lalu anda cari kode "</head>", dan letakan kode di bawah ini tepat diatas kode </head>.

$(window).scroll(function(){

if ($(this).scrollTop() > 400) {

$('#bsuslidingbox').css({'right':'0px'});

} else {

$('#bsuslidingbox').css({'right':'-360px'});

}

});

$(document).ready(function(){

var bsuslidingbox = $('#bsuslidingbox');

var closed = $('#bsuslidingbox-close');

var minimize = $('#bsuslidingbox-minimize');

var maximize = $('#bsuslidingbox-maximize');

maximize.hide();

closed.click(function(){

bsuslidingbox.css({'right':'-350px'});

bsuslidingbox.fadeOut('slow');

})

minimize.click(function(){

bsuslidingbox.toggleClass('hide');

$(this).hide();

maximize.show();

})

maximize.click(function(){

bsuslidingbox.toggleClass('hide');

$(this).hide();

minimize.show();

})

});

</script>

6. Lalu cari kode "</body>", dan letakan kode di bawah ini tepat diatas kode </body>.

<b:if cond='data:blog.pageType == "item"'>

<span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span>

</div>

<b:if cond='data:blog.pageType == "item"'>

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 relatedPostConfig = {

homePage: "<data:blog.homepageUrl/>",

widgetTitle: "<h4></h4>",

numPosts: 2,

summaryLength: 35,

titleLength: "auto",

thumbnailSize: 45,

noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",

containerId: "sliding-tab",

newTabLink: false,

moreText: "",

widgetStyle:2,

callBack: function() {}

};

</script><script src='https://drive.google.com/uc?export=download&id=0By_AtKYt5PKPV3hYS0RXaGdLSDA' type='text/javascript'/>

</b:if>

</div>

</b:if>

7. Terakhir klik "Simpan Template" dan lihat hasilnya.

Oke mungkin itu saja yang bisa kita berikan mengenai artikel "Cara Membuat Slide Box Rekomendasi Artikel Blog" ini, semoga dengan apa yang sudah kita berikan ini dapat bermanfaat bagi Kalian. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar. Terimakasih.

Blog Sejuta Umat

Haris Nur Hamid

Post a Comment

Posting Komentar

Formulir Kontak