HOREEEEEEE!!!!!!
akhirnya saya bisa juga menguasai dtree walopun gak mahir amat lah. yang penting dah mulai hapal lah codingnya.. dan akhirnya setelah menimbang, merenung, berusaha sampai begadang dan terus terus terus terussss cobainnn. alhamdulillah suksesssssssss *jempol buat ane gan :p*
sumber : http://t4belajarblogger.blogspot.com/2009/12/cara-membuat-menu-dtree.html
keren walopun agak ribet. hehe ^___^
coba aja dulu....
cth preview dtree
Untuk memulai memasang menu tersebut, seperti biasa silahkan teman2 login dulu ke akun blogger. Lalu klik tata Letak >> Klik Edit HTML
1. Taruh script berikut di atas kode tag </head>
akhirnya saya bisa juga menguasai dtree walopun gak mahir amat lah. yang penting dah mulai hapal lah codingnya.. dan akhirnya setelah menimbang, merenung, berusaha sampai begadang dan terus terus terus terussss cobainnn. alhamdulillah suksesssssssss *jempol buat ane gan :p*
sumber : http://t4belajarblogger.blogspot.com/2009/12/cara-membuat-menu-dtree.html
keren walopun agak ribet. hehe ^___^
coba aja dulu....
cth preview dtree
Untuk memulai memasang menu tersebut, seperti biasa silahkan teman2 login dulu ke akun blogger. Lalu klik tata Letak >> Klik Edit HTML
1. Taruh script berikut di atas kode tag </head>
<link rel="StyleSheet" href="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/dtree.css" type="text/css" />
<script type="text/javascript" src="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/createdtree.js"></script>
2. Klik Simpan template.
Selanjutnya yang harus teman2 lakukan adalah menaruh kode HTML dTree ke dalam gadget sidebar blognya teman2. Caranya klik Tata Letak >> Tambah Gadget HTML dan taruh kode HTML berikut ini
Selanjutnya yang harus teman2 lakukan adalah menaruh kode HTML dTree ke dalam gadget sidebar blognya teman2. Caranya klik Tata Letak >> Tambah Gadget HTML dan taruh kode HTML berikut ini
<h2>Menu Blog Ini</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,'T4belajarblogger');
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>
<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,'T4belajarblogger');
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>
Saran saya agar teman2 memasukkan kode HTML di atas ke dalam gadget sidebar blog-nya teman2, mengingat agar teman2 lebih mudah dalam memahami bagian mana saja dan apanya saja yang harus diotak-atik untuk menampilkan suatu folder beserta file-nya sesuai dengan keinginannya teman2.
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 teman2 hanya memperhatikan nomor2 yg telah saya tandai dengan warna2 (untuk tulisan blablabla.HTML, kita bahas setelah masalah nomor)
Nah, apakah teman2 bertanya apa maksud dari nomor2 yang acak2 itu? Sebenarnya itu bukan nomor acak2an, akan tetapi nomor unik yang tersusun rapi.
Coba teman2 perhatikan beda nomor yg berada di sisi kanan dan kiri. Yang berada di sisi kiri sesuai dengan urutan:
1
2
3
dst
Sedangkan yang berada di sisi kanan gak beraturan.
Sebenarnya angka2 tersebut dapat teman2 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 teman2 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 teman2 bingung, teman2 bisa memperhatikan preview/gambar di atas. Coba dilihat tuh, setiap jajaran ketiga pasti file kan? Nah itu karena yg jajaran ketiga adalah bagian yg terakhir alias bagian yg sudah tidak memilki sub lagi.
Nah, untuk yg masalah pembuatan folder dan file selesai...
Selanjutnya masalah yg berada pada bagian kanan, yaitu tulisan "#.HTML" dan "Link anda.HTML"
Kenapa pada bagian yg saya tandai dengan warna merah saya beri tanda "#" bukannya menggunakan "Link anda"?
Itu semua karena terletak pada fungsi masing2. 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 benar2 mirip menu explore, memang mirip tapi hanya tampilannya serta sifatnya yg menyerupai menu dropdown, akan tetapi bedanya pasti teman2 tahu...Kalau di menu explore 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 (kalau gak percaya, maka bisa dicoba menu dTree di sidebar kanan blog ini). Bagaimana teman2 sudah ada bayangankan...?
Lalu untuk tulisan "link anda.HTML" itu bisa diganti dengan link anda. Dan pastikan kalau yang anda sisipi dengan link tersebut sudah merupakan sebuah link yg tidak bersub lagi, maksudnya bukan folder.
Alhamdulillah, akhirnya rampung juga. O ya, bagi teman2 yg mungkin merasa ada sedikit kesulitan...mungkin bisa menganalisanya sendiri melalui kode HTML berikut, yang merupakan kode dari menu dTree saya yang berada di samping kanan itu...
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 teman2 hanya memperhatikan nomor2 yg telah saya tandai dengan warna2 (untuk tulisan blablabla.HTML, kita bahas setelah masalah nomor)
Nah, apakah teman2 bertanya apa maksud dari nomor2 yang acak2 itu? Sebenarnya itu bukan nomor acak2an, akan tetapi nomor unik yang tersusun rapi.
Coba teman2 perhatikan beda nomor yg berada di sisi kanan dan kiri. Yang berada di sisi kiri sesuai dengan urutan:
1
2
3
dst
Sedangkan yang berada di sisi kanan gak beraturan.
Sebenarnya angka2 tersebut dapat teman2 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 teman2 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 teman2 bingung, teman2 bisa memperhatikan preview/gambar di atas. Coba dilihat tuh, setiap jajaran ketiga pasti file kan? Nah itu karena yg jajaran ketiga adalah bagian yg terakhir alias bagian yg sudah tidak memilki sub lagi.
Nah, untuk yg masalah pembuatan folder dan file selesai...
Selanjutnya masalah yg berada pada bagian kanan, yaitu tulisan "#.HTML" dan "Link anda.HTML"
Kenapa pada bagian yg saya tandai dengan warna merah saya beri tanda "#" bukannya menggunakan "Link anda"?
Itu semua karena terletak pada fungsi masing2. 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 benar2 mirip menu explore, memang mirip tapi hanya tampilannya serta sifatnya yg menyerupai menu dropdown, akan tetapi bedanya pasti teman2 tahu...Kalau di menu explore 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 (kalau gak percaya, maka bisa dicoba menu dTree di sidebar kanan blog ini). Bagaimana teman2 sudah ada bayangankan...?
Lalu untuk tulisan "link anda.HTML" itu bisa diganti dengan link anda. Dan pastikan kalau yang anda sisipi dengan link tersebut sudah merupakan sebuah link yg tidak bersub lagi, maksudnya bukan folder.
Alhamdulillah, akhirnya rampung juga. O ya, bagi teman2 yg mungkin merasa ada sedikit kesulitan...mungkin bisa menganalisanya sendiri melalui kode HTML berikut, yang merupakan kode dari menu dTree saya yang berada di samping kanan itu...
<h2>Menu Blog Ini</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,'T4belajarblogger');
d.add(1,0,'Available in 3 Languages','#.html');
d.add(2,1,'Indonesia','http://t4belajarblogger.blogspot.com/2009/11/bagaimana-kalau-seorang-seniman-lagi.html');
d.add(3,1,'English','http://t4belajarblogger.blogspot.com/2009/11/english-post.html');
d.add(4,1,'العربية','http://t4belajarblogger.blogspot.com/2009/12/arabic-blogger-tutorial.html');
d.add(5,0,'Sekilas Info','#.html');
d.add(6,5,'Update PageRank','http://t4belajarblogger.blogspot.com/2009/12/cara-cepat-update-pagerank-google.html');
d.add(7,5,'4 Gadget Terbaru','http://t4belajarblogger.blogspot.com/2009/12/empat-gadget-baru-dari-blogger-buster.html');
d.add(8,5,'Baca Yg Lainnya=>>','http://t4belajarblogger.blogspot.com/2009/12/sekilas-info.html');
d.add(9,0,'Link and Exchange','#.html');
d.add(10,9,'Link to This Blog','http://t4belajarblogger.blogspot.com/2009/11/link-to-this-blog.html');
d.add(11,9,'Tman dan Link Exchange','http://t4belajarblogger.blogspot.com/2009/12/teman-ngeblog-dan-link-exchange.html');
d.add(12,0,'Feed Blog','http://feeds.feedburner.com/%7Er/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan/%7E6/2');
d.add(13,0,'Blog Tools','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kumpulan Kode warna','http://t4belajarblogger.blogspot.com/2009/11/kumpulan-kode-warna.html');
d.add(15,13,'Blog Anda Lambat?','http://t4belajarblogger.blogspot.com/2009/11/tips-mempercepat-loading-blog.html');
d.add(16,0,'Profil Empunya Blog','http://www.blogger.com/profile/00282623483850735612');
document.write(d);
//-->
</script>
</div>
<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,'T4belajarblogger');
d.add(1,0,'Available in 3 Languages','#.html');
d.add(2,1,'Indonesia','http://t4belajarblogger.blogspot.com/2009/11/bagaimana-kalau-seorang-seniman-lagi.html');
d.add(3,1,'English','http://t4belajarblogger.blogspot.com/2009/11/english-post.html');
d.add(4,1,'العربية','http://t4belajarblogger.blogspot.com/2009/12/arabic-blogger-tutorial.html');
d.add(5,0,'Sekilas Info','#.html');
d.add(6,5,'Update PageRank','http://t4belajarblogger.blogspot.com/2009/12/cara-cepat-update-pagerank-google.html');
d.add(7,5,'4 Gadget Terbaru','http://t4belajarblogger.blogspot.com/2009/12/empat-gadget-baru-dari-blogger-buster.html');
d.add(8,5,'Baca Yg Lainnya=>>','http://t4belajarblogger.blogspot.com/2009/12/sekilas-info.html');
d.add(9,0,'Link and Exchange','#.html');
d.add(10,9,'Link to This Blog','http://t4belajarblogger.blogspot.com/2009/11/link-to-this-blog.html');
d.add(11,9,'Tman dan Link Exchange','http://t4belajarblogger.blogspot.com/2009/12/teman-ngeblog-dan-link-exchange.html');
d.add(12,0,'Feed Blog','http://feeds.feedburner.com/%7Er/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan/%7E6/2');
d.add(13,0,'Blog Tools','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kumpulan Kode warna','http://t4belajarblogger.blogspot.com/2009/11/kumpulan-kode-warna.html');
d.add(15,13,'Blog Anda Lambat?','http://t4belajarblogger.blogspot.com/2009/11/tips-mempercepat-loading-blog.html');
d.add(16,0,'Profil Empunya Blog','http://www.blogger.com/profile/00282623483850735612');
document.write(d);
//-->
</script>
</div>
