Mengenal perintah IFRAME

Untuk tutorial kali ini saya ingin sedikit mengulas tentang salah satu fungsi kode HTML
yakni perintah <iframe>. Dengan perintah iframe kita dapat menampilkan isi
dari situs ataupun blog milik orang lain pada blog milik kita, namun walaupun demikian kita tidak
boleh sembarangan tentunya harus mendapatkan izin terlebih dahulu dari pemilik blog yang ingin di tampilkan.

Perintah dasar dari iframe adalah sebagai berikut :





<iframe> .... isi dari iframe .... </iframe>





Beberapa atribut yang sering di pasang dalam iframe adalah :



ALIGN="left/right" --> Untuk mengatur posisi iframe



WIDTH="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen



HEIGHT="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen



FRAMEBORDER="garis pembatas" --> Untuk memberi garis pembatas



SCROLLING="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada iframe



SRC="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada iframe



Agar lebih mudah untuk di fahami, maka saya akan memberikan dua contoh dari fungsi
perintah iframe. Misalkan alamat sumber yang ingin saya tampilkan adalah isi dari blog saya
yang lain yang beralamat di http://unique-r1-8.blogspot.com/, lebar yang ingin saya
gunakan adalah sebesar 500 pixel, dan tinggi sebesar 300 pixel.

IFRAME yang tidak mempunyai garis pembatas dan tidak mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :



<iframe align="left" frameborder="0" src="http://unique-r1-8.blogspot.com/"
width="500" height="300" scrolling="no">
</iframe>



hasilnya seperti ini :

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :



<iframe align="left" frameborder="10" src="http://unique-r1-8.blogspot.com/"
width="500" height="300" scrolling="auto">
</iframe>



hasilnya seperti ini :



























Bagaimana sobat, tentunya dengan iframe kita dapat mengintip isi dari blog milik orang lain pada blog milik kita. Akan tetapi
jangan lupa untuk meminta ijin terlebih dahulu kepada pemiliknya apabila tidak ingin kena damprat sang pemilik blog.



selamat bereksperimen !

Horizontal Green menu

Jika kemarin-kemarin saya selalu menawarkan menu navigasi yang berupa
navigasi yang berbentuk horizontal yaitu menu navigasi yang cocok
di pasang di sekitar header, nah kali ini saya coba tawarkan yang lain
yakni menu navigasi yang berbentuk vertikal. Navigasi ini adalah untuk di
simpan pada bagian sidebar blog agar link-link yang tercipta dan di tempatkan
pada navigasi tersebut tampak lebih cantik dan menarik untuk di lihat.

Untuk melihat contoh dari menu yang saya buat, silahkan klik pada tombol
di bawah ini :








Jika sobat tertarik, silahkan ikuti tutorial pemasangannya di sini!



Selamat mempunyai sidebar yang lebih cantik!

UniQue Template R 1.5

Ada yang mau melihat koleksi template dari uniQue template? ada yang baru nih, namanya
UniQue Template R 1.5. Sebenarnya template ini adalah sama dengan template terdahulu
yaitu UniQue Template R 1.4 akan tetapi ada perbedaan yaitu pada posisi sidebar. Jika
pada uniQue template r 1.4 sidebar terletak di sebelah kanan, sedangkan pada UniQue Template R 1.5
sidebar terletak pada sisi sebelah kiri.

Untuk melihat contoh dari template ini, silahkan klik pada banner di bawah ini :













Lain kepala tentu lain juga keinginan, ada yang suka kiri ada juga yang suka kanan. Template ini
saya buat khusus bagi sobat yang menyukai sidebar berada pada sebelah kiri. Untuk mendownload
template ini saya tegaskan Free alias Gratis, cuma jika sobat memakai template ini
ada syaratnya yaitu tidak boleh menghapus atau mengubah Link yang berada paling bawah.



Bagi yang berminat? silahkan download templatenya di sini !



Selamat berdownload ria !

Google Bookmark

Bagi sobat yang sudah terbiasa berinternet ria, tentu saja tidak akan asing dengan yang namanya
menu Favourite pada internet explorer ataupun Bookmark pada firefox. Dengan
menggunakan fasilitas ini kita dapat memasukan beberapa alamat website ataupun blog yang di rasa
disukai dan pada waktu yang akan datang ingin di kunjungi kembali. Bookmark memang sangat membantu
kita untuk memudahkan mengunjungi situs-situs ataupun blog yang di sukai, namun demikian ada suatu
kelemahan yaitu menu bookmark yang ada pada komputer tersebut bersifat Offline. Lebih sfesifik
dengan kata Offline yang saya maksud adalah bookmark tersebut hanya berlaku bagi komputer tersebut saja.

Bagi sobat yang sering gonta-ganti komputer dalam hal berinternet ria akan menglami kesulitan
dalam hal bookmark, katakan saja kita sering menggunakan warnet. Di warnet tentunya kita tidak bisa mengklaim
akan selalu memakai komputer yang sama, bagaimana solusi terbaik dalam mengatasi hal ini? untuk mengatasinya
sobat bisa menggunakan Online bookmark, dengan online bookmark sobat akan leluasa membubuhkan alamat-alamat
situs ataupun blog yang sobat sukai karena bisa di buka pada komputer manapun ataupun tempat yang berlainan yang
penting syarat utamanya tentu komputer tersebut harus online dengan internet.



Cara untuk melakukan online bookmark, kita bisa menggunakan berbagai situs penyedia online bookmark. Beberapa
situs online bookmark terkenal di antaranya adalah google bookmark,
del.icio.us, digg.com, dan masih banyak
lagi. Jika saya membicarakan semuanya, tentu harus banyak ruang serta waktu yang harus saya sediakan (caile rada puitis dikit), untuk itu
saya hanya akan membahas satu saja yaitu online bookmark yang menggunakan google bookmark.
Hal pertama yang harus di lakukan adalah tentunya sobat harus mempunyai account di google. Belum punya account google? sok atuh
bikin dulu di sini!
bagi yang sudah mempunyai account google bisa langsung menyimak bagaimana cara Online bookmark di google bookmark, silahkan ikuti langkah-langkah berikut ini !

1. Silah kunjungi google bookmark
   atau cukup klik di sini!





2. Silahkan login dengan account google milik sobat





3. Klik tulisan Add Bookmark





4. Isi form yang tersedia







• Name --> isi dengan nama yang di inginkan, misal Blog tutorial




• Location (URL) --> isi dengan alamat situs ataupun blog yang ingin di cantumkan, misal sobat suka dengan
  blog ini, maka tulis alamatnya http://kolom-tutorial.blogspot.com




• Label --> isi dengan label (kategori) yang di inginkan, misal : blog




• Notes --> isi dengan catatan yang diinginkan untuk lebih mempermudah mengingatkan
  sobat akan blog ini, misal : ini dia nih blog favourite ane.








5. Akhiri langkah di atas dengan mengklik tombol Add bookmark





6. Selesai.

Dengan sobat melakukan online bookmark, maka sobat tidak usah merasa khawatir akan kehilangan
catatan mengenai alamat situs ataupun blog yang di rasa menjadi favourite sobat karena tentu saja
bisa di buka ditempat manapun, lain kota, lain negara? tidak masalah, online saja di internet
lalu masuk ke google bookmark, kemudian silahkan kunjungi situs yang ingin sobat kunjungi.

Balik Lagi Uy...!!!

Ngeblog lagi euy.....!!!! yups... setelah satu minggu lebih bermudik ria
ke kampung halaman tercinta Bandungku...kotaku, akhirnya kembali harus menjalani
hari-hari berat di kota yang penuh gemerlap jakarta. Belum mau berbicara seputar
tutorial, soalnya kepala saya masih terasa pusiiiiing.... masih nyut...nyut.. rasanya.
Yoi.. sobat, saya hanya mau " say hai " saja & mau ngucapin " mohon maaf lahir dan bathin ".

Dah dulu ah, mungkin besok-besok saya akan menulis tentang tutorial yang lainnya. Bagi yang belum saya
linkback, sabar ya... nanti saya linkback... sekarang mau istirahat dulu nih
masih cape banget .

Horizontal Flip menu

Untuk menambah kecantikan blog sobat, ada satu lagi yang saya tawarkan secara gratis
yaitu menu navigasi dengan menggunakan CSS. Navigasi ini saya beri nama Horizontal Flip menu.
Pada menu-menu lain kebanyakan apabila di sorot akan berubah warna, yang ini berbeda. Di sinilah
uniknya, menu navigasi ini apabila di sorot oleh mouse, tulisan yang ada di dalamnya seakan bergerak
alias gelayutan (apaan tuh ).
Penasan seperti apa bentuk dari menu navigasi ini, silahkan klik pada gambar di bawah ini :

Bagaimana, cukup lucu bukan? bagi yang berminat memasang menu navigasi ini, silahkan baca
instruksi pemasanganya di sini !



Selamat bergelayut ria !

Google page Creator

Beberapa bulan yang lalu, saya pernah memposting bagaimana cara mengupload
sebuah gambar atau banner pada hosting tempat menyimpan gambar yaitu pada
situs http://www.photobutcket.com,
atau pernah juga saya memposting bagaimana cara membuat link untuk download suatu
data file ataupun program di internet dengan menggunakan jasa layanan situs http://www.snapdrive.net.
Dari kedua nya, saya terangkan dengan menggunakan
layanan situs yang berbeda. Jika muncul keinginan ataupun pertanyaan apakah ada layanan
di internet yang menyediakan kedua layanan sekaligus yakni untuk menyimpan gambar atau untuk menyimpan data-data agar
bisa di download oleh para pengunjung ? Jawabannya adalah ada bahkan banyak.

Sekedar informasi
ringan namun mudah-mudahan dapat bermanfat bagi sobat semua, salah satu penyedia layanan tersebut
yang sudah terkenal adalah Google Page Creator.



Apa yang disediakan oleh Google Page Creator?
layanan google page creator terbilang cukup lengkap yaitu mulai dari membuat halaman website secara instant sampai media penyimpanan data
yang cukup variatif yaitu bisa untuk menyimpan data gambar semisal gif,jpg,png ataupun untuk menyimpan data script semisal CSS stylesheet, javascript dll.
Tidak tanggung-tanggung, kapasitas yang di sediakan untuk satu account google cukup lumayan besar yaitu 1000 MB, sebuah angka yang cukup menggiurkan tentunya
karena semuanya di berikan secara cuma-cuma alias gratis tis..tiss.



Syarat utama yang harus di penuhi tidaklah sulit, sobat hanya di wajibkan mempunyai account di google, setelah itu tinggal login dan siap untuk menyimpan berbagai file milik sobat.
Bagi yang belum mempunyai account google, silahkan daftar dulu di sini !
Sedikit bingung tentang bagaimana cara mengupload file-file milik sobat di google page creator? silahkan ikuti langkah-langkah berikut ini :

1. Silahkan login terlebih dahulu di google page creator atau klik saja di sini!





2. Klik tulisan Upload yang berada di sebelah kanan monitor





3. Klik tombol Browse...





4. Pilih file di komputer sobat yang mau di upload





5. Setelah ada file yang di pilih, tunggu beberapa saat sampai proses upload selesai





6. Klik kanan pada link yang baru di terbentuk, kemudian setelah muncul option pilihan, klik copy shortcut





7. Paste pada notepad. Langkah ini berguna untuk mengambil alamat file tersebut





8. Selesai.

Setelah mempunyai alamat yang di copy pada notepad tadi, sobat hanya bertugas untuk memanggilnya, misalkan saya sudah
mempunyai file gambar yang sudah di upload ke google page creator dan mempunyai alamat gambar sebagai berikut:





http://24rohman.googlepages.com/Water-06.jpg





Sobat hanya perlu memanggilnya dengan memakai kode :




<img src="file gambarnya di sini" alt="judul gambar">




Jadi kode yang ditulis menjadi seperti ini :




