Seocips.com. Pada kesempatan ini kami akan membagikan lagi mengenai bagaimana cara membuat Related Posts Efek Slide Out di Blog setelah sebelumnya kami juga telah membagikan tentang widget recent post slide out on scroll. Nah kekurangan widget ini adalah anda harus mengedit atau memilih sendiri artikel apa yang ingin anda tampilkan, jadi tidak otomatis artikel terkait dari blog anda.

Related Posts Slide Out




Membuat Related Posts Slide Out

Nah untuk sobat yang ingin mencobanya di template blog sobat berikut ini adalah cara membuatnya!
1. Masuk ke Menu Template/Rancangan > Edit Html
2. Cari kode </head> dan letakan kode CSS berikut diatas kode </head>
<style>
.rp_list { font-family:Verdana,Helvetica,sans-serif; position:fixed; right:-220px; top:40px; margin:0; padding:0; }
span.rp_shuffle { background:#222 url(http://1.bp.blogspot.com/-nxJuVhYgWIQ/VRKGVl3-zoI/AAAAAAAAEHY/1VAgzRJ2SKI/s1600/seocips-shuffle.png) no-repeat 10px 50%; width:28px; height:14px; display:block; margin:10px 0 0 20px; cursor:pointer; padding:4px; border:1px solid #000; -moz-border-radius:5px 0 0 5px; -webkit-border-bottom-left-radius:5px; -webkit-border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-left-radius:5px; }
.rp_list ul { margin:0; padding:0; list-style:none; }
.rp_list ul li { width:240px; margin-bottom:5px; display:none; }
.rp_list ul li div { display:block; line-height:15px; width:240px; height:80px; background:#333; border:1px solid #000; -moz-border-radius:5px 0 0 5px; -webkit-border-bottom-left-radius:5px; -webkit-border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-left-radius:5px; }
.rp_list ul li div img { width:70px; border:none; float:left; margin:4px 10px 0 4px; border:1px solid #111; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000; }
span.rp_title { font-size:11px; color:#ddd; height:46px; margin:4px 0 0 20px; display:block; text-shadow:1px 1px 1px #000; padding-top:3px; background:#222; -moz-box-shadow:0 0 5px #000 inset; -webkit-box-shadow:0 0 5px #000 inset; box-shadow:0 0 5px #000 inset; }
span.rp_links { width:195px; height:8px; padding-top:2px; display:block; margin-left:42px; }
span.rp_links a { background:#222 url(http://2.bp.blogspot.com/-EeH9wUW-9bA/VRKGZxM56RI/AAAAAAAAEHg/so6ClT46vsU/s1600/seocips-bgbutton.png) repeat-x; padding:2px 18px; font-size:10px; color:#fff; text-decoration:none; line-height:1; -moz-box-shadow:0 1px 3px #000; -webkit-box-shadow:0 1px 3px #000; box-shadow:0 1px 3px #000; text-shadow:0 -1px 1px #222; cursor:pointer; outline:none; }
span.rp_links a:hover { background-color:#000; color:#fff; }
</style>
3. Selanjutnya cari Kode </body> dan letakan kode JavaScripts berikut tepat diatas kode </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script>//<![CDATA[
$(function() {
var $list = $('#rp_list ul');
var elems_cnt = $list.children().length;
load(200);
function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);
function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
//]]></script>
4. Sekarang letakan struktur HTML ini juga diatas kode </body>
<div class='rp_list' id='rp_list'>
 <ul>
<li> <div>
 <img height='72' width='72' alt='Cara Membuat Pure CSS3 Manual Slider di Blog' src='http://3.bp.blogspot.com/-Ud7dkiNXM2E/U4Ui1GWTFJI/AAAAAAAABqE/R0zhx8PW9OU/s72-c/BIE_sucker+punch.jpg'/> <span class='rp_title'>Membuat Pure CSS3 Manual Slider di Blog</span> <span class='rp_links'> <a href='http://www.seocips.com/2015/03/cara-membuat-pure-css3-manual-slider-di-blog.html' target='_blank'>Article</a> <a href='http://www.seocips.com/2015/03/cara-membuat-pure-css3-manual-slider-di-blog.html' target='_blank'>Demo</a> </span> </div>
</li>
<li> <div>
 <img height='72' width='72' alt='Cara Membuat Background Efek Slide di Blogspot' src='http://3.bp.blogspot.com/-skPGplQjm-I/VQ2J6F0V2LI/AAAAAAAAEBs/CqjLZVAf9A8/s72-c/membuat-background-efek-slide-show-diblog.jpg'/> <span class='rp_title'>Cara Membuat Background Efek Slide di Blogspot</span> <span class='rp_links'> <a href='http://www.seocips.com/2015/03/cara-membuat-background-efek-slide-di-blogspot.html' target='_blank'>Article</a> <a href='http://www.seocips.com/2015/03/cara-membuat-background-efek-slide-di-blogspot.html' target='_blank'>Demo</a> </span> </div>
</li>
<li> <div>
 <img height='72' width='72' alt='Cara Membuat Resposive Recent Post Slider Di Blog' src='http://3.bp.blogspot.com/-aIcj6uyjUyQ/VQBjMQZJO3I/AAAAAAAAD4g/Y5Z1dpTYdS4/s72-c/resposive-recent-post-slider.gif'/> <span class='rp_title'>Cara Membuat Resposive Recent Post Slider Di Blog</span> <span class='rp_links'> <a href='http://www.seocips.com/2015/03/cara-membuat-resposive-recent-post-slider-di-blogspot.html' target='_blank'>Article</a> <a href='http://www.seocips.com/2015/03/responsive-recent-post-slider-demo.html' target='_blank'>Demo</a> </span> </div>
</li>
<li> <div>
 <img height='72' width='72' alt='Cara Membuat Image Slider dengan Efek Quake diBlog' src='http://4.bp.blogspot.com/-tI-pIsI_qsA/VPs8xglAmyI/AAAAAAAAD2M/9873qFX8nok/s72-c/image-slider-efect-quake.gif'/> <span class='rp_title'>Cara Membuat Image Slider dengan Efek Quake diBlog</span> <span class='rp_links'> <a href='http://www.seocips.com/2014/07/slider-dengan-efek-quake-di-template.html' target='_blank'>Article</a> <a href='hhttp://www.seocips.com/2014/07/slider-dengan-efek-quake-di-template.html' target='_blank'>Demo</a> </span> </div>
</li>
<li> <div>
 <img height='72' width='72' alt='Cara Membuat Simple Manual Slider Di Blogspot' src='http://3.bp.blogspot.com/-CHiZlbFtrKQ/VIvZ6QLk2VI/AAAAAAAACv0/ZYs4W44TMUU/s72-c/manual_slide_for_blog_blogger_blogspot.png'/> <span class='rp_title'>Download Template Sporty Magazine 2</span> <span class='rp_links'> <a href='http://www.seocips.com/2014/12/simple-css-manual-slider-for-blog.html' target='_blank'>Article</a> <a href='http://www.seocips.com/2014/12/demo-membuat-simple-css-manual-slider-di-blog.html' target='_blank'>Demo</a> </span> </div>
</li>
<li> <div>
 <img height='72' width='72' alt='Membuat Image Slider di Blogger Versi 6' src='http://2.bp.blogspot.com/-XK_9-FMlRGQ/VPVhntWWTsI/AAAAAAAADws/y41eIL3bC2w/s72-c/image-slider-v6-seocips.gif'/> <span class='rp_title'>Membuat Image Slider di Blogger Versi 6</span> <span class='rp_links'> <a href='http://www.seocips.com/2014/08/membuat-image-slider-di-blogger-versi-6.html' target='_blank'>Article</a> <a href='http://www.seocips.com/2015/03/demo-image-slider-v6-for-blogspot.html' target='_blank'>Demo</a> </span> </div>
</li>
<li> <div>
 <img height='72' width='72' alt='Cara Membuat Slide Rekomendasi Artikel Terkait' src='http://3.bp.blogspot.com/-6a_q5SkRI04/U5v7_TOgQMI/AAAAAAAABw4/PAAHpBp0eYw/s72-c/artikel+rekomendasi+terkait.png'/> <span class='rp_title'>Cara Membuat Slide Rekomendasi Artikel Terkait</span> <span class='rp_links'> <a href='http://www.seocips.com/2014/06/cara-membuat-slide-rekomendasi-artikel.html' target='_blank'>Article</a> <a href='http://www.seocips.com/2014/06/cara-membuat-slide-rekomendasi-artikel.html' target='_blank'>Demo</a> </span> </div>
</li>
</ul>
<span class='rp_shuffle' id='rp_shuffle'/>  </div>
Diatas hanya contoh silahkan di edit sesuai dengan keinginan anda.

Anda bisa menambahkan beberapa struktur minimal 5. Dalam JavaScript mendefinisikan bahwa hanya menampilkan 5 posting, untuk yang lainnya silahkan di edit sesuai dengan keinginan sobat. Ok sekian tentang related post slide out efect dan semoga bermanfaat.
2 Komentar untuk "Cara Membuat Related Posts Slide Out Dengan Gambar Di Blog"

bagus sih bang, tapi gak responsif yah, kalau blog dibuka dari hp jadinya ketutup deh. ada yang lebih responsif. http://mastrigus.blogspot.com/

Benar mas, tapi jika di tampilan mobile bisa di sembunyikan agar tidak menggangu, tapi kayaknya widget ini kurang praktis karena bukan artikel otomatis tapi harus edit satu persatu artikelnya, itu yang bikin capek..