Home » , , » ShowHide Compact Preview Filiex

ShowHide Compact Preview Filiex

Untuk postingan Tutorial Blogger kali ini saya akan menanggapi permintaan dari beberapa Sobat Blogger Yakni cara membuat ShowHide Compact Preview Filiex dan berhubung Saya lagi baik hati, jadi terpaksa saya bocorkan untuk Sobat semua cara membauatnya.


  • Seperti biasa silahkan Sobat Login Ke Akun Blogger.
  • Masuklah pada Rancangan => Edit HTML dan centang Expand Template Widget.
  • Silahkan Copy Kode CSS dibawah ini dan taruh tepat diatas kode ]]></b:skin> pada Template Sobat.

    .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}

  • Setelah itu Simpan Template.
  • Selanjutnya Silahkan Sobat Masuk Ke Rancangan => Elemen Laman
  • Silahkan Sobat Klick Tambahkan Gatged.


  • Pilihlah Gadget HTML/Javascript Pada Menu.


  • Selanjutnya Masukkan Kode Dibawah ini ke Jendela HTML/Javascript tadi dan pada kolom Judul, harap dikosongkan saja.

    <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="http://3.bp.blogspot.com/-up_Aigkwn3U/Tj_HoSccfhI/AAAAAAAAAIA/vn596qe3W9w/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="http://4.bp.blogspot.com/-mj9X8vYqDU0/TkmczxWFIqI/AAAAAAAAAJw/dttYViCHYrM/s400/filiex%2Bclient.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="http://3.bp.blogspot.com/-UkztQEI_iNM/TjlhjqChf6I/AAAAAAAAAHE/3koUxjoHZsg/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="http://2.bp.blogspot.com/-BAVepnhvP20/TlVh1bdVpuI/AAAAAAAAAK4/xxsVL85_bX0/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="http://1.bp.blogspot.com/-EZustUFMA34/Tj6sA7rp-LI/AAAAAAAAAHc/HmOJD5LMabY/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://lh6.googleusercontent.com/-sw2SiMXNOBU/Tnlu68cZ_4I/AAAAAAAAAak/yCzcWb_N7l4/linkway.jpg" 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://lh5.googleusercontent.com/-gPC8D-Zdg8Q/Tnlu8LH7p9I/AAAAAAAAAao/kM_xv-JbYrk/peta%252520blogger.jpg" 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://lh5.googleusercontent.com/-q6cUXJEfe8g/Tnlu85F8rBI/AAAAAAAAAaw/9z3-36rZlUM/text%252520area.jpg" 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://lh5.googleusercontent.com/-vIPTG4E8uvM/Tnlu5nYBLQI/AAAAAAAAAaU/585L5iyEgwE/border_radius.gif" 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://lh6.googleusercontent.com/-NPyKdzLw7ao/Tnlu8aw7k6I/AAAAAAAAAas/bkaaqrHO3aY/read%252520more%252520filiex.jpg" 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://lh5.googleusercontent.com/-u3PLQv_vRp4/Tnlu5zc0NzI/AAAAAAAAAaY/fUqzm1WMj8g/gradient.jpg" 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://lh5.googleusercontent.com/-YOhmZHikeYw/Tnlu6rxV9YI/AAAAAAAAAag/mywt3kpkJVI/gradient%252520css.jpg" 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="http://3.bp.blogspot.com/-o_JoFHlxX30/Tng6OjROBuI/AAAAAAAAAZ0/ct07ZBVy-aU/s1600/slide%2Bout%2Bpanel.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="http://4.bp.blogspot.com/-lBiHAp1cy3Y/TnzjnIVhLLI/AAAAAAAAAe0/Ftl_BOUJy7s/s400/show%2Bhide.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="http://3.bp.blogspot.com/-2rvWSRRUgd4/ToIY_tvQJ5I/AAAAAAAAAnU/V3YovsaXgoY/s400/label%2Bthumb.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="http://3.bp.blogspot.com/-X8cVo8rGA74/TphsLpueijI/AAAAAAAABBc/AF42uQFidNo/s400/pingbox%2Btutorial%2B1.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="http://4.bp.blogspot.com/-QQaiDyOSfvE/TpvUwZUVhHI/AAAAAAAABEE/yT9nNmC025g/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="http://4.bp.blogspot.com/-zLWrmxL5Gms/TpxNhuLDP3I/AAAAAAAABEo/nPmuNwUAcVY/s400/artis%2Bkorea.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="http://4.bp.blogspot.com/-wkz2vsQpLyA/Tp3ILTZTRXI/AAAAAAAABFw/EYaM48-PYHc/s400/animasi%2Brecent%2Bpost.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://lh4.googleusercontent.com/-jDrXsybBVGo/TnzR0zJEpnI/AAAAAAAAAeg/2xupWvvfVNk/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>

  • Selanjutnya Simpan Gadget tersebut.
  • langkah terakhir silahkan sobat sisipkan Kode Pemanggilnya Kedalam Sebuah Gambar, Tombol, teks dan Terserah Dimanan saja.
  • Untuk Kode pemanggilnya adalah javascript:showHidebl() Dan Dibawah ini ada beberapa Contoh Kode Lengkapnya yang telah saya sisipkan.
  • Contoh Kode Pemanggil menggunakan Gambar
    <a href="javascript:showHidebl()"><img src="https://lh6.googleusercontent.com/-SO9zfLFjBv0/TqhppcTgvuI/AAAAAAAABbU/dKdrrrQpbtY/h120/Tutorial%2BBlog.png"/></a>
    Contoh Kode Pemanggil menggunakan Teks
    <a href="javascript:showHidebl()">TUTORIAL BLOG</a>
  • Selesai dan Cukup sekian Tutorial Blogger kali ini dan Silahkan Sobat Tinggalkan Komentar untuk Prtanyaan dan Keluhan.

Selamat Mencoba
filiex Artikel Oleh Filiex Boy dari filiex.blogspot.com, yang telah
Diterbitkan di 3:25 PM
Label: , ,
Jangan lupa berlangganan via RSS feed untuk artikel terbaru
Share this article :
Unduh Adobe Flash player

+ komentar + 6 komentar

February 22, 2012 at 5:34 PM

waaaaaaaah mantap Makasih Banget Bang Udah Ngablin prmintaan ku hehehe..Ijin Kopipaste ya..
oh iya minta prtunjuk neh Sofwer yg sering di gunakan untk Desain gambar dan baner Blog thank sblmnya.

Terimakasih edi heriyanto atas Komentarnya di ShowHide Compact Preview Filiex
February 22, 2012 at 11:20 PM

@edi heriyantoKalau saya sih menggunakan photoshop dan button shop.

March 20, 2012 at 8:54 AM

gan,sy sudah cb,showhide-compact-preview.tp ko kalau sy klik judul postink berikutnya,di bagian kolom gambar dan redmore nya ga jalan.mohon penjelasannya gan. mksh sukses selalu buat agan.

Terimakasih ஜ۩۞۩ஜ-INFO UNIK-ஜ۩۞۩ஜ atas Komentarnya di ShowHide Compact Preview Filiex
March 20, 2012 at 1:29 PM

@ஜ۩۞۩ஜ-INFO UNIK-ஜ۩۞۩ஜJika pada template sobat sudah terpasng jquery/1.4.2/jequery.min.js harap sobat menghapus kode berikut <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

October 18, 2012 at 5:17 AM

gan, kok punyaku gak bisa muncul ya ? padahal udah tak ikutin semua langkahnya..mohon petunjuknya gan...thank

Terimakasih Hilmawan Arga atas Komentarnya di ShowHide Compact Preview Filiex
February 20, 2013 at 1:41 PM

mas tolong upload template ini dong..
liat nih www.stunt-stars.blogspot.com ancur abis

kalo mau sebagai gantinya saya pasang link anda di blog saya sebelah kanan.

Terimakasih Ryan Setiawan atas Komentarnya di ShowHide Compact Preview Filiex

Post a Comment