Cara Membuat DTree Menu

Semakin lama, HP saya sepertinya dah banyak error nih. Dulu penerima sinyalnya yang error. Masih tetap ada sinyal 3G walaupun saya bawa didaerah yang tidak tercoverage 3G. Akhirnya jalan satu - satunya adalah upgrade. Berhasil!!! Sekarang mulai error lagi. Ditambah lagi sinyalnya penuh terus. Pasti orang akan senang kalau sinyalnya penuh terus, tetapi kalau di daerah tanpa sinyal tetap ada sinyal di HP bagaimana? Aneh kan? Tanda 3G juga gak hilang - hilang tuh. Karena males upgrade firmware, ya tetap pake saja sebagai modem. Putus - putus gak jelas deh akhirnya nih koneksi. Tetapi tetap setia berbagi pengalaman. Beginilah sepenggal cerita dari saya, tetapi posting kali ini tidak menceritakan tentang itu.......!!

Seperti judul postingnya, saya akan berbagi dengan para sahabat blogger tentang cara membuat DTree Menu. Apa itu DTree Menu? Tidak akan saya jelaskan karena bisa kalian lihat sendiri di pojok kiri atas blog ini. Di daftar artikel, seperti model explorer windows kan? Nah itulah DTree menu. Maaf bila salah dalam pemberian nama ya. Yang penting semua mengerti.

Bagi yang ingin membuatnya, berikut ini adalah langkah - langkahnya (pakai blogger bahasa indonesia):
  1. Buka blog kamu (khusus pengguna blogger)
  2. Log in dengan email dan password kamu seperti biasa
  3. Buka tata letak kemudian edit HTML
  4. Cari kode berikut :

    ]]></b:skin>

  5. Bila kesulitan, bisa kamu cari dengan menekan Ctrl + F dan ketikkan code yang ingin kamu cari.
  6. Letakkan kode dibawah ini diatas kode tersebut :


    .dtree {
    font-family: Arial, Sans-serif;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    }
    .dtree img {
    border: 0px;
    vertical-align: middle;
    }
    .dtree a {
    color: #FFFFFF;
    text-decoration: none;
    }
    .dtree a.node, .dtree a.nodeSel {
    white-space: nowrap;
    padding: 1px 2px 1px 2px;
    }
    .dtree a.node:hover, .dtree a.nodeSel:hover {
    color: #FFFFFF;
    text-decoration: underline;
    }
    .dtree a.nodeSel {
    background-color: #c0d2ec;
    }
    .dtree .clip {
    overflow:;
    }

  7. Kode dibawah ini kamu letakkan di bawah kode ]]></b:skin>


    <script src='http://kacrut82.googlepages.com/dtree.js' type='text/javascript'/>

  8. Setelah itu simpan template kamu

