Tuesday, June 15, 2010

CARA MEMBUAT EXPLORER D-TREE...

Bookmark and Share


.... Kali ini sobat blogger yang bertanya adalah Cerita-Dewasa "brooo,, kalo pengin daftar isi kayak yang paling atas gimana caranya??? itu tuu... yang open all ? " ... memang sudah ada beberapa yang tanya seperti ini karena melihat tampilan Menu D-Tree di blog ini.. Sebenarnya malas banget kalau membahas trik yang satu ini karena pembahasannya panjang..fiiuuh.. tetapi akan saya buat sesederhana mungkin sobat..biar kalian paham.. jika kalian telah paham maka akan lebih mudah untuk mengubah-ubahnya tampilannya seperti kemauan kalian sendiri :)


...Explorer D-Tree yaitu menu berantai yang mirip seperti window explorer.. tampilannya yang sepertinya sederhana dan ringkas tetapi sebenarnya bisa mencakup isi yang terdapat dalam blog kita... terus bisa juga kita atur lagi Menu D-tree secerdik kita..tetapi menu ini daftar isinya harus dilakukan secara manual.. :D hehe

MySpace...Langsung saja simak caranya berikut ini ;

Tahap A - Copy Paste Js Explorer D-Tree ke dalam kode HTML Template Blog
1. Login ke blogger > rancangan > Edit HTML ..klik Expand Template Widget (dibiasakan)
2. Cari kode html " </head> " lalu letakan kode JS dibawah ini diatasnya ( dibawahnya juga tidak apa-apa) ;
<link href='http://sites.google.com/site/ecaknyo/blog/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://sites.google.com/site/ecaknyo/blog/dtree_ecaknyo.js' type='text/javascript'/>
Contohnya seperti dibawah ini ;
<link href='http://sites.google.com/site/ecaknyo/blog/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://sites.google.com/site/ecaknyo/blog/dtree_ecaknyo.js' type='text/javascript'/>

</head>

3. jika sudah lalu klik Simpan Template...


Tahap B - Copy Paste kode Menu D-Tree ini di Gadget HTML/Java Scripts
4. Rancangan > Elemen Halaman > Tambah Gadget > HTML/Js.. terserah mau kamu letakan dimana Gadgetnya.. aturlah sesukamu.. :)
5. Copy-paste kode dibawah ini..
<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://sites.google.com/site/ecaknyo/blog/plus.gif" /><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://sites.google.com/site/ecaknyo/blog/minus.gif" /><b>Close all</b></a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Home','http://ecaknyo.blogspot.com');

d.add(2,0,'Arsip Lainnya')

d.add(3,2,'Antivirus','');
d.add(10,3,'Download PcMAV Antivirus','http://ecaknyo.blogspot.com/2009/08/download-pcmav-antivirus.html');
d.add(20,3,'Cara Update Manual Avira Antivir Personal Edition','http://ecaknyo.blogspot.com/2009/08/cara-update-manual-avira-antivir.html');
d.add(30,3,'Cara Update Manual Avast Home Edition','http://ecaknyo.blogspot.com/2009/08/cara-download-update-database-virus.html');
d.add(40,3,'Cara Update Manual AVG Free Edition','http://ecaknyo.blogspot.com/2009/08/cara-update-avg-free-edition-update.html');

d.add(4,2,'Dak Seru','');
d.add(10,4,'Inilah Robot2 yang Akan Membantu Manusia Di Masa Depan','http://ecaknyo.blogspot.com/2009/09/inilah-robot2-yang-akan-membantu.html');
d.add(20,4,'Kecelakaan Kendaraan yang Hebat','http://ecaknyo.blogspot.com/2009/09/apakah-yang-terjadi-kok-bisa-sampai.html');
d.add(30,4,'Mobil2 yang Amazing','http://ecaknyo.blogspot.com/2009/09/wow-mobil-mobil-ini-amazing.html');
d.add(40,4,'Penemuan2 Alat Terbang','http://ecaknyo.blogspot.com/2009/09/penemuan-alat-terbang.html');
d.add(50,4,'Only For Women','http://ecaknyo.blogspot.com/2009/09/only-for-womenweleh2.html');

d.add(5,2,'Download','');
d.add(10,5,'Simple IP Address Calculator','http://ecaknyo.blogspot.com/2009/09/simple-ip-addres-calculator.html');
d.add(20,5,'TweakNow WinSecret','http://ecaknyo.blogspot.com/2009/09/tweak-windows-pake-aplikasi-tweaknow.html');
d.add(30,5,'Download Photoshop Font','http://ecaknyo.blogspot.com/2009/08/photoshop-font-download-gratis-lengkap.html');
d.add(40,5,'Download Software Gratis','http://ecaknyo.blogspot.com/2009/08/download-software-gratis.html');

d.add(6,2,'Elektro','');
d.add(10,6,'Kemampuan Hantar Arus (KHA)','http://ecaknyo.blogspot.com/2009/08/kemampuan-hantar-arus-kha.html');
d.add(20,6,'Rugi-rugi Daya (P Loss)','http://ecaknyo.blogspot.com/2009/08/rugi-rugi-daya-p-loss.html');
d.add(30,6,'Macam-macam Daya Listrik','http://ecaknyo.blogspot.com/2009/08/macam-macam-daya-listrik.html');

d.add(7,2,'X-Tra Duit');
d.add(10,7,'Kumpul Blogger','http://ecaknyo.blogspot.com/2009/09/gabung-di-kumpul-blogger-dapet-duit.html');
d.add(20,7,'PPCMuslim Adsense','http://ecaknyo.blogspot.com/2009/09/adsense-indonesia-ya-ppcmuslim.html');
d.add(30,7,'AdsenseCamp','http://ecaknyo.blogspot.com/2009/09/adsense-indonesia-ya.html');

d.add(8,0,'Komunitas','','','','http://sites.google.com/site/ecaknyo/blog/Globe.gif');
d.add(10,8,'Komunitas Blogger Palembang','http://palembang-blogger.blogspot.com/','','','http://sites.google.com/site/ecaknyo/blog/Icon_User.gif');
d.add(20,8,'Komunitas Blogger Sumatera','http://andalas-comunity.blogspot.com/','','','http://sites.google.com/site/ecaknyo/blog/Icon_User.gif');
d.add(30,8,'Politeknik Negeri Sriwijaya','http://www.polisriwijaya.ac.id/','','','http://sites.google.com/site/ecaknyo/blog/Icon_User.gif');
d.add(40,8,'Universitas Negeri Sriwijaya','http://www.unsri.ac.id/','','','http://sites.google.com/site/ecaknyo/blog/Icon_User.gif');

document.write(d);

//-->
</script>

</div>
Panduan :
Merah = Gantilah dengan alamat url blog kamu..
Biru = Gantilah dengan nama Folder Arsip kamu..
Pink = Gantilah dengan nama Judul Posting kamu..
Orange = Gantilah dengan url posting blog kamu yang berhubungan dengan judul posting tersebut..

