Autocad 2D & 3D: Expandable / collapse navigator( Widget Sembunyi)

Rabu, 21 Oktober 2009

Expandable / collapse navigator( Widget Sembunyi)

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:

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

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

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&up_title=Yahoo%20Mail&up_titleurl=http%3A%2F%2Fmail.yahoo.com&synd=open&w=285&h=200&title=Ymail&border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&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