√ Cara Menciptakan Slide Box Rekomendasi Artikel Blog

Hey sob? kali ini saya akan membagikan sebuah cara bagaimana caranya untuk menciptakan sebuah slide box rekomendasi atau yang biasa yang anda lihat di blog ibarat munculnya kotak rekomendasi artikel yang muncul saat kita scroll ke bawah dan menghilang jikalau kita scroll ke atas, mungkin orang-orang akan menyangka bahwa menciptakan 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 sanggup dengan gampang pribadi lihat hasil jadinya. Membuat box rekomendasi yang muncul pada blog di samping kanan bawah menimbulkan blog yang anda miliki sanggup mengurangi bounce rate pada alex, ini diakibatkan dengan adanya slide box, artike yang terdapat pada blog yang anda miliki sanggup dengan gampang di jangkau oleh para pengujung, karenanya visitor akan makin bertambah banyak. Oke bagi anda yang ingin memasangkan sebuah gadget slide box rekomendasi sanggup simak pembahasannya berikut ini,

Cara Praktis Membuat Widget Slide Box pada Blog

1. Login ke Blog yang anda miliki.

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

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

4. Jika arahan ]]></b:skin> atau </style> sudah ketemu, anda sanggup letakan kode di bawah ini sempurna diatas arahan ]]></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 arahan "</head>", dan letakan kode di bawah ini tepat diatas arahan </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 arahan "</body>", dan letakan kode di bawah ini tepat diatas arahan </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=d0wnl0ad&id=0By_AtKYt5PKPV3hYS0RXaGdLSDA' type='text/j4vascript'/>

</b:if>

</div>

</b:if>

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

Oke gampang kan untuk menerapkan widget slide boxnya? mungkin itu saja yang sanggup saya berikan mengenai "Cara Membuat Slide Box Rekomendasi Artikel Blog" ini, agar dengan apa yang sudah saya berikan ini sanggup bermanfaat bagi Anda. Jangan lupa untuk like dan follow akun kami untuk mendapat gosip serta update terbaru dari kami. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan sanggup isi pada kolom komentar anda. Terimakasih.

Sumber http://www.blogsejutaumat.com/

Buat lebih berguna, kongsi: