11 June 2017

Cara Membuat Widget Recent Post Muncul Saat di Scroll

Cara Membuat Widget Recent Posts Muncul Saat di Scroll
Sesudah di Scroll
 Cara Memasang Widget Recent Posts dengan Efek Muncul Saat di Scroll
Sebelum 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.

(Baca juga : Cara Membuat Widget Recent Post Multi Color Keren di Blogger)
Widget recent post ini juga 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.

Bagi kalian yang penasaran bagaimana cara memasangnya ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Widget Recent Post dengan Efek Muncul Saat di Scroll

  • Langkah pertama buka akun blogger kalian
  • Pilih menu Tema, kemudian pilih Edit HTML
  • 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>
  • 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>

  • Setelah selesai pilih Simpan tema.

(Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog)

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 saya ini. Untuk tutorial tentang blog ataupun widget blogger, silahkan tetap kunjungi 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

4 comments

nah ini dia yang bingung, akhirnya ketemu caranya disini..
Sangkyu gan :D

Terima kasih tutornya gan, Ijin praktek gan

Mantap nih, bisa diaplikasikan ke blog ane

Wah keren .. patut di coba ini, btw thanks tutorialnya gan.

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon