Plugin Toggle dengan CSS dan Jquery untuk Blog - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 7/02/2013 03:41:00 AM Plugin Toggle dengan CSS dan Jquery untuk Blog Plugin Toggle dengan CSS dan Jquery untuk Blog

Plugin Toggle dengan CSS dan Jquery untuk Blog

Oleh. Kang Rian  •  7  •      Edit
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

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

         

7 komentar

  1. wow... tambih keren wae tutorialna.. calon master yeuh :)

    BalasHapus
    Balasan
    1. muhun kang , hehe terinspirasi oleh akang ! belajar resource sareng lumayan kang kangge koleksi ..

      Hapus
  2. mantap gan/....
    http://bmaster23.blogspot.com/

    BalasHapus
  3. ajib.. keren kang..
    kang.. saya mau menerapkan plugin toggle ini di emoticon kaskus.. yang pernah kmu share tutorialnya..
    tpi saya mengalami kesulitan utk menerapkan dengan toggle agar bisa autohide seperti blog ini..
    mohon bantuannya kang... :bingung:bingung

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Terpopular! Minggu ini..

×