Spoiler Bertingkat Ringankan Loading dan Berat Blog
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 
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 :
- Memerlukan tempat sangat sedikit, ini sudah pasti
- Dapat memperingan Loading, karena Spoiler ini bisa diisi banyak file, sangat berbeda dengan spoiler yang dulu yaitu satu Spoiler satu File
[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]. - Gerakannya sangat elatis sekali [tak usah di klik]
- Bagaimana kawan tertarik ?!
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 
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">» JUDUL</h5>
<div class="msg_body">
disini simpan file kawan
</div>
<h5 class="msg_head">» JUDUL</h5>
<div class="msg_body">
disini simpan file kawan
</div>
<h5 class="msg_head">» JUDUL</h5>
<div class="msg_body">
disini simpan file kawan
</div>
Keterangan :
- #FFFF00; adalah Judul dengan warna Kuning
- 100% adalah lebar tampilan [sesuaikan dengan tempat atau Blog kawan]
- #699AB8; adalah latar belakang Judul dengan warna biru gelap
- #95CAFF; adalah latar belakang body Isi dengan warna biru muda
- JUDUL adalah Judul Spoiler yang kelihatan
- disini simpan file kawan adalah tempat kawan menaruh, File, Script, Gambar dll :D
- Untuk membuat judul baru, kawan menambahkan kode ini dibawahnya :
<h5 class="msg_head">» 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
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 untuk mengatasi kemacetan tadi. tapi jangan sampai tidak ada </div>
Mudah-mudahan apa yang saya sampaikan ini bisa membantu dan bermanfaat buat kawan !!!
Semoga artikel Spoiler Bertingkat Ringankan Loading dan Berat Blog bermanfaat bagi Anda.
)
Post a Comment