Info Tentang Trik Membuat Toogle Animasi Di Widget Update Terbaru 2017 Gratis

Sedikit Info Seputar Trik Membuat Toogle Animasi Di Widget Terbaru 2017 - Hay gaes kali ini team Apps Android Games, kali ini akan membahas artikel dengan judul Trik Membuat Toogle Animasi Di Widget, kami selaku Team Apps Android Games telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Apps Android Games. semoga isi postingan tentang Artikel Tips And Trick Blogger, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Trik Membuat Toogle Animasi Di Widget Full Update Terbaru
link: Trik Membuat Toogle Animasi Di Widget

Artikel Terbaru Trik Membuat Toogle Animasi Di Widget Update Terlengkap 2017

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&apos;s Stats' type='HTML'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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>

$(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

Itulah sedikit Artikel Trik Membuat Toogle Animasi Di Widget terbaru dari kami

Semoga artikel Trik Membuat Toogle Animasi Di Widget yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Apps Android Games. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Artikel Tentang Trik Membuat Toogle Animasi Di Widget