Cara Buat Show Hide Content Baru Untuk Blogger

Cara Buat Show Hide Content Baru Untuk Blogger

 

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. Nah Pada Umumnya Show Hide Content ini Kebanyakan Diletakkan Disisi Template Blog Dan Berhubung Ada Yang Request Dari Salah Satu Sobat Filiex Agar Saya Menulis Tutorial Pembuatan Show Hide Content Seperti Yang Ada Pada Blog ini Dan Bisa Di Lihat Di Navigasion Menu Di Atas Pada Menu Tutorial Dan Bisa Juga Lihat Di Sidebar Kanan Pada Judul Magic Content.


Sebenarnya Caranya Sangat Mudah Dan Langsung Saja Sobat Perhatikan Langkah Langkah Pembuatannya Dibawah.

  1. Silahkan Login Ke Akun Blogger Sobat.
  2. Masuk Pada Rancangan Dan Pilih Elemen Laman.
  3. Click Tambah Gatget Lalu Pilih HTML/JavaScript. CATATAN: Sebaiknya Tambah Gatget nya Di Sidebar Aja.
  4. Pilih HTML/Javasript Pada Menu.
  5. Selanjutnya Copy Kode Berikut Dan Paste Pada HTML/JavaScript Tersebut.

    #fl{
    position:fixed;
    left:150px;
    z-index:+1000;
    }
    * html #fl{position:relative;}
    .flcontent{
    float: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 showHideFL(){
    var fl = document.getElementById(“fl”);
    var w = fl.offsetWidth;
    fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
    fl.opened = !fl.opened;
    }
    function moveFL(x0, xf){
    var fl = document.getElementById(“fl”);
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    fl.style.bottom = x.toString() + “px”;
    if(x0!=xf){setTimeout(“moveFL(“+x+”, “+xf+”)”, 10);}
    }

    Silahkan Letakkan Content Blog Sobat Disini


    Photobucket

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

    CATATAN:

    • Kode Yang Berwarna Biru Adalah Posisi Content Dari Sisi Kiri Dan Sobat Bisa Mengubahnya Sesuai Selera Sobat.
    • Kode Yang Berwarna Merah Adalah Posisi Datangnya Content Yang Dipanggil Dan Pada Kode Diatas Saya Pakai Bottom (Dari Bawah) Dan Sobat Bisa Mengubahnya Sesuai Selera Sobat Dan Jangan Lupa Kalau Kode Yang Berwarna Merah Pada Kode Diatas Ada Dua Dan Keduanya Harus Sama.
    • Kode Yang Berwarna Orange Silahkan Sobat Hapus Dan Ganti Atau Isikan Dengan Content Blog Sobat Seperti Kotak Chat, Facebook Fans Dll.
  6. Setelah Selesai Di Edit Silahkan Di Simpan.
  7. Dan Dibawah Berikut Adalah Kode Untuk Memanggil Content Tersebut Agar Dapat Muncul.
    javascript:showHideFL()
  8. Nah Disini Saya Akan Memberi Contoh Penempatkan Kode Pemanggil Tersebut.
    Contoh Kode yang ditempatkan Pada gambar
    <a href="javascript:showHideFL()“/><img src="URL GAMBAR SOBAT“/>

    Contoh Kode yang ditempatkan Pada Text
    <a href="javascript:showHideFL()“/>TEXT SOBAT

  9. Nah Bila Sobat Sudah Paham Dengan Contoh Diatas Selanjutnya Sobat Bisa Berkreasi Sendiri Untuk Menempatkan Kode Pemanggil Tersebut Seperti Meletakkannya Di Navigation Menu, Sidebar Dll.
  10. Selamat Mencoba Dan Semoga Berhasil.

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