Tutorial Web | Tips & Trik Blog | Free Blogger Template

Cara membuat tampilan seperti contoh tersebut adalah cukup dengan memanfaatkan Gadget Feed yang disediakan oleh Blogspot. Langkah-langkahnya:

1. Login pada Blogspot Anda. Kemudian klik link "Rancangan". Anda akan masuk ke halaman "Rancangan". Pilih submenu "Elemen Halaman".
2. Klik link "Tambah Gadget" pada bagian dimana Anda ingin menampilkan kelompok kategori atau label posting Anda.
   
3. Akan muncul window untuk memilih gadget baru. Cari dan pilihkan gadget Feed.
   
4. Masukkanlah alamat feed kategori seperti berikut ini:
   http://USERNAME_BLOG_ANDA.blogspot.com/feeds/posts/default/-/NAMA_LABEL_POSTING
5. Gantilah "USERNAME_BLOG_ANDA" dengan username blog milik Anda. Kemudian ganti "NAMA_LABEL_POSTING" dengan nama label atau kategori yang ingin Anda tampilkan. Contohnya:
   http://tutorial-website.blogspot.com/feeds/posts/default/-/Curhat
   Bentuk lengkapnya akan seperti ini:
   
   
6. Jika berhasil memanggil feed, maka tampilannya akan menjadi seperti berikut:
   
   
   Gantilah judul dengan nama kategori yang ingin Anda tampilkan. Kemudian silahkan atur bagian-bagian lain seperlunya. Setelah itu klik tombol Simpan.
7. Hal yang perlu diperhatikan adalah penulisan "NAMA_LABEL_POSTING". Tuliskan sesuai dengan karakter aslinya. Jika ada spasi, gantikan spasi dengan "%20". Contoh, jika kita ingin menampilkan posting dari kategori "CSS Tutorials", maka alamat feed-nya adalah:
   http://tutorial-website.blogspot.com/feeds/posts/default/-/CSS%20Tutorials
8. Hebatnya lagi, Anda bisa menampilkan posting-posting dari blog Anda yang lain. Cukup mengganti alamat feed tersebut.
9. Jangan lupa Simpan perubahan template setelah melakukan langkah-langkah diatas.

1. Buka situs http://www.musik-live.net. Tujuannya adalah untuk mendapatkan kode musik yang akan kita pasang pada blog. Disana tersedia banyak lagu yang bisa Anda pilih. Klik salah satu daftar lagu.
   
   
2. Kemudian akan muncul halaman yang berisi beberapa link kode yang bertuliskan "Play & Embed Code". Anda bisa memilih salah satunya.
   
   
3. Kemudian Anda akan masuk ke halaman kode lagu yang telah terpilih. Di sebelah kiri halaman Anda bisa mendengar lagu yang Anda pilih melalui music player pada situs tersebut. Sedangkan dibagian tengah, Anda akan melihat kolom "Embed code" yang berisi kode dari lagu yang kita pilih. Kode tersebutlah yang akan kita masukkan ke dalam blog kita. Untuk mengkopi kode, silahkan klik tombol "copy" yang ada di sebelah kanan kolom tersebut.
   
   
4. Sekarang login ke blog Anda di blogspot. Pada bagian dasbor, klik link menu "Rancangan". Kemudian, klik link "Tambah Gadget" pada bagian dimana Anda ingin menempatkan musik tersebut pada blog Anda.
5. Akan muncul window "Tambahkan Gadget". Silahkan Anda cari dan pilih gadget "HTML/Javascript".
   
   
6. Copy paste kode yang Anda dapat pada langkah 3 ke dalam kolom kode gadget "HTML/Javascript" tersebut. Setelah itu klik "Simpan".

Selamat mencoba.

1. Silahkan login ke dasbor blogspot Anda.
2. Klik link menu Tata Letak. Di bagian bawah tab Tata Letak tersebut, bertambah sebuah subtab menu baru yang bernama Percancang Template.
   
   
   
   Melalui menu tersebutlah kita meracancang template blogger buatan sendiri. Silahkan klik menu tersebut. Kita akan diarahkan pada halaman "Blogger Template Designer".
3. Di sana terdapat beberapa menu pembuatan template, yaitu Template, Background, Layout, dan Advanced. Mari kita otak-atik satu persatu.
4. Menu Template : pada menu ini, kita bisa memilih jenis template yang telah disediakan oleh Blogspot. Ini hanya sebagai template dasar saja. Istilahnya template master. Silahkan pilih salah satu, misalnya jenis "Simple". Di sana juga terdapat beberapa sub pilihan template dari jenis "Simple". Anda boleh memilih salah satunya.
   
   
5. Menu Background : pada menu ini, kita memilih gambar-gambar yang telah tersedia untuk dijadikan sebagai background template blog rancangan kita. Menariknya, Blogspot telah menyediakan banyak gambar yang bisa kita gunakan. Jenis-jenisnya juga sangat banyak. Suatu saat, kita mungkin akan bisa memakai gambar milik kita sendiri.
   
   
   Anda juga bisa memilih warna utama template blog rancangan kita dengan mengklik pilihan pada "Main color theme".
   
   
