shad0w-share

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

Clock Astronomy adalah Widget untuk Blog's atau Web anda silahkan pilih jenis widget Astronomy di bawah ini sesuai dengan keinginan Anda

. Dengan widget di bawah ini Blog atai Web Anda akan menjadi indah dan membuat pengunjung betah di blog kita, Insya Allah.

	Code	Code

Selamat mempunyai Clock Widget, mudah-mudahan dapat bermanfaat

Widget Music ini mungkin akan sangat bermanfaat sekali bagi anda yang gemar mendengarkan musik. Khususnya bagi para blogger mania yang pecinta musik. Mungkin orang - orang sudah terbiasa mendengarkan musik melalui radio, Hp, tape dan lain sebagainya. Sekarang bagaimana bila kita mendengarkan musik tersebut melalui blog kita sendiri, bisa jadi juga dengan adanya widget music pada blog anda ini. Akan membuat pengunjung blog anda menjadi betah karena merasa terhibur. Untuk anda yang berminat memasang widget music ini pada blog anda. Silahkan pilih kode di bawah ini sesuai dengan keinginan Anda.

Jika anda masih bingung cara memasang Widget ini silahkan klik disini

Jika Sobat suka Widget ini silahkan klik tombol Like dan Share dengan teman-teman Sobat di Facebook. Terimakasih.



Sidebar - copy this code if you want to put it on your sidebar:

<div style="text-align: center;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="130" height="105" src="https://4802375714254349729-a-1802744773732722657-s-sites.googlegroups.com/site/widgetkang/music/Ada Banda - Langit 7 bidadari.swf?__install_id=1324" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Corner left - copy this code if you want to put it on bottom left position:

<div style="position: fixed; bottom: 0px; left: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="130" height="105" src="https://4802375714254349729-a-1802744773732722657-s-sites.googlegroups.com/site/widgetkang/music/Ada Banda - Langit 7 bidadari.swf?__install_id=1324" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Corner right - copy this code if you want to put it on bottom right position:

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="130" height="105" src="https://4802375714254349729-a-1802744773732722657-s-sites.googlegroups.com/site/widgetkang/music/Ada Banda - Langit 7 bidadari.swf?__install_id=1324" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI