google-site-verification: google36588831a98f52ad.html

Thursday, November 15, 2012

Membuat Archive Blog atau Menu Seperti dalam Bentuk Folder2 Windows Explorer [dTree]

10:53 PM    No comments

cara mudah membuat daftar isi,link,blogroll,archive blog dalam bentuk folder-folder seperti pada windows explorer.
Baca artikel ini dengan teliti (termasuk curhat penulisnya pent-),hal ini supaya pembahasan trik ini dapat bekerja dan dijalankan dengan baik.
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.

Contoh fisik (jika sample tidak bekerja,sobat lihat demo-nya di SINI:


Buka | Tutup
Home


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:
trik mudah membuat menu dtree blogger blogspot-membuat label blog - archive atau arsip blog - blogroll - daftar isi - sitemap - daftar artikel - menu navigasi dalam bentuk fisik gambar folder.
Templates

merubah - mengganti - mengubah label - arsip blog menjadi gambar folder-folder.
Edit Html

cara mudah membuat daftar isi,link,blogroll,archive blog dalam bentuk dTree windows explorer.
Proceed

cara membuat label - kategori blogger blogspot menjadi menu dtree.
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:

cara buat menu bertingkat-tingkat berfolder.
Layout / Tata Letak

cara memasang menu dtree di blogger.
Add A Gadget

membuat - memasang daftar isi - sitemap blogger dalam bentuk menu dtree.
Html/Javascript

cara bentuk folder-folder seperti pada windows explorer untuk arsip - label -kategori - blogroll - link blogger.
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 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


Artikel Terkait:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)