Cara Membuat Slide Box Rekomendasi Blogger


Recommended Post Slide out for Blogger 
Slide Box Rekomendasi
~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 pada kali ini untuk demonya bisa anda lihat diblog ini.
Langsung saja dari pada saya banyak bacot,kalau anda berminat memasangnya ikuti langkah-langkah dari saya:
~Login ke akun blogger sobat,pilih Template  lalu klik Edit Template
nb:bangkup terlebih dahulu template blog sobat agar tidak terjadi hal-hal yang tidak diinginkan
~
Cari kode 
]]></b:skin> lalu simpan kode dibawah ini tepat diatasnya:
/* 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:20px;}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:20px;margin:3px;padding:0px;}.kislidingbox-container > div > span {font-size:14px;}.kislidingbox-container img{float:left;margin:3px 5px;width:20px;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:0px;padding-top:10px;list-style:none;}.related-post-style-2 li {margin-left:-10px;style:none;}.related-post-style-2 li {padding:0 0px 0px 0px;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 */
~Cari kode  </head>
 lalu simpan kode dibawah ini tepat diatasnya:
<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() &gt; 400) {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;});
        } else {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
        }
    });
 
$(document).ready(function(){
 var kislidingbox      = $(&#39;#kislidingbox&#39;);
    var closed      = $(&#39;#kislidingbox-close&#39;);
    var minimize    = $(&#39;#kislidingbox-minimize&#39;);
    var maximize    = $(&#39;#kislidingbox-maximize&#39;);
 
    maximize.hide();
 
    closed.click(function(){
        kislidingbox.css({&#39;right&#39;:&#39;-350px&#39;});
        kislidingbox.fadeOut(&#39;slow&#39;);
    })
    minimize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        minimize.show();
    })
});
</script>
~Langkah selanjutnya cari kode <div class='post-footer'>
yang ke 2 lalu simpan kode dibawah ini tepat dibawahnya:
<!-- Related Post with Sliding by Kang Ismet --><b:if cond='data:blog.pageType == &quot;item&quot;'><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='Exit'><img alt='Exit Button' class='a' src='http://2.bp.blogspot.com/-IuwrMRddJPA/Uj0EKnY22II/AAAAAAAAFhM/V6cKdl07Bxc/s1600/close.png' title='Exit'/></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 == &quot;item&quot;'> <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'> &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: &quot;<data:blog.homepageUrl/>&quot;, widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;, numPosts: 2, summaryLength: 0, titleLength: &quot;auto&quot;, thumbnailSize: 45, noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;, containerId: &quot;sliding-tab&quot;, newTabLink: false, moreText: &quot;&quot;, 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 -->
Lalu save...Selamat mencoba semoga berhasil 
Ispirasi Artikel: Blog Kang Ismet

Mas Arif :

35 komentar

Thanks Sob...! Tambah Ilmu baru

Balas

banyak sekali scriptnya mas ???

Balas

iya betul kang ucup script memang banyak,jadi kalau masang harus teliti..biar berhasil..

Balas

saya simpen dulu aja mas, mungkin kapan2 pasangnya, soalnya blog saya sudah agak berat :)

Balas

ndak,ini juga bukan tempate buatan saya kok ^_^

Balas

wkokokk,,no link live coyy..otomatis terhapus bro !!
http://3spam.com/no-spam-logo.jpg

Balas

Kalau cara bikin kayak di atas ini bagai mana ya min...
live link terhapus otomatis.. :D

Balas

gampang kok ^_^ masuk aja ke http://se0bloging.blogspot.com/2013/09/cara-mengubah-blog-nofollow-menjadi.html :-d

Balas

Mantab gan...patut dicoba :)
visit back gan

Balas

ganti kata-katanya gimana ya gan?

Balas

ganti tulisan rekomendasi untuk anda: <span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Untuk Anda</span> ^_^

Balas

iya ,saya juga pas mampir ke blog kang ucup memang sedikit berat bagi saya soalnya saya pake modem,,mungkin itu karena kang ucup pake backgron gambar,,,,

Balas

sudah sy coba dan berhasil...makasih sob untuk postingan..

salam n sukses selalu.

Balas

info bagus nih, mau di terapin.

oh ya, kira2 halaman blog kita jadi barat gak nih. ntar malah alexa rank kita tambah jauh turun ..??
harap di jawab.
http://gudhangilmu.blogspot.com/

Balas

Kalau boleh tau artikel yang ditampilkan di dalam rekomendasi ini nantinya acak atau yang satu kategori dengan artikel yg sedang dibaca mas ?

Balas

keren sob gue mau coba ah
http://wahyusheon.blogspot.com

Balas

Terlanjur komen disebelah sob, tutorialnya nemu disini ternyata heheheheh,,,
langsung eksekusi sob, makasih banyak ya sob....

Balas

keren mas.. cara membuat slide show nya.. ijin coba ya sob. thanks atas sharingnya
silakan kunjung balik http://update-film-movies.blogspot.com/

Balas

Mantab gan, akhirnya ketemu juga gan caranya, ane soalnya pengen banget nambahin ini gan.
Bisa g diperingkas scriptnya y gan?

Balas

Sob bagaimana cara mengatasi rekomendasi yang kosong..?? (hanya ada tulisan Rekomendasi Untuk Anda)

Balas

mantab gann...

sudah aku coba, bisa lihat hasilnya di blog saya :)
mampir gan di blog sederhana ku, kalau mau download anime ada lho :)
http://newferdii12.blogspot.com/

Balas

thanks mas infonya, akan segera saya pasang di blog baru saya...

Balas

gan di blog saya ga muncul mulu kenapa ya gan?
mohon pencerahannya

Balas

manthap kan
http://si-kudil.blogspot.com/

Balas

Gan di Blogane jga Gak Muncul knp yaa,,?
visit juga www.granoidcomputer.blogspot.com
Thanks

Balas

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel :)