Cara Pasang ShowHide Compact Preview

Cara Pasang ShowHide Compact Preview

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

    #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;
    }


    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);}
    }





    Pasang Bottom Right Chat Mirip Facebook

    08/08/2011
    Tutorials

    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.

    Read more


    Pasang Widget Translate Client Pada Blog

    15/08/2011
    Tutorials

    Pada Postingan Sebelumnya Saya Pernah Share Software Google Translate Client Dan Sobat Yang Pernah Menggunakan Google Translate Client Pada Komputer.

    Read more


    Buat zFPmenu Plus Navigation Dan Share Widget

    03/08/2011
    Tutorials

    membuat zFPmenu Plus Navigation Dan Share Widget, Dan Widget ini adalah widget yang berisi menu-menu Link yang dapat diisi sesuai keinginan.

    Read more


    Tukaran Link Dan Baner Dengan Filiex

    24/08/2011
    Tutorials

    Untuk Meningkatkan Silahturahmi Antara Blogger Kini Saya Telah Membuka Tukaran Link Dan Baner (Link Exchange) Buat Sobat Blogger Semuanya.

    Read more


    Membuat Gambar 3D Pada Blog Dengan JQuery

    21/08/2011
    Tutorials

    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.

    Read more


    Sliding Dan Rolling Menu Dangan JQuery

    19/08/2011
    Tutorials

    Membuat Sliding Dan Rolling Menu Dangan JQuery Dan Seperti Biasa Saya Tidak Bisa Menjelaskan Dengan Rinci Apa itu Sliding Dan Rolling Menu Dangan JQuery.

    Read more


    Buat Mini Box Untuk Blog Dengan JQuery

    18/08/2011
    Tutorials

    Pada Tutorial Blog Kali ini Saya Akan Bagikan Cara Membuat Mini Box Dengan JQuery Yang Bisa Mempercantik Blog Sobat Semua.

    Read more


    Membuat Efek Gambar Bergetar Pada Blog

    20/08/2011
    Tutorials

    Kali Saya Akan Bagikan Cara Membuat Gambar Pada Blog Mempunyai Efek Getar Seperti Orang Kedinginan Gitu.

    Read more


    Slide Menu Navigation Dengan JQuery

    07/08/2011
    Tutorials

    Mungkin dengan melihat gambar di atas sobat sudah paham apa itu Slide Menu Navigation Dengan JQuery.

    Read more


    Cara Membuat Linkway Dengan JQuery

    08/08/2011
    Tutorials

    Pada Tutorial Blogger Kali ini saya akan Menampilkan Tutorial Cara Membuat Linkway Dengan JQuery

    Read more


    Cara Mengetahui Blogger Disuatu Daerah

    30/08/2011
    Tutorials

    Buat Sobat Blogger Yang ingin Mengetahui Siapa Saja Blogger Di Daerah Sobat Caranya Gampang Sekali

    Read more


    Membuat Text Area Pada Blog

    03/09/2011
    Tutorials

    Text Area Adalah Kolom Tempat Text, Tulisan Dan Kode HTML Pada Blog Dan Berikut Cara Membuatnya

    Read more


    Cara Membuat Border Radius Pada Blog

    03/09/2011
    Tutorials

    Nah Untuk Postingan Kali ini Saya Akan Share Tutorial Membuat Border Radius Pada Blog

    Read more


    Cara Membuat Read More Keren Ala Filiex

    08/09/2011
    Tutorials

    Saya Akan Berikan Tutorial Pembuatan Read More Yang Berbeda Dari Yang Lain Dan Dijamin Keren

    Read more


    Membuat Background Keren Tanpa Gambar

    09/09/2011
    Tutorials

    Untuk Tutorial Kali ini Saya Akan Menjelaskan Cara Membuat Backround Keren Pada Blog Tanpa Menggunakan Gambar Yang Harus Di Upload

    Read more


    CSS Gradient Untuk Semua Browser

    10/09/2011
    Tutorials

    Pada Kesempatan Kali ini saya Akan Melanjutkan Pembuatan Background Keren Tanpa Gambar Yang Kemarin Sudah Saya Jelaskan

    Read more


    Cara Membuat Slide Out Panel Dengan JQuery

    08/08/2011
    Tutorials

    Pada Kesempatan Kali ini Saya Akan Berbagi Tutorial Blogger Yang Di Request Salah Satu Sobat Filiex Yakni Cara Membuat Slide Out Panel Dengan JQuery

    Read more


    Show Hide Content Baru Untuk Blogger

    23/09/2011
    Tutorials

    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.

    Read more


    Tutorial Membuat Label Thumbnail

    27/09/2011
    Tutorials

    Sekarang Saya Akan Jelaskan Cara Membuat Gatget Label Menggunakan Thumnail (gambar) Dan Untuk Contoh Bisa Dilihat Dibawah.

    Read more


    Pasang Pingbox Yahoo! Pada Blog

    14/10/2011
    Tutorials

    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

    Read more


    Pasang Kupu Kupu Terbang Pada Blog

    17/10/2011
    Tutorials

    Pada Kesempatan kali ini Saya Akan Berikan Tutorial untuk mempercantik Suatu Blog Yakni Dengan Memasang Kupu kupu Terbang Pada Area Blog

    Read more


    Efek Mouseover Gelap & Terang Di Gambar Blog

    17/10/2011
    Tutorials

    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.

    Read more


    Pasang Widget Animasi Recent Post Di Blog

    18/10/2011
    Tutorials

    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

    Read more

    Pasang Bottom Right Chat Mirip Facebook

    Pasang Widget Translate Client Pada Blog

    Buat zFPmenu Plus Navigation Dan Share Widget

    Tukaran Link Dan Baner Dengan Filiex

    Membuat Gambar 3D Pada Blog Dengan JQuery

    Sliding Dan Rolling Menu Dangan JQuery

    Buat Mini Box Untuk Blog Dengan JQuery

    Membuat Efek Gambar Bergetar Pada Blog

    Slide Menu Navigation Dengan JQuery

    Cara Membuat Linkway Dengan JQuery

    Cara Mengetahui Blogger Disuatu Daerah

    Membuat Text Area Pada Blog

    Cara Membuat Border Radius Pada Blog

    Cara Membuat Read More Keren Ala Filiex

    Membuat Background Keren Tanpa Gambar

    CSS Gradient Untuk Semua Browser

    Cara Membuat Slide Out Panel Dengan JQuery

    Show Hide Content Baru Untuk Blogger

    Tutorial Membuat Label Thumbnail

    Pasang Pingbox Yahoo! Pada Blog

    Pasang Kupu Kupu Terbang Pada Blog

    Efek Mouseover Gelap & Terang Di Gambar Blog

    Pasang Widget Animasi Recent Post Di Blog


    $(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();
    });

    });




    Close






    var bl = document.getElementById(“bl”);
    bl.style.bottom = (-100-bl.offsetWidth).toString() + “px”;

  • 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

    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.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s