.cn_wrapper{margin:0px auto 0px auto; width:500px; height:300px; position:relative; color:#fff; overflow:hidden; padding:5px; text-shadow:1px 1px 1px #000; border:1px solid #111; background-color:#333; -moz-box-shadow:1px 1px 4px #222; -webkit-box-shadow:1px 1px 4px #222; box-shadow:1px 1px 4px #222; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}
.cn_wrapper h1{font-size:12px; text-transform:uppercase; color:#fff; font-weight:bold; padding-bottom:2px; border-bottom:1px solid #9e9e9e}
.cn_wrapper h2{background:none;font-size:12px; border-bottom:1px solid #000; padding-bottom:4px; text-transform:uppercase}
.cn_preview, .cn_list{width:250px; height:300px; position:absolute; top:2px; left:6px}
.cn_preview{left:255px}
.cn_content{border:1px solid #444; top:310px; /*5*/left:5px; width:219px; padding:10px; position:absolute; background-color:#101010; height:275px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}
.cn_content img{width:215px;height:80px; -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000}
.cn_date{position:absolute; bottom:30px; right:8px; font-size:11px}
.cn_category{position:absolute; bottom:30px; left:8px; font-size:11px; padding:1px 3px; background:#ccc; border:1px solid #ddd; color:#000; text-shadow:-1px 0px 1px #fff; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
.cn_content p{height:57px; margin-top:2px; overflow:hidden}
a.cn_more{position:absolute; padding:4px 0px; left:0px; bottom:0px; width:236px; color:#fff; text-align:center; font-size:12px; letter-spacing:1px; text-shadow:1px 1px 1px #011c44; text-transform:uppercase; text-decoration:none; border:1px solid #000; outline:none; cursor:pointer; background: -moz-linear-gradient(bottom, #e38a3a, #a01800); background: -webkit-gradient(linear, center bottom, center top, from(#e38a3a), to(#a01800)); -moz-border-radius:0px 0px 5px 5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; -border-bottom-left-radius:5px; -border-bottom-right-radius:5px; -moz-box-shadow:1px 1px 3px #111; -webkit-box-shadow:1px 1px 3px #111; box-shadow:1px 1px 3px #111}
a.cn_more:hover{color:#000; text-shadow:1px 1px 1px #ccdffc}
.cn_item{border:1px solid #090909; cursor:pointer; position:relative; overflow:hidden; height:49px; color:#fff; padding:5px; margin:6px 5px 0px 0px; text-shadow:1px 1px 1px #000; background:-webkit-gradient(linear,left top,left bottom,from(#171717),to(#2b2b2b)); background:-moz-linear-gradient(top,#171717,#2b2b2b); -moz-box-shadow:1px 1px 3px #111; -webkit-box-shadow:1px 1px 3px #111; box-shadow:1px 1px 3px #111; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}
.cn_item:hover, .selected{border-color:#000; background: -moz-linear-gradient(bottom, #e38a3a, #a01800); background: -webkit-gradient(linear, center bottom, center top, from(#e38a3a), to(#a01800));}
.cn_item:hover h2,
.cn_list .selected h2,
.cn_item:active h2{border-color:#000}
.cn_item:hover,
.cn_list .selected,
.cn_item:active{border-color:#000}
.cn_item:active{color:#011c44; text-shadow:1px 1px 1px #ccdffc}
.cn_list p{height:29px; padding-top:2px; overflow:hidden}
.cn_nav{width:55px; height:24px; position:absolute; bottom:0px; left:94px}
a.cn_next, a.cn_prev{float:left; height:23px; width:23px; background-color:#212121; background-repeat:no-repeat; background-position:center center; cursor:pointer; outline:none; border:1px solid #111; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000}
a.cn_next{background-image:url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/next.png)}
a.cn_prev{background-image:url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/prev.png)}
.cn_nav a:hover{background-color:#101010}
.cn_nav a:active{margin-top:1px; background-color:#000}
.cn_nav a.disabled{opacity:0.5}
.cn_page{display:none}

<style type="text/css">
#bl{
position:fixed;
left:300px;
z-index:+1000;
}
* html #bl{position:relative;}
.blcontent{
bloat:left;
border:2px solid #676767;
background:#000000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHidebl(){
var bl = document.getElementById("bl");
var w = bl.offsetWidth;
bl.opened ? movebl(0, -100-w) : movebl(20-w, 0);
bl.opened = !bl.opened;
}
function movebl(x0, xf){
var bl = document.getElementById("bl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
bl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("movebl("+x+", "+xf+")", 10);}
}
</script>
<div id="bl">
<div class="bltab" onclick="showHidebl()"> </div>
<div class="blcontent">

<div class="cn_wrapper">
<div id="cn_preview" class="cn_preview">
<div class="cn_content" style="top:5px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-R_8uQ1IDansL5rcmLVNZS6DY1hxRJZYo-Np6vQ_VTQmZSLTGfwovuAsyVF7EO0l7mC54gXE5eYg6kPtU82DMbKXXJu9PRcpTmUf1nmiZd8cEot2cw4Oswzar55NWOMSPe6xJtfQJtKF/s400/filiex-chat-fb.jpg" alt=""/>
<h1>Pasang Bottom Right Chat Mirip Facebook</h1>
<span class="cn_date">08/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Pada kesempatan kali ini saya akan memperkenalkan widget Blog Yang mirip seperti chat yang ada di Facebook Dan mungkin sobat semua udah pernah chat di facebook.</p>
<a href="http://filiex.blogspot.com/2011/08/pasang-bottom-right-chat-mirip-facebook.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nJcs_67fYJJT0eqtMsduN1nKzZ6fc6al1PgnoLLR2M331IfYS1_ruTwgT5L-rGPdEPdEu8_OYjTM32cvxUoq61KlEHXiXxtBoWyNHMKzQIaJCoA76oTigTvon8J9uREZN3jgz9qplSsM/s400/filiex+client.jpg" alt=""/>
<h1>Pasang Widget Translate Client Pada Blog</h1>
<span class="cn_date">15/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Pada Postingan Sebelumnya Saya Pernah Share Software Google Translate Client Dan Sobat Yang Pernah Menggunakan Google Translate Client Pada Komputer.</p>
<a href="http://filiex.blogspot.com/2011/08/pasang-widget-translate-client-pada.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuT_fqJsCBv2L1ZRm2DsdOsLI4TiQLl-z19zS7ugeDrZ7NKauil4_stPujV5V-jsNTWygngsheD52Mch-osbv8WnUKzem4OwekxMpgPJXffOWWd5Audet-l4A0qfaFapO6Gr7-siDhRVeN/s400/filiexzfp.jpg" alt=""/>
<h1>Buat zFPmenu Plus Navigation Dan Share Widget</h1>
<span class="cn_date">03/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>membuat zFPmenu Plus Navigation Dan Share Widget, Dan Widget ini adalah widget yang berisi menu-menu Link yang dapat diisi sesuai keinginan.</p>
<a href="http://filiex.blogspot.com/2011/08/buat-zfpmenu-plus-navigation-dan-share.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJAfBuT79_ZjgdPU7hsmCjoYOsLhBD9hTwzWcH_ZaShj7LxFbk6usaXYYNDDELwJnibjHRMY7gN3dKY5BHO4_EQL27eyggkuMOEeTJDHx4NFXb4ohBET9t979F2C1dakKCyGrqEIFn3zV/s400/filiex-baner.png" alt=""/>
<h1>Tukaran Link Dan Baner Dengan Filiex</h1>
<span class="cn_date">24/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Untuk Meningkatkan Silahturahmi Antara Blogger Kini Saya Telah Membuka Tukaran Link Dan Baner (Link Exchange) Buat Sobat Blogger Semuanya.</p>
<a href="http://filiex.blogspot.com/2011/08/tukaran-link-dan-baner-filiex.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="http://i1230.photobucket.com/albums/ee498/filiex/filiex/3dimage.png" alt=""/>
<h1>Membuat Gambar 3D Pada Blog Dengan JQuery</h1>
<span class="cn_date">21/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Membuat Gambar 3D Pada Blog Dengan JQuery Dan Pembuatan Gambar 3D ini Sangat Unik Karena Cara Membuatnya Kita Harus Menggabungkan Beberapa Gambar Menjadi Satu Sehingga Menjadi Gambar 3D.</p>
<a href="http://filiex.blogspot.com/2011/08/membuat-gambar-3d-pada-blog-dengan.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="http://i1230.photobucket.com/albums/ee498/filiex/filiex/rolling.png" alt=""/>
<h1>Sliding Dan Rolling Menu Dangan JQuery</h1>
<span class="cn_date">19/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Membuat Sliding Dan Rolling Menu Dangan JQuery Dan Seperti Biasa Saya Tidak Bisa Menjelaskan Dengan Rinci Apa itu Sliding Dan Rolling Menu Dangan JQuery.</p>
<a href="http://filiex.blogspot.com/2011/08/sliding-dan-rolling-menu-dangan-jquery.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="http://i1230.photobucket.com/albums/ee498/filiex/filiex/minibox.png" alt=""/>
<h1>Buat Mini Box Untuk Blog Dengan JQuery</h1>
<span class="cn_date">18/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Pada Tutorial Blog Kali ini Saya Akan Bagikan Cara Membuat Mini Box Dengan JQuery Yang Bisa Mempercantik Blog Sobat Semua.</p>
<a href="http://filiex.blogspot.com/2011/08/buat-mini-box-untuk-blog-dengan-jquery.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="http://i1230.photobucket.com/albums/ee498/filiex/filiex/bergetar.png" alt=""/>
<h1>Membuat Efek Gambar Bergetar Pada Blog</h1>
<span class="cn_date">20/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Kali Saya Akan Bagikan Cara Membuat Gambar Pada Blog Mempunyai Efek Getar Seperti Orang Kedinginan Gitu.</p>
<a href="http://filiex.blogspot.com/2011/08/membuat-efek-gambar-bergetar-pada-blog.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM3oBo2GNj-NYKaL_79RzSTvkISAYwDbYcmBkPGUnqN1FX8L5Ml1ZV0G94NPBtfT6N_qnXVC49Dp0-IF01gkYBiaqb6_3-2vz_9_Q2otkp0q0nboU-y6S8nL7fCTWYwunzaDdj5c5_xh7u/s400/filiex-navigasi.jpg" alt=""/>
<h1>Slide Menu Navigation Dengan JQuery</h1>
<span class="cn_date">07/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Mungkin dengan melihat gambar di atas sobat sudah paham apa itu Slide Menu Navigation Dengan JQuery.</p>
<a href="http://filiex.blogspot.com/2011/08/slide-menu-navigation-dengan-jquery.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ucChHv8vS-nqeIWKvmsJ9Q3zwtJ3hi6mysn9Pz7D5g3HM8F5SLzhw9cZTIpzNq4JvL4oNrUl1JmGMmDA4y4DkzT58tsUfBKLll01Oy6198vU9vITHbch60olShbqj-zVU8It24iCxjWj/" alt=""/>
<h1>Cara Membuat Linkway Dengan JQuery</h1>
<span class="cn_date">08/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Pada Tutorial Blogger Kali ini saya akan Menampilkan Tutorial Cara Membuat Linkway Dengan JQuery</p>
<a href="http://filiex.blogspot.com/2011/08/cara-membuat-linkway-dengan-jquery.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2H8a5HsM98UCeZ4ToPXBNmC3hLXCe9TprgwYCFfL7HWG7nbR_pON-Dl9_wEW-txlOSusQ0Aiif-uzT8-kcezJCcdM3VRvR0w900ltnlwXe240cPDtVfWhFI6zJJAo4VtcaZfrt3FcxMn/" alt=""/>
<h1>Cara Mengetahui Blogger Disuatu Daerah</h1>
<span class="cn_date">30/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Buat Sobat Blogger Yang ingin Mengetahui Siapa Saja Blogger Di Daerah Sobat Caranya Gampang Sekali</p>
<a href="http://filiex.blogspot.com/2011/08/cara-mengetahui-blogger-disuatu-daerah.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AZz5LpcqLCDkVsqnA7X1DXIP85jByfzDTJmDgIGXTwcjExgXHObwted-3Hvb7yTMRQ7L4FzdINTXKH78AnWsbRENPARrXBDfU_3hLCy5VBFCrjGL_Yz6x9KahQ4OWMic5-8lBRexcgqJ/" alt=""/>
<h1>Membuat Text Area Pada Blog</h1>
<span class="cn_date">03/09/2011</span>
<span class="cn_category">Tutorials</span>
<p>Text Area Adalah Kolom Tempat Text, Tulisan Dan Kode HTML Pada Blog Dan Berikut Cara Membuatnya</p>
<a href="http://filiex.blogspot.com/2011/09/membuat-text-area-pada-blog.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzjYy1PUShmXtXQFuGo6wLR5LomaqKFSuL4zefms3xWVlxaswEJPtNi0waKr6fqkVhgKTPivhdwjmbFtDo7IHff8gBx_MoZRdZvS2SyX6kLLdxNAM5_DaLRHm83KFfmiJl8ptLwRtrXsv_/" alt=""/>
<h1>Cara Membuat Border Radius Pada Blog</h1>
<span class="cn_date">03/09/2011</span>
<span class="cn_category">Tutorials</span>
<p>Nah Untuk Postingan Kali ini Saya Akan Share Tutorial Membuat Border Radius Pada Blog</p>
<a href="http://filiex.blogspot.com/2011/09/cara-membuat-border-radius-pada-blog.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVybvkmtKgWcd7eDM1hVnCZxqGdCp1Z1TpkBkPUHNfDLNkygzfRCrWRZVdP9F_lPXGZaeM71s5hPbOdi-Y4ExlDxYUAdVZ0qMf5S7BBAKCj2Nh2MlSIVR2ghYpvKzsUvTa3uuguCVsR38e/" alt=""/>
<h1>Cara Membuat Read More Keren Ala Filiex</h1>
<span class="cn_date">08/09/2011</span>
<span class="cn_category">Tutorials</span>
<p>Saya Akan Berikan Tutorial Pembuatan Read More Yang Berbeda Dari Yang Lain Dan Dijamin Keren</p>
<a href="http://filiex.blogspot.com/2011/09/cara-membuat-read-more-keren-ala-filiex.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcpvisOBxAQ_npe_gV2mNIPrRWzZwA83nPzaWP9EBWlRco-oO2dQm2wI574OufU8I8nnOqhskDKxJmSO9Hii1TXaU4XMhVnoKm6e7zB7OBlePVp-McaqoT7tEl44uJuFoVupe7bS9ih-lT/" alt=""/>
<h1>Membuat Background Keren Tanpa Gambar</h1>
<span class="cn_date">09/09/2011</span>
<span class="cn_category">Tutorials</span>
<p>Untuk Tutorial Kali ini Saya Akan Menjelaskan Cara Membuat Backround Keren Pada Blog Tanpa Menggunakan Gambar Yang Harus Di Upload</p>
<a href="http://filiex.blogspot.com/2011/09/membuat-background-keren-tanpa-gambar.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3PAXjGvjely1cjWdQWg2aQf-KRQs5sNR93qFU8TNlViUyYKqPvOfQKtRkRiZNGErIFwTOMOQSURDxVnLZUWkSCrFAeoP9WiYoGs5TMaKC4pKxPPTjn9VPhFRiE_eLDHtg0IHcG_8Qp-qy/" alt=""/>
<h1>CSS Gradient Untuk Semua Browser</h1>
<span class="cn_date">10/09/2011</span>
<span class="cn_category">Tutorials</span>
<p>Pada Kesempatan Kali ini saya Akan Melanjutkan Pembuatan Background Keren Tanpa Gambar Yang Kemarin Sudah Saya Jelaskan</p>
<a href="http://filiex.blogspot.com/2011/09/css-gradient-untuk-semua-browser.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuEwcDvaoPbxGE1DfMTKKWh6LYb6oqYNmKItZyTFuTnN9Dgxr5x2INhblv0yRp2mW1cG_M9sC82lNYQR8yeBVrZ7f3g70CGPLqQwzVKonsNSFjAmJw66cA-tnBu4r2CuHbZRF9U8izgdh/s1600/slide+out+panel.JPG" alt=""/>
<h1>Cara Membuat Slide Out Panel Dengan JQuery</h1>
<span class="cn_date">08/08/2011</span>
<span class="cn_category">Tutorials</span>
<p>Pada Kesempatan Kali ini Saya Akan Berbagi Tutorial Blogger Yang Di Request Salah Satu Sobat Filiex Yakni Cara Membuat Slide Out Panel Dengan JQuery</p>
<a href="http://filiex.blogspot.com/2011/09/cara-membuat-slide-out-panel-dengan.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLNuQBjIw3no4vwbwxy03lhM367bx6D_Ao9fGedYGsbIF5mvm6QhvQ_XOgfzLv9wLON4uh33y8w0tCt_oY5sKj5BHgtWRFgjeJys3gv2R-ASh1OG9okohNSR3A0lkZXX2OF6LvBvHc30i9/s400/show+hide.jpg" alt=""/>
<h1>Show Hide Content Baru Untuk Blogger</h1>
<span class="cn_date">23/09/2011</span>
<span class="cn_category">Tutorials</span>
<p>Show Hide Content Adalah Sebuah Content Blog Yang Disembunyikan Untuk Menghemat Area Template Suatu Blog Dan Dapat Ditampilkan Atau Dipanggil Kembali Untuk Muncul, Ya Begitulah Kira Kira Pengertiannya.</p>
<a href="http://filiex.blogspot.com/2011/09/show-hide-content-baru-untuk-blogger.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8goZSrzaNelENjvIghAXLkiuM-MqyjEbgIgPIAVadGzDaqdIfi5qn_rWRSuBO796zWzEbRijFh7QW5mBy020JLCkf_54FzBwfvGwCcHYip36nyA4CGOuk5ZW0LjveAK8Umm_LFUd7_AmS/s400/label+thumb.png" alt=""/>
<h1>Tutorial Membuat Label Thumbnail</h1>
<span class="cn_date">27/09/2011</span>
<span class="cn_category">Tutorials</span>
<p>Sekarang Saya Akan Jelaskan Cara Membuat Gatget Label Menggunakan Thumnail (gambar) Dan Untuk Contoh Bisa Dilihat Dibawah.</p>
<a href="http://filiex.blogspot.com/2011/09/tutorial-membuat-label-thumbnail.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQaATepMsIV4wzTDdul5upYnEZIUpqBY0IjfSLj9_v6maT01PyN968Vk0bpEpZpyZn8-D7CwsTo__rbYFwid74hTxXqGubdXc3D6yrx2gvC1w08umH7ADg8XbzfnILM1hdkQ9sBCitQOq4/s400/pingbox+tutorial+1.jpg" alt=""/>
<h1>Pasang Pingbox Yahoo! Pada Blog</h1>
<span class="cn_date">14/10/2011</span>
<span class="cn_category">Tutorials</span>
<p>Untuk kesempatan kali ini Saya Akan Menjelaskna Cara Pasang Pingbox Yahoo! Pada Blog Atau Aplikasi Chat Dari yahoo! yang Di integrasikan Dengan Yahoo! Mesenger Untuk Dipasangkan Pada Blog</p>
<a href="http://filiex.blogspot.com/2011/10/pasang-pingbox-yahoo-pada-blog.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH0sQucDkZR7pHpR_cTjJy1vHMR9eTFOLpB75FYMqIKACjCZSpk6tpxoNBvbY-fl1JbiYvuwJwGc0KF5KafKLnr3YTYMMQqJN5xVxY-jgM-7IhFn2lEk8bmRLg-jce8XaoUvIOrpraFqQg/s400/kupu-kupu.jpg" alt=""/>
<h1>Pasang Kupu Kupu Terbang Pada Blog</h1>
<span class="cn_date">17/10/2011</span>
<span class="cn_category">Tutorials</span>
<p>Pada Kesempatan kali ini Saya Akan Berikan Tutorial untuk mempercantik Suatu Blog Yakni Dengan Memasang Kupu kupu Terbang Pada Area Blog</p>
<a href="http://filiex.blogspot.com/2011/10/pasang-kupu-kupu-terbang-pada-blog.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyK952Jfrk9Eca2cZRcgGeJWv2lrHZm9a6eAj93NOCukG1YnB8B2qFUY3Rv1L_QKIZjK_zlyMlmpJqHEjvyIGDtTah0Gb4H2Fqtmuxyq3jNLwomDqVjamILV761im5q6h0hEw5aIEL1YT/s400/artis+korea.jpg" alt=""/>
<h1>Efek Mouseover Gelap & Terang Di Gambar Blog</h1>
<span class="cn_date">17/10/2011</span>
<span class="cn_category">Tutorials</span>
<p>Nah Mari Kita Kembali Ke Tutorial Blogger Yakni Cara Menambahkan Efek Mouseover Pada Gambar Blog Atau Lebih Jelasnya Adalah Perbedaan Efek Gambar Saat Dan Sesudah Disorot Cursor Mouse.</p>
<a href="http://filiex.blogspot.com/2011/10/efek-mouseover-gelap-terang-di-gambar.html" target="_blank" class="cn_more">Read more</a>
</div>

<div class="cn_content">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi578HTeljsPFjACKO64L59fJYPQIFgj4x2TzJrPRS94y1rN3_ImrbJ2V2TaHkW5cv-OUDPrPaFZ0bjdy_WNw4eI39isYMblJ7nb0-wISuzYxWw6_9ZYR5kiamcxFMQNio8tosU9ukpF3jQ/s400/animasi+recent+post.jpg" alt=""/>
<h1>Pasang Widget Animasi Recent Post Di Blog</h1>
<span class="cn_date">18/10/2011</span>
<span class="cn_category">Tutorials</span>
<p>Untuk Tutorial Blogger Kali ini Saya Akan Membahas Cara Memasang Widget Animasi Recent Post Di Blog. Pada Umumnya Widget Recent Post Yang Disediakan Oleh Blogspot Hanyalah Berupa Text Dan Thumbnail Biasa Saja</p>
<a href="http://filiex.blogspot.com/2011/10/pasang-widget-animasi-recent-post-di.html" target="_blank" class="cn_more">Read more</a>
</div>
</div>

<div id="cn_list" class="cn_list">
<div class="cn_page" style="display:block;">
<div class="cn_item selected">
<h2>Pasang Bottom Right Chat Mirip Facebook</h2>
</div>
<div class="cn_item">
<h2>Pasang Widget Translate Client Pada Blog</h2>
</div>
<div class="cn_item">
<h2>Buat zFPmenu Plus Navigation Dan Share Widget</h2>
</div>
<div class="cn_item">
<h2>Tukaran Link Dan Baner Dengan Filiex</h2>
</div>
</div>

<div class="cn_page">
<div class="cn_item">
<h2>Membuat Gambar 3D Pada Blog Dengan JQuery</h2>
</div>
<div class="cn_item">
<h2>Sliding Dan Rolling Menu Dangan JQuery</h2>
</div>
<div class="cn_item">
<h2>Buat Mini Box Untuk Blog Dengan JQuery</h2>
</div>
<div class="cn_item">
<h2>Membuat Efek Gambar Bergetar Pada Blog</h2>
</div>
</div>

<div class="cn_page">
<div class="cn_item">
<h2>Slide Menu Navigation Dengan JQuery</h2>
</div>
<div class="cn_item">
<h2>Cara Membuat Linkway Dengan JQuery</h2>
</div>
<div class="cn_item">
<h2>Cara Mengetahui Blogger Disuatu Daerah</h2>
</div>
<div class="cn_item">
<h2>Membuat Text Area Pada Blog</h2>
</div>
</div>

<div class="cn_page">
<div class="cn_item">
<h2>Cara Membuat Border Radius Pada Blog</h2>
</div>
<div class="cn_item">
<h2>Cara Membuat Read More Keren Ala Filiex</h2>
</div>
<div class="cn_item">
<h2>Membuat Background Keren Tanpa Gambar</h2>
</div>
<div class="cn_item">
<h2>CSS Gradient Untuk Semua Browser</h2>
</div>
</div>

<div class="cn_page">
<div class="cn_item">
<h2>Cara Membuat Slide Out Panel Dengan JQuery</h2>
</div>
<div class="cn_item">
<h2>Show Hide Content Baru Untuk Blogger</h2>
</div>
<div class="cn_item">
<h2>Tutorial Membuat Label Thumbnail</h2>
</div>
<div class="cn_item">
<h2>Pasang Pingbox Yahoo! Pada Blog</h2>
</div>
</div>

<div class="cn_page">
<div class="cn_item">
<h2>Pasang Kupu Kupu Terbang Pada Blog</h2>
</div>
<div class="cn_item">
<h2>Efek Mouseover Gelap & Terang Di Gambar Blog</h2>
</div>
<div class="cn_item">
<h2>Pasang Widget Animasi Recent Post Di Blog</h2>
</div>
</div>

<div class="cn_nav">
<a id="cn_prev" class="cn_prev disabled"></a>
<a id="cn_next" class="cn_next"></a>
</div>
</div>
</div>


<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://filiex.googlecode.com/files/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
//caching
//next and prev buttons
var $cn_next = $('#cn_next');
var $cn_prev = $('#cn_prev');
//wrapper of the left items
var $cn_list = $('#cn_list');
var $pages = $cn_list.find('.cn_page');
//how many pages
var cnt_pages = $pages.length;
//the default page is the first one
var page = 1;
//list of news (left items)
var $items = $cn_list.find('.cn_item');
//the current item being viewed (right side)
var $cn_preview = $('#cn_preview');
//index of the item being viewed.
//the default is the first one
var current = 1;

/*
for each item we store its index relative to all the document.
we bind a click event that slides up or down the current item
and slides up or down the clicked one.
Moving up or down will depend if the clicked item is after or
before the current one
*/
$items.each(function(i){
var $item = $(this);
$item.data('idx',i+1);

$item.bind('click',function(){
var $this = $(this);
$cn_list.find('.selected').removeClass('selected');
$this.addClass('selected');
var idx = $(this).data('idx');
var $current = $cn_preview.find('.cn_content:nth-child('+current+')');
var $next = $cn_preview.find('.cn_content:nth-child('+idx+')');

if(idx > current){
$current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({'top':'310px'}).stop().animate({'top':'5px'},600,'easeOutBack');
}
else if(idx < current){
$current.stop().animate({'top':'310px'},600,'easeOutBack',function(){
$(this).css({'top':'310px'});
});
$next.css({'top':'-300px'}).stop().animate({'top':'5px'},600,'easeOutBack');
}
current = idx;
});
});

/*
shows next page if exists:
the next page fades in
also checks if the button should get disabled
*/
$cn_next.bind('click',function(e){
var $this = $(this);
$cn_prev.removeClass('disabled');
++page;
if(page == cnt_pages)
$this.addClass('disabled');
if(page > cnt_pages){
page = cnt_pages;
return;
}
$pages.hide();
$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
e.preventDefault();
});
/*
shows previous page if exists:
the previous page fades in
also checks if the button should get disabled
*/
$cn_prev.bind('click',function(e){
var $this = $(this);
$cn_next.removeClass('disabled');
--page;
if(page == 1)
$this.addClass('disabled');
if(page < 1){
page = 1;
return;
}
$pages.hide();
$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
e.preventDefault();
});

});
</script>

<div style="text-align:right;margin-bottom:-50px;margin-right:-20px;">
<a href="javascript:showHidebl()">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73OvzlJukXZMiG7QT0uHeyng71-gCHKypKTxtzhiLMXAPUy7zHRsvkvGN7Nc0Hdzu2RcWO2tYGU9dQOJjSDtwgvtVMbqi67ev31pKZXLosQIPY8H2ITyAWpHvWQIMZRYCiDmiBwAd5fFW/s128/filiex%252520close.png" border="0" alt="Close" /></a>
</div>
<font size="2"><a href="http://filiex.blogspot.com"target=_blank"><div style="color: #444444;">
<span >By Filiex Boy</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var bl = document.getElementById("bl");
bl.style.bottom = (-100-bl.offsetWidth).toString() + "px";
</script>