6. Menu Layout : menu ini cukup penting. Melalui menu ini kita mendesain layout blog hasil rancangan kita. Pada menu ini terdapat 3 sub menu:
   
   • Body layout : mengatur jumlah kolom, jumlah sidebar, dan penempatan sidebar pada template rancangan.
     
     
   • Footer layout : hampir sama dengan "body layout", hanya saja sub menu ini dikhususkan untuk mengatur jumlah kolom pada footer.
     
     
   •  Adjust width : berguna untuk mengatur lebar template yang ingin kita rancang, baik lebar keseluruhan (entire blog), maupun lebar tiap sidebar blog kita (left sidebar atau right sidebar).
     
     
7. Menu Advanced : menu ini bertujuan untuk mengatur bentuk tulisan dan pewarnaan tulisan dari template yang kita rancang. Misalnya jenis font judul blog, warnannya, ukuran fontnya, dan sebagainya.
   
   

Jika Anda merasa sudah puas dengan rancangan Anda, silahkan klik tombol APPLY TO BLOG yang ada di sudut kanan atas. Kemudian silahkan lihat hasilnya.

Bagi yang ingin tantangan di dunia pemrograman web, fitur yang satu ini mungkin dianggap bisa membuat orang menjadi malas belajar bahasa pemrograman website. Tapi bagi yang ingin kemudahan, fitur ini menjadi kabar gembira. Itu adalah pilihan Anda masing-masing.

1. Login ke dasbor Blogspot Anda, kemudian klik link menu Posting.
2. Selanjutnya klik submenu Edit Laman yang merupakan menu untuk membuat static page pada Blogspot.
   
   
3. Anda akan diarahkan pada pembuatan halaman baru. Cara mengisi halaman yang akan Anda buat mirip dengan membuat posting. Klik tombol Tayangkan Laman jika sudah selesai.
4. Jika baru pertama kali membuat halaman statis ini, Anda akan diminta memilih lokasi dimana Anda akan menampilkan link halaman yang baru saja Anda buat. Link ini akan berfungsi sebagai menu pada blogspot Anda yang jika diklik akan menuju halaman tersebut.
5. Ada 3 pilihan lokasi dari link menu halaman yang Anda buat:
   
   • Bilah Samping Blog : jika Anda ingin menampilkan menu halaman statis Anda pada sidebar blogspot. Ini akan menjadi menu vertikal pada Blogspot Anda.
   • Tab Blog : jika Anda ingin menampilkannya di bagian atas blog Anda. Ini akan menjadi menu horizontal pada Blogspot Anda.
   • Tidak Ada Gadget : jika Anda ingin menampilkannya secara manual seperti ketika membuat menu horizontal pada Blogspot baik menggunakan CSS maupun membuat menu dengan Javascript yang pernah kita pelajari sebelumnya.
   Jika Anda memilih opsi pertama atau kedua, maka secara otomatis sebuah gadget baru yang bernama Gadget Pages akan bertambah pada blog Anda. Anda bisa melihatnya melalui menu Tata Letak kemudian pilih submenu Elemen Halaman.
   
   
    Anda bisa mengedit Gadget Pages ini jika ingin mengatur halaman apa saja yang ingin ditampilkan pada Blog Anda. Hmm, menarik bukan?
   
6. Anda juga bisa menambahkan secara manual Gadget Pages ini (jika tidak memilih pilihan pertama atau kedua pada langkah 5 di atas). Caranya seperti biasa, yaitu:
   
   • Pada dasbor Anda, pilih link menu Tata Letak, kemudian pilih subtab menu Elemen Halaman.
   • Klik link Tambah Gadget pada bagian blog yang ingin Anda tempatkan gadget pages ini.
     
     
   • Maka akan muncul window penambahan gadget baru. Silahkan cari dan pilih Gadget Pages.
     
     

Saya rasa, Anda sudah bisa membuat halaman contact  pada Blogspot pada halaman statis menggunakan fitur ini dan bukan lagi membuatnya pada halaman posting.

Namun,masih ada beberapa kekurangan dari fitur ini. Mungkin karena masih baru dan bisa dikatakan jauh ketinggalan dari pada sistem yang dibuat oleh Wordpress. Beberapa kekurangannya adalah kita belum bisa membuatt dropdown menu pada Blogspot menggunakan fitur ini. Selain itu, kita hanya bisa menambahkan 1 (satu) saja gadget pages nya. Artinya, kita tidak belum bisa membuat menu vertikal dan horizontal sekaligus menggunakan fitur ini.

Meskipun demikian, perkembangannya masih layak untuk kita tunggu. Selamat mencoba :D