<img src="http://24rohman.googlepages.com/Water-06.jpg" alt="water background">




Hasilnya akan seperti ini :









Apabila gambar tersebut ingin di jadikan sebagai link, sobat hanya tinggal menambahkan kode link saja,
contoh gambar terbut ingin saya buatkan link ke http://css-lybrary.blogspot.com, kodenya akan seperti ini :





<a href="http://css-lybrary.blogspot.com" target="_blank">

<img src="http://24rohman.googlepages.com/Water-06.jpg" alt="water background">

</a>




Hasilnya akan seperti ini, silahkan klik pada gambar di bawah untuk membuktikannya :













Jika sobat mempunyai JavaScript yang ingin di pasang pada kode template sobat, akan tetapi akan sangat
mengganggu apabila di pasang langsung karena datanya sampai beberapa halaman, sobat bisa melakukan efisiensi
dengan menguploadnya di google page creator, misalkan saya sudah menguload suatu javascript dan mempunyai lamat sebagai berikut ;





http://amen24.googlepages.com/dtreemenu.js





Untuk memakai javascript yang sudah di upload, sobat hanya perlu menambahkan kode berikut :




<script type='text/javascript' src="alamat javascript disini">


</script>




Jadi kode yang di pasang akan seperti ini :




<script type='text/javascript' src="http://amen24.googlepages.com/dtreemenu.js">


</script>





Tak hanya javascript yang bisa di upload, stylesheet CSS pun bisa juga, misalkan saya mempunyai alamat kode CSS seperti ini:





http://amen24.googlepages.com/dtree.css





Untuk memakainya, sobat hanya tinggal memanggilnya dengan kode berikut :




<link rel="StyleSheet" href="alamat CSS nya disini" />




Jadi kodenya akan seperti ini :




<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" />







Dengan adanya efisiensi tersebut maka data template sobat yang tadinya berjubel kode-kde dalam jumlah banyak, maka
dengan cara seperti itu akan menjadi satu atau dua baris saja, sehingga akan membuat kode template sobat menjadi rapi.



Jika sobat mempunyai file agar bisa di download oleh para pengunjung, sebaiknya sebelum diupload di kompress terlebih dahulu
dengan memakai program winzip, selain datanya akan semakin kecil, manfaat lainnya yaitu pengunjung akan bisa langsung
mendowload dengan memakai Klik kiri tanpa harus menggunakan Klik kanan lalu save target. Misalkan saya sudah
mengupload file template dan mempunyai alamat sebagai berikut :





http://amen24.googlepages.com/UniQueR1.4.zip





Agar file tersebut bisa di download oleh pengunjung, sobat hanya tinggal membuatkan link biasa saja, contoh kodenya
seperti ini :




<a href="http://amen24.googlepages.com/UniQueR1.4.zip"><b>Download</b></a>




Hasilnya akan seperti ini, silahkan klik untuk membuktikannya :



Download





Untuk pembahasan tentang google page creator
saya rasa sukup, selamat ber upload ria !

UniQue template R 1.4

UniQue template R 1.4 adalah generasi ke empat dari template-template
terdahulu, mempunyai tiga kolom yaitu kolom posting, dan yang dua adalah
sebagai sidebar atau kolom samping. Template ini saya buat bagi sobat yang
menyukai warna terang atau dalam hal ini adalah berwarna putih, sentuhan
warna abu-abu dan warna coklat merupakan pilihan yang boleh untuk di perhitungkan.

Ada yang tertarik? silahkan lihat dulu screen shoot nya, klik pada banner di bawah ini :

















Bagi yang berminat silahkan download, gratis ko. Satu permintaan dari pembuat kepada sobat yaitu
harap untuk tidak menghapus link yang ke http://template-unik.blogspot.com. Menurut saya bukan suatu permintaan
yang berlebihan, tidak ada maksud apa-apa kecuali agar blog tersebut lebih mendapat perhatian dari search engine
apabila banyak yang pasang link ke blog tersebut, selain itu link tersebut saya buat dalam ukuran kecil sehingga tidak akan mengganggu pemandangan. Yupsss.. paling tidak merupakan wujud penghargaan kepada sang pembuat template
karena telah meluangkan waktu, serta mengeluarkan biaya untuk berinternet ria. Untuk navigasi yang ada di bawah header,
silahkan di ganti dengan link milik sobat, karena yang itu memang saya buat untuk sobat.



