Cara Membuat Menu Explorer Di Blogspot

Cara membuat menu Explorer pada Blogspot mungkin kelihatannya asing bagi para sobat semua namun sekarang ini saya punya sedikit tips yang saya ambil dari beberapa teman yang saya kenal di dunia blogging cukup lumayan sih tata caranya namun cukup efektif untuk membuat arsip kita makin kelihatan josh dan lebih maching langsung saja ke tutorialnya yok......

Pada tutorial website kali ini kita akan mencoba membuat menu Dtree pada website atau blog Anda. Sebenarnya ada beberapa situs luar negeri yang pernah membahas tutorial menu ini. Namun dari hasil temuan saya, bentuk navigasi yang merupakan karya Geir Landrö ini jauh lebih menarik. Tentu tidak salah kalau kita pelajari namun harus tetap mengakui bahwa itu adalah karya Geir Landrö. Berikut langkah-langkah membuat menu DTree:

Copy paste kode berikut sebelum kode </head> pada website atau blog Anda:
<script src='http://nestoriko.googlepages.com/dtree.js' type='text/javascript'/>
Copy paste kode CSS berikut pada file CSS website Anda. Jika pada Blogspot, copy paste sebelum kode ]]></b:skin>

/* dtree */ .bukasemua { padding-left:13px; background: transparent url(http://h1.ripway.com/sinaga/gambar/plus-sign.gif) no-repeat 0 55%; } .tutupsemua { padding-left:13px; background: transparent url(http://h1.ripway.com/sinaga/gambar/minus-sign.gif) no-repeat 0 55%; } .dtree { line-height: 11px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #41484d; white-space: nowrap; } .dtree img { border: 0px; vertical-align: middle; } .dtree a { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #41484d; text-decoration: none; } .dtree a.node, .dtree a.nodeSel { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; white-space: nowrap; padding: 1px 2px 1px 2px; color: #41484d; } .dtree a.node:hover, .dtree a.nodeSel:hover { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: red; font-weight: normal; text-decoration: none; } .dtree a.nodeSel { /* background-color: #c0d2ec; */ } .dtree .clip { overflow: hidden; }
Berikut ini contoh struktur menu Dtree yang akan kita pasang pada website. Silahkan copy paste pada bagian dimana Anda ingin menampilkan menu Dtree pada website Anda. Untuk Blogspot, jika Anda ingin menampilkan pada sidebar:
- Masuk pada dashbor Anda kemudian klik link Tata Letak
- Pilih tab Elemen Halaman. Kemudian klik salah satu link Tambah Gadget. Akan muncul window penambahan gadget baru. Pilih gadget HTML/Javascript
- Copy paste struktur menu berikut pada gadget HTML/Javascript tersebut.
<div class="dtree"> <p style="text-align:center"><a class="bukasemua" href="javascript: d.openAll();">Buka Semua Folder</a> | <a class="tutupsemua" href="javascript: d.closeAll();">Tutup Semua</a></p> <script type="text/javascript">  </script> </div>

Berikut ini penjelasan dari struktur menu Dtree yang ada pada langkah 3 di atas:
Menu Dtree terdiri dari 3 bagian

Menu Utama
Sub Menu, dan
Item Menu.

1. Main Menu yang bisa kita atau tambahkan secara umum berbentuk:

d.add(1,0,'Main Menu 1','fill 11','fill 12','fill 13','fill  14','fill 15');

d.add(2,0,'Main  Menu 2','fill 21','fill 22','fill 23','fill 24','fill 25');

Angka 1 dan 2 yang berwarna merah menunjukkan ID main menu. Main menu 1 mempunyai ID=1, dst.
Angka 0 yang berwarna biru menunjukkan main menu berada pada level ke 0, yaitu berada paling puncak.
"Main Menu 1" dan "Main Menu 2" merupakan nama Main Menu yang bisa Anda buat sendiri.
Sedangkan fill 11, fill 12, dan seterusnya merupakan atribut dari main menu tersebut. Setiap atribut (fill) punya defenisi dan fungsi sendiri, yaitu:
- Fill 11: merupakan alamat URL atau link halaman yang akan dituju jika Main Menu 1 diklik. Begitu pula fill 12 yang merupakan link atau URL halaman yang dituju jika Main Menu 2 diklik.
- Fill 12 : merupakan tulisan yang akan muncul jika mouse digerakkan diatas Main Menu 1.
- Fill 13 : merupakan alternatif text untuk menggantikan icon menu.
- Fill 14 : merupakan alamat gambar yang dijadikan icon Main Menu 1.
- Fill 15 : merupakan alamat gambar pengganti icon pada fill 14 jika Main Menu 1 diklik.

Namun, tidak semua fill harus dideklarasikan karena mungkin tidak terlalu penting atau karena sudah dideklarasikan pada kode javascript yang anda link kan pada langkah 1 di atas. Sebagai contoh:

d.add(1,0,'My  Documents','','My  Documents','','http://h1.ripway.com/sinaga/gambar/mydocument.gif','http://h1.ripway.com/sinaga/gambar/mydocument.gif');

d.add(2,0,'Arsip Artikel','','Arsip  Article','','http://h1.ripway.com/sinaga/gambar/archive.gif','http://h1.ripway.com/sinaga/gambar/archive.gif');

2. Sub Menu yang bisa kita buat atau tambahkan berbentuk:

d.add(100,1,'Sub  Menu 1','fill 11','fill 12','fill 13','fill 14','fill 15');

d.add(101,1,'Sub Menu 2','fill 11','fill  12','fill 13','fill 14','fill 15');

Coba perhatikan pola ID dari menu-menu tersebut. Angka 100 yang berwarna orange menunjukkan ID Sub Menu 1. Sedangkan angka 1 yang berwarna merah itu sebenarnya adalah ID dari Main Menu 1,sehingga Sub Menu 1 akan menjadi sub menu dari main menu 1.

Sebagai contoh:

d.add(4000,1,'My Pictures','','My  Pictures','','http://h1.ripway.com/sinaga/gambar/imgfolder.gif','http://h1.ripway.com/sinaga/gambar/imgfolder.gif');

d.add(4001,1,'My Music','','My  Music','','http://h1.ripway.com/sinaga/gambar/musicfolder.gif','http://h1.ripway.com/sinaga/gambar/musicfolder.gif');

3.Item Menu bentuk umumnya:

d.add(2222,100,'Item  Menu 1','fill 11','fill 12','fill 13','fill 14','fill 15');

d.add(2223,100,'Item Menu 2','fill 11','fill  12','fill 13','fill 14','fill 15');

Hampir sama dengan penjelasan Sub Menu, coba perhatikan pola ID dari item-item menu tersebut. Angka 2222 yang berwarna pink menunjukkan ID item Menu 1. Sedangkan angka 100 yang berwarna orange itu sebenarnya adalah ID dari Sub Menu 1,sehingga Item Menu 1 akan menjadi item menu pada sub menu 1.

Begitu Seterusnya.
Jika Anda ingin membuat sub menu di dalam sub menu atau disebut sub sub menu, maka jadikan ID sub menu menjadi parent dari sub sub menu tersebut.

Yang terakhir:
Coba perhatikan kode paling bawah yang Anda copy paste pada langkah 3 di atas:

...

document.write(d);

d.closeAll();

d.openTo(104,true);

d.openTo(103,true);

Kode yang berwarna merah menunjukkan bahwa menu dengan ID 104 dan 103 akan terbuka. Artinya isi dari menu tersebut baik berupa sub menu, sub sub menu, maupun item menu akan terbuka ketika website atau blog pertama kali dibuka.

nah sekarag tinggal sobat ganti alamat2 yang ada dalam kolom tersebut supaya tergantikan dengan alamat link sobat selamat mencoba dan terima kasih telah mengunjungi saya Spesial Thank for : Tutorial Website

Blogger Berita Terkini Di Indonesia dan kumpulan Gadget Murah Terbaru

Selasa, 31 Mei 2011

Cara Membuat Menu Explorer Di Blogspot

Related Posts

0 komentar:

Posting Komentar