Cara Membuat Spoiler Bertingkat

Sebelumnya saya sudah berbagi dengan kawan cara membuat Spoiler dan sekarangpun masih tetap tentang Spoiler cuma yang ini seperti Tab Menu artinya bisa lebih dari satu Spoiler alias bertingkat :z; 
Perhatikan Demonya : 


» KOMENTAR BLOGGER
» JUDUL
disini simpan file kawan

Catatan :
Demo diatas setelah coba cek akan jalan saat Loading, karena ini di postingan, kalau kawan ingin mencoba Demo sesuai penempatannya [Sidebar] silahkan pada Blog Demo disini  

Setelah kawan memperhatikan Demonya, sekarang mari ke Cara membuatnya :

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor Pilih Tata Letak 
  • Pilih Tambah Gadget - HTML/JavaScript
  • Copas Script berikut kedalamnya
<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;
text-shadow: 2px 2px 2px #000;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background:-moz-linear-gradient(top,#236C90,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#236C90),to(#FFF));
margin:1px;
border:1px solid #FFF;-moz-border-radius:10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;
}
.msg_body {
padding: 5px 10px 15px;
background:-moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#FFF),to(#95CAFF));
border: 2px solid #699AB8;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 20px 20px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 20px 20px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 20px 20px;">
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/blogbegocreation/javascript/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 SPOILER</h5>
<div class="msg_body">
Simpan disini File kawan</div>
<h5 class="msg_head">&#187; JUDUL</h5>
<div class="msg_body">
disini simpan file kawan</div>
  • Silahkan kawan mengganti teks yang berwarna merah dengan kebutuhan
  • Seandainya kawan ingin menambahkan Spoiler lagi cukup Copas dari 
<h5 class="msg_head">&#187; JUDUL</h5>
<div class="msg_body">
disini simpan file kawan</div>
  • Simpan Blog kawan dan lihat hasilnya 

Reviewer: Unknown - Itemreviewed: Cara Membuat Spoiler Bertingkat

Kalau ada yang kurang jelas pada Artikel
Description Cara Membuat Spoiler Bertingkat » Rating: 4.5
atau seandainya ada Link yang rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki

2 Pendapat pada : “Cara Membuat Spoiler Bertingkat”

  1. Demonya ga bisa di klik sob...

    BalasHapus
    Balasan
    1. Trims pemberitahuannya, :z
      setelah coba Demonya jalan saat loading, kalau loading selesai benar macet [karena di postingan kali] :x

      Hapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SOPAN
» BUKAN SPAM, MENGHINA, MENGHUJAT
» JANGAN BERBAU PORNOGRAFI
» TIDAK MENYINGGUNG SARA / ETNIS


 
BLOGBEGO - © Copyright 2012
All rights reserved - Powered by Blogger
ARSIP BLOGBEGO CREATION :