Cara Membuat Spoiler Bertingkat
Ditulis oleh :
Unknown
- Hari:
Sabtu, 07 Juli 2012
-
Jam
17.00
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
- 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">» JUDUL SPOILER</h5>
<div class="msg_body">
Simpan disini File kawan</div>
<h5 class="msg_head">» 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
<div class="msg_body">
disini simpan file kawan</div>
- Simpan Blog kawan dan lihat hasilnya
Reviewer: Unknown - Itemreviewed: Cara Membuat Spoiler Bertingkat
Description Cara Membuat Spoiler Bertingkat » Rating: 4.5
atau seandainya ada Link yang rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
Artikel Terkait Menarik Lainnya :
,
,
Demonya ga bisa di klik sob...
BalasHapusTrims pemberitahuannya, :z
Hapussetelah coba Demonya jalan saat loading, kalau loading selesai benar macet [karena di postingan kali] :x