Cara Membuat Menu dTree di Blog

3/11/2012 Tips Trik Blog Tutorial

Bismillah, selamat sore sobat blog semuanya. Pas tadi saya buka Blog saya ini ada pertanyaan dari Sabahat Blogger yaitu Alya Soraya yang menanyakan "gimana cara membuat widget buat menampilkan kategori berbentuk folder seperti yang ada pada direktori dmoz dsb". Sayapun terkejut yang di tanyakan Alya, Apa yang kaya gimana?? hehehe. Akhirnya saya memutuskan diri untuk keliling mencari solusi dan akhirnya Alhamdulillah saya menemukan yang mirip sekali dengan yang di tanyakan oleh Alya yaitu menampilkan kategori berbentuk folder, yang namanya Menu dTree. Mudah-mudahan jawaban ini atau postingan ini benar apa yang di tanyakan oleh Alya. Karena Menu dTree ini adalah menu yang menyerupai/mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog kita.

Untuk memulai memasang menu dTree ini, seperti biasa silahkan Sobat login dulu ke akun Blogger Sobat. Lalu klik tata Letak >> Klik Edit HTML

1. Letakkan kode di bawah ini di atas kode </head>

<link rel="StyleSheet" href="https://sites.google.com/site/efekefek/file-js/dtree.css" type="text/css" />
<script type="text/javascript" src="https://sites.google.com/site/efekefek/file-js/createdtree.js"></script>
2. Kemudian klik Simpan Template

Selanjutnya yang harus Sobat lakukan adalah menaruh kode HTML dTree ke dalam gadget sidebar Blog Sobat.

Caranya klik Tata Letak >> Tambah Gadget HTML dan taruh kode HTML berikut ini

<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,'Kang blog');
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>


Setelah di Copy Paste Simpan Gadget Sobat

Ok, kita mulai mengenal bagian mana saja yang harus kita atur untuk memulai membuat folder serta yang mana juga yang harus kita atur untuk membuat file saja. Untuk memulai mengenal bagian yang harus diatur dalam pembuatan folder dan file, agar parasobat hanya memperhatikan nomor-nomor yang telah saya tandai dengan warna-warna (untuk tulisan #.HTML, kita bahas setelah masalah nomor)

Nah, apakah parasobat bertanya apa maksud dari nomor2 yang acak2 itu? Sebenarnya itu bukan nomor acak2an, akan tetapi nomor unik yang tersusun rapi.


Coba parasobat perhatikan bedanya nomor yang berada di sisi kanan dan sisi kiri. Yang berada di sisi kiri sesuai dengan urutan:

1

2

3

dst


Sedangkan yang berada di sisi kanan gak beraturan.



Sebenarnya angka-angka tersebut dapat parasobat baca seperti berikut ini:


1
,o ===>> Artinya adalah Folder Utama

2
,1 ===>> Dan ini adalah Sub dari folder utama, oleh karena itu saya memberi warna angka satu dengan warna yang sama, yaitu merah. Kalau parasobat ingin menambahkan sub folder utama yang satu lagi di bawahnya, maka nanti teman2 tulis 3,1 atau d.add(3,1,'Sub Folder 02',' #.html'); (karena pada intinya folder tersebut masih mengikuti angka satu/folder utama)

3
,2 ===>> Artinya adalah sub dari sub folder utama, bagian yang ini bisa jadi folder dan juga bisa jadi file. Apa maksudnya? Maksudnya adalah, pada intinya semua file yg memilki sub akan menjadi folder, sedangkan yg tidak memilki sub maka akan menjadi file selamanya (selama belum ada sub yang menumpang kepadanya), kalau parasobat bingung, sobat bisa memperhatikan preview/gambar di atas. Coba dilihat tuh, setiap jajaran ketiga pasti file kan? Nah itu karena yang jajaran ketiga adalah bagian yg terakhir alias bagian yg sudah tidak memilki sub lagi.


OK, untuk yg masalah pembuatan folder dan file selesai...

Selanjutnya masalah yang berada pada bagian kanan, yaitu tulisan "
#.HTML" dan "Link anda.HTML"

Kenapa pada bagian yang saya tandai dengan warna merah saya beri tanda "
#" bukannya menggunakan "Link anda"?

Itu semua karena terletak pada fungsi masing-masing. Apa maksudnya...


Maksudnya yang telah saya tandai dengan "
#", artinya adalah folder utama atau folder sub utama. Dengan begitu para pengunjung langsung tahu kalau itu bukan file akan tetapi pengantar file alias folder. Ini semua merupakan pertimbangan saya pribadi, mungkin beberapa teman Blogger menganggap menu ini benar-benar mirip menu explorer, memang mirip tapi hanya tampilannya serta sifatnya yg menyerupai menu dropdown, akan tetapi bedanya pasti parasobat tahu. Kalau di menu explorer kita bisa membuka folder dengan cara mengklik tulisannya, misal: My Documents atau juga bisa dengan cara mengklik tanda plus-minus yang terletak pada samping kirinya. Akan tetapi untuk menu dropdown ini beda, kita hanya bisa mengklik tanda plus-minusnya saja untuk bisa menampilkan menu yg berada di dalamnya. Bagaimanaparasobat sudah ada bayangankan...?


Lalu untuk tulisan "
link anda.HTML" itu bisa diganti dengan link Sobat. Dan pastikan kalau yang Sobat sisipi dengan link tersebut sudah merupakan sebuah link yg tidak bersub lagi, maksudnya bukan folder

Semoga bermanfaat




KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

36 comments

wah ada caranya toh gan. ane CTRL D dulu ya gan. ane coba kapan kapan, kemarin nyariin soalnya ni. makasih ya...

Balas

pertama kali singah di blog kang fatur langsung disambut sama template yang keren :)

artikel diatas sangat menarik, wajib dicoba :)

kang fatur anak pandeglang takh?
salam kenal ya :)

Balas

@Hera lady Rose terimakasih Hera, OK salam kenal kembali, Ia aku anak Pandeglang

Balas

artikel yang sangat bermanfaat, gan ...ikut nyimak numpang belajar nih ... met kenal juga

Balas

@kangtokkomputer Terimakasih SOB, selamat Belajar aja hehe

Balas

Wah blognya luar biasa. Sebagai pemula, masih belum bisa menerapkan ilmu ini. Gimana cara berguru yang tepat agar langsung ngerti.....?

Balas

@ProLink Sering-sering aja datang ke sini, n jangan lupa baca2 Insya Allah Gampang mengerti SOB.

Balas

Wah terimakasih banyak nih kang buat widget menu dtree nya yang akan digunakan di halaman direktori blog Indonesia. Sebagai penghargaan kami sudah menempatkan blog Kang Fatur di blog roll direktori blog Indonesia. Salam sukses ya kang, kapan2 insya Allah kita kopi darat..

Balas

@Mirza Sharz Waah terimakasih PAK tas penghargaannya. Moga blog direktori Indonesia makin sukses aja, Maju Blogger Indonesia

Balas

waduh kang pusing

mampir ya di blog abdi

http://chiversavc.co.cc/

klo udah mampir jgn lupa kasih saran ya , , ,heee

Balas

sukses kang...
salam warunggunung www.aa-kanta.co.cc

Balas

wah... terima kasih infonya.. sangat bermanfaat..
sukses selalu yah :)

Balas

Kang fatur maturnuwun sanget atas tipsnya.....

Balas

waw nice bang :) like this
kunjungi juga ya bang saputralola.blogspot.com

Balas

mengunjungi blog yang bagus dan penuh dengan informasi yang menarik tentang cara membuat menu dtree di blog adalah merupakan kebahagiaan tersendiri.... teruslah berbagi informasi

Balas

Mengunjungi blog yang bagus dan penuh dengan informasi menarik tentang cara membuat menu dtree di blog adalah merupakan kebahagiaan tersendiri bagi kami... teruslah berbagi informasi

Balas

mantabzzz kang fatur hebat.,
tapi sayang saya kurang mengerti (ga bisa/keder).,

Balas

mantab sob,tp q msh bingung sob,soalnya q msh formula, blm faham,

Balas

thank buat tutorialnya...

http://teknotif.web.id/

Balas

kang saya mau buat blog kyak gini susah baget ajarin ya, yaseratlam8@yahoo.com kang email sya, kesulitan banget

Balas

gan cara bikin yang kayak di atas sendiri itu gmn? yang home,arsip,dsign tamplate, dll???

Balas

Nama saya Dewi Rumapea, saya dari Indonesia, saya dengan cepat ingin menggunakan media ini untuk memperingatkan seluruh Indonesia yang mencari pinjaman di internet sangat berhati-hati untuk tidak jatuh di tangan scammers dan fraudstars, ada banyak kredit palsu lender di sini di internet dan beberapa dari mereka adalah asli, saya pernah tertipu dan ditipu di sini online sebelum seorang teman yang mendapat pinjaman baru menghubungkan saya dengan seorang wanita bernama Ibu Glory yang merupakan CEO dari Glory Badan Kredit. Jadi saya diterapkan untuk jumlah pinjaman 500 juta dengan tingkat bunga rendah dari 2%, tidak ada jaminan, karena saya mengatakan kepadanya apa yang saya ingin menggunakan uang itu untuk membangun bisnis dan pinjaman saya disetujui dengan mudah tanpa stres dan semua persiapan yang dilakukan pada transfer kredit dan dalam waktu kurang dari 24 jam setelah pendaftaran pinjaman, itu mimpi datang melalui, jumlah pinjaman saya 500 juta dikreditkan di rekening bank saya hanya dalam selang waktu dua jam. Jadi saya ingin saran mereka sedang mencari untuk pinjaman di sini secara online harus berlaku untuk perusahaan asli, cepat hubungi sekarang email: di gloryloanfirm@mail.com. dia tidak tahu bahwa aku melakukan ini. Saya berdoa agar Tuhan memberkati dia untuk hal-hal baik yang telah dilakukan dalam hidup saya. Anda juga dapat menghubungi saya di dewiputeri9@gmail.com untuk info lebih lanjut.

Balas

itu nama folder bisa diganti kan kang?

Balas