Spoiler Bertingkat Ringankan Loading dan Berat Blog

Refrensi : maribinablog

Setelah hampir tiga harian menahan kesel di hati karena koneksi saya lelet sekali, coba bayangkan hanya untuk menjawab comment kawan di C-Box saja susahnya luar biasa belum lagi setelah menunggu 10 menitan yang akhirnya ERROR, maaf kawan-kawan yang sudah berkunjung dan comment atas keaadaan saya ini :y 

Sekarang mari kita mulai lagi berbagi tips trik maupun tutorials untuk mempercantik blog kawan, dan untuk mengingatkan saja atau kalau kawan ingin baca tentang Spoiler membuat loading Blog lebih ringan :r karena yang akan saya share-kan pada kawan sekarang Cara Membuat Spoiler Bertingkat, tapi sebelumnya perlu saya sampaikan kelebihan dari Spoiler ini :

1. Memerlukan tempat sangat sedikit, ini sudah pasti 
2. Dapat memperingan Loading, karena Spoiler ini bisa diisi banyak file, sangat berbeda dengan spoiler yang dulu yaitu satu Spoiler satu File :z [para pakar Blogger mengatakan : pergunakan gadget di sidebar seminim mungkin, dengan kata lain File HTML / JavaScript agar digabung pada satu gadget untuk memperingan loading Blog].
3. Gerakannya sangat elatis sekali [tak usah di klik] 
4. Bagaimana kawan tertarik ?! :O kalau kawan terarik silahkan dilanjutkan membacanya sampai habis, dan mudah-mudahan saya dapat membahas secara tuntas permasalahan yang ditemui [kayak orang hebat saja bahasanya saya ... ha ha ha] maksud saya permasalahan berdasarkan pengalaman yang saya temui kawan he he he :s

Untuk Demonya kawan bisa lihat disidebar saya 

Cara pembuatannya :

• Masuk ke Account Blogger dengan ID kawan
• Pada Perancang template / template Designer pilih Tambah Gadget - HTML / JavaScript.
• Copas [copy - paste] script 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>

Keterangan :

1. #FFFF00; adalah Judul dengan warna Kuning
2. 100% adalah lebar tampilan [sesuaikan dengan tempat atau 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 menambahkan kode ini dibawahnya : 

<h5 class="msg_head">&#187; JUDUL</h5>

<div class="msg_body">

disini simpan file kawan

</div>

Kesimpulan, 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].
• Selanjutnya akan terbuka terus satu Spoiler sesuai dimana terakhir kawan mendekatkan mouse, kalau kawan ingin tertutup kembali semuanya setelah saya coba tidak bisa, tapi biar tampilan blog kelihatan simple selusinya :x tambahkan satu elemen Spoiler seperti tersebut diatas mungkin dengan judul TERIMA KASIH, pada isinya mungkin KAWAN SUDAH BERKUNJUNG. :#
• 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 !!!