cara membuat '' new '' related post slide out KEREN di blog

ok sobat,, pada kesempatan ini saya akan membahas artikel
mengenai cara membuat '' new '' related post slide out di blog
dan widget ini anda harus memilih artikel yg ingin anda tampilkan,
berbeda dengan artikel terkait yg ada di blog kita sendiri,,,..
ok,,,langsung aja menuju ke TKP...dan jangan lupa klik demonya di bawah...

• buka blog anda
• klik template
• klik edit HTML
• cari kode ini </head> 
• dan copas kode di bawah, tepat diatas kode ini </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/AVvXsEgIsansvBN6RdrFpRIJjgd59or4aof95hotcj_Z6RCO0FH2nOrPazCXf_A7KzDIwrsUur7Hm1zo0vBsf8-x9N1O66bnrQybo7YMBQaboxPDkqebB08tEc1xqvU3PQ4puxuGoLQ2cSpCcQA/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/AVvXsEjqD67amoPefCLjjEQkR0gUO9KAxqt_YmYmIIgyGmbhcw47o2aC_U0l8NLW7xCG3H0uHBUJYmoIrLeOUAflP_Z98xHOnR9LejRaWY15im-D51PD4bYQHjC2FCurfTWNShq7bq-9nyGzLAU/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>

• selanjutnya cari kode ini </body>
• dan copas kode di bawah, tepat diatas kode ini </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>

<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/AVvXsEhzZiPrbtmRTNRz6WIWQNDbi3OILx_SwLrDKXy5kMY3le8JOIZD9tBHn2pcXQ4DSYwnvVcWqBJPgaoUrXSVJDkvcyGXmrQdBG4haAFZlpl278w_nyHAV9BC3M8kWgUo5C93MmPiPTXE9rg/s1600/change-text-select-example.png'/> <span class='rp_title'>cara mengubah background teks dgn meng-block/menyalin di blog </span> <span class='rp_links'> <a href='http://ivankvalentine.blogspot.co.id/2014/08/cara-mengubah-background-teks-dgn-meng.html' target='_blank'>Article</a> <a href='http://ivankvalentine.blogspot.co.id/2014/08/cara-mengubah-background-teks-dgn-meng.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://lh4.googleusercontent.com/-fQQLW7SjjdA/AAAAAAAAAAI/AAAAAAAAAbs/a8JE6ply_YY/s35-c/photo.jpg'/> <span class='rp_title'>kumpulan NEW EFEK KEREN di blogger 2014</span> <span class='rp_links'> <a href='http://ivankvalentine.blogspot.co.id/2014/01/kumpulan-new-efek-keren-di-blogger-2014.html' target='_blank'>Article</a> <a href='http://ivankvalentine.blogspot.co.id/2014/01/kumpulan-new-efek-keren-di-blogger-2014.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/AVvXsEh9LPosGt2V_GKt0afw8L6_LA_yJYDpxqsldgnIDXKDTTQ3i53pv_5MLFzQXjdtPkafBEQl-G392JsW0iL9rQY7Wa4OGlXV5sAGMPBX0wtpp4w9c9OMx0bEYhjzYv2AJJ8kFrFhizJRMTI/s180/1016610_357625841027170_1110579430_a+copy.jpg'/> <span class='rp_title'>membuat BACKGROUND GOOGLE+FOLLOWER MENJADI KEREN</span> <span class='rp_links'> <a href='http://ivankvalentine.blogspot.co.id/2013/12/membuat-background-googlefollower.html' target='_blank'>Article</a> <a href='http://ivankvalentine.blogspot.co.id/2013/12/membuat-background-googlefollower.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/AVvXsEj9eS2tQxSLdRKWyW1HH6-BVw-U4Gi7wewrF3wxmEdNopkvdawoO2fxEMmWEzJ_PQJQYp23IFdZoGs89yyLEAADPqUcyLaVtep2iG-XpPeYyBc06K3ULGJ1x57RWxawDmZbmW6YiNefYjNI/s1600/ipin.jpg'/> <span class='rp_title'>cara meng-design kotak komentar dengan corak warna di blog</span> <span class='rp_links'> <a href='http://ivankvalentine.blogspot.co.id/2014/08/cara-meng-design-kotak-komentar-dengan.html' target='_blank'>Article</a> <a href='http://ivankvalentine.blogspot.co.id/2014/08/cara-meng-design-kotak-komentar-dengan.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/AVvXsEi_9hFHoKOMKAYbHYT80TE5Y8zkJQQEqDmGxcM3pPYaJpSph60HS3Ju2mN4r8nbC_Yf7b5QyB2EYMmLwbOTmWpTCqRgKAjyTwgbgmbMO1VkP34sRha3vlR0sRFqH-B8acSIMRKoaupebws/s1600/Pegasus-Seiya.jpg'/> <span class='rp_title'>Saint Saiya Cursor Trail</span> <span class='rp_links'> <a href='http://ivankgribatako.blogspot.co.id/2015/10/saint-saiya-cursor-trail.html' target='_blank'>Article</a> <a href='http://ivankgribatako.blogspot.co.id/2015/10/saint-saiya-cursor-trail.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/AVvXsEhOy1yffMn0Fvt9RWJFMOhbcCTpw43MEiuhsHQ3Jg2Uzv2MocpM0pxSR0Dq-q14lj8Zob5z0yfwX0sh5ePA5Ou-0hLK5adPePoeY5BiEbDWP16fXPgmkv6HsOJQdb_xaAz1hYyxQblah_U/s1600/MozLoco3a.gif'/> <span class='rp_title'>Widget Kereta Api Berjalan Di Blog</span> <span class='rp_links'> <a href='http://ivankgribatako.blogspot.co.id/2015/10/widget-kereta-api-berjalan-di-blog.html' target='_blank'>Article</a> <a href='http://ivankgribatako.blogspot.co.id/2015/10/widget-kereta-api-berjalan-di-blog.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/AVvXsEjsWSEV7X5tWouX-7YlePSHmw2nm_rDBBFj4BXucrp4SS45vg3mWgKXUYRmsFwSGDZGY2VjdronS2Gx6UOIqP_hA26petDca8AXLPtiWzGf7EiX6Swr5i4C-cdugQc1wb7As0GTvc9KyRS6/s640/gFOV7.png'/> <span class='rp_title'>cara mengganti NEW cursor ANIME JEPANG di blog part #1

