<$BlogItemTitle$>
•
Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
•
Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :
•
Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
Read More......
•
klik tombol bertuliskan Save Template
Cara Posting Artikel •
Klik menu Posting
•
Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :
•
Tulisankan artikel yang ingin tampak pada blog sebelum kode :
•
Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
•
Klik tombol bertuliskan PUBLISH POST
•
Klik tulisan Open New Window untuk melihat hasil dari postingan kita, kemudian lihat apakah hasilnya sukses atau tidak.
Membuat Menu Dropdown Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi? Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini: - Archives -
Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah di klik, akan muncul nama bulan arsip-arsip kita. Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru. Untuk template klasik langkahnya yaitu : 1. Login ke blogger.com dg id Kita 2. Klik Template 3. Di bagian sidebar blog Kita bagian archives, ada kode html sbb:
&
4. Nah, ganti kode di atas dg kode html di bawah ini: <select name="archivemenu" onchange="document.location.href=this.options[this.selectedIndex].value ;">
5. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH. 6. Selesai.
Untuk kita yang memakai template baru, langkahnya lebih mudah yaitu : 1. login dulu, tentunya dengan id kita 2. klik LAYOUT 3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive 4. Klik Edit pada kotak Blog Archive tadi 5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek 6. Klik Save Changes
Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, kita ambil contoh untuk menu Dropdown milik kita pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan kita copy kode HTML di bawah :
Sebagai contoh untuk menu Dropdown milik kita : Hasilnya akan seperti ini :
.
Membuat Link (1) Dalam dunia blog, tentu kita tidak asing lagi dengan yang namanya link. Apabila kita seorang blogger, tentu saja membuat link adalah sebuah keharusan. Berbeda dengan website pada umumnya, di jagat per blog-an ada yang namanya link exchange atau bertukar link dengan blog lain, jadi kalau kita tidak bisa membuat link, ini dapat berakibat kita akan di asingkan alias di cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik membuat link ini, kita akan mengulasnya dalam beberapa sub bagian yakni : Link pada postingan Jika kita membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link, misalkan artikel tersebut bercerita tentang bisnis yang kita ikuti pada sebuah website di internet, lalu kita ingin mengajak para pembaca artikel tersebut untuk mengunjungi website yang kita ceritakan. Misalkan dalam artikel tersebut ada kata –kata seperti Jika kita tertarik silahkan kita klik disini, nah untuk membuat link dari kata-kata tersebut silahkan ikuti langkah-langkah berikut : 1. Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini. 2. Klik ikon yang bergambar seperti ini yang berada pada toolbar, maka setelah itu akan muncul tulisan http:// pada window baru yang berbentuk seperti gambar di bawah ini :
3. Isi kotak yang ada tulisan tersebut dengan alamat situs yang kita inginkan, misalkan : http://www.nshodiq.blogspot.com 4. Klik OK. Selesai
Link dengan window baru Mungkin kita punya pikiran, kalau kita membuat sebuah link trus pembaca mengkliknya, kita kwawatir kalau pengunjung blog kita akan meninggalkan blog kita. Untuk meminimalisir hal tersebut, bisa dilakukan dengan cara membuat window baru, jadi ketika pengunjung mengklik salah satu link yang kita buat, halaman blog kita tidak akan tertimpa dengan halaman baru tapi yang terjadi adalah halaman blog kita tetap ada dan halaman yang baru di klik akan muncul terpisah.Ketika kita mengkliknya, akan tercipta window baru. Untuk membuat link seperti ini dapat di lakukan dengan cara : 1. Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu yang ada pada toolbar. 2. Pada tulisan yang kita link tadi akan muncul kode seperti ini ( contoh tulisan klik disini di link ke http://www.nshodiq.blogspot.com : klik disini
maka disini kita harus menambahkan embel-embel kode HTML target="new' ataupun target="_blank" pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di modifikasi adalah : klik di sini
atau : klik di sini
atau bisa juga seperti ini : klik di sini
Buat Links di sidebar Bila kita berkeinginan membuat link kepada teman kita di sidebar, cara termudah adalah seperti ini : ( khusus untuk template klasik) 1. Sign in di blogger dengan id kita 2. Klik menu TEMPLATE 3. Klik Edit HTML 4. Klik Edit 5. Klik Find (on this page)… --> untuk mempercepat pencarian
6. Tuliskan kata dimana kita ingin tempatkan, contoh di blog kita adalah Links para sahabat, klik Find 7. Tuliskan link yang kita inginkan, contoh jika kita ingin membuat link ke blog kita, maka kode yang di tulis adalah : Blog Tutorial
8. Klik Save Template Changes. Selesai Jika kita sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik, sebaiknya kita copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila kita melakukan kesalahan, kita bisa mengembalikan kesemula karena sudah mempunyai backup data template tersebut. Atau bisa juga sebelum kita klik Save Template Changes sebaiknya kita klik terlebih dahulu tombol preview untuk melihat perubahan yang kita lakukan, apabila sudah cocok dengan perubahan tersebut baru di save Template Changes.
Membuat Link (2) Untuk kita pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini : 1. Login di blogger dengan ID kita 2. Klik menu Layout 3. Klik Page Elements 4. Klik Add a Page Element 5. Klik ADD TO BLOG pada menu Link List 6. Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog kita Adalah “ Link partner” atau silahkan terserah kita 7. Isi nomor link yang ingin kita tunjukan di blog kita pada form Number of Links to show in list, jika kita ingin membatasi jumlah link yang akan di tampilkan, jika kita tidak mau membatasi silahkan di kosongkan saja. 8. Pada form Sorting, silahkan kita pilih sort Alphabetically bila ingin link kita di urutkan berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically apabila kita menginginkan Link yang kita buat di urutkan secara terbalik ( mulai dari Z --
> A ). Bila kita tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang kita buat, silahkan pilih Don’t Sort 9. Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http://www.nshodiq.blogspot.com 10. Tulis nama atau tulisan yang ingin muncul pada link yang kita buat pada form New site Name. contoh : Blog Tutorial. 11. Klik Add Link, jika link yang kita buat lebih dari satu. Silahkan isi semua form sesuai dengan langkah di atas. 12. Klik SAVE CHANGES bila sudah selesai 13. Bila kita ingin menempatkan Link yang kita buat tadi, silahkan arahkan mouse kita ke kotak link yang baru kita buat, lalu tekan mouse sambil di tahan pindahkan ke tempat yang kita inginkan ( di drag & drop ) . 14. Klik SAVE. Selesai
Membuat link dari gambar atau image Apabila kita mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka caranya seperti di bawah ini : 1. Upload gambar yang kita miliki ke hosting tempat menyimpan gambar, contoh http://www.photobucket.com. 2. Jika kita sudah mengupload gambar kita, maka gambar tersebut akan di beri alamat URL, copy alamat tersebut pada notepad. Sebagai contoh gambar chicklet blog tutorial di samping mempunyai alamat URL : http://i162.photobucket.com/albums/t253/p-tiok/animasichicklet.gif
Nah jika kita ingin membuat gambar tersebut menjadi sebuah link, maka kode yang di tulis adalah :
(kode dalam satu baris) jika ingin dalam window baru :
(kode dalam satu baris) Link berjudul Untuk memperjelas bahasan ini, silahkan kita kembali ke halaman atas blog ini lalu arahkan mouse kita ke tulisan Resep bisnis, coba diamkan sebentar pada link tersebut, maka tidak lama kemudian akan muncul tulisan Mau belajar bikin website sendiri silahkan klik disini . Nah sekarang mungkin kita sudah mengerti maksud kita, jadi dalam sebuah link ada kata-kata untuk menekankan ajakan kita kepada para pembaca untuk mengklik link tersebut. Untuk membuat
judul linkk ini sangat mudah, m yaknni kita hanyaa harus menaambahkan title=" ... " paada link yangg kita buat. Conntoh seperti yang kita beerikan di atass : Belajar r Web >
Membuat Banner Animasi A Agar blog kita tampil dinamis daan lebih atrakktif, salah saatu caranya adalah a dengaan memajangg banner annimasi.karen na dengan baanner animasi, mata darii pengunjungg akan langssung tertuju kepada banner b terseb but, terutamaa apabila kitaa seorang peebisnis, bannner animasi akan a lebih effektif untuk ikllan yang kitaa pasang di banding b denggan banner biasa. b Cara membuat m bannner animasii sangatlahh mudah, maau yang gratiisan ada, maau yang bayaar juga ada.T Tapi tentunyaa ada kelebihhan dan kekuurangannya. bagi kita yang bermin nat dengan banner b anim masi gratis, kiita bisa kunjuungi http://ww ww.addesign ner.com Silahhkan daftar (gratis), ( Jikaa sudah di terrima kita tinnggal memiliih banner yaang di sediak kan, trus ya tinggal di masukin m ke bllog, mau di sidebar s atau di dalam postingann tentu bisa. Untuk cara pemasangann silahkan kiita baca posttingan terdahhulu bagaimana cara mem masukan kod de HTML keedalam blog. Contoh banner b animaasi :
Nah jika kita ingin beerkreasi senddiri, kita bisaa menggunaakan software banner maaker, dengan k dan tidakk perlu onlinne terus di innternet. Untuuk software ini kita bisaa berkreasi seekehendak kita mendapaatkannya silaahkan klik dii sini , dengaan harga yanng super murrah kita bisa mendapaatkannya di samping s puluuhan software berharga lainnya. Contoh sederhana s an nimasi banneer :
Mengatur Perataan Posting Artikel Untuk membuat perataan (align), baik rata kiri, kanan, kiri-kanan, atau mau tengah-tengah semuanya, bisa dengan dua cara tergantung dari kebiasaan kita saat posting artikel, apakah biasa pakai menu Compose atau Edit HTML. Oleh karena itu akan kita bahas untuk keduanya. Untuk menu Compose Pada menu compose sebenarnya ini lebih mudah, sebab untuk membuat perataan sudah di sediakan tool (peralatan) yang sama dengan yang ada di Microsoft Word atau Exel, icon tool nya seperti ini : --> Untuk merubah jenis huruf yang di gunakan --> Untuk merubah ukuran huruf (heading) --> Untuk Menebalkan huruf --> Untuk memiringkan huruf --> Untuk merubah warna huruf --> Untuk membuat link --> Untuk membuat artikel menjadi rata kiri --> Untuk membuat tulisan menjadi di tengah --> Untuk membuat artikel menjadi rata kanan --> Untuk membuat artikel menjadi rata kiri dan rata kanan --> Untuk membuat sub bahasan oleh angka --> Untuk membuat sub bahasan oleh bullet --> Untuk mengecek spelling --> Untuk memasukan gambar(upload gambar) --> Untuk membuat artikel dalam kode HTML --> Untuk membuat artikel dalam mode Compose (biasa) --> Untuk me review (melihat) artikel Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang kita mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan? Akan tetapi bagi kita yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang kita ajarkan di blog ini adalah dengan
memakai kode
yang relatif lebih aman. Untuk menu Edit HTML Bagi kita yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kirikanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan akhir artikel, kodenya seperti ini : Rata kiri :
isi artikelnya di sini
Rata kanan :
isi artikelnya di sini
Rata kiri-kanan :
isi artikelnya di sini
Supaya tengah semua :
isi artikelnya di sini
Agar hasilnya kelihatan, kita berikan contoh dengan mengutif isi artikel di blog ini. Contoh cara membuatnya seperti ini : Untuk yang rata kiri :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.
Maka hasilnya akan seperti ini : Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. Untuk yang rata kanan :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.
Maka hasilnya akan seperti ini : Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang
tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.
Untuk yang rata kiri-kanan :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.
Maka hasilnya akan seperti ini : Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. Untuk yang tengah semua :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. Maka hasilnya akan seperti ini : Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. Untuk yang bullet & numbering, ini bisa juga dilakukan : contohnya seperti ini : Bullet saja : Sig in di blogger dengan id kita
Klik menu layout
Klik menu Edit HTML
Hasilnya seperti ini : • Sig in di blogger dengan id kita • Klik menu layout • Klik menu Edit HTML
Bullet yang menjorok ke tengah :
Hasilnya seperti ini : • • •
Sig in di blogger dengan id kita Klik menu layout Klik menu Edit HTML
Yang memakai nomor :
Hasilnya seperti ini : 1. Sig in di blogger dengan id kita 2. Klik menu layout 3. Klik menu Edit HTML
Untuk warna : <span style="color:kode warna"> tulisan yang mau di warnai
contoh untuk warna merah : <span style="color:red"> ini contoh merah
hasilnya seperti ini :
ini contoh merah
atau bisa juga seperti ini : <span style="color:#FD0303"> ini contoh merah
Hasilnya tetap sama : ini contoh merah untuk mengetahui kode warna sangat gampang, kita bisa menggunakan bantuan program photosop, kita tinggal sorot warna yg di kehendaki, nanti kode warnanya akan di tampilkan. Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga pada edit HTML untuk kode template. Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom Tulis ukuran lebar yang sesuai dengan sidebar blog kita (kalau mau di tempatkan di sidebar) contoh : 160 Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih halfSize juga boleh Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah) Disamping tulisan Title, tulis kata yang kita suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja Di bagan bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu Kembali ke bagian atas Klik tmbol bertuliskan Preview and Get Code Copy eluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account kita Silahkan close window situs tersebut. Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML,.
Membuat menu D'tree Beberapa waktu yang lampau, kita 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 kita, apabila kita memasang suatu script atau image yang bersumber dari milik orang lain, sebaiknya bersegeralah untuk menyimpannya pada account milik kita, akan tetapi sebelum mengambilnya tentu kita harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan seperti ini, apabila kita menyuruh memasang script seperti ini :
pasanglah kode ini di atas kode : <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 kita. Tentu apabila kita memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila kita iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil kita 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 kita : 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 kita. Apabila kode tersebut sudah tersimpan di komputer kita, uploadlah kode tersebut pada hosting yang biasa kita gunakan, misalkan kita 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 kita punyai dengan milik kita, misal kode di atas seperti ini : <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />
Gantilah sumber script di atas dengan yang kita miliki, sehingga kodenya jadi seperti ini : <script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />
Apabila kita melakukan hal yang di atas, maka kita tidak usah khawatir akan kehilangan dari fungsi script tersebut. Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan kita 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 kita akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami. Untuk membuat menu dtree, kita 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 kita harus memahaminya, oleh karena alasan tadi maka kita 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 : <script type="text/javascript" src="dtree.js">
Kode di bawah ini di simpan di bagian sidebar :
Apabila kita mempunyai intelegensi yang cukup lumayan bagus, maka kita yakin tidak usah kita terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link milik kita dapat di pasang pada kode-kode di atas. Dengan tidak ada maksud kita untuk merendahkan kita yang masih belum mengerti, maka kita akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka kita telah membuat sebuah menu dtree buatan kita yang telah kita sertakan link-link di dalamnya : source code dari menu yang kita buat seperti ini : Kode ini di simpan di atas kode : <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js">
Kode di bawah ini di simpan di bagian sidebar :
Untuk melihat hasilnya, silahkan klik dulu di sini ! Baiklah, kita akan mencoba mengulasnya agar lebih mudah untuk di pahami : Jika kita 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 kita menginginkan menu yang di simpan menjadi induk, kita 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 kita 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 kita 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 kita: • 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<$BlogPageTitle$> :
<script type="text/javascript"
src="http://amen24.googlepages.com/dtree.js">
6. Copy kode berikut, lalu paste pada kode sidebar kita (link nya harus di ganti dengan milik kita):
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
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js">
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 kita)
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
Sumber rujukan : http://www.google‐book.com http://www.photobucket.com http://www.blogspot.com http://www.help.blogspot.com http://www.comunity.blogspot.com http://www.tutorialweblog.com http://www.kolom‐tutorial.blogspot.com http://www.ilmukomputer.com
isi artikelnya di sini
Rata kanan :
isi artikelnya di sini
Rata kiri-kanan :
isi artikelnya di sini
Supaya tengah semua :
isi artikelnya di sini
Agar hasilnya kelihatan, kita berikan contoh dengan mengutif isi artikel di blog ini. Contoh cara membuatnya seperti ini : Untuk yang rata kiri :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.
Maka hasilnya akan seperti ini : Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. Untuk yang rata kanan :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.
Maka hasilnya akan seperti ini : Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang
tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.
Untuk yang rata kiri-kanan :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.
Maka hasilnya akan seperti ini : Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. Untuk yang tengah semua :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.
Hasilnya seperti ini : • Sig in di blogger dengan id kita • Klik menu layout • Klik menu Edit HTML
Bullet yang menjorok ke tengah :
- Sig in di blogger dengan id kita
- Klik menu layout
- Klik menu Edit HTML
Hasilnya seperti ini : • • •
Sig in di blogger dengan id kita Klik menu layout Klik menu Edit HTML
Yang memakai nomor :
- Sig in di blogger dengan id kita
- Klik menu layout
- Klik menu Edit HTML
Hasilnya seperti ini : 1. Sig in di blogger dengan id kita 2. Klik menu layout 3. Klik menu Edit HTML
Untuk warna : <span style="color:kode warna"> tulisan yang mau di warnai
contoh untuk warna merah : <span style="color:red"> ini contoh merah
hasilnya seperti ini :
ini contoh merah
atau bisa juga seperti ini : <span style="color:#FD0303"> ini contoh merah
Hasilnya tetap sama : ini contoh merah untuk mengetahui kode warna sangat gampang, kita bisa menggunakan bantuan program photosop, kita tinggal sorot warna yg di kehendaki, nanti kode warnanya akan di tampilkan. Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga pada edit HTML untuk kode template. Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom Tulis ukuran lebar yang sesuai dengan sidebar blog kita (kalau mau di tempatkan di sidebar) contoh : 160 Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih halfSize juga boleh Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah) Disamping tulisan Title, tulis kata yang kita suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja Di bagan bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu Kembali ke bagian atas Klik tmbol bertuliskan Preview and Get Code Copy eluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account kita Silahkan close window situs tersebut. Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML,.
Membuat menu D'tree Beberapa waktu yang lampau, kita 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 kita, apabila kita memasang suatu script atau image yang bersumber dari milik orang lain, sebaiknya bersegeralah untuk menyimpannya pada account milik kita, akan tetapi sebelum mengambilnya tentu kita harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan seperti ini, apabila kita menyuruh memasang script seperti ini :
pasanglah kode ini di atas kode : <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 kita. Tentu apabila kita memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila kita iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil kita 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 kita : 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 kita. Apabila kode tersebut sudah tersimpan di komputer kita, uploadlah kode tersebut pada hosting yang biasa kita gunakan, misalkan kita 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 kita punyai dengan milik kita, misal kode di atas seperti ini : <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />
Gantilah sumber script di atas dengan yang kita miliki, sehingga kodenya jadi seperti ini : <script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />
Apabila kita melakukan hal yang di atas, maka kita tidak usah khawatir akan kehilangan dari fungsi script tersebut. Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan kita 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 kita akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami. Untuk membuat menu dtree, kita 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 kita harus memahaminya, oleh karena alasan tadi maka kita 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 : <script type="text/javascript" src="dtree.js">
Kode di bawah ini di simpan di bagian sidebar :
Example
Apabila kita mempunyai intelegensi yang cukup lumayan bagus, maka kita yakin tidak usah kita terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link milik kita dapat di pasang pada kode-kode di atas. Dengan tidak ada maksud kita untuk merendahkan kita yang masih belum mengerti, maka kita akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka kita telah membuat sebuah menu dtree buatan kita yang telah kita sertakan link-link di dalamnya : source code dari menu yang kita buat seperti ini : Kode ini di simpan di atas kode : <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js">
Kode di bawah ini di simpan di bagian sidebar :
<script type="text/javascript">
d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://templateunik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://templateunik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://templateunik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://templateunik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://templateunik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://templateunik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://templateunik.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://templateunik.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://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://csslybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://csslybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://csslybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://csslybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://csslybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/redvertical-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://templateunik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Css Library','http://csslibrary.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Terune sasaQ','http://terunesasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.co m/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrikelektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(50,2,'Tukeran link','http://tukeranlink.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(60,2,'Pasar Info','http://pasarinfo.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://kolomtutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');
document.write(d); //-->
Open all
Close alld.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://templateunik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://templateunik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://templateunik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://templateunik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://templateunik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://templateunik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://templateunik.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://templateunik.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://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://csslybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://csslybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://csslybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://csslybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://csslybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/redvertical-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://templateunik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Css Library','http://csslibrary.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Terune sasaQ','http://terunesasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.co m/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrikelektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(50,2,'Tukeran link','http://tukeranlink.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(60,2,'Pasar Info','http://pasarinfo.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://kolomtutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');
document.write(d); //-->
Untuk melihat hasilnya, silahkan klik dulu di sini ! Baiklah, kita akan mencoba mengulasnya agar lebih mudah untuk di pahami : Jika kita 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 kita menginginkan menu yang di simpan menjadi induk, kita 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 kita 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 kita 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 kita: • 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
<script type="text/javascript"
src="http://amen24.googlepages.com/dtree.js">
6. Copy kode berikut, lalu paste pada kode sidebar kita (link nya harus di ganti dengan milik kita):
<script type="text/javascript">
d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://templateunik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://templateunik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://templateunik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://templateunik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://templateunik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://templateunik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://templateunik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://templateunik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://templateunik.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://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://csslybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://csslybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://csslybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://csslybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://csslybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://csslybrary.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://templateunik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(20,2,'Css Library','http://csslibrary.blogspot.com','','','http://24rohman.googlepages.com/icon_user. gif'); d.add(20,2,'Terune sasaQ','http://terunesasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gi f'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepa ges.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrikelektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us er.gif'); d.add(50,2,'Tukeran link','http://tukeranlink.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(60,2,'Pasar Info','http://pasarinfo.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://kolomtutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');
document.write(d); //-->
d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://templateunik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://templateunik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://templateunik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://templateunik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://templateunik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://templateunik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://templateunik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://templateunik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://templateunik.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://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://csslybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://csslybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://csslybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://csslybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://csslybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://csslybrary.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://templateunik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(20,2,'Css Library','http://csslibrary.blogspot.com','','','http://24rohman.googlepages.com/icon_user. gif'); d.add(20,2,'Terune sasaQ','http://terunesasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gi f'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepa ges.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrikelektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us er.gif'); d.add(50,2,'Tukeran link','http://tukeranlink.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(60,2,'Pasar Info','http://pasarinfo.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://kolomtutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');
document.write(d); //-->
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
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js">
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 kita)
<script type="text/javascript">
d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://templateunik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://templateunik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://templateunik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://templateunik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://templateunik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://templateunik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://templateunik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://templateunik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://templateunik.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://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://csslybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://csslybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://csslybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://csslybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://csslybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://csslybrary.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://templateunik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(20,2,'Css Library','http://csslibrary.blogspot.com','','','http://24rohman.googlepages.com/icon_user. gif'); d.add(20,2,'Terune sasaQ','http://terunesasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gi f'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepa ges.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrikelektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us er.gif'); d.add(50,2,'Tukeran link','http://tukeranlink.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(60,2,'Pasar Info','http://pasarinfo.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://kolomtutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');
document.write(d); //-->
d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://templateunik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://templateunik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://templateunik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://templateunik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://templateunik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://templateunik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://templateunik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://templateunik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://templateunik.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://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://csslybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://csslybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://csslybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://csslybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://csslybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://csslybrary.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://templateunik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(20,2,'Css Library','http://csslibrary.blogspot.com','','','http://24rohman.googlepages.com/icon_user. gif'); d.add(20,2,'Terune sasaQ','http://terunesasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gi f'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepa ges.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrikelektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us er.gif'); d.add(50,2,'Tukeran link','http://tukeranlink.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(60,2,'Pasar Info','http://pasarinfo.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://kolomtutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');
document.write(d); //-->
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
Sumber rujukan : http://www.google‐book.com http://www.photobucket.com http://www.blogspot.com http://www.help.blogspot.com http://www.comunity.blogspot.com http://www.tutorialweblog.com http://www.kolom‐tutorial.blogspot.com http://www.ilmukomputer.com
