Ditulis oleh: Ditulis pada: 9/13/2015
Mendapatkan sesuatu dengan cara yang lain adalah menyenangkan. Terlebih hal tersebut bisa digunakan oleh orang lain juga. Demi untuk mendapatkan ide postingan untuk Kompi Ajaib, saya mencoba menggabungkan 2 buah tutorial yang sudah ada untuk membuat recent post Blogger with peekaboo effect.Efek Peekaboo atau Peek A Boo atau Ciluk Ba dalam hal ini adalah sebuah sebuah div akan muncul ketika halaman discroll dan mencapai bagian bawah halaman. Nah div ini kita manfaatkan untuk menampilkan recent post Blogger yang javascript-nya saya sederhanakan dengan membuang element-element yang tidak diperlukan dan widget ini tidak menggunakan jquery sehingga cukup ringan. Demo, silahkan scroll ke bawah pada bagian kotak "Result" di halaman JsFiddle pada link demo di bawah ini.
Bagaimana, Anda ingin mencobanya juga? Silahkan ikuti langkah-langkahnya di bawah ini.
1. Pertama
Silahkan copy kode CSS di bawah ini dan simpan di atas kode
</head>. Widget ini akan ditampilkan hanya di halaman postingan dan tidak ditampilkan di perangkat mobile.
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.pageType == "item"'>
<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 kode di bawah ini dan simpan di atas kode
</body>
<b:if cond='data:blog.isMobileRequest == "false" and data:blog.pageType == "item"'>
<div id="peekaboo">
<div class="peekaboo-title">The Hottest Post<span class="peekaboo-close" onclick="hidepeekaboo()">&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&alt=json-in-script&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 kemudian gulung halaman sampai ke bawah untuk melihat penampakan recent post-nya.
Selamat mencoba....
Sumber Recent Post:
http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html
Sumber Javascript Peekaboo:
https://www.developphp.com/video/JavaScript/Peekaboo-Box-Tutorial-Scroll-Bottom-CSS-Transition-Animation