Kamis, 06 Agustus 2009

191. Expandable / collapse navigator( Widget Sembunyi)

Jika kita melihat blog kita secara seksama kelihatannya penuh, maka kita perlu menyisipkan kode-code yang dapat menyembunyikan widget tertentu. Sobat sekalian, kali ini ziliwu akan membahas tentang tutorial membuat widget tersembunyi. Bagaimana cara membuat expandable / collapse navigator ???. Expandable / collapse navigator adalah sebuah fasilitas menyembunyikan witged yg hanya akan muncul bila kata kuncinya di klik dan akan tertutup setelah kata kunci tsb di klik kembali. Posting spt ini jg ada di blog sahabat saya Aan20

Contoh jadinya seperti widget "login emailyahoo" Punya saya dibawah ini:



Klik Disini




Untuk menghilangkannya kembali, klik tulisan Klik Disini.

Tertarik? Ikuti langkah2 sebagai berikut:
  1. Login ke Dasbor Blogger sobat, tata letak, edit HTML. JANGAN LUPA simpan seluruh kode HTML template sobat di file atau di notepad, takut ada apa-apa entar bisa rusak templatenya
  2. Kemudian sobat cari kode dibawah ini pada style template blog shobat.


/* Comments
----------------------------------------------- */



Catatan : Style sheet ada diatas code ]]></skin>


Kalo udah ketemu sisipkan kode dibawah ini tepat di bawahnya!

.commenthidden {display:none}

.commentshown {display:inline}

Sehingga menjadi spt ini :
/* Comments
-----------------------------------------------*/

.commenthidden {display:none}

.commentshown {display:inline}



  1. Setelah itu copy kode di bawah ini dan paste di antara <head> dan </head>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Atau taruh aja dibawah <head> yg paling atas, sehingga menjadi seperti di bawah ini :

<head>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>


dan yg disini script segala macam
.
.
.
.
.
.
sampai </head> yg bawah




  1. Simpan hasil pekerjaan sobat, kemudian ke Tata Letak , Copy kode dibawah ini di sidebar blogger mania, dengan cara masuk ke tata letak, klik elemen halaman, Tambah gadget, pilih HTML/Javascript, setelah itu paste kedalamnya

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Click Here…..[+/-]</a><br />
<div class="commenthidden" id="UniqueName">




Kode HTML/Javascript/Content




</div>


Keterangan :
UniqueName isi sesuai keinginan sobat, UniqueName ini berguna untuk membedakan perintah bila sobat membuat beberapa atau lbh dari satu witged tersembunyi.Terus kode Kode HTML/Javascript/Content ganti dengan kode widget yg ingin di sembunyikan atau content sesuai keinginan sobat bloger.

Untuk contoh  widget "login emailyahoo" Punya saya diatas sebagai berikut:

 <a aiotitle="click to expand" href="javascript:togglecomments('loginyahoo')"
>
Klik Disini</a><br />
<div class="commenthidden" id="loginyahoo">


<script src="http://www.gmodules.com/ig/ifr?url=http://mysite.verizon.net/danachee/yahoo/YahooMail.xml&amp;up_title=Yahoo%20Mail&amp;up_titleurl=http%3A%2F%2Fmail.yahoo.com&amp;synd=open&amp;w=285&amp;h=200&amp;title=Ymail&amp;border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&amp;output=js"></script>

</div>



Yang berwarna UNGU adalah kode script login yahoo nya.

Kalau anda ingin pakai open buton atau dgn istilah spoiler, silahkan baca

Selesai de...ch

1 komentar:

  1. O begitu ya mas,, kalo untuk di wordpress gmana?,

    BalasHapus

Kembali ke atas

Kembali ke atas