Semakin lama, HP saya sepertinya dah banyak error nih. Dulu penerima sinyalnya yang error. Masih tetap ada sinyal 3G walaupun saya bawa didaerah yang tidak tercoverage 3G. Akhirnya jalan satu - satunya adalah upgrade. Berhasil!!! Sekarang mulai error lagi. Ditambah lagi sinyalnya penuh terus. Pasti orang akan senang kalau sinyalnya penuh terus, tetapi kalau di daerah tanpa sinyal tetap ada sinyal di HP bagaimana? Aneh kan? Tanda 3G juga gak hilang - hilang tuh. Karena males upgrade firmware, ya tetap pake saja sebagai modem. Putus - putus gak jelas deh akhirnya nih koneksi. Tetapi tetap setia berbagi pengalaman. Beginilah sepenggal cerita dari saya, tetapi posting kali ini tidak menceritakan tentang itu.......!!
Seperti judul postingnya, saya akan berbagi dengan para sahabat blogger tentang cara membuat DTree Menu. Apa itu DTree Menu? Tidak akan saya jelaskan karena bisa kalian lihat sendiri di pojok kiri atas blog ini. Di daftar artikel, seperti model explorer windows kan? Nah itulah DTree menu. Maaf bila salah dalam pemberian nama ya. Yang penting semua mengerti.
Bagi yang ingin membuatnya, berikut ini adalah langkah - langkahnya (pakai blogger bahasa indonesia):
- Buka blog kamu (khusus pengguna blogger)
- Log in dengan email dan password kamu seperti biasa
- Buka tata letak kemudian edit HTML
- Cari kode berikut :
]]></b:skin> - Bila kesulitan, bisa kamu cari dengan menekan Ctrl + F dan ketikkan code yang ingin kamu cari.
- Letakkan kode dibawah ini diatas kode tersebut :
.dtree {
font-family: Arial, Sans-serif;
font-size: 12px;
color: #fff;
white-space: nowrap;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #FFFFFF;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #FFFFFF;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow:;
} - Kode dibawah ini kamu letakkan di bawah kode ]]></b:skin>
<script src='http://kacrut82.googlepages.com/dtree.js' type='text/javascript'/> - Setelah itu simpan template kamu
Bagian pertama telah selesai, lanjut ke bagian selanjutnya.
- Setelah template tersimpan, buka Elemen Halaman dan tambah gadget (Add Widget)
- Tambah HTML/Javascript
- Isi widget dengan code berikut :
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div> - Ganti "Node" dengan judul posting kamu dan "Link .html" dengan link dari judul posting tersebut.
- Code pada wigdet diatas akan menampilkan beberapa bagian dari menu.
- Bila kurang jelas, bisa kamu lihat contoh code dari blog ini (menghasilkan 1 bagian dari 1 menu). Berikut ini adalah codenya :
<h2 class="title"><span style="color: rgb(51, 255, 51);">Daftar Artikel</span></h2>
<div class="dtree">
<div style="overflow: auto; border: 1px solid rgb(128, 128, 128); color: rgb(255, 255, 0); padding: 5px 5px 5px 5px;">
<script type="text/javascript">
<!--
d = new dTree('d');
/*---------------------------------------------------*/
d.add(0,-1,'Rattlenetwork');
d.add(1,0,'Bisnis Online Gratis');
d.add(2,1,'Penawaran Bonus (Cashback For Referral)','http://rattlenetwork.blogspot.com/2009/07/penawaran-bonus-cashback-for-referral.html');
d.add(3,1,'Apa Itu Paid To Click','http://rattlenetwork.blogspot.com/2009/06/apa-itu-ptc-paid-to-click.html');
/*---------------------------------------------------*/
d.add(100,0,'Free Software');
d.add(101,100,'Software Bagus Nih!','http://rattlenetwork.blogspot.com/2009/06/software-software-bagus-nih.html');
d.add(102,100,'Camfrog Chat Paling Asik','http://rattlenetwork.blogspot.com/2009/06/camfrog-chat-paling-asik.html');
d.add(103,100,'Uninstall Program Sampai Bersih Dengan Your Uninstaller Pro','http://rattlenetwork.blogspot.com/2009/08/uninstall-program-sampai-bersih-dengan.html');
/*---------------------------------------------------*/
d.add(300,0,'Hack Dan Tool');
d.add(301,300,'Pengertian Hacker','http://rattlenetwork.blogspot.com/2009/08/pengertian-hacker.html');
d.add(302,300,'Cara Hacker Menyembunyikan Diri','http://rattlenetwork.blogspot.com/2009/09/cara-hacker-menyembunyikan-diri.html');
...............dst
/*---------------------------------------------------*/
document.write(d);
//-->
</script></div></div> - Ingat, angka setelah d.add adalah tidak boleh sama dengan sebelumnya. Seperti menu Hack dan Tool (contoh diatas), angka 300, 301, 302,..dst jangan sampai ada yang sama. Baik dari menu Hack dan Tool atau yang lainnya. Sedangkan angka 300 harus sama pada menu Hack dan Tool, tetapi tidak boleh sama pada menu yang lain seperti Free Software dan Bisnis Online Gratis (menu yang lain harus mempunyai angka unik yang lain, lihat contoh).
- Tanda /*-----------------*/cuma sebagai tanda pembatas saja, tidak ada masalah jika tidak disertakan.
- Simpan Widget kamu dan lihat hasilnya
Selesai sudah perjalanan kita hari ini dan akan melanjutkan perjalanan untuk esok hari. Salam buat semua sahabat. Tetaplah berkreasi dan berbagilah dengan semua sahabat. Selamat berkreasi....!!!
0 komentar:
Posting Komentar