Cara Membuat Widget Related Posts Hover to Slide Out di Blogger dengan Mudah

Widget seperti ini bisa jadi pilihan menarik buat kamu yang ingin menampilkan rekomendasi artikel lain di blog dengan tampilan yang sedikit berbeda dari widget related posts pada umumnya, yah cuma sayangnya widget ini tidak di design ramah dengan tampilan mobile. Dengan efek hover to slide out, kotak rekomendasi artikel dapat muncul atau bergeser ketika pengunjung mengarahkan kursor ke arah widget. 

Widget tersasa rumit karena kamu harus menentukan sendiri artikel apa saja yang ingin ditampilkan. Jadi, tidak otomatis seperti widget-widget Blogger yang sudah admin bagikan sebelumnya. Kamu dapat memasukkan tautan dan judul artikel secara manual sesuai kebutuhan, misalnya artikel tutorial, tips Blogger, atau postingan lain yang menurutmu menarik untuk dibaca pengunjung.

Namun, ada hal yang perlu kamu perhatikan sebelum memasang widget ini. Proses pemasangannya mungkin sedikit lebih rumit dibandingkan widget biasa karena kamu perlu mengedit kode HTML. Kamu juga harus memahami bagian kode yang perlu diubah agar bisa menentukan artikel yang akan ditampilkan. Kalau kamu masih pemula, sebaiknya lakukan pemasangan dengan hati-hati dan backup template terlebih dahulu supaya lebih mudah mengembalikannya jika terjadi kesalahan.

Recent Posts Hover to Slide Out

Cara Membuatnya di Blogger

1. Di Blog Blogger
2. Masuk ke menu Template >> Edit Html

Template - Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> 

.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/AVvXsEgrtsCANvLl4iBk3mJHMtC6UtdbdXpztcvRhk3MWv5Ofp3xgV2uEtTyuHodTZmh5h1kMS_Eqc3YvghUt5_xstJiSVva8vRukCWKFv9IfvOPqF7N8Sc_dUxBOAuYyIUMqt0dCIZ_f77vZhs/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/AVvXsEjfZ1x1UZkOuiihWnq30oevUdHOKjH4a8zOH9owmjoj4sCOQGH8Rccnes3_WIDGXv4vRv-jnWTdSD5x4Ng2w9FKzaJchcaqaywYWbQIj9YXEYaQkUuUBH8gtEz2TTWYBqy_PxclTeqCioY/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; }

4. Selanjutnya, letakan kode berikut ini di atas kode </head> atau </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>

5. Selanjutnya, letakan kode berikut ini 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/AVvXsEhd7uLagjgQyhb8dTwCLxkR_IcNKG5eBlm1Jv3iBQaH5JXbfUz_lbAvHYqK6Cy5A7x4gRtzTXAl10jBCxiiJStjA7DSRYGaRg6LVpprkdIaz7q-_heWO4oF2W506tgWDO3Xisso7B4-n0pB/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.haisob.com' target='_blank'>Article</a> <a href='http://www.haisob.com' 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/AVvXsEjeQVRvVnGtU1l9lzBqIHq5qKHWMfSP0s-fP5JVdIIw-NbuQTdM68M_ICDSStgsThY_XJT20jjYKerRyNMIKIlqoZBW8MhlPauHnTBn8oTnxjC2F6mYNOfxhTIiLAMudfugRhTXR4nHZAY/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.haisob.com' target='_blank'>Article</a> <a href='http://www.haisob.com' 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/AVvXsEjO1kGIu_iefc6bdS__8aPL8fsEkHBs7Ooc3q3iDH2Sb8qP3wCCBZsDcJ5LJDWFheCTxIBND3kekz4uEbax8FdahEePsuCylo00DVZWxMuiuywUL_9xoTsukKRXftfDoWu0bAHQWll_i6c/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.haisob.com' target='_blank'>Article</a> <a href='http://www.haisob.com' 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/AVvXsEjOxABBKrn6GdgpNMl3-CePnS2PuUpqygx1_0Oc3L0RvFMXzoQGyXVGOee5dpv1-0XDXwJ9bqCu3Hm234kbeYWhRsf49Om-JtPIthZPs5xKoxF4Pe7af5kWBvvoLfNt41RVQu92NW7TjRk/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.haisob.com' target='_blank'>Article</a> <a href='http://www.haisob.com' 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/AVvXsEggYm3hkHnvEt92Xum3Q1WGL2Ij5hUfsaIIl_v8OSpo2IWzJQQljHHe5EXsIi0vFehdvqO7orvltXcmICiDJXrUx9GNCo3NL4z1W4_WszC9mkijniT4gF9QscUt68eNDUS1zYwnX-hyeYQ/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.haisob.com' target='_blank'>Article</a> <a href='http://www.haisob.com' 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/AVvXsEgNd_1vyxDnIAp4eKTtOqqPvF5o4CVMqh6C9YHUfK6191p1k_MqWszr2D8tw8TadjZnGVjtjjRmS73bFu8XUX-Pek4K37KBv283ELuoFPciWeIxNn6PEcNYJucf-j2gKSMfdQ09Mu-LW9M/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.haisob.com' target='_blank'>Article</a> <a href='http://www.haisob.com' 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/AVvXsEjfBshyphenhyphenxGZCQ4OXvErVlMcqIfcY_r4eConOz1lT2yPaqf7afhNHsYd0sV7sgjKSFnLv98z23k7F71LnePql1uj56NzIgKkpTmrbKOGTMk-W3pCNPhWJwdszL8DxfhK3H6fIMC1oSicjKyc/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.haisob.com' target='_blank'>Article</a> <a href='http://www.haisob.com' target='_blank'>Demo</a> </span> </div>
</li>
</ul>
<span class='rp_shuffle' id='rp_shuffle'/>  </div>

6. Save.

Kamu bisa menambahkan beberapa struktur minimal 5. Dalam JavaScript mendefinisikan bahwa hanya menampilkan 5 posting, untuk yang lainnya silahkan diedit sesuai dengan keinginan kamu. Di atas hanya contoh silahkan diedit.

Meskipun membutuhkan sedikit ketelitian, widget Related Posts Hover to Slide Out ini layak dicoba jika kamu ingin membuat blog terlihat lebih menarik, atau sekedar menambah pengetahuanmu dalam edit html blog. Selamat mencoba.