</span> <span class='rp_links'> <a href='http://ivankgribatako.blogspot.co.id/2013/12/cara-mengganti-new-cursor-anime-jepang.html' target='_blank'>Article</a> <a href='http://ivankgribatako.blogspot.co.id/2013/12/cara-mengganti-new-cursor-anime-jepang.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/AVvXsEjPU7TffC7mOaEpDaeWYXts_CtxK0Q9YeO75gCmsBFUaXMloCiZ89VEwffVUrKryX1xTFOCmMCoa6xTbBaJgxMLoXX-zhmkQ_SF9D6PWI_PG-gkA7bkU07wxQSFp61lTE-TyKjWzUfTa4uf/s1600/hatsune_miku_chibi_colored_by_chipmunkintheblender-d498wbh.png'/> <span class='rp_title'>cara mengganti NEW cursor ANIME JEPANG di blog part #2

</span> <span class='rp_links'> <a href='http://ivankgribatako.blogspot.co.id/2013/12/cara-mengganti-new-cursor-anime-jepang_4.html' target='_blank'>Article</a> <a href='http://ivankgribatako.blogspot.co.id/2013/12/cara-mengganti-new-cursor-anime-jepang_4.html' target='_blank'>Demo</a> </span> </div>

</li>

<li> <div>

 <img height='72' width='72' alt='Cara Membuat Slide Rekomendasi Artikel Terkait' src='http://i59.photobucket.com/albums/g311/PowerofZelda/Reika1.png'/> <span class='rp_title'>'' NEW '' efek hantu jepang terbang DI BLOG

</span> <span class='rp_links'> <a href='http://animemikuku.blogspot.co.id/2015/11/new-efek-hantu-jepang-terbang-di-blog.html' target='_blank'>Article</a> <a href='http://animemikuku.blogspot.co.id/2015/11/new-efek-hantu-jepang-terbang-di-blog.html' target='_blank'>Demo</a> </span> </div>

</li>

<li> <div>

 <img height='72' width='72' alt='Cara Membuat Slide Rekomendasi Artikel Terkait' src='http://oi59.tinypic.com/317efdh.jpg'/> <span class='rp_title'>'' NEW '' cara memasang buka tutup emoticon di blog 2015 / 2016</span> <span class='rp_links'> <a href='http://animemikuku.blogspot.co.id/2015/10/new-cara-memasang-buka-tutup-emoticon.html' target='_blank'>Article</a> <a href='http://animemikuku.blogspot.co.id/2015/10/new-cara-memasang-buka-tutup-emoticon.html' target='_blank'>Demo</a> </span> </div>

</li>

</ul>

<span class='rp_shuffle' id='rp_shuffle'/>  </div>

• klik simpan / save

<< CATATAN >>

-- Ganti warna biru dgn url gambar

-- Ganti warna merah dgn url artikel yg anda suka

==> SELAMAT MENCOBA <==