Keterangan :
d.add(0,-1, = Link Utama Url Utama Blog " Home "..dimulai dari " 0,-1 " ..dst
|
|
d.add(2,0, = Link Kedua berupa Folder " Arsip Lainnya ".. dimulai dari " 2,0 "..dst
|
+---- d.add(3,2, = Link Ketiga Folder " Antivirus " dimulai dari " 3,2 "..dst..
|
+------- d.add(10,3, = isi dari Folder Antivirus... dimulai dari " 10,3 "..dst...

6. Jika sudah selesai ..kLik Simpan Gadget.. lalu refresh blog kamu dan lihatlah hasilnya.. ;)

Note :
> Sengaja tidak saya buat penjelasan yang lebih rinci.. takutnya nanti kalian malah tambah bingung.. pahami saja langkah-langkah diatas.. saya yakin kalian bisa.. dengan begitu kalian akan mengerti sendiri..
> Pakailah dulu alamat url file .Js dan url icon Menu D-Tree saya.. jika Menu kalian sudah sempurna ..baru kalian bisa ganti dengan url file .Js dan url Icon D-Tree kalian sendiri.. Simpan Saja di Google site..

MySpace
... Susah2 Mudah ya ...

58 comments:

  1. pertamax, selalu ditunggu ni kunjungannya

    ReplyDelete
  2. Pebisnis > pertamax lagi lu gan.. salut gw.. hehe :D btw ntar wa mampir n komeng jg

    ReplyDelete
  3. jikakakakakakaka =)), akhirnya dibalas. thanks broo... atas infonya. tapi bener-bener ribet :((, karena serba manual, kirain otomatis:p. tapi gue makasi banget broo lu dah nambahin ilmu gue. sekali lagi MATOR TENGKYU....
    Sukses selalu :D

    ReplyDelete
  4. wah nice nih brad,..
    perlu ane coba...
    thanks y buat tutorialnya... :D

    ReplyDelete
  5. Cerita Dewasa > hehe.. memang agak ribet gan.. :))

    odonk's > kalau mau dicoba silahkan saja sob :)

    ReplyDelete
  6. kalau saya belum mau pake males sih agak ribet

    ReplyDelete
  7. wah kapan2 bisa bicoba nih.. thanks sob tutorialnya

    ReplyDelete
  8. idebagusku > emg agak ribet sob.. ;)

    mixedfresh > silahkan kalau mau mencoba gan :D

    etam grecek > siiip ;)

    ReplyDelete
  9. nice info gan...
    langsung dicoba...

    thanks udah mampir n comment di sentrablog.blogspot.com

    ReplyDelete
  10. sentraBLOG > silahkan dicoba gan.. :)

    ReplyDelete
  11. cukup menarik isi dan blognya bro. kunjung balik yo.................

    ReplyDelete
  12. Oke, udah follow back sob, makasih atas kunjungannya.

    ReplyDelete
  13. Multi Info > thx bro.. ntar wa kunjung balik :)


    Internet Business > sama2 sob.. :D

    ReplyDelete
  14. Brooooo, gue ni mau tanya lagi hheheheheheh...
    sory lah broo gue terlalu banyak nanya... tapi kan ada pepatah "MALU BERTANYA SESAT DI JALAN" betul...betul...????
    Gue mau nanya gini : "Bagimana caranya (cara pasang + scriptnya) kalo blog kita ada pengunjung, trus pengunjung tersebut mau keluar(close) dari blog kita, secara otomatis blog kita ngeluarin pertanyaan (kata-kata apalah...) pada saat blog kita di tutup.
    Paham kan maksud gue broo...???
    mohon dibalas ke web gue ya.... hehehehe sory gue agak nyusahin lu..
    thanks... sukses slalu brooo....

    ReplyDelete
  15. kayanya ini keren yah master andi, mirip tampilan explore pada windows, ok deh sementara saya save dulu

    ReplyDelete
  16. wah ini keren nih kang,, bisa kaya tampilan explore di windows gitu,, jadi tuh foldernya keliatan jadi lebih rapi,, makasih kang

    ReplyDelete
  17. boleh nih, gak membuat loading berat kan???

    ReplyDelete
  18. Teman,, ini kan saya baru saja dapet Award Baclink, trus award tsb harus di bagikan lagi ke 10 blog ,,dan selamat aku memilih blog kamu.......

    maka dari itu saya mohon kamu mengecek blog saya, http://zainulcr7.blogspot.com/

    thank's!!!!

    ReplyDelete
  19. Cerita Dewasa > gkppa gan.. ntar gw jawab.. maaf baru merespon gw lagi cuti ini.. sabar ya :)

    Rizky2009 > silahkan di save dulu Riz.. ;)

    allie > iya.. sering2 mampir ya.. :D

    Leader Street > kagak bakal bikin loding berat gan.. :)

    Zainul Arifn > oke..ntar gw ambil.. thx bgt sob..mantab ;)

    ReplyDelete
  20. Have a nice article,Please smile me back.Thank you.

    ReplyDelete
  21. makasih yah buat postingannya... sangat berguna sekali buat blog sy....

    ReplyDelete
  22. MMO > oke bro.. ;)

    dna guitar made > siiip gan.. :X

    ReplyDelete
  23. siiiiiiip.... perlu di coba ini......

    ReplyDelete
  24. Yoga Kucing > silahkan gan dicoba.. tpi pahami dulu.. :)

    ReplyDelete
  25. Azumamaro Nakamura > betul gan.. agak ribet..jd harus dipahami dulu dg benar.. :)

    ReplyDelete
  26. KEREn aq coba dulu ya sob...

    ReplyDelete
  27. Roxx > silahkan dicoba.. pahami dulu ya gan.. :)

    ReplyDelete
  28. Salut, kk. Mau saya coba di blog saya juga ah

    ReplyDelete
  29. Tawon Republik > oke xchange link ya ..siip ;)

    ReplyDelete
  30. Mangstabh... ane izn save script'y, mw pelajari Boss.
    thanks tutor'y.. :-) slm knl.

    ReplyDelete
  31. Muhammad Chandra > :D

    suramadu > thx gan... mo belajar apa gan ?

    Akoey > silahkan saja gan :)

    ReplyDelete
  32. saya udah coba. .
    tapi ndak berhasil. .
    gak tau kenapa. .

    ReplyDelete
  33. Muhammad Chandra > gk berhasil ya... apa kamu masi bingung gan baca tutor d'tree-nya.. ?

    ReplyDelete
  34. candi bawah laut > kalo begitu silahkan dipelajari dulu gan.. :)

    ReplyDelete
  35. mau tanya nih, mas.. kalau ngasih komentar di blog lain, kemudian ngasih icon emonya gimanya ya? udah nyoba ngasih tanda misalnya kayak gambar emonya mas di atas itu tapi yang muncul kok tetap simbol tulisannya saja? terima kasih buat sharingnya

    ReplyDelete
  36. @newbie blog:

    yups.. emg benar sprt itu caranya ..tinggal ketikan kode sesuai gbr iconnyo..

    oww..kalo yg di blogku..emg sengaja gw remove script js icon komentarnya krn bentrok dg widget follower google-ku bikin error.. makanya gk tampil.. :D

    ReplyDelete
  37. NIce bos...
    Makasih buat infonya...

    ReplyDelete
  38. Sepertinya patut dicoba nich... :D

    ReplyDelete
  39. @Prasetyo:

    kalo gk dicoba gk bakal master2 utak-atik script html gan.. ;)

    ReplyDelete
  40. langsung coba n langsung berhasil mas...makasih ya?
    ini buktinya
    www.tawasutera.blogspot.com

    ReplyDelete
  41. MAKASI FREND.... SCRIPTX SY KOPI YAH,,,

    ReplyDelete
  42. mantep postingnya .mo tanya cara ganti icon foldernya gmana? thanks

    ReplyDelete
  43. Mantabf menunya .. CUCOK banget ama desain template yang aku pakai ..

    Makasih ya .. maju terus dah blog nya .. :D

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.

Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.