Cara Membuat Widget Recent Post Muncul Saat di Scroll

Widget recent post adalah widget yang menampilkan artikel terbaru dari sebuah blog, widget ini sangat cocok di gunakan pada saat ingin mendaftar menjadi publisher Google Adsense. Pada tutorial kali ini saya akan membahas tentang cara membuat widget recent post muncul saat di scroll.

Baca juga: Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger

Widget recent post ini sangat menarik, karena karena widget recent post ini hanya muncul apabila pengunjung mencoba menarik scroll ke bawah. Sebenarnya saya mendapatkan scriptnya dari blog Kompi Ajaib yang sering memberikan tutorial yang ajaib.

Namun sangat di sayangkan widget recent post ini tidak support https, jadi bagi kalian yang memiliki blog https tidak bisa menggunakan widget recent post ini. Bagi kalian yang penasaran bagaimana cara memasangnya ikuti langkah-langkah dari saya berikut ini.

Baca juga: Cara Memasang Iklan In-feed Google AdSense Diantara Widget Popular Post

Cara Memasang Widget Recent Post dengan Efek Muncul Saat di Scroll

1. Langkah pertama buka akun Blogger kalian.
2. Pilih menu Tema, kemudian pilih Edit HTML.
3. Kemudian masukan skrip css di bawah ini tepat di atas 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>

4. Selanjutnya masukan skrip di bawah ini tepat 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>

5. Setelah selesai pilih Simpan tema.

Baca juga: Cara Membuat Widget Komentator Terbaik di Blogger

Demikian tutorial singkat mengenai cara membuat widget recent post muncul saat di scroll. Jika ada pertanyaan mengenai widget ini, silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel diatas bermanfaat untuk kalian semua. Untuk tutorial tentang blog ataupun widget blogger, silahkan tetap kunjungi blog Tutorial Umum.

Source:
http://www.kompiajaib.com/2015/09/recent-post-blogger-with-peekaboo-efect.html
http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html
https://www.developphp.com/video/JavaScript/Peekaboo-Box-Tutorial-Scroll-Bottom-CSS-Transition-Animation

Share this