
Memasang slide artikel terkait ini cocok utuk blog dengan tema apa saja, intinya adalah untuk membuat pengunjung tertarik ingin membaca artikel terkait menarik lain yang ada di blog sobat, contohnya seperti ini, ketika pengunjung blog sobat sedang membaca artikel sobat, ketika artikel sudah mau habis dibaca tiba-tiba muncul slide artikel yang pastinya pengunjung blog akan otomatis melihatnya ( karena munculnya tiba-tiba jika mouse terus di scroll kebawah :D ) dan jika artikel yang muncul menarik, mungkin saja pengunjung blog anda tertarik untuk membacanya.
Cara Membuat Slide Box Rekomendasi Artikel.
1. Cari kode script berikut2. Copy kode script dibawah ini, lalu paste tepat di Atas kode script
#kislidingbox{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;}Kode CSS yang berwarna Biru di atas masih bisa anda edit jika tidak puas dengan ukurannya
.kislidingbox-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}
.kislidingbox-title span a{float:right;height:35px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-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 {}
- width : lebar kotak rekomendasi artikel
- height : tinggi kotak rekomendasi artikel
- margin-left:-35px : merupakan letak gambar dari sebelah kiri, jika semakin besar angka yang diberikan maka gambar akan semakin dekat dengan garis
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>Kode script warna merah diatas sialhkan dipasang jika anda belum memiliki kode seperti itu atau sejenisnya ( fersi berapapun ) jika sudah memiliki kode seperti itu sebaiknya kode diatas tidak perlu ditambahkan lagi. Juga mengenai Kode script Biru diatas Bisa Anda ganti selain 400. Semakin besar angka yang diberikan maka akan semakin bawah slide box muncul pada blog Anda
<script type='text/javascript'>
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('#kislidingbox').css({'right':'0px'});
} else {
$('#kislidingbox').css({'right':'-360px'});
}
});
$(document).ready(function(){
var kislidingbox = $('#kislidingbox');
var closed = $('#kislidingbox-close');
var minimize = $('#kislidingbox-minimize');
var maximize = $('#kislidingbox-maximize');
maximize.hide();
closed.click(function(){
kislidingbox.css({'right':'-350px'});
kislidingbox.fadeOut('slow');
})
minimize.click(function(){
kislidingbox.toggleClass('hide');
$(this).hide();
maximize.show();
})
maximize.click(function(){
kislidingbox.toggleClass('hide');
$(this).hide();
minimize.show();
})
});
</script>Catatan :
6. Copy kode script dibawah ini, lalu paste tepat dibawah kode
<b:if cond='data:blog.pageType == "item"'>Tulisan "Baca Juga Artikel Ini" berwaran merah diatas Bisa Anda ganti dengan kata-kata Anda sendiri, numPosts: 2 = Jumlah rekomendasi artikel yang muncul,Jika anda ingin menambah artikelnya ubah juga bagian height di kode CSS bagian pertama. thumbnailSize: 45 = Ukurang gambar yang tampil pada slide box rekomendasi artikel, bisa Anda ganti sesuai keinginan Anda. newTabLink: false = Artinya jika artikel yang ada pada kotak slide box rekomendasi Anda klik, maka artikel tersebut tidak akan muncul di tab baru. Jika Anda ganti menjadi true, maka artikel tersebut jika di klik akan muncul di tab baru, summaryLength: 35, adalah banaykanya tulisan dibawah judul, jika anda ingin membahnya silahkan ubah ke angka lebih besar, dan jika anda ingin menghilangkannya ubah menjadi angka 0.
<div class='show' id='kislidingbox'>
<div class='kislidingbox-title kislidingbox-www'>
<span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span>
<span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='http://2.bp.blogspot.com/-IuwrMRddJPA/Uj0EKnY22II/AAAAAAAAFhM/V6cKdl07Bxc/s1600/close.png' title='close'/></a></span>
<span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='http://4.bp.blogspot.com/-QMHVEsX6RI0/Uj0EKiuxajI/AAAAAAAAFhQ/7bebcoyuHKw/s1600/minimize.png' title='minimize'/></a></span>
<span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='http://1.bp.blogspot.com/-spQvK4i4SNk/Uj0EKjKvMpI/AAAAAAAAFhc/CBa6r6ArUHA/s1600/maximize.png' title='maximize'/></a></span>
</div>
<div class='kislidingbox-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='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>
</div>
</div>
</b:if>
Recent Post Slide Out on Scroll
Nah berikut ini kami bagikan juga widget yang hampir sama seperti diatas, bedanya ini adalah widget recent post atau artikel terbaru yang menampilkan artikel terbaru dari blog anda. Tampilanya juga bagus, Efeknya akan muncul ketika halaman di scroll ke bawah dan akan muncul widget dengan efek slide. Contohnya tampilannya seperti dibawah ini.
Sekain sobat mengenai cara membuat slide related post di blog semoga bermanfaat.
16 Komentar untuk "Cara Membuat Slide Rekomendasi Artikel Terkait"
mantap gan Artikelnya, tapi gan, kenapa di blog saya munculnya dibawah postingan ya gan?
waw keren gan slide artikel terkaitnya.. izin nyoba ya.. btw mampir juga ke http://imoshare.blogspot.com/
mantap gan Artikelnya, tapi gan, kenapa di blog saya munculnya dibawah postingan ya gan? (o) :)
Wah kebeneran...minta ijin coba widgetnya ya Gan? :>) makasi b4
;(( kode ini ]]> gak ketemu gan gmn pusing aku,sudah di ctrl+f juga gak ada
setiap template berbeda gan. coba di atas kode ini </style>
ok mantaaff gan .. tanks ilmu nya... mampir ke blog ane http://www.kurdikare.com/
ijin coba dlu gan kode nya.....
loh kok punya saya enggak muncul ??? ;(
Widgetnya sangat bagus Gan :d. Tapi sayang [-( tidak pas di template blog ane ;((
makasih ya gan
untuk membuat blog tutorial mengapa tidak menggunakan syntax highlighter dalam perkodean?
trimakasih,,sukses terpasang di blog saya
Terima kasih Om Brando Mewo
Kebetulan sekali, script ini yang saya cari-cari
kalo dibuka pake' hape ini widgetnya malah ng-blank mas, Cuma keluar = "Baca juga artikel ini " tapi isinya kosong. Adakah solusinya mas ? Thanks