Untuk mendownload template ini, silahkan sobat klik di sini !



Selamat berdowload ria !

Mikrotik e-books pdf

Membuat Router Menggunakan Mikrotik RouterOS
MikroTik RouterOS™ adalah sistem operasi dan yang dapat digunakan untuk menjadikan ... Hal ini bertujuan agar mikrotik bisa di remote dan dengan winbox dan ...

Setup Mikrotik sebagai Gateway server
Langkah-langkah berikut adalah dasar-dasar setup mikrotik yang dikonfigurasikan untuk ... Sampai langkah ini kita sudah bisa masuk pada mesin Mikrotik. ...

Membuat menu D'tree

Beberapa waktu yang lampau, saya pernah menulis artikel mengenai cara
membuat menu yang menyerupai menu yang ada pada Windows explorer
yaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporan
bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini
adalah sebagai referensi agar kejadian tersebut tidak terulang kembali.





Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain,
sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnya
tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu.
Misalkan seperti ini, apabila saya menyuruh memasang script seperti ini :

pasanglah kode ini di atas kode </head> :




<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />





kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan
pada account milik saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila
saya iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil sobat
akan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya :
copy kode sumber script ini lalu paste pada address bar browser internet sobat :





http://amen24.googlepages.com/Readmore.js





Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java. Langkah selanjutnya
adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu simpan di komputer sobat.
Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode tersebut pada hosting yang biasa sobat gunakan, misalkan
saya sering menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkan
script ini mempunyai alamat :





http://juned.googlepages.com/Readmore.js





Nah, langkah terakhir adalah mengganti sumber script yang saya punyai dengan milik sobat, misal kode di atas seperti ini :




<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />









Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :




<script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />





Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi script tersebut.




Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat untuk mencuri
kode milik orang lain.





Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada pembahasan yang tempo hari
agak menyulitkan pembaca, sehingga kali ini saya akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.




Untuk membuat menu dtree, sobat bisa mendownload pada situs resminya yaitu di http://www.destroydrop.com,
silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain sobat harus
memahaminya, oleh karena alasan tadi maka saya akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami.




Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai berikut :

Kode ini di simpan di atas kode </head> :




<link rel="StyleSheet" href="dtree.css" type="text/css" />

<script type="text/javascript" src="dtree.js"></script>




Kode di bawah ini di simpan di bagian sidebar :

<h2>Example</h2>

<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">

<!--

d = new dTree('d');

d.add(0,-1,'My example tree');

d.add(1,0,'Node 1','example01.html');

d.add(2,0,'Node 2','example01.html');

d.add(3,1,'Node 1.1','example01.html');

d.add(4,0,'Node 3','example01.html');

d.add(5,3,'Node 1.1.1','example01.html');

d.add(6,5,'Node 1.1.1.1','example01.html');

d.add(7,0,'Node 4','example01.html');

d.add(8,1,'Node 1.2','example01.html');

d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');

d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');

d.add(11,9,'Mom\'s birthday','example01.html');

d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

document.write(d);

//-->

</script>

</div>

Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin
tidak usah saya terangkanpun akan memahami bagaimana untuk membuat menu dtree
dari kode diatas sehingga link-link milik sobat dapat di pasang pada kode-kode
di atas.



Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka
saya akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah
membuat sebuah menu dtree buatan saya yang telah saya sertakan link-link di dalamnya :
source code dari menu yang saya buat seperti ini :

Kode ini di simpan di atas kode </head> :





<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />

<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>




Kode di bawah ini di simpan di bagian sidebar :

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<script type="text/javascript">

<!--

d = new dTree('d');

d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');





d.add(1,0,'Free template & navigation')



d.add(3,1,'free template','');

d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');

d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');

d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');

d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');

d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');

d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');

d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');

d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');

d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');

d.add(100,3,'template klasik');

d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');

d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');



d.add(5,1,'Free css menu navigation');

d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');

d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');

d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');

d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');

d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');

d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');

d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');

d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');

d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');



d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');

d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');



d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');

d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');

d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');

d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');





document.write(d);

//-->

</script>

</div>

Untuk melihat hasilnya, silahkan klik dulu di sini !



Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :



Jika sobat perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali, antara lain :



d.add(1,0

d.add(2,0

d.add(4,0

d.add(6,0

d.add(7,0



Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu dtree, jadi jika sobat menginginkan
menu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda kemudian di belakang koma harus di susul dengan
angka nol.



d.add(3,1

d.add(5,1

Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang pertama. Akan tetapi angka di depan angka 1 (satu)
adalah angka penentu bahwa menu ini akan menjadi cabang dari kode --> d.add(1,0




d.add(10,5

d.add(20,5

d.add(30,5

d.add(40,5

d.add(50,5

d.add(60,5



Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu --> d.add(5,1

begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu --> d.add(3,1




Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''), formasinya misal seperti ini :




d.add(10,3,'','','','','');



Jika di jabarkan denga isi menu, seperti ini :




d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');






isi ke 1 = adalah tulisan yang akan muncul terlihat langsung

isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1

isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan tetapi
ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.

isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image

isi ke 5 = adalah untuk alamat image icon yang mau di munculkan

isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5




Misal :




d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');

Blogroll = tulisan yang kan muncul pada menu induk

http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau dunculkan di samping tulisan Blogroll

http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau dunculkan ketika tulisan Blogroll di klik (akan tetapi dalam hal ini alamatnya sama, maka gambar icon seolah
tidak mengalami perubahan)






dan masih banyak ciri-ciri lainnya yang dapat memudahkan sobat untuk mengnalinya.




Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending langsung
bikin menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan lupa untuk membuat Backup data dari template sobat:

Untuk template Klasik

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode HTML yang ada, lalu save untuk back up





5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :






<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />

<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>







6. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):









<div class="dtree">


<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>


<script type="text/javascript">

<!--


d = new dTree('d');


d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');





d.add(1,0,'Free template & navigation')



d.add(3,1,'free template','');

d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');

d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');

d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');

d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');

d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');

d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');

d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');

d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');

d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');

d.add(100,3,'template klasik');

d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');

d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');



d.add(5,1,'Free css menu navigation');

d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');

d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');

d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');

d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');

d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');

d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');

d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');

d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');

d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');



d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');

d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');



d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');

d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');

d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');

d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');





document.write(d);


//-->

</script>


</div>









7. Klik tombol Simpan Perubahan Template





8. Selesai.

Untuk Template Baru

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman





5. Copy paste kode berikut di atas kode </head>







<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />

<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>







6. Klik tombol Simpan Template





7. Klik menu Elemen Halaman yang ada di sebelah atas monitor





8. Klik tulisan Tambahkan sebuah Elemen Halaman





9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript





10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)









<div class="dtree">


<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>


<script type="text/javascript">

<!--


d = new dTree('d');


d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');





d.add(1,0,'Free template & navigation')



d.add(3,1,'free template','');

d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');

d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');

d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');

d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');

d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');

d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');

d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');

d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');

d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');

d.add(100,3,'template klasik');

d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');

d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');



d.add(5,1,'Free css menu navigation');

d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');

d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');

d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');

d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');

d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');

d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');

d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');

d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');

d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');



d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');

d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');



d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');

d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');

d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');

d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');





document.write(d);


//-->

</script>


</div>









11. Klik tombol Simpan





12. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag & drop)





13. Klik tombol Simpan yang berada di sebelah atas





14. Selesai. Silahkan lihat hasilnya

Huuuuuhhh..... cape uy nulis tutorial ini, dua malem baru deh kelar..... tapi alhamdulillah, akhirnya bisa juga di posting.



Selamat mencoba !