Cara Membuat Recent Post Blogger Menggunakan Peekaboo Effect

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

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

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

Langkah Pertama

Silahkan sahabat salin instruksi dibawah ini lalu tempatkan di atas instruksi </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 sahabat salin kembali instruksi CSS dibawah ini lalu letakkan sempurna diatas instruksi </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 TILAN Peekabo Effect

DEMO

Widget yang aku posting ini sengaja hanya mampu ditampilkan melalui Device Mobile, jadi bila sahabat mau lihat balasannya mampu melalui perangkat smartphone atau perangkat mobile lainnya, Selamat mencoba.

Sumber Peekaboo: