Cara Membuat Multi Spoiler

Sebelumnya saya posting Spoiler dengan Judul Peringan Loading Blog dengan Spoiler itu hanya satu obyek elemen saja pada satu Gadget, :z
Sekarang saya akan kembangkan lagi menjadi Multi Spoiler dalam satu Gadget yang bisa menampung banyak obyek elemen, [Ingat kawan satu Gadget di Sidebar cukup memberatkan Loading Blog kita] :#
Oke langsung saja ke Cara Pembuatan Multi Spoiler ini :
  • Masuk ke Account Blogger dengan ID kawan
  • Pada Perancang template / template Designer pilih Tambah Gadget - HTML / JavaScript.
  • Copas [copy - paste] Kode berikut kedalamnya
  • Setting dan Edit sesuai keperluan kawan
  • Simpan template kawan :@ 

    <style type="text/css">
    h5 {
    font-family: Tekton Pro, trebuchet-ms, arial, tahoma;
    font-size: 16px;
    padding: 0 0 1em;
    font-weight:bold;
    color: #FFFF00; 
    }
    .msg_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    }
    .msg_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color:#699AB8;
    margin:1px;
    }
    .msg_body {
    padding: 5px 10px 15px;
    background-color:#95CAFF;
    }
    </style>
    <script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>


    <script type="text/javascript">
    $(document).ready(function()
    {
    //hide the all of the element with class msg_body
    $(".msg_body").hide();
    //slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
    $("#firstpane h5.msg_head").click(function()
    {
    $(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
    });
    //slides the element with class "msg_body" when mouse is over the paragraph
    $("#secondpane h5.msg_head").mouseover(function()
    {
    $(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
    });
    });
    </script>
    <div class="msg_list" id="secondpane">
    <h5 class="msg_head">&#187; JUDUL</h5>
    <div class="msg_body">
    disini simpan file kawan
    </div>
    <h5 class="msg_head">&#187; JUDUL</h5>
    <div class="msg_body">
    disini simpan file kawan
    </div>
    <h5 class="msg_head">&#187; JUDUL</h5>
    <div class="msg_body">
    disini simpan file kawan
    </div>
    Catatan :
    1. #FFFF00; adalah Judul dengan warna Kuning
    2. 100% adalah lebar tampilan [sesuaikan dengan tempat atau Sidebar Blog kawan]
    3. #699AB8; adalah latar belakang Judul dengan warna biru gelap 
    4. #95CAFF; adalah latar belakang body Isi dengan warna biru muda
    5. JUDUL adalah Judul Spoiler yang kelihatan :d  
    6. disini simpan file kawan adalah tempat kawan menaruh, File, Script, Gambar dll :D 
    7. Untuk membuat judul baru, kawan cuku menambahkan kode dibawah ini : 
    <h5 class="msg_head">&#187; JUDUL</h5>
    <div class="msg_body">
    disini simpan file kawan
    </div>
    Permasalahan dan solusi :
    • Spoiler ini akan tampil pertama kali [saat loading] semua isinya akan kelihatan berjejer kebawah, disekat dengan Judulnya masing-masing yang selanjutnya akan kelihatan seperti contoh tersebut diatas.
    • Kawan tidak perlu meng-Klik seperti Spoiler yang dulu, cukup mouse kawan dekatkan / jalankan diatasnya dan secara otomatis Spoiler akan terbuka [buka tutup].
    • Kalau Spoiler macet alias tak mau jalan atau berada di dalam Spoiler diatasnya, kawan cukup perhatikan pada akhir isi  [contoh diatas : disini simpan file kawan </div>]  kode </div> ini bisa ditambah atau dikurangi :x untuk mengatasi kemacetan tadi. :s tapi jangan sampai tidak ada </div>
    Mudah-mudahan apa yang saya sampaikan ini bisa membantu dan bermanfaat buat kawan !!!


    Description: Cara Membuat Multi Spoiler - Rating: 4.5

    Reviewer: Putu BlogBego - Itemreviewed: Cara Membuat Multi Spoiler


    Kawan sedang berada pada Artikel
    » Cara Membuat Multi Spoiler
    di Blog ini dibolehkan COPY-PASTE untuk disebar-luaskan
    asal kawan menyertakan Link / Sumber Artikelnya

    Artikel Menarik Lainnya :


    0 komentar

    Post a Comment