 |
| Sesudah 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)
(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 == "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>- Selanjutnya masukan skrip di bawah ini tepat 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>- 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.htmlhttp://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.htmlhttps://www.developphp.com/video/JavaScript/Peekaboo-Box-Tutorial-Scroll-Bottom-CSS-Transition-Animation