Sedangkan Google Sites sendiri menurut saya fungsinya sama dengan Google Pages Creator. Namun, ada perubahan fitur yang diberikannya. Salah satunya adalah proses pembuatan halaman website pada Google Sites. Setelah saya coba, sepertinya membuat halaman website di Google Sites lebih mudah dan hasilnya lebih bagus. Sangat cocok bagi yang ingin membuat website dengan tampilan cantik. Adapun alamatnya adalah : "http://www.site.google.com/". Sedangkan alamat website kita akan menjadi: "http://sites.google.com/site/namawebkita/".
Namun, ada permasalahan yang dimunculkan. Apa itu? Tentu saja masalah "LINK" atau "URL" file-file yang kita simpan sebelumnya pada Google Pages Creator. Sebagian dari kita mungkin pernah menyimpan file seperti gambar, CSS, HTML, dan sebagainya pada File Manager yang ada di Google Pages Creator dan menggunakan file tersebut pada website atau blog kita yang lain. Jika terjadi migrasi dari Google Pages Creator ke Google Sites, tentu akan terjadi pula perubahan "LINK' atau "URL" dari file-file tersebut. Akibatnya tentu terasa, file tersebut tidak bisa dibuka.

Sebagai ilustrasi, misalnya kita menyimpan sebuah gambar dengan nama "sibuya.jpg" pada Google Pages Craator, maka alamatnya sebelumnya adalah "http://namawebkita.googlepages.com/sibuya.jpg". Namun, karena terjadi migrasi tersebut, kemungkinan alamatnya akan diubah oleh Google menjadi: "http://bloggerhosting.appspot.com/serve/namawebkita.googlepages.com/sibuya.jpg". Ini bisa mengakibatkan terjadinya "missing link" atau link tidak ditemukan oleh browser.

Jika  kita menggunakan file-file tersebut pada Blogspot yang merupakan produk Google sendiri, "missing link" tersebut bisa kita cegah. Caranya:

1. Buka halaman dasbor Blogspot Anda. Untuk saat ini, Google menampilkan semacam pengumunan untuk mengupdate link Google Pages yang kita miliki. Anda akan melihat bagian "Mutakhirkan Template".
   
   
   
   
2. Klik link "Mutakhirkan dan tinjau".
3. Jika blog Anda memiliki tautan ke file yang Anda simpan di Google Pages Creator, maka akan terlihat sebuah pesan seperti berikut:
   
   
   
   
4. Silahkan klik "Update references".
5. Selanjutnya masuk ke langkah pertama. Silahkan backup template blog Anda jika dirasa perlu. Setelah itu klik tombol Next.
   
   
   
6. Di langkah kedua, klik tombol Update untuk mengupdate link file yang Anda miliki dan gunakan pada blog tersebut.
   
   
   

Pada tutorial website kali ini kita akan mencoba membuat menu Dtree pada website atau blog Anda. Sebenarnya ada beberapa situs luar negeri yang pernah membahas tutorial menu ini. Namun dari hasil temuan saya, bentuk navigasi yang merupakan karya Geir Landrö  ini jauh lebih menarik. Tentu tidak salah kalau kita pelajari namun harus tetap mengakui bahwa itu adalah karya Geir Landrö. Berikut langkah-langkah membuat menu DTree:

1. Copy paste kode berikut sebelum kode </head> pada website atau blog Anda:
   <script src='http://nestoriko.googlepages.com/dtree.js' type='text/javascript'/>
2. Copy paste kode CSS berikut pada file CSS website Anda. Jika pada Blogspot, copy paste sebelum kode ]]></b:skin>
   
   /* dtree */