Bagian pertama telah selesai, lanjut ke bagian selanjutnya.
  1. Setelah template tersimpan, buka Elemen Halaman dan tambah gadget (Add Widget)
  2. Tambah HTML/Javascript
  3. Isi widget dengan code berikut :


    <div class="dtree">
    <script type="text/javascript">
    <!--
    d = new dTree('d');
    d.add(0,-1,'My example tree');
    d.add(1,0,'Node 1','link.html');
    d.add(2,1,'Node 1.1','link.html');
    d.add(3,2,'Node 1.1.1','link.html');
    d.add(4,3,'Node 1.1.1.1','link.html');
    d.add(5,0,'Node 2','link.html');
    d.add(6,5,'Node 2.1','link.html');
    d.add(7,5,'Node 2.2','link.html');
    d.add(8,0,'Node 3','link.html');
    d.add(9,0,'Node 5','link.html');
    document.write(d);
    //-->
    </script>
    </div>

  4. Ganti "Node" dengan judul posting kamu dan "Link .html" dengan link dari judul posting tersebut.
  5. Code pada wigdet diatas akan menampilkan beberapa bagian dari menu.
  6. Bila kurang jelas, bisa kamu lihat contoh code dari blog ini (menghasilkan 1 bagian dari 1 menu). Berikut ini adalah codenya :


    <h2 class="title"><span style="color: rgb(51, 255, 51);">Daftar Artikel</span></h2>
    <div class="dtree">
    <div style="overflow: auto; border: 1px solid rgb(128, 128, 128); color: rgb(255, 255, 0); padding: 5px 5px 5px 5px;">
    <script type="text/javascript">


    <!--
    d = new dTree('d');

    /*---------------------------------------------------*/


    d.add(0,-1,'Rattlenetwork');

    d.add(1,0,'Bisnis Online Gratis');

    d.add(2,1,'Penawaran Bonus (Cashback For Referral)','http://rattlenetwork.blogspot.com/2009/07/penawaran-bonus-cashback-for-referral.html');

    d.add(3,1,'Apa Itu Paid To Click','http://rattlenetwork.blogspot.com/2009/06/apa-itu-ptc-paid-to-click.html');

    /*---------------------------------------------------*/

    d.add(100,0,'Free Software');

    d.add(101,100,'Software Bagus Nih!','http://rattlenetwork.blogspot.com/2009/06/software-software-bagus-nih.html');

    d.add(102,100,'Camfrog Chat Paling Asik','http://rattlenetwork.blogspot.com/2009/06/camfrog-chat-paling-asik.html');

    d.add(103,100,'Uninstall Program Sampai Bersih Dengan Your Uninstaller Pro','http://rattlenetwork.blogspot.com/2009/08/uninstall-program-sampai-bersih-dengan.html');

    /*---------------------------------------------------*/

    d.add(300,0,'Hack Dan Tool');

    d.add(301,300,'Pengertian Hacker','http://rattlenetwork.blogspot.com/2009/08/pengertian-hacker.html');

    d.add(302,300,'Cara Hacker Menyembunyikan Diri','http://rattlenetwork.blogspot.com/2009/09/cara-hacker-menyembunyikan-diri.html');

    ...............dst

    /*---------------------------------------------------*/


    document.write(d);
    //-->

    </script></div></div>

  7. Ingat, angka setelah d.add adalah tidak boleh sama dengan sebelumnya. Seperti menu Hack dan Tool (contoh diatas), angka 300, 301, 302,..dst jangan sampai ada yang sama. Baik dari menu Hack dan Tool atau yang lainnya. Sedangkan angka 300 harus sama pada menu Hack dan Tool, tetapi tidak boleh sama pada menu yang lain seperti Free Software dan Bisnis Online Gratis (menu yang lain harus mempunyai angka unik yang lain, lihat contoh).
  8. Tanda /*-----------------*/cuma sebagai tanda pembatas saja, tidak ada masalah jika tidak disertakan.
  9. Simpan Widget kamu dan lihat hasilnya

Selesai sudah perjalanan kita hari ini dan akan melanjutkan perjalanan untuk esok hari. Salam buat semua sahabat. Tetaplah berkreasi dan berbagilah dengan semua sahabat. Selamat berkreasi....!!!

By Rattlenetwork

12 comments:

  1. wah aku kira mudah membnuatnya,ternyata harus teliti dan sabar...
    hebat sekali nih mas...
    simpan dulu ya?ntar aku praktekkin...

    ReplyDelete
  2. Mantap ini gan, dari dloe aq pengen pake DTree, terima kasih gan... salam sukses selalu

    ReplyDelete
  3. @Lover
    @Hitler Jr

    Thanks bos...selamat mencoba..!!

    ReplyDelete
  4. tengkyu gan atas info mantabnya, yup tetaplah saling berbagi ilmu, :)

    ReplyDelete
  5. seperti newbie masih kurang mengerti. banyak sekali nomor2nya bikin bingung.

    ReplyDelete
  6. Klo yang ginian, ni bagian-nya yang dh punya jam terbang panjang, klo buat aq, sekedar liat2 aja n ikutan komen (:seadanya.....)

    ReplyDelete
  7. @Rachmat, Thanks bos, tetap berbagi untuk semua...!

    @Buaya darat, untuk jaga - jaga saja kalo postingq lebih dari 100 per menu, jadi saya buat 100 nomer antara menu 1 ke menu berikutnya..

    @Rossbaru, Q juga masih newbie juga bos..Rasa keingin tahuan lah yang membuat saya bisa saling berbagi pengetahuan

    @Wilyo Alsyah, sama - sama bos..!!

    ReplyDelete
  8. Wah.. Menu memang asyik untuk dipasang di blog. "BARANG WAJIB" BAHGIKU. Q mau tanya nih.. Itu blog Q da page n about me, Gimana YA> cara mengaktifkannya. Thanksy. Ass

    ReplyDelete
  9. @Aku bisa.maksudnya cara mengaktifkan gmn bos?

    Kalau ingin di isi link ya tinggal masuk blog..edit html, trus cari sup page #1, sup page #2...dst..dan ganti dengan alamat / link website...

    ReplyDelete
  10. oke jg nih,,,mo co ba praktekin bos

    ReplyDelete
  11. I like this...
    Maju terus Indonesia...
    Keep sharing brother...

    ReplyDelete

Berikanlah komentar anda!!
Permintaan software, revisi, dukungan, kritik, saran atau apa saja akan sangat membantu kemajuan blog ini...Thanks!!!

Email : rat_networx[add]yahoo[dot]com
YM : Rat_NetworX