Cara Membuat Recent Post Blogger Menggunakan Peekaboo Effect

Ada hal yang menarik ketika saya mencari inspirasi untuk updated postingan ini, dimana saya menemukan artikel di sebuah forum ada pembahasan yang menarik yaitu membuat efek Peekaboo di Recent Post Blogger, saya penasaran dan memahami pembahasan yang ada di forum tersebut ternyata Istilah Peekabo Effect adalah bisa diartikan juga sebagai efek Ciluk Baa, lah kok bisa. Itulah uniknya Blogging menggunakan Platform Blogger salah satu keunggulannya bisa memodifikasi script dan bisa berkreasi.

Nah di postingan kali ini saya akan membahas hal tersebut bagaimana Cara Membuat Recent Post Blogger Menggunakan Peekaboo Effect, jadi saat pengunjung menscroll kebawah Widget recent post akan secara otomatis muncul di sidebar, inilah yang dimaksud Peekaboo Effect atau Efek Ciluk ba. Dipostingan ini akan saya bagikan Cara Membuat Recent Post Blogger Menggunakan Peekaboo Effect yang sudah sedikit dimodifikasi javascript-nya dan sudah disederhanakan, beberapa element yang menurut saya tidak penting dihilangkan dan uniknya lagi widget ini tidak perlu menggunakan Jquery jadi tidak akan membebani loading blog.  

Untuk sobat yang penasaran dan mau mencobanya silahkan simak berikut ini Cara Membuat Recent Post Blogger Menggunakan Peekaboo Effect.

Langkah Pertama

Silahkan sobat salin kode dibawah ini lalu tempatkan di atas kode </body>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<div id="peekaboo">
<div class="peekaboo-title">The Hottest Post<span class="peekaboo-close" onclick="hidepeekaboo()">&amp;times;</span></div>
<script>
//<![CDATA[
!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="http://yourjavascript.com/9532499811/recent-post-thumb.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestpostswiththumbs\"></scr" + "ipt>");
//]]>
</script>
<script>
//<![CDATA[
function resizeThumb(e,t){for(var g=document.getElementById(e),m=g.getElementsByTagName("img"),r=0;r<m.length;r++)m[r].src=m[r].src.replace(/\/s72\-c/,"/s"+t),m[r].width=t,m[r].height=t}resizeThumb("recent-posts-container",130);
function hidepeekaboo(){var e=document.getElementById("peekaboo");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>
</div>
</b:if>

Langkah Ke Dua
Silahkan sobat salin kembali kode CSS dibawah ini lalu letakkan tepat diatas kode </head>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
img.recent-post-thumb {width:130px;height:80px;float:right;margin: 5px 5px 5px 10px;}
#recent-posts-container {float: left;width: 100%;min-height: 55px;margin:0 auto;padding: 0;font-size:12px;}
ul#recent-posts-container {list-style-type: none;padding: 0px; }
ul#recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul#recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul#recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul#recent-posts-container li{padding:5px 5px 5px 10px;min-height:50px;list-style-type:none;margin:0;color:#777;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:right}
#recent-posts-container a { text-decoration:none; }
#recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight:500;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
div#peekaboo{position:fixed;bottom:0;right:-352px;padding:0;width:300px;height:auto;font-family:inherit}
.peekaboo-title{font-size:130%;font-weight:900;background:#333;color:#fff;padding:8px;margin:0}
.peekaboo-close{float:right;cursor:pointer;}
</style>
</b:if>

Dan Selesai, jangan lupa untuk di save HTML Blog sobat.

DEMO TAMPILAN Peekabo Effect

DEMO

Widget yang saya posting ini sengaja hanya bisa ditampilkan melalui Device Mobile, jadi kalau sobat mau lihat hasilnya bisa melalui perangkat smartphone atau perangkat mobile lainnya, Selamat mencoba.

Sumber Peekaboo:
http://helplogger.blogspot.co.id/2014/11/5-cool-recent-post-widgets-for-blogger.html