mas template

Membuat Menu dTree di Blogger

Jika anda sering mengoperasikan komputer yang memakai Operation System (OS) windows, saya yakin pasti tahu apa itu menu dTree. Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer. Fungsi menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi blog kita. Gambar di bawah ini pasti sudah sering anda lihat di komputer anda. 

cara membuat menu dtree

Menu seperti ini bisa juga kita tampilkan pada web atau blog kita , untuk contoh soalnya temen-temen bisa lihat langsung demonya diblog saya disini. Jika tertarik, perhatikan baik-baik langkah pembuatannya di bawah ini :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Letakkan kode/ script berikut di atas kode </head>
    <link  href='https://sites.google.com/site/bangkolis/javascript/dtree_maskolis.css'  rel='StyleSheet' type='text/css'/>        
    <script  src='https://sites.google.com/site/bangkolis/javascript/maskolis_dtree.js'  type='text/javascript'/>
  4.  Save Template anda.
Langkah Kedua
  1. Pada dasbor klik rancangan 
  2. Kemudian klik elemen halaman => Tambah Gadget 
  3. Setelah itu pilih javascript/HTML,  letakkan kode berikut pada kolom konten:
    <div class="dtree">
    <p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
    <script type="text/javascript">
    <!--
    d = new dTree('d');
    d.add(0,-1,'Creating Website');
    d.add(1,0,'Folder 01','#.html');
    d.add(2,1,'Sub Folder 01',' #.html');
    d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
    d.add(4,0,'Folder 02',' #.html');
    d.add(5,4,'Sub Folder 02',' #.html');
    d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
    d.add(7,0,'Folder 03',' #.html');
    d.add(8,7,'Sub Folder 03',' #.html');

    d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
    d.add(10,0,'File[non-folder]',' link anda.html');
    d.add(11,0,'File[non-folder]',' link anda.html');
    d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
    document.write(d);
    //-->
    </script>
    </div>
  4. Terakhir simpan, dan hasilnya akan seperti gambar di bawah ini

Kalau belum ngerti juga, berikut contoh mengisi menu dan linknya dari daftar menu blog saya; 
<h2>Arsip</h2>
<div class="dtree">

<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Creating Website');
d.add(1,0,'Daftar Isi','#.html');
d.add(2,1,'Tutorial Blog','http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial%20blog');
d.add(3,1,'Joomla','http://creatingwebsite-maskolis.blogspot.com/search/label/joomla');
d.add(4,1,'Wordpress','http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress');
d.add(5,0,'SEO','#.html');
d.add(6,5,'Tips Dasar-Dasar SEO','http://creatingwebsite-maskolis.blogspot.com/2011/02/tips-dasar-dasar-seo.html');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Google','#.html');
d.add(10,9,'Cara Daftar Google Adsense','http://creatingwebsite-maskolis.blogspot.com/2011/02/cara-mendaftarkan-blog-di-google.html');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'Tips Blogger','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kode warna','http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-kode-warna-di-blog.html');
d.add(15,13,'Google Page Rank','http://creatingwebsite-maskolis.blogspot.com/2011/01/google-page-rank-dan-manfaatnya.html');
d.add(16,0,'SEO Tips','http://creatingwebsite-maskolis.blogspot.com/2011/01/seo-tips-dengan-melakukan-blog-ping.html');
document.write(d);
//-->
</script>
</div>
Tentu saja temen-temen bisa ganti alamat url diatas dengan link url anda. Terakhir simpan dan lihat hasilnya. Demikian tutorial membuat menu d'tree kali ini, selamat mencoba dan semoga bermanfaat
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

19 comments:

  1. kayaknya kalo gak da gambar iconya pasti lagi bagus deh..!

    ReplyDelete
  2. cara yg bgs..coba dulu ya gan.......

    ReplyDelete
  3. keren...cuma msh suka tampilan blogku ini bos

    ReplyDelete
  4. Mas, kalau ganti iconya bisa nggak tuh??

    ReplyDelete
  5. makasih infonya, ini yang sedang di cari cari...

    ReplyDelete
  6. Linknya rusak mas..

    Mohon link yang baru...

    Trimas

    ReplyDelete
  7. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  8. Mksh infonya.....oh iya gunanya Tree buat apa y?

    ReplyDelete
  9. Komplit banget daftarnya, aku bookmark blog ini ah buat blog walking rutin :)

    Nitip info: ane jual jam tangan unik keren banget jarang ada yang punya, cekidot >> www.tokoonlinebaru.com

    ReplyDelete
  10. gk ngerti sama sekali boss min.. bantuannya downk boss min.. coba bos min praktekkan lebih dulu. pake halaman kosong nya boss min.. ntar kalo udah jadi up load yah boss min. udah di bookmark nih sitenya. jgan mengewakan boss min

    ReplyDelete
  11. Sehat itu murah, sehat itu milik kita semua. Bagi sebagian orang sehat itu mahal, memerlukan banyak biaya dan perawatan, tetapi bila anda rajin dan sering menggunakan alat Terapi Ion elektrik rendam kaki, sehat itu murah dan mudah. Oleh karena itu penting bagi anda untuk menjaga kesehatan semenjak dini dengan secara rutin membuang racun dan toksin dari tubuh anda dengan menggunakan alat terapi ion elektrik rendam kaki.
    Terapi Ion
    Terapi Ion Rendam Kaki Air Garam
    Peluang Usaha Rumahan
    Terapi Ion Elektrik Rendam Kaki Detox
    Manfaat Terapi Ion Elektrik
    Terapi Ion Elektrik
    Terapi Kesehatan Murah
    Peluang Usaha Modal Kecil
    Harga Paket Alat Terapi Ion Elektrik
    Pengedar Alat Terapi Ion Di Malaysia

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger