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 Blog1. 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>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script type='text/javascript'>
$(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>.
<!-- Related Post with Sliding -->
<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='bsuslidingbox'>
<div class='bsuslidingbox-title bsuslidingbox-www'>
<span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span>
<span><a href='javascript:void(0);' id='bsuslidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4mRKVkyq59_cq1rl84GoEWlgdASReBlzxcKnnc_o3ahyphenhyphen7nX4RxErN99nGKQQvE09I48MFHj3LrLsECyQZGNGUV1eBl8edPQSEbWZtsUB8x7eLzUe-IYTNTwTI_2bpmavZQOwwjfKU/s1600/close.png' title='close'/></a></span>
<span><a href='javascript:void(0);' id='bsuslidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgScFIsvEbVbmoD2vsIOqmVq3rBMlzi4TZPY_t9PKWRW2O2FujcibhzLDmJ8nVOo83TELg2GWwhRIif11jNG6LSWG24UcTtkRpaOj1EhsRmwpL5vYjJV_37XfXzkPJ5vbxJW19w8OLx/s1600/minimize.png' title='minimize'/></a></span>
<span><a href='javascript:void(0);' id='bsuslidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqH1TRrTwbWeNfVQRI1isLqXV7JgUa543i0RUDZ6J2qDt7VwXp9KoyifzjwT8q_UI_OHOTKPW-g2vb4vmjo8JPSNs2NJbGjDBUemaubXj4R1OY1NTGB6HfH53M8HlD021qYezAlj_F/s1600/maximize.png' title='maximize'/></a></span>
</div>
<div class='bsuslidingbox-container'>
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
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://googledrive.com/host/0By_AtKYt5PKPV3hYS0RXaGdLSDA ' type='text/javascript'/>
</b:if>
</div>
</div>
</b:if>
<!-- Related Post Widget End -->
7. Terakhir klik "
Simpan Template" dan lihat hasilnya.
Oke mudah kan untuk menerapkan widget slide boxnya? mungkin itu saja yang bisa saya berikan mengenai "
Cara Membuat Slide Box Rekomendasi Artikel Blog" ini, semoga dengan apa yang sudah saya berikan ini dapat bermanfaat bagi Anda. Jangan lupa untuk
like dan
follow akun kami untuk mendapatkan info serta update terbaru dari kami. Jika ada
Kesalahan atau ada
Pertanyaan serta
Tambahan bisa isi pada kolom komentar anda. Terimakasih.
