Membuat Slide Box Rekomendasi di Blogger
Recommended Post Slide out for Blogger - Mungkin sobat pernah mengunjungi beberapa situs yang menggunakan slidebox recommendation, atau kotak yang bergeser ke samping ketika mouse discroll ke bawah yang berisi tulisan Rekomendasi Untuk Anda. Slide box seperti ini bisa sobat temukan di situs inilah.com.
Isi dari Box Rekomendasi ini adalah related post with thumbnail, selain related posts juga ditampilkan random post apabila pengunjung berkali-kali mengunjungi alamat yang sama. Hal ini dilakukan agar pengunjung betah di blog dengan membaca beberapa artikel kita sekaligus.
Artikel ini direquest oleh Jeng +Leony Li dan script bukan murni buatan saya, hanya saya edit beberapa kode yang diperlukan saja. Kode yang saya pakai untuk membuat recommended box ini adalah :
1. Sliding Statis Social Widget dari Kompi Ajaib.
2. Related Post with Thumbnail dari DTE.
Bagi sobat yang ingin menerapkan, silahkan ikuti langkah mudahnya :
Langkah 1 : Simpan kode ini di atas
Langkah 2 : Simpan kode ini diatas
Isi dari Box Rekomendasi ini adalah related post with thumbnail, selain related posts juga ditampilkan random post apabila pengunjung berkali-kali mengunjungi alamat yang sama. Hal ini dilakukan agar pengunjung betah di blog dengan membaca beberapa artikel kita sekaligus.
Artikel ini direquest oleh Jeng +Leony Li dan script bukan murni buatan saya, hanya saya edit beberapa kode yang diperlukan saja. Kode yang saya pakai untuk membuat recommended box ini adalah :
1. Sliding Statis Social Widget dari Kompi Ajaib.
2. Related Post with Thumbnail dari DTE.
Bagi sobat yang ingin menerapkan, silahkan ikuti langkah mudahnya :
Langkah 1 : Simpan kode ini di atas
]]></b:skin>
/* Related Post with Sliding CSS by Kang Ismet*/
#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Arial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:40px;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:-10px;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 {}
/* End CCSS Related Post with Sliding */
Langkah 2 : Simpan kode ini diatas
</head>
<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>
Langkah 3 : Simpan kode ini di bawah <div class='post-footer'>
yang ke 2<!-- Related Post with Sliding by Kang Ismet -->
<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='kislidingbox'>
<div class='kislidingbox-title kislidingbox-www'>
<span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Untuk Anda</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: 0,
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>
<!-- Related Post Widget End -->
223 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
joss pokoe :-bd
lihat aja di scienceandri.blogspot.com,,
thx sob
bitx64.blogspot.com
http://belajarbahasainggrislebihmudah.blogspot.com/
gaulmania .com
saya coba sana sini tetap nggak mau muncul..
mohon bantuan nya ya kang :D
Makin mantaB wae, Kang blog,kangismet ini.
Mohon ini belajar didieu nya Kang Ismet.
Mugi tambah sukses, Amiin yra...
solusinya gimana kang ?
ini blog saya http://webberbagi.blogspot.com/
sekaligus nambah isi beritanya dikit di bawah judul juga editnya gimana kang??
mohon solusinya di tunggu :)
http://1.bp.blogspot.com/-pOS3cLbbGG8/UpnVQoBr5VI/AAAAAAAAAjo/9cjXzjEgy9Q/s1600/Untitled-2.png
http://2.bp.blogspot.com/-ICIjR3uZO_Q/UpmhSj1jSrI/AAAAAAAAFts/1MfLrfII-nY/s1600/dsdsd.jpg
Bagaimana ya boleh saya buat? Mohon bantuan kang,
Tutorial : [url=http://blog.kangismet.net/2013/09/breadcrumbs-seo-friendly-dan-valid-html5.html]Membuat Breadcrumbs SEO Friendly dan Valid HTML5[/url]
Cek dong http://trikblogger.net
<div class='post-footer'>
coba anda pasang kode pemanggilnya tepat dibawah Related Posts.
mau nanya , membuat nya terlihat seperti rekomendasi seperti http://2.bp.blogspot.com/-KYhiKZRDsQg/Ult29rWI1QI/AAAAAAAAAEc/FPzQLz6L_Fg/s320/Capturefffnn.png ini kayak punya nya @Leony Li yang terlihat hanya 1 rekomendasi dan dengan cuplikan tulisannya
. . ,soalnya pngen kaya gitu . . .dibantu ya
seperti contoh di bawah ini
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f57432236fb4dee' type='text/javascript'/>
<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>
<!-- Related Post Widget End -->
Di blog saya fitur2 itu aku sembunyiin kang, orang kagak fungsi sih, gimana dong :(
más : [url=http://blog.kangismet.net/2013/04/menambahkan-jquery-pada-template-blogger.html]Cómo Agregar jQuery Blogger La Plantilla [/url]
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('#kislidingbox').css({'left':'0px'});
} else {
$('#kislidingbox').css({'left':'-360px'});
}
});
nuhun kang elmu na. :D
atau karena saya sudah pasang releated post ?????
Sobat pada keren dan Bagus2 yah..ikitan belajar
Pasang nih Kang trima kasih
http://hekos-soft.blogspot.com
<!-- Related Post with Sliding by Kang Ismet -->
<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='kislidingbox'>
<div class='kislidingbox-title kislidingbox-www'>
<span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Berita Lainnya</span>
<span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='http://3.bp.blogspot.com/-SmFHPXwMFZA/Uj8zuJxElqI/AAAAAAAAMs4/v5qVv1iMmIo/s1600/close-btn.png' title='close'/></a></span>
<span><a href='javascript:void(0);' onclick='jQuery('html, body').animate({scrollTop:0}, 'slow');' style='display:scroll' title='back to top'>…
https://lh4.googleusercontent.com/-CvaZCec561o/Uj-HC9LCeGI/AAAAAAAABcU/C21SJs43AQE/w686-h576-no/contoh.JPG
Top dah tutorialna...
Contoh breadcrumbs saya : Home / » Label / » Postingan saya.
bagaimana yah mas ?
izin praktek y :D