SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




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 !!!



13 komentar pada “Spoiler Bertingkat Ringankan Loading dan Berat Blog”

  1. wah saya trauma dengan yang namanya JS. bikin Blog saya berat. setelah membaca artikel ini dan menerapkannya . blog saya jadi agak enteng. terimakasih Om. :D

    BalasHapus
  2. nanya lagi mas putu... cara nyimpan file kita gimana mas.. apakah tanda pagar tadi kita isi dengan link kita :t
    maklum masih bingung mas :D

    BalasHapus
  3. @Blogging with me trims, memang ini setelah saya coba bisa menurunkan berat antara 3 - 4 kb ya lumayan, :O

    BalasHapus
  4. @mas Fakhrial tanda quote ["] itu tanda hiasan, sebenarnya itu simple mas, simpan file kawan disini ganti [umpama : script friend connect, recent comment dll] atau dengan tulisan biasa,
    copas saja dan lihat hasilnya biar ada bayangan :z

    BalasHapus
  5. ohhhhh paham paham... saya coba dulu mas... :D

    BalasHapus
  6. Terimakasih atas tipsnya, sangat mantaps, di coba deh sukses selalu untuk Anda

    BalasHapus
  7. @mas Fakhrial trims
    @Kawan Blog Bisnis silahkan kalau mau coba :d

    BalasHapus
  8. Maju tak Gentar mas Beben saya dukung mas ikutan Kontes, dan mudah-mudahan berhasil dengan sukses :L :c

    BalasHapus
  9. Thanks sob, tipsnya sanggat membantu banget buatku. sekali lagi thanks a lot...

    BalasHapus
  10. Thanks sob, tipsnya sanggat membantu banget buatku. sekali lagi thanks a lot...

    BalasHapus
  11. Om Putu : Ijin Repost ya.. buat Bookmark

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger