Author : UnknownTidak ada komentar
Masih berbicara tentang toggle, kali ini kita akan mencoba mengaplikasikan efek toggle ini pada widget sidebar. Sehingga dengan ini content sidebarnya disembunyikan dan akan tampil ketika judul widgetnya diklik. Dengan begitu daerah di sidebar akan irit tempat dan dengan ini juga kita bisa memilih isi widget mana yang ingin disembunyikan. Tertarik untuk mencobanya? Mari kita mulai mencoba cara mudah menambahkan efek toggle pada sidebar ini.
dan kali ini saya akan posting bagaimana cara membuat toogle pada widget atau bisa dikatakan dengan widget akordion style!!!!
Pertama kita harus mengetahui dulu ID dari widget sidebar yang isinya ingin kita sembunyikan. Sebagai contoh biasanya kode widget sidebar tampak seperti di bawah ini.
<b:widget id='HTML6' locked='false' title='Blog's Stats' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>Dari kode widget di atas tersebut kita telah mengetahui bahwa ID widgetnya adalah HTML6 dan isi widgetnya dibungkus dengan class "widget-content". Maka kita membuat togglenya seperti di bawah ini.
$(function() {
$("#HTML6").click(function () {
$("#HTML6 .widget-content").toggle("slow")
});
});Seperti biasa silahkan simpan script toggle-nya di atas kode </body>
Agar isi widgetnya tidak muncul dan akan muncul ketika judul widgetnya diklik, silahkan buat kode CSS seperti di bawah ini.
#HTML6 .widget-content {display:none}Dan rubah bentuk kursor pada judul widgetnya menjadi pointer seperti di bawah ini.
#HTML6 h2{cursor:pointer}Setelah itu silahkan SAVE perubahan edit HTML blog Anda. Namun perlu diingat, karena ini menggunakan toggle jadi pastikan blog Anda telah dipasang jquery library. Dan jika ingin mencoba menggunakan fungsi toggle lainnya seperti bounce, clip, blind, dan lain-lain silahkan baca lagi postingannya di link di bawah ini. Jangan lupa untuk menambahkan jquery-ui agar efeknya bisa berjalan.
- Baca juga: Beberapa Jenis Efek Toggle Dengan Jquery
Untuk demonya silahkan lihat pad link di bawah ini. Silahkan klik pada sidebar "Google+ Followers" nya.
DEMO ada di blog saya juga
sumber www.kompiajaib.com
saya juga akan share buatan saya yang diantaranya popular post akordion, Labels akordion, blog archive akordion, dan recent comment akordion
java script biasa tunda diatas </body>
<script type='text/javascript'>
$(function() {
$("#Label1").click(function () {
$("#Label1 .widget-content").toggle("slow")
});
});
$(function() {
$("#BlogArchive1").click(function () {
$("#BlogArchive1 .widget-content").toggle("slow")
});
});
$(function() {
$("#HTML6").click(function () {
$("#HTML6 .widget-content").toggle("slow")
});
});
</script>
yang saya tandai dengan warna kuning itu adalah id widget sobat setiap widget mempunyai id berbeda-beda!!
$(function() {
$("#PopularPosts2").click(function () {
$("#PopularPosts2 .widget-content").toggle("slow")
});
});
</script>
yang saya tandai dengan warna kuning itu adalah id widget sobat setiap widget mempunyai id berbeda-beda!!
css simpan diatas ]]></b:skin> atau dibawah <style type='text/css'>
#Label1 .widget-content {display:none}
#Label1 h2{font: normal bold 14px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
border: 1px solid #3866a3;
padding: 9px 18px;
text-decoration: none;
background-color: #63b8ee;
color: #ffffff;
display: block;
text-shadow: 1px 1px 0px #7cacde;
box-shadow: inset 1px 1px 0px 0px #bee2f9;
cursor: pointer;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png);
background-repeat: no-repeat;
background-position: right center;
}
#BlogArchive1 .widget-content {display:none}
#BlogArchive1 h2{font: normal bold 14px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
border: 1px solid #3866a3;
padding: 9px 18px;
text-decoration: none;
background-color: #63b8ee;
color: #ffffff;
display: block;
text-shadow: 1px 1px 0px #7cacde;
box-shadow: inset 1px 1px 0px 0px #bee2f9;
cursor: pointer;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png);
background-repeat: no-repeat;
background-position: right center;
}
#HTML6 .widget-content {display:none}
#HTML6 h2{font: normal bold 14px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
border: 1px solid #3866a3;
padding: 9px 18px;
text-decoration: none;
background-color: #63b8ee;
color: #ffffff;
display: block;
text-shadow: 1px 1px 0px #7cacde;
box-shadow: inset 1px 1px 0px 0px #bee2f9;
cursor: pointer;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png);
background-repeat: no-repeat;
background-position: right center;
}
#PopularPosts2 .widget-content {display:none}
#PopularPosts2 h2{font: normal bold 14px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
border: 1px solid #3866a3;
padding: 9px 18px;
text-decoration: none;
background-color: #63b8ee;
color: #ffffff;
display: block;
text-shadow: 1px 1px 0px #7cacde;
box-shadow: inset 1px 1px 0px 0px #bee2f9;
cursor: pointer;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png);
background-repeat: no-repeat;
background-position: right center;
}
yang saya tandai dengan warna kuning itu adalah id widget sobat setiap widget mempunyai id berbeda-beda!! itu sesuai yang akan dijadiin oleh kita sebagai widget akordion!!
kalau kurang paham silahkan bisa berkomentar!!!
incoming search
trik mebuat menu akordion di blog| trik membuat widget akordion, trik membuat toogle penuh dengan animasi, trik membuat animasi toogle, trik membuat toogle yang penuh dengan animasi, trik membuat blog penuh dengan animasi
yang saya tandai dengan warna kuning itu adalah id widget sobat setiap widget mempunyai id berbeda-beda!! itu sesuai yang akan dijadiin oleh kita sebagai widget akordion!!
kalau kurang paham silahkan bisa berkomentar!!!
incoming search
trik mebuat menu akordion di blog| trik membuat widget akordion, trik membuat toogle penuh dengan animasi, trik membuat animasi toogle, trik membuat toogle yang penuh dengan animasi, trik membuat blog penuh dengan animasi
Posted On : Kamis, 22 Mei 2014Time : 23.22