Plugin Toggle dengan CSS dan Jquery untuk Blog

Your Ads Here

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 :

Pilihan 1

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

Pilihan 2

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

Pilihan 3

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 :

See also: Ternak Web - FREE SUBMIT URL DIREKTORI INDONESIA

(1) Pilihan Toggle Pertama

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 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">

See also: Pregnancy: The Importance of Prenatal Care

    <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 :
 

Your Ads Here

Your Ads Here

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

See also: Silahkan di coba! "HTML Live Preview Editor Online"

  </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 -->

See also: Membuat Top Komentator pada Halaman Statis dan Komentar Blog

<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

Your Ads Here