.bukasemua {
padding-left:13px;
background: transparent url(http://h1.ripway.com/sinaga/gambar/plus-sign.gif) no-repeat 0 55%;
}
.tutupsemua {
padding-left:13px;
background: transparent url(http://h1.ripway.com/sinaga/gambar/minus-sign.gif) no-repeat 0 55%;
}
.dtree {
line-height: 11px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #41484d;
white-space: nowrap;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #41484d;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
white-space: nowrap;
padding: 1px 2px 1px 2px;
color: #41484d;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: red;
font-weight: normal;
text-decoration: none;
}
.dtree a.nodeSel {
/*  background-color: #c0d2ec; */
}
.dtree .clip {
overflow: hidden;
}
   
3. Berikut ini contoh struktur menu Dtree yang akan kita pasang pada website. Silahkan copy paste pada bagian dimana Anda ingin menampilkan menu Dtree pada website Anda. Untuk Blogspot, jika Anda ingin menampilkan pada sidebar:
   
   • Masuk pada dashbor Anda kemudian klik link Tata Letak
   • Pilih tab Elemen Halaman. Kemudian klik salah satu link Tambah Gadget. Akan muncul window penambahan gadget baru. Pilih gadget HTML/Javascript
   • Copy paste struktur menu berikut pada gadget HTML/Javascript tersebut.
   <div class="dtree">
<p style="text-align:center"><a class="bukasemua" href="javascript: d.openAll();">Buka Semua Folder</a> | <a class="tutupsemua" href="javascript: d.closeAll();">Tutup Semua</a></p>

<script type="text/javascript">
<!--
d = new dTree('d','','','');
//NAVIGASI MULAI DI SINI
d.add(1,0,'My Documents','','My Documents','','http://h1.ripway.com/sinaga/gambar/mydocument.gif','http://h1.ripway.com/sinaga/gambar/mydocument.gif');
d.add(2,0,'Arsip Artikel','','','','http://h1.ripway.com/sinaga/gambar/archive.gif','http://h1.ripway.com/sinaga/gambar/archive.gif');
d.add(3,0,'Webroll','','','','http://h1.ripway.com/sinaga/gambar/globe.gif','http://h1.ripway.com/sinaga/gambar/globe.gif');
d.add(4,0,'Friendsterroll','','','','http://h1.ripway.com/sinaga/gambar/friendster.gif','http://h1.ripway.com/sinaga/gambar/friendster.gif');
d.add(5,0,'Question & Help','http://edit.yahoo.com/config/send_webmesg?.target=i_7dragons&.src=pg','Do You Need Some Help?','','http://h1.ripway.com/sinaga/gambar/question.gif');
d.add(6,0,'Recycle Bin','http://tutorial-website.blogspot.com/index.html','Recycle Bin','','http://h1.ripway.com/sinaga/gambar/trash.gif');

//MY DOCUMENTS
d.add(4000,1,'My Pictures','','My Pictures','','http://h1.ripway.com/sinaga/gambar/imgfolder.gif','http://h1.ripway.com/sinaga/gambar/imgfolder.gif');
d.add(4001,1,'My Music','','My Music','','http://h1.ripway.com/sinaga/gambar/musicfolder.gif','http://h1.ripway.com/sinaga/gambar/musicfolder.gif');
d.add(4002,1,'My Video','http://profiles.friendster.com/nestoriko','My Video','','http://h1.ripway.com/sinaga/gambar/video.gif','http://h1.ripway.com/sinaga/gambar/video.gif');

//MY PICTURES SHARED
d.add(5000,4000,'My Pictures Shared','http://profiles.friendster.com/nestoriko','My Pictures Shared','','http://h1.ripway.com/sinaga/gambar/picture.gif');


//MY MUSIC SHARED
d.add(6000,4001,'My Music Shared','http://profiles.friendster.com/nestoriko','My Music Shared','','http://h1.ripway.com/sinaga/gambar/musicfile.gif');

//BULANAN MULAI DI SINI---------------
d.add(0,-1,'Home', 'http://tutorial-website.blogspot.com/index.html','','','');
d.add(104,2,'Maret 2009 (1)','http://tutorial-website.blogspot.com/2009_03_01_archive.html','','','');
d.add(103,2,'Februari 2009 (9)','http://tutorial-website.blogspot.com/2009_02_01_archive.html','','','');
d.add(102,2,'Januari 2009 (13)','http://tutorial-website.blogspot.com/2009_01_01_archive.html','','','');
d.add(101,2,'Agustus 2008 (1)','http://tutorial-website.blogspot.com/2008_08_01_archive.html','','','');
d.add(100,2,'Desember 2007 (2)','http://tutorial-website.blogspot.com/2007_12_01_archive.html','','','');

// POSTING MULAI DI SINI-----------------
//Maret 2009
d.add(1001,104,'Kode Warna untuk CSS','http://tutorial-website.blogspot.com/2009/03/kode-warna-untuk-css.html','Kode Warna untuk CSS','','');

//Februari 2009
d.add(1009,103,'Membuat Ucapan Selamat Datang Memakai Nama Pengunjung','http://tutorial-website.blogspot.com/2009/02/membuat-ucapan-selamat-datang-memakai.html','Membuat Ucapan Selamat Datang Memakai Nama Pengunjung','','');
d.add(1008,103,'Invalid Widget ID pada Blogger','http://tutorial-website.blogspot.com/2009/02/invalid-widget-id-pada-blogger.html','Invalid Widget ID pada Blogger','','');
d.add(1007,103,'Membuat Slide Album Foto di Blog','http://tutorial-website.blogspot.com/2009/02/membuat-slide-album-foto-di-blog.html','','','');
d.add(1006,103,'Perbedaan Free Domain dengan Pay Domain','http://tutorial-website.blogspot.com/2009/02/perbedaan-free-domain-dengan-pay-domain.html','','','');
d.add(1005,103,'How To Show Comment Box Below Post for WP-Polaroid Blogger Template','http://tutorial-website.blogspot.com/2009/02/to-show-comment-box-below-post-for-wp.html','','','');
d.add(1004,103,'Membuat Kotak Komentar dibawah Posting','http://tutorial-website.blogspot.com/2009/02/show-comment-box-under-post.html','','','');
d.add(1003,103,'Perbedaan Free Hosting dengan Pay Hosting','http://tutorial-website.blogspot.com/2009/02/perbedaan-free-hosting-dengan-pay.html','','','');
d.add(1002,103,'Mengganti Template Blogspot','http://tutorial-website.blogspot.com/2009/02/mengganti-template-blogspot.html','','','');
d.add(1001,103,'Sang Masterpun Ingin Pergi','http://tutorial-website.blogspot.com/2009/02/terkejutsang-masterpun-ingin-pergi.html','','','');

//Januari 2009
d.add(1013,102,'Lebih Jauh Mengenal Layout Blogpot (2)','http://tutorial-website.blogspot.com/2009/01/lebih-jauh-mengenal-layout-blogpot-2.html','','','');
d.add(1012,102,'Lebih Jauh Mengenal Layout Blogpot (1)','http://tutorial-website.blogspot.com/2009/01/lebih-jauh-mengenal-layout-blogpot.html','','','');
d.add(1011,102,'Cara Membuat Cascading Stylesheet (CSS)','http://tutorial-website.blogspot.com/2009/01/cara-membuat-cascading-stylesheet-css.html','','','');
d.add(1010,102,'CSS At a Glance','http://tutorial-website.blogspot.com/2009/01/css-at-glance.html','','','');
d.add(1009,102,'Bahasa Pemograman Blogspot','http://tutorial-website.blogspot.com/2009/01/bahasa-pemograman-blogspot_06.html','','','');
d.add(1008,102,'HTML At a Glance','http://tutorial-website.blogspot.com/2009/01/pengantar-tentang-html.html','','','');
d.add(1007,102,'Panduan Lengkap Menggunakan Blog di Blogspot','http://tutorial-website.blogspot.com/2009/01/panduan-lengkap-menggunakan-blog-di.html','','','');
d.add(1006,102,'Panduan Membuat Blog di Blogspot','http://tutorial-website.blogspot.com/2009/01/langkah-langkah-membuat-blog-di.html','','','');
d.add(1005,102,'Membuat Account Google','http://tutorial-website.blogspot.com/2009/01/membuat-account-google.html','','','');
d.add(1004,102,'Antara Website, Blog, dan CMS','http://tutorial-website.blogspot.com/2009/01/antara-website-blog-dan-cms.html','','','');
d.add(1003,102,'Hosting dan Domain','http://tutorial-website.blogspot.com/2009/01/hosting-dan-domain.html','','','');
d.add(1002,102,'Apa sih website itu?','http://tutorial-website.blogspot.com/2009/01/apa-sih-website-itu.html','','','');
d.add(1001,102,'Selamat Datang','http://tutorial-website.blogspot.com/2009/01/selamat-datang.html','','','');

//Agustus 2008
d.add(1000,101,'Wikimapia, sebuah situs pengindraan jauh (indraja)','http://tutorial-website.blogspot.com/2008/08/wikimapia-sebuah-situs-pengindraan-jauh.html','Wikimapia, sebuah situs pengindraan jauh (indraja)','','');

//Desember 2007
d.add(1001,100,'HARI NATAL TELAH TIBA','http://tutorial-website.blogspot.com/2007/12/hari-nataltelah-tiba.html','HARI NATAL TELAH TIBA','','');
d.add(1000,100,'Hari Ibu hari ibuku dan ibumu','http://tutorial-website.blogspot.com/2007/12/hari-ibu-hari-ibuku-dan-ibumu.html','Hari Ibu hari ibuku dan ibumu','','');

//WEBROLL
d.add(2000,3,'Jasa Pembuatan Website Murah','http://www.banditbatak.com/','','','http://h1.ripway.com/sinaga/gambar/people.gif');
d.add(2001,3,'Mahagana','http://mahagana.wordpress.com/','Mahasiswa Siaga Bencana','','http://h1.ripway.com/sinaga/gambar/people.gif');
d.add(2002,3,'Hanna','http://hikarianna.blogspot.com/','Hanna','','http://h1.ripway.com/sinaga/gambar/people.gif');


//FRIENDSTERROLL
d.add(3002,4,'My Friendster','http://profiles.friendster.com/123456','Its me lae','','http://h1.ripway.com/sinaga/gambar/user.gif');


//BAWAH
document.write(d);
d.closeAll();
d.openTo(104,true);
d.openTo(103,true);

//-->
</script>
</div>
   

Berikut ini penjelasan dari struktur menu Dtree yang ada pada langkah 3 di atas:
Menu Dtree terdiri dari 3 bagian

1. Menu Utama
2. Sub Menu, dan 
3. Item Menu.  

1. Main Menu yang bisa kita atau tambahkan secara umum berbentuk:

d.add(1,0,'Main Menu 1','fill 11','fill 12','fill 13','fill 14','fill 15');
d.add(2,0,'Main Menu 2','fill 21','fill 22','fill 23','fill 24','fill 25');

•  Angka 1 dan 2 yang berwarna merah menunjukkan ID main menu. Main menu 1 mempunyai ID=1, dst.
• Angka 0 yang berwarna biru menunjukkan main menu berada pada level ke 0, yaitu berada paling puncak.
  
• "Main Menu 1" dan "Main Menu 2" merupakan nama Main Menu yang bisa Anda buat sendiri. 
• Sedangkan fill 11, fill 12, dan seterusnya merupakan atribut dari main menu tersebut. Setiap atribut (fill) punya defenisi dan fungsi sendiri, yaitu:
  
  • Fill 11: merupakan alamat URL atau link halaman yang akan dituju jika Main Menu 1 diklik. Begitu pula fill 12 yang merupakan link atau URL halaman yang dituju jika Main Menu 2 diklik.
  • Fill 12 : merupakan tulisan yang akan muncul jika mouse digerakkan diatas Main Menu 1.
  • Fill 13 : merupakan alternatif text untuk menggantikan icon menu.
  • Fill 14 : merupakan alamat gambar yang dijadikan icon Main Menu 1.
  • Fill 15 : merupakan alamat gambar pengganti icon pada fill 14 jika Main Menu 1 diklik.
    

Toolbar ini sendiri masih dalam tahap pengembangan sehingga baru bisa digunakan dari Blogger in Draft. Jadi, Anda harus masuk login ke akun Blogger Anda melalui halaman http://draft.blogger.com.

<table>
<tr>
<td>ISI 1 TABEL</td>
</tr>
</table>

1. Tag <table></table> bertujuan untuk membentuk "bungkus" tabel secara keseluruhan. 
2. Tag <tr></tr> bertujuan untuk membentuk baris tabel.
3. Tang <td></td> bertujuan untuk membentuk kolom 
4. Kolom akan berada di dalam baris. Artinya, kita harus membuat baris dulu baru kemudian membuat kolom.
   
5. Sedangkan isi dari tabel kita tuliskan di dalam tag  <td></td>

Jadi, jika kita ingin menambah kolom baru pada tabel tersebut, cukup tulis saja stuktur (kode) mulai tag  <td> sampai </td>. Sehingga bentuknya menjadi:
<table>
<tr>
<td>ISI 1 TABEL</td><td>ISI 2 TABEL</td>
</tr>
</table>

Selanjutnya, jika kita ingin menambah baris baru, cukup tulis lagi struktur (kode) mulai tag <tr> sampat </tr>. Sehingga bentuknya menjadi:

<td> sampai </td>. Sehingga bentuknya menjadi:
<table>
<tr>
<td>ISI 1 TABEL</td><td>ISI 2 TABEL</td>
</tr>
<tr>
<td>ISI 3 TABEL</td><td>ISI 4 TABEL</td>
</tr>
</table>

Nah, supaya tabel tersebut bisa terlihat pada halaman blog, maka kita harus membuat border dari tabel tersebut:. Caranya cukup menambahkan kode yang berwarna biru seperti di bawah ini:

<table border="2">
<tr>
<td>ISI 1 TABEL</td><td>ISI 2 TABEL</td>
</tr>
<tr>
<td>ISI 3 TABEL</td><td>ISI 4 TABEL</td>
</tr>
</table>

border="..." tersebut merupakan atribut digunakan untuk mengatur tabel yang nilainya adalah pixel. Beberapa atribut lain yang bisa kita gunakan antara lain:

1. cellspacing : merupakan atribut untuk mengatur jarak antar sel. Misalnya jarak sel pada baris 1 kolom 1 dengan dengan sel baris 1 kolom 2. Penulisannya adalah:
   <table cellspacing="2">...</table>
2. cellpadding : merupakan jarak tulisan atau isi sel dari pinggir sel. Tujuannya agar isi atau tulisan pada tabel tersebut tidak mepet pada pinggir atau border tabel. Penulisannya adalah:
   <table cellpadding="2">...</table>
3. bgcolor : merupakan atribut untuk mengatur warna background dari tabel. Isinya adalah kode-kode warna. Contoh penulisannya:
   <table bgcolor="#00FF00">...</table>
4. align : merupakan atribut untuk mengatur posisi tabel. Nilai dari atribut ini adalah:
   
   • center : agar berada ditengah-tengah halaman.
     
   • left : agar berada disebelah kiri halaman.
   • right: agar berada disebelah kanan halaman.
   Contoh penulisannya adalah :
   <table align="left">...</table>
   
5. bordercolor : untuk mengatur warna border tabel. Nilainya adalah pixel. Contoh enulisannya adalah:
   <table bordercolor="#0000FF">...</table>
6. width: untuk mengatur lebar tabel. Nilainya adalah pixel atau persen (%). Contoh penulisannya:
   <table width="300">...</table>
7. height : untuk mengatur tinggi tabel. Nilainya adalah pixel atau persen (%). Contoh penulisannya:
   <table height="150">...</table>

Contoh penggunaan keseluruhan dari atribut tersebut adalah:

<table align="left" border="2" bordercolor="#0000FF" height="150" width="300" bgcolor="#00FF00" cellpadding="2" cellspacing="2">
<tr>
<td>ISI 1 TABEL</td><td>ISI 2 TABEL</td>
</tr>
<tr>
<td>ISI 3 TABEL</td><td>ISI 4 TABEL</td>
</tr>
</table>

Marquee sebenarnya sebuah tag HTML yang digunakan untuk membuat konten (isi) website menjadi bergerak. Kali ini kita hanya akan belajar membuat teks berjalan saja. Secara sederhana, tag marquee tersebut ditulis dalam bentuk:


Secara otomatis, tulisan “TEXT HERE” yang dibungkus oleh tag marquee tersebut akan bergerak pada website kita.
Agar tulisan berjalan yang kita buat tersebut lebih menarik, kita bisa lakukan pengaturan terhadap beberapa atribut tag marquee. Atribut-atribut yang dimaksud diantaranya:

1. Behavior , yaitu atribut untuk mengatur perilaku tulisan. Nilainya adalah:
   
   • Scroll : teks/tulisan akan berjalan berulang kali. Makdusnya adalah setelah berjalan 1 kali, maka akan muncul kembali untuk berjalan lagi.
   • Slide : teks/tulisan akan berjalan hanya 1 kali. Setelah itu berhenti.
   • Alternate : teks/tulisan akan berjalan bolak balik, setelah dari kiri ke kanan kemudian berbalik dari kanan ke kiri (atau sebaliknya).
   Contoh :
   <marquee behavior="alternate">TEXT HERE</marquee>
   Maka hasilnya menjadi:
   TEXT HERE
   
2. Direction, merupakan atribut yang mengatur arah gerak tulisan. Nilainya adalah:
   
   • Right: agar tulisan berjalan ke kanan
   • Left: agar tulisan berjalan ke kiri
   • Down: agar tulisan berjalan ke bawah
   • Up: agar tulisan berjalan ke atas.
   Contoh:
   <marquee behavior="scroll" direction="right">TEXT HERE</marquee>
   Maka hasilnya menjadi:
   TEXT HERE
   
3. Scrollamount, merupakan atribut yang mengatur kecepatan tulisan berjalan. Nilanya berupa angka. Semakin besar angkanya, maka kecepatannya akan semakin besar pula.
   Contoh :
   <marquee behavior="alternate" direction="right" scrollamount="30">TEXT HERE</marquee>
   Maka hasilnya menjadi:
   TEXT HERE
   
4. Onmouseover, merupakan atribut yang mengatur perilaku tulisan jika mouse diletakkan di atasnya. Misalnya kita ingin tulisan akan berhenti jika muse diletakkan diatasnya, maka bentuknya adalah :
   onmouseover="this.stop()"
   Contoh:
   <marquee behavior="alternate" direction="right" scrollamount="30" Onmouseover="this.stop()">TEXT HERE</marquee>
   Maka hasilnya menjadi:
   TEXT HERE
   
5. Onmouseout, merupakan atribut yang mengatur perilaku tulisan jika mouse tidak diletakkan di atasnya. Misalnya kita ingin membuat tulisan yang berhenti pada contoh di atas menjadi bergerak kembali, maka bentuknya adalah:
   onmouseout="this.start()"
   Contoh:
   <marquee behavior="alternate" direction="right" scrollamount="30" Onmouseover="this.stop()" onmouseout="this.start()">TEXT HERE</marquee>
   Maka hasilnya menjadi:
   TEXT HERE
   

Selain atribut-atribut utama di atas, sebenarnya masih banyak lagi atribut untuk marquee. Pembaca mungkin bisa melihatnya dengan menggunakan Macromedia Dreamweaver. Atribut-atribut untuk tag marquee lainnya bisa berupa atribut tag HTML biasa, sepertu style, width, height, align, dan lain sebagainya.
Contoh:
<marquee behavior="alternate" direction="right" scrollamount="30" bgcolor="#0000FF" width="50%">TEXT HERE</marquee>
Maka hasilnya menjadi:
TEXT HERE

UNTUK BLOGSPOT:
A. Backup Posting (tulisan) + Komentar:

1. Login pada akun blogspot Anda. Pada dasbor, klik link menu Pengaturan.  
2. Kemudian klik subtab Dasar.  
3. Pada bagian Alat Blog, klik link "Ekspor Blog". Selanjutnya akan muncul bagian "Ekspor blog Anda". Silahkan klik tombol "Unduh Blog" untuk men-download backup-an posting dan komentar blogspot Anda.
4. Jika Anda ingin mengembalikan atau meng-upload posting dan komentar yang di-backup tadi, caranya adalah dengan mengklik link "Impor Blog" yang ada pada langkah 3 di atas.

B. Backup Template

1. Login pada akun blogspot Anda. Pada dasbor, klik link menu Tata Letak
2. Kemudian piilih subtab Edit HTML.
3. Pada bagian Backup/Restore Template, klik link Download Template Lengkap untuk mem-backup template blogger Anda.
4. Jika Anda ingin mengembalikan template tadi, silahkan klik tombol Browse dan pilih backup template yang Anda download seperti pada langkah 3, kemudian klik tombol Unggah.

UNTUK WORSPRESS CMS:
A. Backup Posting (tulisan) + Komentar:

1. Login ke akun Wordpress Anda. Kemudian klik menu Export yang ada pada bagian Tools.
2. Selanjutnya klik tombol Download Export File. Yang bisa kita backup adalah posts (artikel yang kita tulis, pages, comment, custom fields, categories, dan tags.
3. Jika ingin mengembalikan (restore) data tersebut, silahkan klik tombol Import yang juga ada pada bagian Tools. 
4. Selanjutnya pilih "Wordpress" untuk meng-upload data backup-an yang kita simpan dari langkah 2 tadi. Salah satu yang menarik adalah bahwa kita juga bisa meng-import konten (posting dan komentar) dari provider lain seperti Blogspot (Blogger). Artinya, backup-an yang Anda peroleh dari langkah 3 bagian A pada Blogspot di atas juga bisa Anda import ke dalam Wordpress CMS Anda.

B. Backup File Wordpress CMS:
Untuk contoh bagaimana cara backup file website Wordpress CMS, kita akan gunakan Wordpress CMS yang disimpan di hosting gratis Www.000webhost.Com. Untuk itu, ada baiknya pembaca membaca terlebih dahulu artikel mengenai layanan hosting gratis di Www.000webhost.Com. Klik di sini.

1. Login pada akun hosting Anda. Dalam hal ini kita contohkan pada Www.000webhost.Com.
2. Setelah masuk ke halaman control panel, klik menu Backups yang ada pada bagian Files.
   
   
   
3. Selanjutnya klik tombol Generate New Fresh Backup. Setelah itu Anda akan diminta untuk menunggu sampai proses backup selesai (sekitar 5 menit).
   
   
   
4. Jika backup selesai, pada tabel yang ada di bagian "Files on Remote Backup Server" akan terlihat hasil backup file website Wordpress Anda.
5. Anda juga akan melihat muncul tombol baru bernama "Make Backups Available for Download". Jika Anda ingin men-download hasil backup-an tersebut ke komputer Anda, klik terlebih dahulu tombol tersebut agar backup-an website Anda bisa di-download. Jika berhasil, maka pada tabel yang ada di bagian "Backups Available for Download" akan terlihat backup-an file website Anda. Silahkan klik nama file tersebut untuk men-download-nya.
   
   
   
   
   
   
   
6. File yang Anda download tersebut bisa Anda upload lagi jika Anda ingin memindahkan file website dari komputer ke hosting online.

C. Backup Database Website:
Pada bagian A, Anda hanya akan mem-backup post, pages, comment, custom fields, categories, dan tags. Namun, langkah paling aman untuk melindungi website Wordpress Anda adalah dengan mem-backup databasenya karena database ini wajib diperlukan untuk menjalankan website Wordpress CMS Anda. terutama jika satu waktu website Anda rusak secara keseluruhan (seperti kasus hacking yang saya alami).

1. Masuk ke akun hosting Anda.
2. Klik menu phpMyAdmin.
3. Jika sudah masuk ke dalam halaman phpMyAdmin, pilih database website yang ingin Anda backup. Selanjutnya klik menu Export yang ada di bagian atas.
4. Pada bagian "Export", pilih "SQL", pada bagian "Structure" silahkan centang semua pilihan.
5. Centang bagian "Save as file", kemudian klik tombol Go.
   
   
6. Jika Anda ingin menyimpan database tersebut ka dalam localhost, silahkan pilih menu Import pada halaman phpMyAdmin di localhost Anda.
   

1. Silahkan login pada akun Facebook Anda.
2. Buka profil Facebook Anda dengan mengklik menu Profile disebalah kiri atas.
3. Di sebelah pojok kiri bawah Anda akan melihat sebuah Link dengan nama "Create a Profile Badge". Selanjutnya, klik link tersebut.
   
   
   
4.  Anda akan masuk pada halaman penambahan Profile Badge Facebook.  Elemen profile Facebook yang akan ditampilkan pada website biasanya disebut Badge. Buatlah sebuah Badge baru dengan mengklik tombol menu Create a New Badge yang ada di sebelah kanan atas.
   
   
   
5. Anda akan masuk pada bagian penambahan Badge baru. Silahkan pilih layout badge profile Facebook yang Anda inginkan beserta item atau informasi apa saja yang ingin ditampilkan. Jika sudah, klik tombol Save.
   
   
   
6. Anda akan kembali pada halaman profile Badge. Di sana hanya tersedia 3 pilihan menu menambah Badge tersebut, yaitu untuk Blogger, TypePad, dan Other. Jika Anda ingin menambahkan pada website biasa (selain Blogger dan TypePad, silahkan klik tombol menu Other. Akan muncul kode profil badge di bagian bawah menu tersebut.
   
   
   
   Copy pastelah kode tersebut pada bagian website Anda dimana Anda ingin menampilkan profil Facebook. Misalkan jika ingin menambah pada Wordpress CMS, maka:
   
   • Masuklah pada Dashbord Wordpress 
   • Selanjutnya klik menu Widgets pada bagian Appearance yang ada di sebelah kiri. Pilih widget Text.
   • Copy paste kode profil Badge yang  Anda dapat tadi pada widget Text tersebut. Lalu Save.
     
7.  Jika Anda ingin menambahkan pada Blogspot (Blogger), Anda cukup mengklik tombol menu "Blogger" yang ditunjukkan pada langkah 6 di atas. Anda akan dibawa ke halaman penambahan Profile Badge Facebook pada Blogger. Silahkan pilih blog Anda dan pilih nama widgetnya. Cara yang hampir sama bisa Anda lakukan pada TypePad.
   
   
   

Catatan:
Langkah 6 di atas juga bisa Anda lakukan pada Blogspot. Caranya:

1. Pada dasbor, klik link menu Tata Letak, kemudian klik subtab menu Elemen Halaman. 
2. Silahkan klik link Tambah Gadget yang ada pada sidebar dimana Anda ingin menampilkan profil Facebook.
3. Akan muncul window penambahan gadget. Silahkan pilih HTML/Javascript. Selanjutnya copy paste kodenya pada kotak HTML/Javascript tersebut, lalu Simpan.