Recent Post Efek "Ciluk Ba" - Unik dan Berbeda

Ditulis oleh: Maseteguh Blog Must Teguh Updated at : 11:09 AM
2 comments
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 saya punya sedikit tips untuk membuat recent post yang sedikit berbeda namun unik. Namanya recent post efek Ci Luk Ba.

Jujur, tips ini saya adaptasi dari salah satu blogger idola saya yaitu Mas Adhy Suryadi. Beliau adalah blogger yang super duper kreatif serta sangat suka berbagi ilmu.

Blog yang di asuh nya adalah kompiajaib.com nah, bagi yang mau belajar banyak tentang ngeblog silahkan main ke blog nya Mas Adhy.

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

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

OK lah, langsung saja kita menuju ke tempat 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 saat halaman kita scroll hingga ke bagian bawah. Java script pada div ini telah di sederhana kan dengan membuang bagian-bagian yang di anggap tidak perlu.

Widget ini pun cukup ringan karena 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 kode </head> lalu salin kode CSS di bawah ini dan letakkan 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, cari kode </body> dan salin kode di bawah ini lalu letakkan 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>

Klik pratinjau template untuk memastikan kode tidak error.

Lalu save template.

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

Akhir kata, SAY NO TO COPY PASTE, wassalam.

2 komentar:

  1. PERTAMAX......!!!!! hahah... sebelumnya terimakasih mas udah dikasih pertamax.
    1. kalau untuk pasang begituan apa gak membebani blog kita mas? walaupun sudah memakai jquery
    2. saya pernah pasang scrip2 untuk mempercantik blog, tapi didalam scrip tersebut malah ada virus, kalo yang ini apa aman?
    3. sekali lagi terimakasih.

    BalasHapus
  2. ntar dapat doorprize mas ernest he he he.
    recent pos ini super ringan karena udah nggak perlu pake jquery..dan di jamin aman dari virus...thanks and selamat mencoba

    BalasHapus

Setiap komentar yang diterbitkan, saya pastikan blognya sudah tak kunjungi balik, dengan atau tanpa komentar yang saya sertakan.

Terima kasih atas kunjungannya. Wassalam