Cara membuat related posts efek slide out dengan gambar di blogger
Cara membuat realted posts efek slide out
1. Masuk ke menu template lalu klik edit html
2. cari kode </head> dan letakan kode CSS berikut datas 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEEEnJiO0bEiF5_VPRN-cdjfaBApRRvpV5uovEtvVlt4ipgrEU4Ud4i4bS8Sty16MlPekx7lcSYNx_UgrVkerBoZWFuuMW8eEtTeIyhZXJCbJOJv2lDRmW8bGQauIJNjy4Jb-xJw4G338/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv9rPYoRsUTB5u2ra0YBOir7Wzg8Vmx_0a48JtYpPtpb4WoogwKwQpZeWDcmKLzBdTW6zFX2XXF0SKJwyDmxW0hlsefLCRyHDhodFWg59Pbmn_UIoAi8Gu1-c5dsx1omXjByEAPk2uLmY/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 ente cari kode </body> dan letakan kode Javascript dibawah ini tempat di atas 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. Kemudian letakan struktur html ini juga tepat di atas 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFaCf3SyRpbyF1lTVNUGxyU1jUYpiyX41IOhq1hSIcLcYnwiqmd5qlOt-RG5NXVSQGaMu9lbzFzYmxzFuKNHprox8TnQ6jWwwPOUNE9-mE22n2zlficK06qLBTaZfY1GONgSlnG8N2xtQv/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh555c_FuXrta3gTWgXg3FG2aabjdFKsclbZrYEXgiRK1Sew6zXXxQkMyJBJjhmczyXBk95NrLAvJte-6Oqq5cDMdA4hS4Egr8Q7M0yjOasXJIPjz6qUWTyU_gLRpOkyqu4nXINlVl7v8A/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uVfjsOJmmWaC618be3ZjHzYe7ArKGtD3TvhI6Ib1CJI-nUnc8okv1DpTHxCFToqupGfZHCCXbs_qyLqpJEfuHvWRWNwvYJGe63gkLSq_ZI7qebM8QiUeD8YmjOhDr9ApwIn6aqzSgLE/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_bJ0f9fFKCKQ4k-JcYKX7pUQx_2VG9tGp86u15WYk0CxU4j_67kDf3ExLoKzNQx1O0ordBlDUUGy622FijRylm61daFt9654vs_4h2uo6HyoIW_MksYmgaQsB-3c0fseyvwo2nlMLwY/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRT2LYkCcm_PwqneymFfttN2VHzbGmbARgYl94cNpQFlEUh26PMBY7vsj0I27hJHT7Ew72Gwn18AJ_GkzvdNhh1HHiBQ7ZIuMldxMIQ-8HZcfgSsbss7Vkm6N86-xafS_WwZeVHPpMww/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWbDi9nhXiuHQSmYBl9XduKZ0dwU4dpL_zaFlkj58l_wAt2CMSbEevHHLyAD7b9LDXW47lPLYiCrziAutAB3RbwqNlBIixlWlkeFdXeUcsivNPJK8IJe5nbQwsstogz2kfTLz77oXNCqI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdrDrO9ZDcEojqVPh3Sh2FXWT_gUlW70okRutA4sWinvpcqIH1Vr0YJDGetuCeRLejTMYiXZc_-4_WQ9H2YPNJcTEoQVMT_uiWTnHxag9zV96OyXhjrfVewB_i_y6W_1bn55S73vIEs8/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>
berikut ini adalah gambar animasi nya :
Demikianlah cara related posts efek slide out dengan gambar di blogger.,
Dari contoh di atas bisa di ubah dan di kembangkan lagi sesuai selera anda masing masing.
Terimakasih telah mengunjungi blog kami,,
Semoga artikelnya bermanfaat.
Wasalamualaikum Wr.Wb.
Cara membuat related posts efek slide out dengan gambar di blogger
Reviewed by Unknown
on
10.58.00
Rating:
Reviewed by Unknown
on
10.58.00
Rating:
Tidak ada komentar: