Membuat Archive Blog atau Menu Seperti dalam Bentuk Folder2 Windows Explorer [dTree]
Baca artikel ini dengan teliti (termasuk curhat penulisnya pent-),hal ini supaya pembahasan trik ini dapat bekerja dan dijalankan dengan baik.
Bismillah - hi,hello sobat blogger,seneng,gembira,sukacita (sama aja deng!),itulah sekelumit perasaan yang sekarang penulis sedang rasakan,kenapa? ada apa?
Ya,karena sore ini akhirnya penulis bisa meluangkan waktu buat kembali menyapa sobat blogger,sekaligus ada trik sederhana dalam menghias blog yang ingin kami publikasikan.
Sobat lihat demo-nya di SINI
Betul sob,untuk sekedar memperkaya konten pada blog sederhana ini,kami menambahkan satu artikel yang berkaitan dengan menghias blogroll,daftar link,archive / arsip blog,maupun menu navigasi blogger dalam bentuk folder-folder layaknya dtree folder pada windows explorer,ya seperti pada screenshot gambar diatas.
I.Apa saja yang kita butuhkan?
Pertama kita harus memiliki file dalam extention
Adalah destroydrop.com,yang telah menyediakan script dalam membuat menu dTree untuk blogger/blogspot ini.
Untuk file
iNGAT gan,jangan merubah kode apapun didalam script tersebut,pelanggaran hak cipta :D
TETAPI,untuk tahap belajar,saya telah menyediakan url script filenya yang sobat bisa copy di:
Ya,karena sore ini akhirnya penulis bisa meluangkan waktu buat kembali menyapa sobat blogger,sekaligus ada trik sederhana dalam menghias blog yang ingin kami publikasikan.
Sobat lihat demo-nya di SINI
Betul sob,untuk sekedar memperkaya konten pada blog sederhana ini,kami menambahkan satu artikel yang berkaitan dengan menghias blogroll,daftar link,archive / arsip blog,maupun menu navigasi blogger dalam bentuk folder-folder layaknya dtree folder pada windows explorer,ya seperti pada screenshot gambar diatas.
I.Apa saja yang kita butuhkan?
Pertama kita harus memiliki file dalam extention
*.js yang akan mengeksekusinya,dan file *.css dalam tampilannya.Adalah destroydrop.com,yang telah menyediakan script dalam membuat menu dTree untuk blogger/blogspot ini.
Untuk file
*.js dan *.css nya sobat bisa download di SINI.iNGAT gan,jangan merubah kode apapun didalam script tersebut,pelanggaran hak cipta :D
TETAPI,untuk tahap belajar,saya telah menyediakan url script filenya yang sobat bisa copy di:
Untuk file *.js nya di:http://membuatgempar.net23.net/dtree.js
Untuk file *.css nya di:http://membuatgempar.net23.net/dtree.css
II.Bagaimana kita menerapkan kedua script tersebut?
Mengapa kami menuliskan 'untuk tahap belajar'?,ya,karena jika sobat menginginkan sumber script yang akan mengeksekusi 'menu dtree' ini dari hosting miliki pribadi,akan memerlukan penjelasan yang panjang,oleh karenanya,untuk langkah awal sobat bisa gunakan scriptnya dari url diatas.
Tentu,script ini akan tetap bekerja jika file tersebut belum di remove oleh pemiliknya,untuk itu,jika sobat menginginkan script tersebut selalu dapat bekerja,tentu saja langkah yang sobat seharusnya lakukan adalah memang menggunakan hosting pribadi,TAPI sekali lagi,blog ini hanya untuk tahap belajar saja,jadi meskipun sobat tidak memiliki hosting pribadi selama file tersebut belum saya hapus,Insya Allah trik ini akan tetap berjalan baik (kcuali klo kena hack ya gan! hehe)
Ya,kedua script dari url diatas (file js dan css) inilah yang nantinya akan kita letakkan pada tag 'head' pada halaman blog yang kita miliki.
III.Bagaimana penjelasan detail nya dalam menerapkan trik ini?
Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak selanjutnya pilih Edit Html dan contreng 'Expand Widget Templates'.
Atau untuk tampilan baru blogger,sobat pilih Dashboard lalu pilih Templates kemudian klik Edit Html selanjutnya klik Proceed baru kemudian sobat contreng 'Expand Widget Templates',lihat gambar:
Mengapa kami menuliskan 'untuk tahap belajar'?,ya,karena jika sobat menginginkan sumber script yang akan mengeksekusi 'menu dtree' ini dari hosting miliki pribadi,akan memerlukan penjelasan yang panjang,oleh karenanya,untuk langkah awal sobat bisa gunakan scriptnya dari url diatas.
Tentu,script ini akan tetap bekerja jika file tersebut belum di remove oleh pemiliknya,untuk itu,jika sobat menginginkan script tersebut selalu dapat bekerja,tentu saja langkah yang sobat seharusnya lakukan adalah memang menggunakan hosting pribadi,TAPI sekali lagi,blog ini hanya untuk tahap belajar saja,jadi meskipun sobat tidak memiliki hosting pribadi selama file tersebut belum saya hapus,Insya Allah trik ini akan tetap berjalan baik (kcuali klo kena hack ya gan! hehe)
Ya,kedua script dari url diatas (file js dan css) inilah yang nantinya akan kita letakkan pada tag 'head' pada halaman blog yang kita miliki.
III.Bagaimana penjelasan detail nya dalam menerapkan trik ini?
Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak selanjutnya pilih Edit Html dan contreng 'Expand Widget Templates'.
Atau untuk tampilan baru blogger,sobat pilih Dashboard lalu pilih Templates kemudian klik Edit Html selanjutnya klik Proceed baru kemudian sobat contreng 'Expand Widget Templates',lihat gambar:
Templates
Edit Html
Proceed
Contreng Expand Widget Templates
Setelah itu,sobat cari kode berikut:
<head>Setelah sobat temukan,persis diBAWAHnya letakkan kedua script ini:
<link href='http://membuatgempar.net23.net/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://membuatgempar.net23.net/dtree.js' type='text/javascript'/>Lalu sobat simpan Templates.
Selanjutnya,sobat pergilah ke Dashboard lalu pilih Tata Letak selanjutnya pilih Add New Gadget.
Atau untuk tampilan baru blogger,sobat pilih Dashboard lalu pilih Layout kemudian klik Add a Gadget,lalu pilih HTML/Javascript dalam mode html,lihat gambar:
Layout / Tata Letak
Add A Gadget
Html/Javascript
Pilih mode HTML
Dan letakkan kode berikut,lalu simpan.
<div class="dtree">
<p><a href="javascript: d.openAll();"><img src="http://1.bp.blogspot.com/-RbQWnGW5bd8/UKJGKQD3f2I/AAAAAAAACmA/oLAHt0hhYUc/s200/pelajaran%2Bblog%2Bplus.gif" /><b>Buka</b></a> | <a href="javascript: d.closeAll();"><img src="http://2.bp.blogspot.com/-F6ylYYXiatg/UKJKASk86eI/AAAAAAAACnQ/XB9Ka_qHyO4/s200/pelajaran%2Bblog%2Bminus.gif" /><b>Tutup</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','#');
d.add(1,0,'Menu 1')
d.add(3,1,'sub menu 1','');
d.add(10,3,'edit','#');
d.add(20,3,'edit','#');
d.add(30,3,'edit','#');
d.add(40,3,'edit','#');
d.add(50,3,'edit','#');
d.add(60,3,'edit','#');
d.add(70,3,'edit','#');
d.add(80,3,'edit','#');
d.add(90,3,'edit','#');
d.add(100,3,'edit');
d.add(110,3,'edit','#');
d.add(120,3,'edit','#');
d.add(5,1,'sub menu 2');
d.add(10,5,'edit','#');
d.add(20,5,'edit','#');
d.add(30,5,'edit','#');
d.add(40,5,'edit','#');
d.add(50,5,'edit','#');
d.add(60,5,'edit','#');
d.add(70,5,'edit','#');
d.add(80,5,'edit','#');
d.add(90,5,'edit','#');
d.add(2,0,'menu 2','','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(10,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(20,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(30,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(40,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(50,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(60,2,'edit','#','','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(4,0,'menu 3','#','menu 3','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(6,0,'menu 4','#','menu 4','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(7,0,'menu 5','#','menu 5','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
d.add(8,0,'menu 6','#','menu 6','','http://destroydrop.com/javascripts/tree/v1/img/folder.gif');
document.write(d);
//-->
</script>
</div>
**Keterangan:
Untuk tanda '#',sobat ganti dengan url tujuan misal
Sedang untuk kode yang saya beri nama 'edit',sobat rubah sesuai dengan keinginan,yang nantinya akan terbaca dalam menu dTree yang sedang kita bahas ini.
Selamat men'gulik' dan berkreasi,sampai jumpa kembali ya sob :D
Untuk tanda '#',sobat ganti dengan url tujuan misal
http://.....Sedang untuk kode yang saya beri nama 'edit',sobat rubah sesuai dengan keinginan,yang nantinya akan terbaca dalam menu dTree yang sedang kita bahas ini.
Selamat men'gulik' dan berkreasi,sampai jumpa kembali ya sob :D
