Pages

7

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.

    <style type="text/css">
    #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;
    }
    </style>
    <script type="text/javascript">
    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);}
    }
    </script>
    <div id="fl">
    <div class="fltab" onclick="showHideFL()"> </div>
    <div class="flcontent">



    Silahkan Letakkan Content Blog Sobat Disini



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

    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"/></a>

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

  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.

Silahkan Tinggalkan Komentar Untuk Pertanyaan Dan Keluhan !!!

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

7 comments:

  1. kahfiFebruary 13, 2012 at 7:02 PM

    :) keren
    Gan, izin nyedot ilmuny ya.... buat di jadiin exstensions diweb tpi ane rubah dikit... gpp kan.... Thanks Bauanyakkk

    ReplyDelete
  2. AnonymousApril 10, 2012 at 5:59 AM

    GAN KALO MAU BUAT KONTENYA LEBIH DARI 1 APA KODE PEMANGGILNYA JUGA SAMA

    ReplyDelete
  3. AlfionaApril 10, 2012 at 12:52 PM

    @AnonymousHarus Beda Sob dan misal: javascript:showHideFL diganti javascript:showHideXL

    Bila sobat ingin membuat lebih dari satu konten bukan hanya pemanggilnya yang diubah dan harus mengubah semua kode FL menjadi XL atau terserah apa aja.

    ReplyDelete
  4. AnonymousApril 10, 2012 at 9:22 PM

    @Filiex Boy terima kasih gan,,,,teruslah berkarya, au suka semua tutorialnya

    ReplyDelete
  5. AnonymousApril 27, 2012 at 10:43 AM

    Today is ethical indisposed, isn't it?

    ReplyDelete
  6. UnknownDecember 18, 2012 at 9:30 AM

    Wah Tutorial yg patut dicoba nih Sob...klo Vertical Tab View seperti punya ane bisa ga di bikin Show/Hide sob..bantuin ya...

    ReplyDelete
  7. UnknownDecember 18, 2012 at 9:32 AM

    @Bang Arul Sekalian Join yang ke 124 Sob...http://bangarulsite.blogspot.com/

    ReplyDelete