Recent Post Blogger With Peekaboo Effect

Mendapatkan sesuatu dengan cara yang lain yakni menyenangkan. Terlebih hal tersebut sanggup dipakai oleh orang lain juga. Demi untuk mendapat inspirasi postingan untuk Kompi Ajaib, aku mencoba menggabungkan 2 buah tutorial yang sudah ada untuk menciptakan recent post Blogger with peekaboo effect.

Efek Peekaboo atau Peek A Boo atau Ciluk Ba dalam hal ini yakni sebuah sebuah div akan muncul saat halaman discroll dan mencapai bab bawah halaman. Nah div ini kita manfaatkan untuk menampilkan recent post Blogger yang javascript-nya aku sederhanakan dengan membuang element-element yang tidak diharapkan dan widget ini tidak memakai jquery sehingga cukup ringan. Demo, silahkan scroll ke bawah pada bab kotak "Result" di halaman JsFiddle pada link demo di bawah ini.

DEMO

Bagaimana, Anda ingin mencobanya juga? Silahkan ikuti langkah-langkahnya di bawah ini.

1. Pertama
Silahkan copy instruksi CSS di bawah ini dan simpan di atas instruksi </head>. Widget ini akan ditampilkan hanya di halaman postingan dan tidak ditampilkan di perangkat mobile.

 <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>

2 Kedua
Silahkan copy instruksi di bawah ini dan simpan 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>

Selesai... Silahkan SAVE edit HTML blog Anda dan buka salah satu halaman postingan lalu gulung halaman hingga ke bawah untuk melihat penampakan recent post-nya.

Selamat mencoba....

Sumber Recent Post:
https://komporajaibku.blogspot.com//search?q=5-cool-recent-post-widgets-for-blogger

Sumber Javascript Peekaboo:
https://www.developphp.com/video/JavaScript/Peekaboo-Box-Tutorial-Scroll-Bottom-CSS-Transition-Animation
Sumber https://www.kompiajaib.com/

Share this post