Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

Plugin Toggle dengan CSS dan Jquery untuk Blog

Plugin Toggle dengan CSS dan Jquery untuk Blog - Plugin Toggle Icon Ada yang tau Plugin Toggle yang kaya gimana ? hhi itu tuh yang kotak-kotak terus kalo di klik keluar deh anak-anak dari judul nya! yah seperti itu lah kurang lebih, hehe .. nah pada kesempatan ini saya akan membahas cara membuat atau memasang plugin Toggle tersebut , plugin ini sangat berguna buat anda yang ingin mempercantik blog / website nya .

Berikut Demonstrasi nya :

Deskripsi atau Keterangan dari Isi Pilihan no 1 di atas ..
Deskripsi atau Keterangan dari Isi Pilihan no 2 di atas ..
Deskripsi atau Keterangan dari Isi Pilihan no 3 di atas ..

Cara Memasang Plugin Toggle :

1. Masuk ( Blogger ) → ( Template ) → ( Edit HTML )
2. Cari Tag atau Kode </body> simpan kode dibawah ini tepat di atas nya !

<!-- Toggle Start for Blogger Modified by Kang Rian (www.rian-nurherdian.blogspot.com)  -->
<!-- DC Toggle CSS-->
<link href="http://static.tumblr.com/dxr7fsd/teAmp9gnx/tsc_accordion_toggle.css" rel="stylesheet" type="text/css"></link>

<!-- DC Toggle JS -->
<script src="http://rian-nurherdian.googlecode.com/files/tsc_accordion_toggle.js" type="text/javascript"></script>
<!-- Toggle End for Blogger Modified by Kang Rian (www.rian-nurherdian.blogspot.com)  -->

Simpan & Selesai , plugin siap digunakan !

Memanggil Pluggin Toggle :



(1) Pilihan Toggle Pertama


Deskripsi atau Keterangan dari Pilihan di atas ..
Deskripsi atau Keterangan dari Pilihan di atas ..
Deskripsi atau Keterangan dari Pilihan di atas ..


Kode Untuk memanggil nya:

<!-- DC Toggle 1 Start -->
<div class="tsc_toggle_container" style="width:80%;">
  <div class="tsc_toggle style1">
    <div><a href="" class="tsc_toggle_link">Pilihan 1</a></div>
    <div class="tsc_toggle_box">Deskripsi atau Keterangan dari Pilihan di atas ..</div>
  </div>
  <div class="tsc_toggle style1">
    <div><a href="" class="tsc_toggle_link">Pilihan 2</a></div>
    <div class="tsc_toggle_box">Deskripsi atau Keterangan dari Pilihan di atas ..</div>
  </div>
  <div class="tsc_toggle style1">
    <div><a href="" class="tsc_toggle_link">Pilihan 3</a></div>
    <div class="tsc_toggle_box">Deskripsi atau Keterangan dari Pilihan di atas ..</div>
  </div>
</div>

<!-- DC Toggle 1 End -->


(2) Pilihan Toggle Kedua :
 

Deskripsi atau Keterangan dari Pilihan di atas ..
Deskripsi atau Keterangan dari Pilihan di atas ..
Deskripsi atau Keterangan dari Pilihan di atas ..


Kode Untuk memanggil nya:

<!-- DC Toggle 2 Start -->
<div class="tsc_toggle_container" style="width:80%;">
  <div class="tsc_toggle style2">
    <div><a href="" class="tsc_toggle_link">Pilihan 1</a></div>
    <div class="tsc_toggle_box">Deskripsi atau Keterangan dari Pilihan di atas ..</div>
  </div>
  <div class="tsc_toggle style2">
    <div><a href="" class="tsc_toggle_link">Pilihan 2</a></div>
    <div class="tsc_toggle_box">Deskripsi atau Keterangan dari Pilihan di atas ..</div>
  </div>
  <div class="tsc_toggle style2">
    <div><a href="" class="tsc_toggle_link">Pilihan 3</a></div>
    <div class="tsc_toggle_box">Deskripsi atau Keterangan dari Pilihan di atas ..</div>
  </div>
</div>
<!-- DC Toggle 2 End -->


(3) Pilihan Toggle Ketiga :

+ Pilihan 1
Deskripsi atau Keterangan dari Pilihan di atas ..
+ Pilihan 2
Deskripsi atau Keterangan dari Pilihan di atas ..
+ Pilihan 3
Deskripsi atau Keterangan dari Pilihan di atas ..


Kode untuk Memanggil nya :

  <!-- DC Toggle 3 Start -->
<dl class="tsc_accordion2" style="width:80%;">
  <dt class="current">+ Pilihan 1</dt>
  <dd class="current">
    <p>
Deskripsi atau Keterangan dari Pilihan di atas ..</p>
  </dd>
  <dt>+ Pilihan 2</dt>
  <dd>
    <p>
Deskripsi atau Keterangan dari Pilihan di atas ..</p>
  </dd>
  <dt>+ Pilihan 3</dt>
  <dd>
    <p>
Deskripsi atau Keterangan dari Pilihan di atas ..</p>
  </dd>
</dl>
<!-- DC Toggle 3 End -->

Keterangan : Ganti text warna Merah dengan text yang anda inginkan !
Semoga Bermanfaat & Happy Blogging ! :)

Resource : http://www.dreamtemplate.com/dreamcodes/documentation/toggle.html
Suka artikel ini? Bagikan!

Hidden Ads!

 
Mohon Aktifkan Javascript!Enable JavaScript