Tulisan ini menjelaskan cara membuat Apple Menu dengan gaya Accordion di Blogger. Kami mendapatkan ScriptJava-nya dan CSS-nya dari DynamicDrive. Maklum yaa, Karena saya belum pandai buat ScriptJava. Kemudian, saya berusaha menyesuaikan pemakaiannya di Blogger.
Apple Menu itu seperti gambar dibawah ini.
sebenarnya tutorial ini sudah lama saya tulis, tapi belum saya tampilkan. takut ga' da yang suka. tapi ternyata ada juga yang mau dengan widget ini.
yaitu salah satu pengunjung blog saya, namanya vidski 'grackers' blog .
Seterusnya, kata Apple Menu, aku singkat jadi Menu aja yaa...:). Kalo ngomong Menu, aku jadi pingin makan nih. Heh..Heh.. aku mau martabak telor, soto, rawon, rujak cingur, BiG MaC, wes...wes...wes... jadi nglantur. Ayo kembali lagi.., sampai mana tadi yaa...wekekek
Tambahan, Menu ini juga "Mouse Over". Maksudnya, Kalo mouse anda diarahkan di atas judul background abu-abu, maka Menu itu akan membuka isinya. Terus, jika satu menu terbuka, maka menu sebelumnya akan nutup sendiri secara otomatis.
Karena itu, Menu ini berfungsi melipat dan memberi fokus pada isi yang ditampilkan.
Contoh/Demonya di sidebar tampilan blog saya:
Coba Arahkan mouse kamu ke menu yang ada tulisannya...
Selanjutnya, berikut ini adalah langkah-langkah membuat AppleMenu dengan gaya Accordion Style di Blogger.
oke... kita langsung kita praktekan.
1. Sign in ke Blogger
2. Pilih Tab layout / Tata letak
3. Pilih Edit HTML
4. Centang kotak kecil yang disebelahnya ada tulisan Expand Widget Template
5. kemudian, cari kode ini:
<head>
tempatnya, kira-kira di atas...
Kalo bingung, pencet aja Ctrl+F, copy dan masukkan kode itu, terus tekan ENTER
6. Taruh Script Java ini, dibawahya <head>:
<script src='http://mendandaniblog.googlepages.com/jquery-1.2.6.pack.js' type='text/javascript'/>
<script src='http://mendandaniblog.googlepages.com/ddaccordion.js' type='text/javascript'/>
<script src='http://mendandaniblog.googlepages.com/initapplemenu.js' type='text/javascript'/>
Keterangan:
Tenang saja. Meski script itu kelihatan banyak, tapi ringan kok.
7. Setelah itu, cari kode berikut ini:
]]></b:skin>
8. Kemudian, taruhlah kode CSS berikut ini di atasnya ]]></b:skin>:
/*ddaccordion Apple Menu Mouse Over
----------------------------------------------- */
.applemenu {
margin: 5px 0;
padding: 0;
width: ; /*width of menu*/
border: 1px solid #9A9A9A;
}
.applemenu div.silverheader a{
background: black url(http://koleksipicture.googlepages.com/silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(http://koleksipicture.googlepages.com/silvergradientover.gif);
color: white;
}
.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: ; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
Keterangan:
1. Tulisan Warna Merah (kedap-kedip) = ukuran lebar .
2. Tulisan Warna Biru (kedap-kedip) = ukuran tinggi.
Kamu bisa menyesuaikan ukurannya, sesukamu.
Tapi, jangan lupa, dibelakangnya harus ada simbol "px" yaa... :).
Misalnya: 100px, 200px, atau 330px, 173px dan sebagainya.
Udah...!!! udah selesai di taruh semuanya..??!! Ya udah kalo begitu, BABAK PERTAMA telah usai. Mari kita berlanjut ke BABAK KEDUA. Monggo....
cara memasangnya gene...
1. Masuk ke Tab Add Page Element
2. Pilih Add Gadget
3. Pilik Edit HTML/JavaScript
4. Masukkan kode HTML berikut ini kedalam gadget Edit HTML/javascript itu:
<div class="applemenu">
<div class="silverheader">
<a href="http://master-kis.blogspot.com">Coba Menu 01</a>
</div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader">
<a href="http://master-kis.blogspot.com/">
Coba Menu 02</a>
</div>
<div class="submenu">
ISI TULISAN MU / KODE HMTL / JAVASRIPT Disini
(Some random content here)<br />
</div>
<div class="silverheader">
<a href="http://master-kis.blogspot.com">
Coba Menu 03</a>
</div>
<div class="submenu">
ISI TULISAN MU / KODE HMTL / JAVASRIPT Disini
(Some random content here)<br />
</div>
<div class="silverheader">
<a href="http://master-kis.blogspot.com">
Coba Menu 04</a></div>
<div class="submenu">
ISI TULISAN MU / KODE HMTL / JAVASRIPT Disini
(Some random content here)<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>
<div class="silverheader">
<a href=""></a>
</div>
<div class="submenu">
<br />
</div>
</div>
Keterangan
A. Please, lihat kode HTML yang berwarna biru dan tulisan kedap kedip itu.
Tulisan warna Ungu (kedap-kedip) = Link. Kamu boleh biarkan saja, atau rubah dengan link sesukamu
Tulisan warna coklat (kedap-kedip) = Judul yang tampil di halaman Blog kita. Gantilah dengan nama judulmu sendiri, sesukamu
Tulisan warna Hitam (kedap-kedip) = isi dari Menu. Isilah dengan Tulisan atau kode HTML/Javascript yang kamu inginkan. Itu bisa widget, kode adsense, dan sebagainya
B. Kode HTML yang berwarna merah adalah kode pembuka dan penutup Menu. Awas, jangan sampai ilang yaa...:)
Pembuka -->> <div class="applemenu">
Disini adalah Area di mana Menaruh Menu Tambahan
Penutup -->> </div>
C. Jika ingin menambah Menu, copy dan paste seluruh kode yang berwarna biru itu. Taruh, di area dalam kode HTML yang merah. Terus, gantilah semua tulisan yang kedap-kedip itu.
5. Lalu Save/Simpan
Sekarang coba lihat hasilnya. Udah bisa...!!! Atau tambah Ancur........!!! heh heh
Tidak ada komentar:
Posting Komentar