Latest News

Recent Post Efek Ciluk Ba - Unik dan Berbeda

Membuat recent post efek "Ciluk Ba". Recent post atau pos terbaru termasuk salah satu widget yang sering di pasang pada bilah sidebar. Banyak model recent post yang variatif sering kita temui pada desain sebuah blog.

Entah kenapa rata-rata recent post pada tiap blog hampir sama model dan bentuknya. Bisa jadi tutorial nya mungkin saja berasal dari satu sumber.

Melalui artikel ini aku punya sedikit tips untuk membuat recent post yang sedikit berbeda namun unik. Namanya recent post efek Ci Luk Ba.

Jujur, tips ini aku penyesuaian dari salah satu blogger idola aku yaitu Mas Adhy Suryadi. Beliau ialah blogger yang super duper kreatif serta sangat suka menyebarkan ilmu.

Blog yang di asuh nya ialah kompiajaib.com nah, bagi yang mau berguru banyak perihal ngeblog silahkan main ke blog nya Mas Adhy.

Saat lagi jalan-jalan di sosial media milik Google, tanpa sengaja aku ketemu salah satu judul artikel dari kompiajaib yang berjudul “Recent Post Blogger With Peekaboo Effect”.

Melalui negoisasi yang singkat, jadinya Mas Adhy pun memberi lampu hijau kepada aku untuk menulis ulang artikel serupa pada blog ini. Terima kasih buat Mas Adhy Suryadi atas “asese” nya.

OK lah, eksklusif saja kita menuju ke kawasan kejadian peristiwa.

Recent Post Efek "Ciluk Ba"

Cara Membuat Recent Post Efek “Ci Luk Ba” (peek a boo effect)


Efek Peek a Boo merupakan div yang akan nongol dikala halaman kita scroll sampai ke adegan bawah. Java script pada div ini telah di sederhana kan dengan membuang bagian-bagian yang di anggap tidak perlu.

Widget ini pun cukup ringan sebab tidak memakai jquery. Namun perlu di ingat, widget ini hanya muncul pada halaman postingan serta tidak akan muncul pada perangkat mobile.

Caranya sangat mudah dan sederhana, perhatikan langkahnya di bawah ini.

Dari dasbor masuk ke menu template lalu klik edit html.

Cari aba-aba </head> lalu salin aba-aba CSS di bawah ini dan letakkan di atas aba-aba </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, cari aba-aba </body> dan salin aba-aba di bawah ini lalu letakkan di atas aba-aba </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>

Klik pratinjau template untuk memastikan aba-aba tidak error.

Lalu save template.

Setelah itu buka salah satu artikel atau postingan Anda, lalu scroll sampai ke halaman paling bawah. Jika berhasil, akan muncul recent post dengan efek peekaboo (ci luk ba) pada postingan Anda. Untuk melihat demo nya, kunjungi eksklusif ke sumbernya di www.kompiajaib.com Ayo di coba, supaya Anda tertarik dan mampu bermanfaat.

Akhir kata, SAY NO TO COPY PASTE, wassalam.