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 dipasang 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 tutorialnya 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.

Kompiajaib.com adalah blg yang diasuhnya. Nah, bagi yang mau belajar banyak tentang ngeblog silahkan main ke blognya 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 disederhanakan dengan membuang bagian-bagian yang dianggap tidak perlu.

Widget ini pun cukup ringan karena tidak memakai jquery. Namun perlu diingat, 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 demonya, kunjungi langsung ke sumbernya di www.kompiajaib.com. Ayo dicoba, semoga Anda tertarik dan bisa bermanfaat.

Akhir kata, SAY NO TO COPY PASTE, wassalam.

2 komentar

click to comment!

15 September 2015 06.59 Delete comments

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.

Reply
avatar
15 September 2015 11.45 Delete comments

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

Reply
avatar

Setiap komentar yang diterbitkan, saya pastikan blognya sudah tak kunjungi balik, dengan atau tanpa komentar yang saya sertakan. Please bro, jangan nyampah !!

Terima kasih atas kunjungannya. Wassalam
EmoticonEmoticon

 

temukan artikelmu disini