You are on page 1of 96

MODUL PELATIHAN

PEMBUATAN WEBLOG
ON-LINE

23 – 24 januari 2009

SMAN 1 KKITANGAN
Panduan WeBlog pada Blogspot
Panduan pembuatan Weblog yang sederhana ini kami persembahkan pada Kegiatan Pelatihan
Pembuatan WeBlog bagi Bapak / Ibu Pengajar di SMAN 1 Kandangan.

1. Tentang Blog
Blog atau weblog adalah sebuah website pribadi yang isinya bersifat personal atau pribadi sesuai
dengan pribadi si pembuat blog tersebut dan juga berisi link-link ke website lain ataupun link ke
dalam artikel dalam blog itu sendiri. Blog bisa berisi hal-hal dan kejadian yang dialami oleh
blogger baik itu yang berhubungan dengan dunia internet atau kejadian yang dialami di
kehidupan nyata sehari-hari, blogger seringkali mendokumentasikan kejadian yang mereka alami
kedalam blog sehingga blog juga sering disebut sebagai jurnal pribadi, blogger juga seringkali
berbagi ilmu melalui blog mereka dan berinteraksi dengan para pengunjung melalui media yang
memungkinkan pengunjung untuk meninggalkan komentar atau saling tukar alamat email,
sehingga terjadi komunikasi oleh sebab itu blog juga merupakan sebuah media sosial
Blog mempunyai fungsi yang sangat beragam selain sebagai sebuah catatan harian, media
publikasi dalam sebuah kampanye politik, sampai dengan program-program media dan
perusahaan-perusahaan. Sebagian blog dipelihara oleh seorang penulis tunggal, sementara
sebagian lainnya oleh beberapa penulis. Banyak juga weblog yang memiliki fasilitas interaksi
dengan para pengunjungnya, yang dapat memperkenankan para pengunjungnya untuk
meninggalkan komentar atas isi dari tulisan yang dipublikasikan, namun demikian ada juga yang
yang sebaliknya atau yang bersifat non-interaktif.
Situs-situs web yang saling berkaitan berkat weblog, atau secara total merupakan kumpulan
weblog sering disebut sebagai blogosphere. Bilamana sebuah kumpulan gelombang aktivitas,
informasi dan opini yang sangat besar berulang kali muncul untuk beberapa subyek atau sangat
kontroversial terjadi dalam blogosphere, maka hal itu sering disebut sebagai blogstorm atau
badai blog
Blog atau weblog pertama kali dikenalkan oleh Jhon Barger pada tahun 1997, dari awal sejak
pertama kali istilah blog digunakan sampai sekarang, blog atau weblog telah berkembang
menjadi sebuah multimedia bahkan menjadi sebuah sarana untuk menghasilkan uang dan bisa
menjadi sebuah aset bagi pemilik blog atau weblog tersebut, sekarang banyak blogger (blogger
adalah sebutan bagi si pembuat blog) yang mempunyai penghasilan atau uang dari aktifitasnya di
dunia online alias ngeblog.
Media blog pertama kali dipopulerkan oleh Blogger.com, yang dimiliki oleh PyraLab sebelum
akhirnya PyraLab diakuisi oleh Google.com pada akhir tahun 2002 yang lalu. Semenjak itu,
banyak terdapat aplikasi-aplikasi yang bersifat sumber terbuka yang diperuntukkan kepada
perkembangan para penulis blog tersebut.

2. Jenis – Jenis Blog


Blog politik
Tentang berita, politik, aktivis, dan semua persoalan berbasis blog (Seperti kampanye).
Blog pribadi
Disebut juga buku harian online yang berisikan tentang pengalaman keseharian seseorang,
keluhan, puisi atau syair, gagasan jahat, dan perbincangan teman.
Blog bertopik
Blog yang membahas tentang sesuatu, dan fokus pada bahasan tertentu
Blog kesehatan
Lebih spesifik tentang kesehatan, blog kesehatan kebanyakan berisi tentang keluhan pasien,
berita kesehatan terbaru, keterangan-ketarangan tentang kesehatan, dll.
Blog sastra
Lebih dikenal sebagai litblog (Literary blog).
Blog perjalanan
Fokus pada bahasan cerita perjalanan yang menceritakan keterangan-keterangan tentang
perjalanan/traveling.
Blog riset
Persoalan tentang akademis seperti berita riset terbaru.
Blog hukum
Persoalan tentang hukum atau urusan hukum; disebut juga dengan blawgs (Blog Laws).
Blog media
Berfokus pada bahasan kebohongan atau ketidakkonsistensi media massa; biasanya hanya untuk
koran atau jaringan televisi
Blog agama
Membahas tentang agama
Blog pendidikan
Biasanya ditulis oleh pelajar atau guru sebagai media belajar & pembelajaran.
Blog kebersamaan
Topik lebih spesifik ditulis oleh kelompok tertentu.
Blog petunjuk (directory)
Berisi ratusan link halaman website.
Blog bisnis
Digunakan oleh pegawai atau wirausahawan untuk kegiatan promosi bisnis mereka
Blog pengejawantahan
Fokus tentang objek diluar manusia; seperti anjing
Blog pengganggu (spam)
Digunakan untuk promosi bisnis affiliate; juga dikenal sebagai splogs (Spam Blog)

3. Cara membuat blog


Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih
dahulu, oleh karena itu sebelum membuat sebuah weblog maka kita terlebih dahulu
mendaftarkan diri pada free blog provider (penyedia hosting/domain blog gratis). Free blog
provider sangatlah banyak terdapat di internet dan beberapa yang populer saat ini adalah
http://www.blogger.com, http://www.wordpress.com serta http://blogsome.com.
Dalam kesempatan kali ini kami akan mengulas tentang Bagaimana Cara Pembuatan Blog di
http://www.blogger.com,
Membuat Blog dengan bantuan wizard dari www.blogger.com memberikan kemudahan kepada
kita, hanya dengan 3 langkah kita sudah mampu untuk menciptakan sebuah weBlog yang dapat
disaksikan oleh semua netter yang ada di dunia.

Perhatikan gambar untuk memulai menciptakan weBlog sendiri.

Aktifkan Web Browser kemudian masukkan alamat website http://www.blogger.com/start, kita


akan melihat gambar seperti gambar di bawah ini. Silahkan lakukan langkah-langkah berikut ini:
Gambar 01
Pada tampilan Gambar 01, kita mengganti Language menjadi Indonesia sehingga tampilannya
akan berubah menjadi berbahasa Indonesia.
1. Klik tanda anak panah yang bertuliskan "CIPTAKAN BLOG KITA "
Selanjutnya kita masukkan Nama Pengguna (e-mail) dengan e-mail yang kita miliki.

Gambar 02
2. Isilah Alamat Email dengan alamat email kita (tentunya yang valid)

Jika kita belum memiliki account gmail, maka kita buat akun
pada gmail terlebih dahulu. Klik buat account baru sekarang
(Gambar 03)
Ikuti langkah – langkah pembuatan e-mail menggunakan
gmail.com, sampai berhasil memiliki akun berupa userid@gmail.com.
Selanjutnya ulangi sebagaimana gambar 02 dengan memasukkan kembali e-mail
userid@gmail.com dan password, jika berhasil maka tampilananya seperti gambar di
bawah ini ;

Gambar 03
3. Isi Nama Tampilan dengan nama yang ingin kita tampilkan
4. Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda tik/cek pada kotak di
pinggir tulisan Kita menerima Persyaratan dan Layanan.

Gambar 04

5. Klik gambar anak panah yang bertuliskan "LANJUTKAN"


6. Tuliskan judul blog yang kita inginkan (nanti bisa di rubah lagi) pada form Judul Blog
7. Tulis nama situs kita pada form Alamat Blog (URL)

Gambar 05

8. Tulislah tulisan verifikasi yang ditampilkan pada form Cek Ketersediaan, jika sudah
selesai klik gambar panah yang bertuliskan "LANJUTKAN".
9. Pilihlah gambar (template) yang kita inginkan (nanti bisa di rubah lagi), kemudian klik
gambar anak panah yang bertuliskan "LANJUTKAN"
Gambar 06

10. Setelah keluar tulisan "Blog Kita sudah jadi ! ".

Gambar 07

11. Klik gambar panah bertuliskan "MULAI BLOGGING".


Gambar 08

12. Silahkan kita tuliskan sesuai dengan visi dan Misi kita, untuk melihat hasil dari
POSTING kita maka klik tombol Lihat Blog.

4. CARA MEMPOSTING ARTIKEL

Bagi yang mengalami sedikit kendala tentang tata cara memposting suatu artikel ke dalam blog,
maka kali ini akan dibahas tentang tata cara posting di www.blogger.com. Di dalam menu
posting ada beberapa toolbar yang bisa kita gunakan. Jika kita sudah terbiasa menggunakan
microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika
memposting suatu artikel, tapi mungkin tidak ada salahnya bila kami bahas sekilas tentang ini,
barangkali ada di antara kita yang masih bingung.

Toolbar yang ada ketika posting :

--> 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 penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di
edit, kemudian tekan tombol toolbar yang di inginkan

Bagi para pemula, biasanya kita bingung setelah daftar membuat blog dan berhasil maka apa yang
harus di isi (diposting) dalam sebuah blog. Isi (conten ) dari sebuah blog tentu saja terserah kepada si
pemilik blog itu sendiri, apakah mau di isi puisi, perjalanan hidup, teknik, ataupun apa saja. Nah di
sini kami menyarankan, isilah blog kita sesuai dengan misi kita The Writer Is Blogger dengan tujuan
untuk memotivasi bapak/ibu guru selalu memperbaharui informasi dan pengetahuan dalam
menunjang tugas profesionalnya dengan menulis, meningkatkan kemampuan bapak/ibu guru dalam
mempublikasikan tulisannya, meningkatkan informasi dan komunikasi antara guru dengan siswa,
dan akhirnya meningkatkan mutu proses pembelajaran siswa.
5. CARA SETTING BLOG
Bagi kita yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan
agar blog kita bisa di kenali mesin pencari (search engine) semisal Google, Yahoo, MSN dan
lain - lain. Beberapa hal yang harus di setting, silahkan ikuti langkah-langkahnya :
1. Silahkan Login ke www.blogger.com dengan user name (e-mail) dan password yang
telah dimiliki
2. Klik judul blog yang mau di setting
3. Klik Pengaturan, lalu klik Dasar. Beberapa form yang harus di isi pada menu Dasar :
• Judul isi dengan judul blog kita. Contoh : p-tiok’s blog
• Uraian isi dengan deskripsi blog kita. Contoh : disini kami menyarankan untuk
diisikan Staf Pengajar TIK (sesuai mata pelajaran) SMAN 1 Kkitangan Kediri
• Tambahkan blog Kita ke daftar kami? pilih ya agar setiap posting kita selalu
masuk di daftar Blogger.com.
• Biarkan mesin pencari menemukan blog Kita? pilih ya
• Tampilkan Editing Cepat di Blog Kita? pilih Ya
• Tampilkan Link Posting Email? Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-
apa
• Konten Dewasa? Pilih tidak. Kalau pilih ya berarti blog kita di anggap blog untuk
dewasa (semacam blog porno)
• Tampilkan Mode Compose untuk semua blog Kita? pilih Ya
• Aktifkan transliterasi? pilih Tidak, jika kita ingin ada button untuk mengubah
biasa ke huruf hindi (India), pilih ya jika sebaliknya)
• Klik tombol Simpan Pengaturan . Selesai

4. Klik Publikasikan untuk mengatur menu Publikasi :


• Alamat Blogspot isi dengan nama kita. Contoh : p-tiok.blogspot. Biasanya alamat
yang tercantum adalah langsung alamat blog kita.
• Klik tombol Simpan pengaturan. Selesai
5. Klik Format untuk mengatur menu format :
• Tampilkan pilih angka posting yang ingin kita tampilkan. Misal: Tampilkan 6
posting, berarti posting yang akan tampil di halaman blog kita adalah sebanyak enam
posting. Pilih posting (jangan hari) pada menu pulldown.
• Format Header Tanggal pilih model tanggal/bulan yang kita sukai, Format
tanggal/bulan ini akan selalu muncul diatas postingan kita.
• Format tanggal Index Arsip pilih model untuk peng-arsip-an yang kita kehendaki.
• Format Timestamp Pilih bentuk waktu yang kita sukai.
• Zona Waktu Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-
+7.00]Asia/Jakarta.
• Bahasa Pilih bahasa yang di inginkan.
• Tampilkan Field judul Pilih ya
atau tidakpun tidak apa-apa
• Tampilkan kolom link pilih ya, tapi sekitainya pilih tidak juga tidak apa-apa.
• Aktifkan perataan float pilih ya, tapi sekitainya mau pilih tidak juga tidak apa-apa
• Klik tombol Simpan Pengaturan. Selesai
6. Klik Komentar Untuk mengatur menu komentar :
• Komentar pilih tampilkan, ini agar artikel kita dapat di komentari oleh
pengunjung
• Siapa yang Bisa Berkomentar ? Pilih Siapa pun - termasuk Pengguna Anonim.
Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota
blogspot saja.
• Default Komentar untuk Posting pilih Posting baru memiliki komentar.
• Link balik Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada
yang memasang link pada artikel kita.
• Default Link Balik untuk Posting pilih Posting baru Memiliki Link Balik.
• Format Timestamp Komentar pilih format jam yg singkat. Contoh: 8.00 PM.
• Tampilkan komentar dalam sebuah window popup? pilih Ya. Supaya ketika di klik
oleh pengunjung, halaman blog kita tidak menghilang/tertimpa halaman komntar.
• Aktifkan moderasi komentar? pilih Tidak (sebaiknya).
• Tampilkan verifikasi kata untuk komentar? pilih Ya. ini di maksudkan agar
terhindar dari software robot dengan tujuan melakukan spam.
• Tampilkan gambar profil dalam komentar? pilih ya. Supaya gambar komentator yg
punya id blogger, dapat menampilkan fotonya.
• Email Pemberitahuan Komentar isi dg alamat email kita, ini di maksudkan agar
setiap ada yang berkomentar pada artikel kita, kita dapat kiriman email dari
blogger.com sebagai pemberitahuan.
• Klik tombol Simpan Pengaturan. Selesai
7. Klik Arsipkan Untuk mengatur menu Arsipkan :
• Frekuensi Arsip pilih Bulanan.
• Aktifkan Halaman Posting? pilih ya.
• Klik tombol Simpan Pengaturan . Selesai.
8. Klik Fedd Situs untuk mengatur menu feed situs :
• Izinkan Feed Blog pilih Penuh.
• Posting URL Pengubahan Arah Feed di isi dengan alamat feed penggati semisal
alamat feed dari feed burner, jika belum punya, di kosongkan saja.
• Footer Feed Posting Silahkan di isi dengan kode iklan yang kita punya, misal kode
iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.
• Klik tombol Simpan Perubahan. Selesai
 
6. Memilih Template
Bagi yang sudah melakukan beberapa settingan seperti posting terdahulu, langkah selanjutnya
yang perlu dilakukan adalah memilih template, namun tidak mutlak harus berurutan boleh
dilakukan sesuai dengan kebutuhan kita masing – masing.

Sekilas tentang template


Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya
(misal: gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program
atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang kita lihat sekarang, seperti banner
diatas, background warna putih, kolom-kolom di samping kanan, serta semua yang kita lihat
sekarang adalah salah satu bentuk dari desain template.
Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik
untuk dilihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-
lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang.

Langkah – langkah pemilihan template di www.blogger.com;


• Login terlebih dahulu seperti biasa dengan memakai user name dan password
• Klik ” Tata Letak ” kemudian klik "Pilih Template Baru"
• Klik pada salah satu template yang telah disediakan. Sebelum memutuskan dalam
memilih "template" ini, sebaiknya kita lihat terlebih dahulu satu persatu contoh layout
yang di sediakan dengan cara meng-klik tulisan "pratayang template". Jika di rasa sudah
menemukan yang paling kita sukai, silahkan klik tulisan "Simpan template" yang ada di
sebelah kanan atas.

Mungkin kita pernah mengunjungi beberapa blog di internet yang menggunakan


blogger.com (blogspot), akan tetapi template yang di gunakan tidak ada dalam pilihan
ketika memilih template. Ini ada kemungkinan bahwa template yang di gunakan adalah
template buatan bukan dari blogger sendiri.
Di internet banyak sekali situs-situs yang memberikan template secara gratis untuk di
pakai di Blogger (blogspot), Jika ingin melihat-lihat berbagai template buatan bukan dari
blogger.com, bisa searching di Google. Tapi perlu di ketahui, karena blogger beta (baru)
terbilang masih sangat baru sehingga penyedia template gratis kebanyakan menyediakan
template untuk di pakai di template classic..
 

7. Mengatur Huruf dan Warna


Untuk para blogger baru, kita akan menikmati fasilitas baru dari blogger.com, yaitu kita bisa
mengatur jenis font (huruf) serta warna font dengan sangat mudah. Di bawah adalah langkah
untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan
untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and
Colors", maka akan muncul beberapa pengaturan; (ini khusus untuk template "minima")

1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang
ada di sebelah kanan yang di sukai
2. Text Color --> pengaturan warna huruf dari posting-an
3. Link Color --> pengaturan warna huruf yang di link
4. Blog Title Color --> pengaturan warna huruf judul Blog
5. Blog Description Color --> pengaturan warna huruf deskripsi blog
6. Post Title Color --> pengaturan warna huruf judul posting-an
7. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis
pemisah
8. Sidebar Title Color --> pengaturan warna huruf judul yang kita di sidebar (kolom
samping)
9. Sidebar Title Color --> pengaturan warna huruf yang ada di sidebar(kolom samping)
10. Visited link Color --> pengaturan warna huruf link ketika pengunjung mengarahkannya
ke tulisan yang mengandung link
11. Text Font --> pengaturan jenis huruf,berlaku untuk huruf hasil dari posting-an ataupun
huruf yang ada di sidebar
12. Sidebar Title Font --> pengaturan jenis huruf untuk judul yang ada di sidebar serta
tanggal postingan
13. Blog Title Font --> pengaturan jenis huruf Judul blog
14. Blog Description Font --> Pengaturan jenis huruf dekripsi blog
15. Post Footer Font --> pengaturan jenis huruf footer (contoh : posted by )
16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai

Untuk template – template selain template "minima", pada dasarnya sama, hanya saja ada
sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang dirubah, kita
cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.
 

8. Pasang Image Pada Judul Artikel


IMAGE. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan.
Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat, walaupun tentu
saja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di akses oleh para
pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para
pengunjung akan menjadi malas untuk berkunjung.
Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan,
antara lain :

• Langkah pertama
Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di
inginkan. Jika kita mahir dalam program grafik & design semisal Adobe Photoshop
ataupun Coreldraw, bisa membuat sendiri dengan bentuk yang sesuka kita. Tapi kalau
tidak belum bisa gunakan layanan di internet.
• Langkah kedua
langkah kedua yaitu kita harus upload image atau logo tersebut, bisa ke blogger ataupun
ke hosting lain. Misalkan biasanya kita menyimpan setiap image yang kita punya di
www.photobucket.com.
• Langkah ketiga
Langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di
inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak
dipandang mata. Misalkan kita mempunyai URL image seperti ini :
http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif
Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan
kode :
<img src="
"URL image
e">
Sehingga kod
denya akan jadi seperti inni :
<img
src="http://i162.ph
hotobucket.com/alb /rohman24/kupu2.gi
bums/t253/ if">
dan yang akan
n tampil adaalah image dengan
d ukuraan yang sebeenarnya. conntoh image
teersebut adalaah seperti inii :

teentu saja bilaa kita memajjang image sesuai


s ukuraan image yanng aslinya, inni menjadi
kuurang enak dilihat
d jika dipadukan
d deengan tulisann judul postiing. Untuk mengakaliny
m a
kita bisa men
nambahkan beberapa
b atriibut kedalam
m kode imagee tersebut, anntara lain atrribut
width="..." untuk lebar, height=
="..." untu
uk tinggi, daan border="
"..." untuk
k
bingkai, dan dalam
d hal inni yang dipakkai adalah boorder dengann nilai 0 (noll) agar terhinndar
dari setting teemplate yangg memakai nilai
n border. Kita ambil contoh
c kode image tadi jadi
j
seeperti ini :

<img
src="http://i162.ph
hotobucket.com/alb
bums/t253/
/rohman24/kupu2.gi
if"
width="45"
" hight="4
45" border="0">
seehingga imaage yang tadii akan berubah jadi seperrti ini :
• Langkah keempat
Langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke
dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :
Untuk yang memakai template klasik :
1. Login ke blogger dengan user id dan password
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy dan paste seluruh kode HTML ke dalam notepad ini dimaksudkan untuk
mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode
template
5. Cari kode berikut pada kode HTML kita :
<$BlogItemTitle$>
cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada
bar menu browser lalu klik Find kemudian tuliskan kode diatas tadi lalu klik tombol
Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode
<$BlogItemTitle$> adalah merupakan kode untuk menampilkan Judul Postingan,
maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau
sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul
posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah
kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Kita
ambil contoh kode image di simpan sebelum tulisan judul :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0">&nbsp;&nbsp;<$BlogItemTitle$>
pemasangn kode &nbsp;&nbsp; adalah untuk memberi jarak spasi antara image dengan
tulisan judul, sebab jika tidak menambahkan kode &nbsp; maka image dengan tulisan
akan bersatu walaupun kode image dengan kode judul di tulis ada jarak spasinya.
6. Klik tombol Preview untuk melihat perubahan yang dilakukan
7. Jika sudah OK, klik tombol Save Settings
8. Selesai
Maka setiap kita posting artikel, secara otomatis image yang kita pasang tadi akan muncul
tanpa harus di tuliskan kembali.

Untuk yang memakai template baru :


Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu
di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0">
kode image tersebut tag nya harus ditutup dengan tag penutup :
</img>
Sehingga kode image jadi bertambah menjadi :
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0"></img>
Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti
langkah berikut :
1. Login ke blogger dengan user id dan password
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Full Template
5. Silahkan save dulu template kita, ini untuk back up data apabila terjadi kesalahan editting
6. Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi
jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah
selanjutnya
7. Tunggu beberapa saat sampai proses selesai
8. Cari kode berikut pada template kita :
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
9. Sisipkan kode gambar yang kita miliki diantara kode :
<a expr:href='data:post.url'> dan kode <data:post.title/></a>
<b:else/>
Sehingga bila di satukan kodenya menjadi :
<a expr:href='data:post.url'> <img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0"></img>
&nbsp;&nbsp;<data:post.title/></a>
<b:else/>
10. Klik tombol PREVIEW untuk melihat perubahan
11. bila sudah OK, klik tombol SAVE TEMPLATE
12. Selesai

9. Upload Gambar dan Foto Profile


Agar posting artikel pada blog lebih menarik untuk dilihat, maka sebaiknya kita menyisipkan
gambar di antara postingan kita tersebut, di samping untuk lebih memperjelas apa yang kita
sampaikan. Misalkan kita sedang menerangkan sesuatu, maka dengan adanya gambar akan lebih
memperjelas maksud dari topik yang sedang kita jelaskan kepada para pembaca artikel kita.
Untuk itu ikutilah langkah – langkah untuk memasukan gambar atau istilah resminya yaitu
upload gambar, yaitu :

1. Klik Posts
2. Klik New Post (bila sebelumnya kita telah mempunyai postingan)

3. Klik toolbar yang bergambar seperti ini


4. Beri tanda titik/cek pada radio button pada pilihan Choose a layout, bila kita
menginginkan posisi gambar bisa di tempatkan di mana saja, pilih pada radio button
None, bila posisi gambar di sebelah kiri pilih left, bila ingin di tengah pilih Center, bila
ingin di kanan pilih Right.
Beri tanda tik/cek pada Image size, bila ingin gambar yang di upload hasilnya kecil pilih
Small, bila ingin sedang pilih Medium, bila ingin besar pilih Large
5. Beri tanda ceklis di samping tulisan Use this layout every time bila kita menginginkan
setiap upload gambar settingnya seperti semula
6. Tekan tombol Browse, lalu masukan gambar dari komputer kita yang ingin di upload.
7. Klik Add another image bila gambar yang ingin di upload lebih dari satu gambar
8. Klik tombol UPLOAD IMAGE, tunggu beberapa saat sampai proses upload selesai
9. Klik Tombol Done untuk mengakhiri proses upload

Setelah proses upload kita selesai, untuk melihat gambar tadi, klik tombol Compose. Nah disini
kita bisa melihat gambar yang kita upload tadi sekaligus dapat mengatur kembali ukuran dari
gambar ini, caranya yaitu klik gambar tersebut sampai gambar anak panah mouse kita berubah
menjadi gambar panah empat penjuru. Arahkan mouse pada garis samping gambar sampai
gambar mouse berubah menjadi panah dua arah, tekan tombol mouse lalu tahan dan gerakan
kearah kiri atau kanan untuk merubah lebar gambar, bila susah sesuai dengan yang kita inginkan
lepas tombol yang kita tahan tadi. Untuk mengatur tinggi gambar, arahkan mouse pada tepi
bawah atau atas gambar sampai gambar mouse berubah menjadi anak gambar panah dua arah,
tekan mouse lalu tahan kemudian gerakan mouse keatas atau kebawah untuk mengatur tinggi
gambar, lepaskan mouse bila ukuran gambar sudah sesuai dengan yang kita inginkan.

Nah sekarang bagaimana cara memasukan foto untuk mengisi Profile kita?, caranya sama seperti
langkah-langkah di atas, cuma ada sedikit perbedaan yaitu kita harus menghapus beberapa kode
tersebut. Jika foto kita sudah selesai di upload (langkahnya sama seperti di atas). Tekanlah menu
Edit HTML untuk melihat kode HTML dari foto kita tadi, copy / paste kode HTML tersebut
kedalam program notepad (agar lebih mudah) atau bisa juga ditulis di kertas. Kemudian klik
publish. Untuk memasukan foto kedalam Profile kita, silahkan ikuti langkah berikut:
1. Setelah upload gambar, klik menu Dasboard
2. Klik menu Edit Profile
3. Di dalam form - form isian profile ada tulisan Photo URL, nah disini paste kode HTML
yang telah kita copy tadi ke dalam notepad tapi jangan semuanya, yaitu yang di paste
adalah kode setelah tulisan [src="] yaitu link yang di mulai dengan [http://] dan berakhir
dengan [.jpg] atau [.jpeg]
4. Klik Save Profile, maka foto kita yang cantik dan ganteng sudah terpampang di blognya
dan bisa dilihat oleh seluruh dunia
5. Selesai
Sebenarnya ada cara lain untuk mengisi foto Profile kita, yaitu dengan cara mengupload
(memasukkan) foto kita pada hosting lain, dan baru kemudian link URL foto yang kita dapat dari
hosting tersebut di copy/paste ke profile yang ada di blogger/blogspot. Kita ambil contoh,
biasanya kita menyimpan foto-foto di http://photobucket.com. jika kita mau silahkan daftarkan
diri kita (gratis), apabila sudah selesai daftar dan bisa login, silahkan upload photo kita. Setelah
proses upload foto selesai, maka secara otomatis foto tersebut akan di beri PHOTO URL, copy
alamat link URL foto tersebut lalu paste di Profile Blogger.com pada kolom Photo URL setelah
itu tinggal SAVE CHANGES dan RE-PUBLISH.  
 
 
10. Membuat efek Marquee
Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau
berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya
karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat
tempat pada halaman blog.
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.

Atribut yang sering di gunakan adalah :


BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka
semajin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Contoh marquee dari gerakan :


<MARQUEE align="center" direction="right" height="200" scrollamount="2"
width="30%">
marquee dari kanan ke kiri
</MARQUEE>
hasilnya : …
ganti kata "left" dengan keinginan kita yaitu bisa : left, up, down .
Contoh marquee dari perilaku gerakan :

<MARQUEE align="center" direction="left" height="200" scrollamount="3"


width="70%" behavior="alternate">
marquee menurut perilaku
</MARQUEE>

hasilnya : …..

Contoh marquee dengan variasi huruf dan warna latar belakang :


<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE
BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">
</MARQUEE></b></FONT></div>
hasilnya :

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan
berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini
hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse kita ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2"


direction="up" width="50%" height="200" align="center">
silahkan tunjuk ke sini
</marquee>

hasilnya : ….
1 Membuat Yahooo ! Messenger Emoticons
11.

Apabilaa kita ingin menghiasi


m poostingannya dengan berbbagai ekspreesi dari yahoo, kita haruss tahu
source codenya,
c biaar kita bebas ngakak atauu cemberut selagi
s postingg. Silahkan copy
c source code
berikuut, sisipkan pada
p kata yanng sesuai deengan postinggan kita, kallo lagi sedih jangan di paasang
yangg lagi ngakakk,...

:)hhappy
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/1.
.gif" widt
th=18
height
t=18 borde
er=0>
:(sad
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/2.
.gif" widt
th=18
height
t=18 borde
er=0>
;)winnking
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/3.
.gif" widt
th=18
height
t=18 borde
er=0>
:Dbigg grin
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/4.
.gif" widt
th=18
height
t=18 borde
er=0>
;;)batting eyelaashes
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/5.
.gif" widt
th=18
height
t=18 borde
er=0>
>:D<bigg hug
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/6.
.gif" widt
th=42
height
t=18 borde
er=0>
:-/conffused
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/7.
.gif" widt
th=20
height
t=18 borde
er=0>
:xlove struck
s
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/8.
.gif" widt
th=18
height
t=18 borde
er=0>
:">blusshing
<img sr
rc="http:/
//us.i1.yim
mg.com/us.yimg.com/i
i/mesg/emo
oticons7/9.
.gif" widt
th=18
height
t=18 borde
er=0>
:Ptoongue
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/10.gif"
width
h=18 height
t=18 borde
er=0>
:--*kiss
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/11.gif"
width
h=18 height
t=18 borde
er=0>
=((broken heart
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/12.gif"
width
h=18 height
t=18 borde
er=0>
:-Osurrprise
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/13.gif"
width
h=18 height
t=18 borde
er=0>
X(aangry
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/14.gif"
width
h=34 height
t=18 borde
er=0>
:>ssmug
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/15.gif"
width
h=18 height
t=18 borde
er=0>
B--)cool
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/16.gif"
width
h=18 height
t=18 borde
er=0>
:-Swoorried
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/17.gif"
width
h=18 height
t=18 borde
er=0>
#:-Sw
whew!
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/18.gif"
width
h=34 height
t=18 borde
er=0>
>:))devil
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/19.gif"
width
h=18 height
t=18 borde
er=0>
:((crying
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/20.gif"
width
h=22 height
t=18 borde
er=0>
:))laugghing
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/21.gif"
width
h=18 height
t=18 borde
er=0>
:straightt face
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/22.gif"
width
h=18 height
t=18 borde
er=0>
/
/:)raised eyeebrow
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/23.gif"
width
h=18 height
t=18 borde
er=0>
=))roolling on the floor
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/24.gif"
width
h=30 height
t=18 borde
er=0>
O:-)aangel
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/25.gif"
width
h=30 height
t=18 borde
er=0>
:-B
Bnerd
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/26.gif"
width
h=24 height
t=18 borde
er=0>
=
=;talk to the hand
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/27.gif"
width
h=18 height
t=18 borde
er=0>
:o3pupp
py dog eyes ‐ New! 
<img src=
="http://us
s.i1.yimg.com/us.yim
mg.com/i/m
mesg/emotic
cons7/108.gif"
width
h=31 height er=0>  
t=18 borde
:‐??I don't know 
<img src=
="http://us
s.i1.yimg.com/us.yim
mg.com/i/m
mesg/emotic
cons7/106.gif"
width
h=40 height er=0>  
t=18 borde
 
%‐(not listtening 
<img src=
="http://us
s.i1.yimg.com/us.yim
mg.com/i/m
mesg/emotic
cons7/107.gif"
width
h=52 height er=0>  
t=18 borde
:@
@)pig 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/49.gif"
width
h=18 height er=0>  
t=18 borde
3:‐Ocow 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/50.gif"
width
h=18 height er=0>  
t=18 borde
:()mo
onkey 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/51.gif"
width
h=21 height er=0>  
t=18 borde
~:>ch
hicken 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/52.gif"
width
h=18 height er=0>  
t=18 borde
@};‐rose 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/53.gif"
width
h=18 height er=0>  
t=18 borde
%%‐good
d luck 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/54.gif"
width
h=18 height er=0>  
t=18 borde
**===flag 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/55.gif"
width
h=25 height er=0>  
t=18 borde
(~~)pum
mpkin 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/56.gif"
width
h=17 height er=0>  
t=18 borde
~O)ccoffee 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/57.gif"
width
h=18 height er=0>  
t=18 borde
*‐:)idea 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/58.gif"
width
h=30 height er=0>  
t=18 borde
8‐X
Xskull 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/59.gif"
width
h=18 height er=0>  
t=18 borde
=
=:)bug 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/60.gif"
width
h=20 height er=0>  
t=18 borde
>‐‐)alien 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/61.gif"
width
h=18 height er=0>  
t=18 borde
:‐Lfrusttrated 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/62.gif"
width
h=18 height er=0>  
t=18 borde
[‐O<prraying 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/63.gif"
width
h=18 height er=0>  
t=18 borde
 
$‐)moneyy eyes 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/64.gif"
width
h=18 height er=0>  
t=18 borde
:‐"whiistling 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/65.gif"
width
h=22 height er=0>  
t=18 borde
b‐(feeling beeat up 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/66.gif"
width
h=18 height er=0>  
t=18 borde
:)>‐peace sign 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/67.gif"
width
h=22 height er=0>  
t=18 borde
[‐Xshame on you 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/68.gif"
width
h=22 height er=0>  
t=18 borde
\:D/daancing 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/69.gif"
width
h=26 height er=0>  
t=18 borde
>:/bringg it on 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/70.gif"
width
h=23 height er=0>  
t=18 borde
;))heee hee 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/71.gif"
width
h=18 height er=0>  
t=18 borde
:‐@chatterbox 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/76.gif"
width
h=36 height er=0>  
t=18 borde
^:)^not w
worthy 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/77.gif"
width
h=32 height er=0>  
t=18 borde
:‐joh go on 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/78.gif"
width
h=26 height er=0>  
t=18 borde
(*)star 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/79.gif"
width
h=18 height er=0>  
t=18 borde
o‐‐>hiro 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/72.gif"
width
h=18 height er=0>  
t=18 borde
o==>billy 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/73.gif"
width
h=18 height er=0>  
t=18 borde
o‐+april 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/74.gif"
width
h=18 height er=0>  
t=18 borde
(%)yin
n yang 
<img src
c="http://u
us.i1.yimg
g.com/us.yi
img.com/i/
/mesg/emoti
icons7/75.gif"
width
h=18 height er=0>  
t=18 borde
Blogger Emoticons

<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif"> 
 
 
 
 
12. Pasang Jam di Sidebar
Agar blog kita tampak cantik dan menarik untuk di lihat, maka kita bisa memasang beberapa
aksesori blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa kita dapatkan secara
gratis pada situs http://www.clocklink.com. Silahkan ikuti langkah-langkah berikut;

1. Silahkan klik link berikut --> http://www.clocklink.com


2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your
Website ?
3. Silahkan kita melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog,
Animal, Animation, dll
4. Jika di rasa sudah menemukan model jam yang kita sukai, klik tulisan View HTML tag
yang berada di bawah jam yang kita sukai tadi
5. Klik tombol yang bertuliskan Accept
6. Pilih waktu yang sesuai dengan tempat kita di samping tulisan TimeZone. Contoh : untuk
indonesia bagian barat pilih GMT +7:00
7. Set ukuran jam yang kita sukai di samping tulisan size
8. Copy kode HTML yang di berikan pada notepad
9. Paste kode HTML yang di copy tadi pada tempat yang kita inginkan
10. Selesai

 
 
13. Pasang Buku Tamu di Sidebar
Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup
lumayan penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara
yang punya blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog,
maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang kita buat, yang pasti
isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar
iseng, atau ada juga merupakan kritikan terhadap isi blog kita, dan justru dengan adanya variasi
itulah membuat blog kita jadi hidup lebih hidup.
Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, kita
tinggal mencarinya pada mesin pencari semisal google ataupun yahoo, silahkan ketikan kata free
shoutbox atau free guestbook pada search engine masing – masing situs, maka dalam beberapa
detik saja akan muncul berpuluh-puluh situs penyedia buku tamu tadi, kita tinggal klik lalu coba
lihat – lihat. Tapi untuk menghemat waktu pencarian kita, maka di sini kita akan langsung
memberikan alamat situs penyedia buku tamu yang servernya lumayan bagus dan jarang sekali
mengalami down yakni http://www.shoutmix.com. Untuk caranya silahkan kita ikuti langkah-
langkah berikut ini :
1. Seperti biasa kita harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe,
free>>, ataupun dengan mengklik tulisan Sign Up, silahkan kita tulis data – data kita pada
form yang telah di sediakan.
2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan kita login dengan id
kita
3. Pada kolom yang berjudul Style, klik menu appearance.
4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur
tampilan buku tamu kita, silahkan pilih yang sesuai dengan keinginan kita. Jika sudah
selesai klik Save Setting.
5. Untuk mendapatkan kode HTML dari shoutbox kita, silahkan klik Use Shoutbox yang
berada di bawah menu Quick Start
6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan
Generated Codes, lalu simpan di program Notepad kita
8. Klik Log out yang berada di atas layar kita untuk keluar dari halaman shoutmix kita.
Silahkan close situs tersebut.
9. Selesai

Untuk menempatkan kode HTML shoutbox tadi pada blog kita, silahkan ikuti langkah-langkah
berikut ini;

Untuk blogger dengan template klasik :

1. Silahkan Login dengan id kita


2. Klik menu Template
3. Klik Edit HTML
4. Paste kode HTML shoutbox kita yang telah di copy pada notepad tadi di tempat yang kita
inginkan
5. Untuk jelasnya kita ambil contoh dengan shoubox milik kita, untuk menempatkannya
tinggal klik Edit pada browser lalu pilih Find (on this page).. kemudian tuliskan kata
buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah
ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.
6. Klik tombol Preview untuk melihat perubahan yang kita buat.
7. Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
8. Selesai

Agar shoutbox kita sesuai dengan ukuran lebar sidebar, kita bisa merubah ukuran lebar ataupun
tinggi dari shoutbox , caranya kita tinggal merubah angka Width (untuk lebar) dan Height (untuk
tinggi) dari dalam kode HTML shoutbox tersebut.
Untuk Blogger baru :
1. Silahkan Login dengan id kita
2. Klik menu Layout
3. Klik Page Element
4. Klik Add a Page Element
5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
6. Tuliskan judul shoutbox kita pada form title. Contoh : Buku tamu, atau my guestbook
atau apa saja yang kita suka
7. Copy paste kode HTML shoutbox kita di dalam form Content
8. Klik tombol Save Changes
9. Drag & Drop element yang telah kita buat tadi di tempat yang di sukai
10. Tekan tombol Save

dsfgsdfgsdf pikirkan adalah lagu yang kita sukai belum tentu di sukai oleh para pengunjung,
sehingga ini akan mengganggu kenyamanan bagi para pembaca blog ita.
Contoh

14. Cara Pasang Musik Pada Blog


Untuk memasang musik di blog, kita bisa memanfaatkan situs penyedia musik gratisan yang
banyak bertebaran di internet, yang penting kita jeli untuk mencarinya. Pada intinya ada tiga
jenis situs penyedia music, yaitu :
1. Situs tersebut menyediakan berbagai pilihan lagu yang bisa kita pilih sesuai dengan selera
kita
2. Situs tersebut tidak menyediakan lagu, tapi kita harus upload lagu dari komputer kita
3. Situs tersebut menyediakan berbagai pilihan lagu, atau bisa juga kita upload lagu dari
komputer
Tentu diantara ketiganya ada kelebihan dan kekurangannya. Keuntungan menggunakan jasa situs
yang pertama yaitu kita tidak perlu mempunyai lagu sendiri, kita tinggal pilih lagu yang di sukai
lalu ambil kode HTML nya kemudian masukan ke blog kita, prosesnya sangat cepat dan praktis.
Tapi kekurangannya yaitu terkadang lagu yang kita sukai tidak tersedia di situs tersebut.
Untuk situs kedua, keuntungannya yaitu kita bisa memasukan lagu yang kita sukai tanpa harus
tergantung dari situs tersebut jadi apapun lagunya pasti bisa yang penting ya kita harus
mempunyai file lagu yang harus di upload. Kekurangannya yaitu karena kita harus upload lagu
ke situs tersebut maka dalam proses upload biasanya memerlukan waktu yang cukup lumayan
lama, sehingga sedikit membosankan ketika melakukan proses upload juga tentunya biaya
berinternet kita jadi semakin bengkak.
Untuk situs ketiga, untuk saat ini kita baru mengetahui satu situs saja, tolong kepada para kita
yang mengetahui situs-situs yang masuk kategori ini untuk menginformasikan pada kotak
komentar agar di ketahui oleh para kita lainnya. Untuk situs ini kelebihannya ya kita lebih bisa
memilih, mau pake lagu yang tersedia atau mau upload juga bisa. tapi ada kekurangannya yaitu
tidak di sediakannya panel kontrol untuk para pengunjung, jadi lagu yang kita pasang tidak bisa
di apa – apakan oleh para pengunjung sehingga akan jalan dengan sendirinya, yang perlu kita
pikirkan adalah lagu yang kita sukai belum tentu di sukai oleh para pengunjung, sehingga ini
akan mengganggu kenyamanan bagi para pembaca blog ita.
Contoh yang pertama adalah memanfaatkan situs yang telah menyediakan berbagai lagu tanpa
harus upload terlebih dahulu, kita ambil contoh www.song2play.com. silahkan ikuti langkah-
langkah berikut :
1. Silahkan ketik alamat untuk menuju www.song2play.com
2. Masukan judul lagu yang kita inginkan pada search engine yang tersedia. Contoh : Hotel
California. Atau menuliskan nama penyanyi atau grup bandnya. Contoh the Eagle
3. Jika judul lagu belum muncul, biasanya ada tulisan Click here to get more Result. klik
aja tulisan tersebut
4. Setelah terlihat beberapa judul lagu, klik pada judul lagu yang sedang kita cari, secara
otomatis akan ditampilkan kontrol navigasi dan lagu yang dipilih tadi akan di
perdengarkan
5. Di pojok kiri bagian bawah ada kotak yang sudah di beri tanda centang, yaitu AutoStart,
Show song Title. AutoStart artinya ketika pengunjung mengunjungi blog kita, maka lagu
akan langsung play. Jika tidak mau langsung play alias memberi kesempatan kepada
pengunjung untuk memilih sendiri apakah mau mendengarkan lagu atau tidak, kita
hilangkan tanda centang tadi dengan cara mengkliknya
6. Show Song Title artinya pada panel navigasi akan di munculkan judul lagu yang di muat.
Jika tidak mau muncul ya hilangkan saja tanda centangnya
7. Copy seluruh kode HTML yang di sediakan pada text area, paste pada notepad. Silahkan
close window situs tersebut
8. Langkah selanjutnya yaitu kita tinggal masukan kode HTML yang diberikan tadi ke
dalam blog.
Jika kita ingin menyesuaikan lebar panel navigasi agar sesuai dengan sidebar blog kita, kita bisa
merubah nilai yang ada pada kode HTML lagu tersebut yaitu nilai width=...px. Contoh :
didalam kode tersebut ada kode width=310px, untuk memperkecilnya kita tinggal perkecil nilai
px nya. Contoh : width=200px.
Situs yang serupa dengan ini adalah www.songhere.com. Mungkin pemiliknya memang sama.
Langkah-langkah mendapatkan kode HTML dari situs ini mirip dengan langkah-langkah diatas,
Untuk yang di situs www.songhere.com ini tidak di sediakan pasilitas untuk memilih fasilitas
AutoStart atau tidak, jadi kalau kita memakainya akan langsung play tanpa harus di klik oleh
pengunjung, untuk mengakalinya kita harus mengganti sendiri kode nya, silahkan kita cari di
dalam kode lagu tersebut yang bertuliskan autostart=true, ganti tulisan true menjadi false
sehingga kode tadi akan menjadi seperti ini autostart=false, contoh hasil kode yang sudah
kita rubah adalah lagu dari white lion di atas, yang untuk menjalankannya harus di klik dulu
tombol play nya.
Contoh situs yang menyediakan berbagai lagu yang bisa kita pilih, sekarang contoh situs yang
harus meng upload lagu dari komputer kita salah satunya adalah www.tunefeed.com
Untuk langkah-langkahnya, silahkan ikuti seperti di bawah ini :
1. Ketik alamat untuk menuju situs www.tunefeed.com
2. Klik kotak di sebelah tulisan widget Color, pilih warna panel navigasi yang kita sukai
3. Klik tombol yang ada tulisan Click here to share your music
4. Klik tombol yang bertuliskan Add Music or Photos
5. Masukan file foto atau pun lagu yang kita miliki
6. Klik tombol upload
7. Sambil menunggu proses upload, kita isi data-data diri kita pada kolom yang di sediakan
8. Tunggu sampai proses upload selesai
9. jika proses upload selesai, kita akan di minta untuk mngecek email di berikan tadi
10. silahkan buka email dari www.tunefeed.com bila sudah sampai
11. Klik link ntuk melakukan aktivasi keanggotaan, nah dengan mengklik link tadi otomatis
kita sudah berada pada halaman acount kita
12. Klik tulisan Share This Tunefeed
13. Pilih volume yang diinginkan pada menu dropdown di samping tulisan Select Volume
14. Pilih mode player, mau autoplay atau tidak pada menu dropdown di samping tulisan
auto-play, sebaiknya pilih No
15. Copy seluruh kode yang di berikan pada text area kemudian paste di notepad
16. Klik tulisan Log Out untuk keluar dari halaman account kita
17. Silahkan close window browser kita
18. Tugas selanjutnya yaitu memasukan kode HTML yang sudah diberikan ke dalam blog.
Untuk caranya sudah kita bahas pada tulisan di atas.

Contoh panelnya yaitu seperti di bawah ini, silahkan klik tombol play untuk mengaktifkannya,
tunggu beberapa saat, loadingnya agak sedikit lama : Untuk contoh kategori yang ketiga, kita
bisa kunjungi www.iwebmusic.com, caranya hampir mirip dengan cara-cara diatas, disini kita
bisa pilih lagu yang di sediakan atau bisa juga meng upload lagu dari komputer. Cuma kita untuk
yang satu ini tidak mempunyai panel kontrol buat pengunjung yang ada hanya berupa banner
biasa dan bekerja auto start sehingga kita tidak bisa memberi contoh panelnya.

15. Ada Video di artikel


Memuat video diantara artikel, selain untuk memperindah artikel itu sendiri, juga video ini bisa
berfungsi sebagai media yang efektif dalam menyampaikan sesuatu kepada para pengunjung.
Terlebih apabila kita merupakan seorang pengajar yang dengan video ini dapat lebih
memperjelas tujuan kita di banding dengan hanya sebuah tulisan.
Untuk membuat sebuah video, kita bisa menggunakan situs layanan pembuatan video, salah
satunya adalah http://www.youtube.com. Ikuti langkah-langkah berikut ini :
1. Untuk daftar www.youtube.com silahkan ketik alamat tersebut di address bar
2. Setelah berada di situs tersebut, klik tulisan Sign Up yang berada pada layar bagian atas
3. Isi semua data diri kita pada form yang di sediakan, jangan lupa beri tanda tik/cek pada
kotak di samping tulisan --> Sign me up for the "Broadcast Yourself" email - I agree to
the terms of use and privacy policy. lalu klik tombol Sign Up
4. Setelah berhasil, kita diminta untuk veryfikasi, silahkan cek email yang kita daftarkan
tadi untuk melakukan veryfikasi
5. Jika email dari www.youtube.com sudah masuk, silahkan buka lalu klik tulisan Confirm
your email addres
6. Dengan mengklik tulisan tadi, secara otomatis kita sudah masuk kedalam halaman
account kita dan siap untuk upload video
7. Klik tulisan Upload Video yang berada pada layar sebelah atas
8. Isi form yang di sediakan
9. Klik tombol bertuliskan Continue Uploading
10. Klik tombol Browse, masukan file video yang ingin kita masukan
11. Beri tanda tik/cek pada radio button, public--> jika video kita bisa dilihat oleh umum.
Private -->Jika video kita bersifat pribadi yang hanya bisa di lihat oleh orang yang kita
tunjuk
12. Klik tombol Upload Video, tunggu beberapa saat sampai proses upload selesai
13. Setelah proses upload selesai, kita tinggal mengcopy kode HTML yang di berikan. lalu
paste pada Notepad
14. Silahkan klik Log Out untuk keluar dari situs tersebut
15. Selesai. kita sudah mempunyai video yang bisa di simpan pada artikel kita

Untuk memasukan kode video yang telah kita copy tadi, caranya yaitu kita tinggal posting artikel
seperti biasa lalu sisipkan kode tersebut pada tempat yang kita inginkan. Cuma saat copy dan
paste kode tersebut posisi posting harus pada Edit HTML jangan pada posisi Compose. Jika
sudah selesai memasukan artikel, Tinggal klik Publish dan video kita siap di lihat oleh para
pengunjung blog kita.

16. Cara Daftar di Search Engine


Tak di sangkal bahwa tujuan utama dari membuat blog antara lain adalah agar tulisan-tulisan kita
bisa di baca oleh orang lain atau pengunjung blog, semakin banyak yang berkunjung apalagi
memberikan komentar pada apa yang kita posting tentunya akan membuat hati kita merasa
senang dan bahagia. Akan tetapi tentunya tidak serta merta blog kita akan ramai di kunjungi, ini
memerlukan usaha publikasi yang gencar dari pemilik blog apabila ingin banyak pengunjungnya.
Banyak cara yang bisa kita lakukan agar blog kita bisa dikenal dan di kunjungi, antara lain
adalah dengan rajinnya kita blogwalking atau berkunjung ke blog milik orang lain, mendaftarkan
ke berbagai agregator, dan yang paling efektif adalah melalui search engine atau mesin pencari.
Bagi blogger pemula mungkin berangggapan bahwa apabila kita membuat website atau blog
akan secara otomatis terindeks atau berada pada list berbagai search engine, dan kenyataannya
tidaklah demikian. Seperti halnya sebuah sekolah, agar nama kita terdaftar pada buku daftar
siswa, tentunya kita harus melakukan pendaftaran terlebih dahulu ke sekolah tersebut. Sama
halnya dengan mesin pencari, agar blog kita terindeks pada mesin pencari, maka kita harus
terlebih dahulu mendaftarkan blog milik kita pada situs pemilik mesin pencari.
Mesin pencari tentu jumlahnya sangat banyak sekali, dan pada saat ini yang paling terkenal di
dunia adalah Google, Yahoo, serta MSN. Apabila blog kita ingin terindeks pada mesin pencari
mereka, maka kewajiban kita adalah mendaftarkan URL blog kita pada mesin pencari mereka.
Bila ada yang belum tahu ke manakah harus mendaftarkan blognya, maka silahkan simak tulisan
berikut :

Daftar Google Untuk mendaftar ke google, silahkan kita kunjungi


http://www.google.com/addurl/, apabila sudah berada pada halaman pendaftaran ada
beberapa langkah yang harus di lakukan, yaitu mengisi form yang di sediakan :
• URL --> Isi dengan URL blog kita.
• Comments --> Isi dengan keyword atau kata kunci yang berhubungan dengan blog kita
• Isi kotak kosong dengan huruf Verifikasi yang tersedia
• Klik tombol Add URL

Setelah kita melakukan pendaftaran ke Google, maka tidak serta merta blog kita terindeks pada
mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog kita bisa terindeks.
Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog kita pada mesin pencari google,
apakah sudah terindeks atau belum? Jika belum, tunggu beberapa minggu lagi, dan tuliskan
kembali alamat blog kita seperti langkah di atas.
Daftar Yahoo! Untuk mendaftar ke yahoo! silahkan kita kunjungi
https://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo,
kita harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih
dahulu ke account yahoo. Bagi yang belum punya account yahoo (email di yahoo)
silahkan bikin dulu, bagi yang sudah punya, kita tinggal login dengan username serta
password kita. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi
kolom tersebut dengan URL kita, kemudian klik tombol Add URL, selesai. Jika ingin
memasukan alamat feed sekalian, kita bisa memasukannya. Ingat, alamat feed di blogger
hanya tinggal menambahkan atom.xml di belakang uRL blog kita, contoh : untuk blog
kita ini mempunyai alamat feed sebagai berikut :
http://kolom-tutorial.blogspot.com/atom.xml
atau memakai www pun sama saja :
http://www.kolom-tutorial.blogspot.com/atom.xml

Daftar ke Msn Untuk daftar ke Msn, silahkan kita kunjungi


http://search.msn.com/docs/submit.aspx?FORM=WSDD2 silahkan kita isi huruf
verifikasi dan URL kita pada kotak yang tersedia, kemudian klik tombol Submit URL,
selesai.
Apabila kita mempunyai keinginan lebih, yaitu URL blog kita terindeks pada puluhan
mesin pencari, kita bisa menggunakan bantuan situs submitter. Coba klik saja banner
dibawah ini :

Tugas kita hanya mengisi alamat URL blog miliknya, serta menuliskan alamat email saja,
kemudian klik tombol Submit Your Site.
Jika ingin lebih cepat terkenal coba lakukan ping ke berbagai agregator, silahkan klik link
di bawah :
http://pingomatic.com
Kita tinggal mengisi form yang di sediakan.
17. Cepat Terindeks di Google
Setelah kita mendaftar di www.google.com, blog kita tidaklah langsung terindeks pada mesin
pencari google, akan tetapi bisa memakan waktu 3 sampai 4 minggu bahkan apabila bernasib
kurang baik bisa sampai 8 minggu barulah blog kita terlisting pada mesin pencarinya.

Memperbaiki Pengaturan blog


Untuk langkah-langkah pengaturan (Setting) blog, pada langkah sebelumnya sudah
dibahas.
Link ke blog dengan page rank tinggi
Salah satu cara agar blog kita lebih cepat terindeks di google adalah kita di link oleh blog
yang mempunyai page rank yang tinggi, dan biasanya blog-blog tersebut adalah blog
terkenal. Contoh blog Indonesia yang sangat terkenal adalah blog miliknya mas fatih
syuhud yaitu http://fatihsyuhud.com, blognya kang Agus hery di
http://edittag.blogspot.com, dan masih banyak lagi yang lainnya. Saran kami pasanglah
terlebih dahulu link blog mereka pada halaman blog milik kita, setelah itu mintalah agar
blog kita di linkback atau di link balik oleh mereka. Permintaan untuk di linkback bisa di
ajukan pada buku tamu (shoutbox) atau bisa juga melalui komentar pada postingan atau
jika ingin lebih pribadi kirim melalui email. Kita yakin mereka akan segera memasang
link kita pada blog mereka, atau jika dalam waktu tiga hari masih belum di linkback,
ajukan kembali permintaan untuk dilinkback karena untuk blog-blog terkenal dalam
sehari tidak hanya satu atau dua blog saja yang pasang link blog mereka, maka wajar saja
apabila ada satu atau dua blog yang terlewatkan untuk di linkback.
Pasang tag meta
Salah satu cara agar blog kita lebih di lirik atau di kenali oleh mesin pencari miliknya
www.google.com adalah memasang tag meta di bagian header pada kode template blog.
contoh tag meta untuk blogger seperti ini :

<meta name="robots" content="INDEX, FOLLOW"/>


<meta name="description" content="Deskripsi dari blog kita di sini "/>
<meta name="keywords" content="kata kunci atau keyword simpan disini, buatlah
beberapa keyword yang kita anggap sangat berhubungan dengan blog kita "/>

Yang harus diperhatikan adalah tulisan-tulisan yang tercetak merah. Tulisan-tulisan


tersebut haruslah di sesuaikan dengan kondisi blog kita.
Untuk deskripsi, silahkan isi dengan deskripsi blog kita. contoh untuk blog milik kita
adalah "Panduan praktis membuat blog di blogger.com. tips, trik, serta download
software secara gratis".
Untuk kata kunci (keyword), silahkan isi dengan kata kunci yang berhubungan dengan
blog kita. contoh untuk blog ini adalah : blog tutorial, cara membuat blog, bikin blog,
cara bikin blog, dan sebagainya. Jangan lupa untuk menyisipkan koma untuk
memisahkan antara keyword yang satu dengan keyword yang lainnya.
Untuk judul blog, silahkan isi dengan judul dari blog kita. Contoh : untuk blog ini adalah
Blog tutorial.
Bagi yang belum mengetahui dimanakah tag meta di simpan, jawabannya adalah di
dalam kode header blog, atau jika masih bingung simpan saja di bawah kode
<title><data:blog.pageTitle/></title> .
LAMPIRAN – LAMPIRAN
 
Tutorial HTML

Apa itu HTML ?


HTML (Hypertext Markup Language) adalah merupakan suatu bahasa program yang di gunakan
untuk menampilkan dokumen-dokumen web.
• Mengenal Tag HTML
Perintah-perintah dalam HTML biasa di sebut dengan TAG. TAG ini kebanyakan
mempunyai pasangan, yakni TAG pembuka dan penutup. Misal <b>...</b>,
<i>...</i> dan lain sebagainya, dan TAG yang mempunyai pasangan ini juga bersifat

Override yakni dapat menimpa fungsi TAG sebelumnya. Contoh : sebuah teks yang
sudah di buat miring oleh tag <i> ... </i>, dapat di timpa oleh tag <b> ... </b>
sehingga akan melahirkan dua hasil perintah yang berbeda sekaligus yakni kombinasi
huruf miring dan huruf tebal, contoh :
ini hanya <b><i>contoh </i></b> saja kita
yang akan tampil di browser adalah :

ini hanya contoh saja kita

di samping TAG yang mempunyai pasangan, ada juga tag yang tidak memerlukan
pasangan, misal TAG <hr> , <br> , ataupun <input>
Sebuah Tag tidaklah sensitif terhadap Case (huruf besar atau kecil), jadi mau di tulis
huruf besar ataupun huruf kecil akan menghasilkan fungsi yang sama. Sebagai contoh :
fungsi Tag <b>....</b> akan sama dengan Tag <B> ....</B>.

• Struktur dokumen HTML


Sebuah dokumen HTML terbagi kedalam tiga bagian utama, yakni HTML, HEAD, serta
BODY.

HTML
Sebuah dokumen HTML haruslah diawali dengan tag <HTML> dan di tutup dengan
</HTML>, Tag ini adalah sarana untuk memberikan informasi kepada browser bahwa apa-

apa yang di tulis di dalamnya merupakan sebuah dokumen HTML.

HEAD

Bagian header dari sebuah dokumen HTML diawali oleh tag <HEAD> dan di tutup oleh tag
</HEAD>, dan di dalam header di isi pula dengan tag title yakni judul dari dokumen, tag

title ini di tulis dengan tag pembuka <TITLE> dan di tutup oleh tag </TITLE>, contoh :
title dari blog ini adalah Blog Tutorial jadi untuk tittle nya di tulis seperti ini <TITLE>
Blog Tutorial </TITLE>, akan tetapi di blogger.com untuk penulisan title tidak harus

di tulis langsung pada tag title karena sudah di otomatisasi, alamatnya yaitu
<$BlogPageTitle$>. Dalam pengisian title ini seyogya nya jangan asal-asalan, karena

title merupakan hal pertama yang di lihat oleh search engine.

Di dalam Header pun di isi pula dengan tag META, tag META ditulis dengan tag
<META>, tag META ini biasanya memuat informasi mengenai dokumen HTML. dengan

tag META kita bisa menentukan keyword, content,refresh, dan lainnya sebagainya.
Khusus tentang tag META keyword akan di bahas lebih lanjut pada postingan
selanjutnya.

BODY

Semua dokumen HTML yang di simpan di dalam BODY semisal teks, image, link, dan
lain sebagainya akan di tampilkan dan bisa di lihat di dalam browser.  
 
• Agar lebih mudah mengenal dan hasilnya langsung dapat dilihat maka perlu
mempersiapkan terlebih dahulu program notepadnya lalu tuliskan kode HTML seperti
dibawah, kemudian apabila telah selesai mempraktekan simpan file tersebut dengan
extensi .htm (dot htm). Contoh file : latihan.htm kemudian jalankan dengan internet
explorer. silahkan tulis kode-kode berikut :
 
<html>
<head>
<title>latihan</title>
<body>
Tulis apa-apa yang kita terangkan di sini !
</body>
</html>

Elemen dasar HTML


Ada beberapa elemen dasar HTML yaitu :  
 
™ Elemen Blok Level
Elemen blok level yaitu tingkatan besarnya huruf yang akan di tampilkan pada
browser. Elemen blok level yang paling sering di gunakan adalah Heading (h1 sampai
h6). Tag heading ini ini berupa <h1>...</h1> sampai dengan <h6>...</h6>.
 
Contoh : 
 
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<h3>Ini heading 3</h3>
<h4>Ini heading 4</h4>
<h5>Ini heading 5</h5>
<h6>Ini heading 6</h6>  
 
 
Hasilnya akan seperti ini :
Ini heading 1 
 

Ini heading 2  
 
Ini heading 3  
 
Ini heading 4  
 
Ini heading 5 
 
Ini heading 6 
 
 
Sebenarnya ada cara lain untuk menampilkan berbagai ukuran huruf, yakni memakai
tag <font size="...">.....</font>.
 
Contoh :  
 
 
<font size="1">Ini font size 1</font>  
 
<font size="2">Ini font size 2</font>  
 
<font size="3">Ini font size 3</font>  
 
<font size="4">Ini font size 4</font>  
 
<font size="5">Ini font size 5</font>  
 
<font size="6">Ini font size 6</font>  
 
<font size="7">Ini font size 7</font>  
 
 
Hasil yang akan tampil seperti ini :

 
Ini font size 1  
 
Ini font size 2  
 
Ini font size 3  
 
Ini font size 4  
 
Ini font size 5  
 

Ini font size 6  
 

Ini font size 7   
 
 
Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.  
 
Anchor Link / Link Satu Halaman

Apa itu Anchor Link ?


Anchor link biasa di sebut juga dengan link dalam satu halaman, berbeda dengan hyperlink pada
umumnya yang biasa di gunakan untuk menghubungkan suatu tulisan dengan tulisan lain yang
berada pada halaman yang berbeda atau blog yang berbeda, anchor link ini lebih banyak di
gunakan untuk halaman yang sama. Pada bagian paling bawah blog, ada tulisan berupa link yang
tertera :
->> Kembali lagi ke atas <<-
Apabila kita meng klik link tulisan tersebut maka secara otomatis yang akan tampil pada layar
monitor kita adalah halaman yang paling atas dari blog tersebut, Kelebihan anchor link dengan
link biasa adalah link ini tidak memerlukan loading ulang untuk memanggil obyek yang telah di
tandai sebagai anchor.
Bagaimana cara membuat anchor link?
Prinsip dasarnya adalah kita menandai terlebih dahulu suatu objek, lalu pada bagian yang lain
kita buat link untuk memanggilnya. Kode dasarnya seperti ini :

<a name="NamaAnchor"> .... </a> <-- objek anchor


<a href="#NamaAnchor"> .... </a> <-- link pemanggil anchor

Perhatikan tanda pagar (#) di atas, untuk nama anchor tidak memakai tanda pagar, akan tetapi
untuk link pemanggil anchor harus memakai tanda pagar.

Objek dari suatu anchor bisa di tampilkan bisa juga tidak, terlihat dari kode di atas ada tanda
berupa titik-titik. Titik-titik tersebut bisa di isi tulisan bisa juga di biarkan kosong, contoh :

<a name="AtasBlog"></a> <-- objek anchor yang tidak ingin


menampilkan tulisan.
<a name="AtasBlog">Blog bagian atas</a> <-- objek anchor yang
ingin menampilkan tulisan.
Berbeda dengan objek dari anchor, link pemanggil anchor haruslah di beri tulisan untuk bisa di
klik oleh pengunjung, contoh :
<a href="#AtasBlog">Kembali ke atas</a> <-- link pemanggil anchor
harus di beri tulisan.
Tertarik ingin membuatnya, silahkan ikuti langkah-langkah berikut :

Untuk template klasik :

1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode template kita, lalu paste pada notepad, silahkan save dulu untuk
backup data
5. Copy kode berikut lalu paste persis di bawah kode <body>
<a name="atas"></a>
6. Copy paste kode berikut di atas kode </body>
<center><a href="#atas"> Kembali lagi ke atas</a> </center>
7. Klik tombol Pratinjau untuk melihat perubahan
8. Jika sudah OK, klik tombol Simpan Perubahan Template

Penambahan kode <center> </center> di maksudkan agar tulisan link berada pada posisi tengah.

Untuk template baru :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template kita untuk
backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Copy kode berikut lalu paste persis di bawah kode <body>
<a name="atas"></a>
8. Copy paste kode berikut di atas kode </body>
<center><a href="#atas"> Kembali lagi ke atas</a> </center>
Klik tombol Pratinjau untuk melihat perubahan
9. Jika sudah OK, klik tombol SIMPAN TEMPLATE
Satu lagi yang menarik dari fungsi kode ini, yaitu buat para kita yang suka menulis posting yang
sangat panjang, atau merupakan tulisan-tulisan yang berupa karya ilmiah, Kode ini bisa
membantu kita untuk membuatkan sebuah navigasi untuk mempermudah pembaca. Misalkan
pada setiap pharagrap kita sisipkan sebuah anchor link yang mana anchor link ini bisa berupa
tulisan yang terlihat ataupun hanya sebuah objek yang tidak bisa terlihat oleh pembaca. Dan
tentunya pada tempat-tempat tertentu kita membuat tulisan berupa link untuk memanggil anchor
link. Sebagai contoh kita telah membuat beberapa anchor link pada setiap pharagrap, kode
anchor link yang kita sisipkan seperti ini :

<a name="satu"></a> --> pharagrap pertama


<a name="dua"></a> --> pharagrap kedua
<a name="tiga"></a> --> pharagrap ketiga

Coba klik masing-masing link berikut :


Kembali ke pharagrap Pertama !
Kembali ke pharagrap Kedua !
Kembali ke pharagrap Ketiga !
Pasang Statistik dan Tracker 

Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger
yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya
blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah
berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui
para pengunjung blog kita datang dari mana.
Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita
menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis,
sebagai contoh adalah situs http://www.sitemeter.com. Berikut adalah contoh tool yang bisa
kita pilih :

Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :


1. Silahkan kunjungi situs http://www.sitemeter.com.
2. klik tulisan Sign Up untuk melakukan pendaftaran
3. klik tombol bertuliskan Next
4. Klik tombol Next lagi
5. Isi semua tabel yang ada lalu klik tombol Next lagi
6. Isi lagi tabel yang ada, lalu klik tombol Next lagi
7. Klik tombol Next lagi
8. klik tombol Next lagi
9. Setelah ada keterangan proses sign up selesai, kita harus melakukan veryfikasi, silahkan
buka email yg kita berikan
10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password kita
untuk login ke sitemeter.com
11. Silahkan login dengan id kita
12. Bila sudah login, Klik menu Manager
13. Klik Menu Meter Style untuk memilih gaya dari site meter kita
14. Pilih style yang kita sukai, kemudian klik tombol Select
15. Klik menu HTML Code
16. Klik tulisan Adding site Meter to a Blogger.com Site
17. Copy semua kode HTML yang di berikan lalu paste pada Notepad
18. Klik menu Logout untuk keluar dari situs tersebut
19. Memasukan kode yang kita dapat ke dalam blog kita
Ikuti langkah- langkah berikut :
Khusus blog dengan template klasik :
1. Sign in di blogger dengan id kita
2. Klik menu TEMPLATE
3. Klik Edit HTML
4. Klik Edit (yang ada pada bar menu browser kita)
5. Klik Find (on this page)... untuk mempercepat pencarian
6. Tuliskan kata dimana kita ingin tempatkan, contoh di blog kita adalah blogger (karena
dekat dengan tombol blogger) klik Find
7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk
melihat perubahan yang terjadi
8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila kita ingin site meter posisinya berada di tengah-tengah, tinggal tambah
kode <center> ...kode site meter... </center>

Untuk blog dengan Template baru :


1. Login di blogger dengan ID kita
2. Klik menu layout
3. Klik Elemen Halaman
4. Klik Tambahkan sebuah Elemen Halaman
5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript
6. Tulis Judul site meter kita pada isian di sebelah form judul (bila ingin ada keterangan.
kalau tidak, ya kosongkan saja)
7. Copy & paste kode Site meter pada kolom isian
8. Klik tombol Simpan Perubahan
9. Klik Elemen yang baru kita buat tadi, tahan lalu pindahkan ke tempat yang kita inginkan
( di drag & drop)
10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan
11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN

Buat Logo & Image Button

Silahkan ikuti langkah-langkah berikut ini :

1. Silahkan buka alamat http://cooltext.com


2. Lalu klik tulisan Design a Logo
3. Klik gambar contoh logo yang kita sukai
4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog
Tutorial
5. Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
6. Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih
warna tulisan (text).silahkan pilih warna yg kita sukai
7. Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
8. Klik tombol yang bertuliskan Render Logo Design
9. Tunggu beberapa saat ketika proses pembuatan logo berlangsung
10. Lihat hasil logo, bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas,
rubah yang kita inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita
simpan di PC kita
11. Selesai. Kita sudah mempunyai sebuah logo.

Agar logo yang kita buat tadi bisa tampil di blog, kita harus upload gambar tersebut ke
blogger.com atau melalui situs lain. Tapi kita lebih suka menyimpannya di situs lain misal
www.photobucket.com.
Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :

1. Silahkan buka alamat http://www.photobucket.com,


2. Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis) dengan meng klik tombol
yang bertuliskan Join Now pada sudut kanan atas layar
3. Sekarang kita asumsikan kita sudah terdaftar
4. Silahkan Sign In dengan Id kita
5. Bila sudah berada pada halaman Account kita, Klik tombol yang bertuliskan Browse...
Silahkan pilih logo yang tadi di buat
6. Klin tombol yang bertuliskan Upload
7. Tunggu beberapa saat ketika proses upload berlangsung
8. Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
9. Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
10. Silahkan klik tulisan Log Out untuk keluar dari account kita. tutup layar browser kita

Mulailah kita memasukan kode gambar tadi ke blog ke blog kita, cuma ada sedikit kode yang
harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image :
http://i162.photobucket.com/albums/t253/p-tiok/logoblogtutorial.jpg. Disini kita harus
menambahkan kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/p-tiok/logoblogtutorial.jpg">

Maka contoh hasilnya akan seperti ini :


Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran
yang sebenarnya. Apabila kita ingin memperbesar atau memperkecil image tersebut, kita bisa
menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin kita
tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/p-tiok/logoblogtutorial.jpg"
width="100" height="40" alt="ini contoh saja">

Kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil
image, kita tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk
ukuran tinggi image, kita tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu
untuk menampilkan tulisan ketika mouse berada pada image tersebut.

Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut
untuk melihat efek kode alt="..." :

Untuk membuat image button langkahnya sama saja dengan langkah-langkah di atas, cuma pada
saat berada di situs cooltext.com yang kita klik adalah tulisan Desiggen a Button bukan Design
a Logo, contoh image button :
BLOG TOOLS

Blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog
milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena
alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta
menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.
Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari
www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :
1. Ketik alamat website menuju www.geovisite.com
2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash
3. Tulis alamat email kita pada kotak kosong di samping tulisan Email
4. Tulis address blog milik kita disamping tulisan URL. Contoh : http://p-tiok.blogspot.com
5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh :
6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh :
7. Pilih waktu yang sesuai dengan daerah kita disamping tulisan Location. contoh :untuk
daerah jakarta adalah Asia/Jakarta (GMT+7)
8. Pilih kategori yang sesuai dengan blog kita di samping tulisan Category. Contoh :
Internet
9. Pilih bahasa yang sesuai dengan blog kita di samping tulisan Language of your site.
Contoh : English
10. Pilih judul blog kita disamping tulisan Title. Contoh : Rubrik Elektronik
11. Tulis deskripsi dari blog milik kita pada kotak di samping tulisan Description. Contoh :
All about Electronic, tips, maintenance, until how to service the equipment of electronic
12. Klik tombol yang berlogo disket
13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE,
GEOCOUNTER, GEOMAP lalu paste pada program notepad
14. Silahkan close window browser kita
15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik
kita

Sebagai tambahan, situs penyedia yang lainnya kita bisa kunjungi di :


• http://www.neoworx.net
• http://www.webfooted.net
• http://www.fastonlineusers.com
• http://www.histats.com
Blogroll Alternatif
.
Apa itu Blogroll?
Blogroll atau di sebut juga Link Exchange atau tukeran link antar blog atau website
adalah menyimpan link address milik orang lain pada blog/website milik kita.
Apa manfaat dari blogroll?
Mungkin secara sekilas para kita berpikir bahwa memasang link address milik orang lain
pada blog/website milik kita akan merugikan, sebab dengan itu tentu saja kita
memberikan jalan kepada para pengunjung untuk meninggalkan blog kita. Alasan itu
mungkin ada benarnya, akan tetapi tidak seutuhnya benar. Dengan adanya blogroll
banyak sekali manfaat yang kita dapatkan, antara lain yaitu mempererat tali silaturahmi
atau tali persaudaraan diantara pemilik blog/website. selain itu semakin banyak blog kita
di link oleh blog lain maka semakin baik pula posisi rangking blog kita pada Search
Engine semacam Google, Yahoo, Msn serta teman-temannya. Tentu saja sama-sama kita
ketahui bahwa setiap pemilik blog/website berkeinginan bahwa blog/website miliknya
mempunyai rangking yang baik pada search engine. Makanya budayakan tukeran link
jangan pelit, karena kalau kita pelit memberi link ya tentu saja tidak akan ada yang mau
pasang link addres milik kita pada blog mereka.
Terus apa hubungannya dengan judul di atas?
Bagi para kita yang baru membuat blog dan baru memiliki blogroll hanya beberapa saja
mungkin tulisan ini tidak terlalu bermanfaat, tapi mungkin barangkali nanti setelah link
kita jumlahnya sampai ratusan atau bahkan ribuan informasi ini bisa jadi bermanfaat.
Memang seperti yang tadi kita katakan di awal bahwa bertukar link atau link Exchange
sangat bermanfaat, tetapi kita kalo link kita sudah mencapai ratusan atau bahkan ribuan
tentu saja akan menemui masalah, yaitu tentu saja link ini akan memakan tempat yang
banyak dan jadi tidak enak untuk di pandang mata para pengunjung. Nah jika kita
mempunyai masalah demikian, maka kita akan memberikan beberapa alternatif jalan
keluarnya, Yaitu antara lain :
Blogroll dengan marquee
yang paling banyak di gunakan oleh para blogger untuk menghemat space pada blog
adalah dengan menggunakan perintah marquee.
Contoh membuat blogroll dengan perintah marquee :

<marquee onmouseover="this.stop()" onmouseout="this.start()"


scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik


Elektronik</a>
<br/><br/>
<a href="http://user-online.blogspot.com" target="_blank">User
Online</a>
<br/><br/>
<a href="http://rohman-freeblogtemplate.blogspot.com"
target="_blank">free Blog Template</a>
<br/><br/>
<a href="http://kolom-authorized.blogspot.com"
target="_blank">Authorize service</a>
<br/><br/>
<a href="http://contoh-blog.blogspot.com/" target="_blank">Blog
D'Tree</a>
<br/><br/>

</marquee>

Kode diatas tidak baku harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan
dengan kondisi dan keinginan kita. Kode yang bisa di rubah adalah :

scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin
lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3"
,scrollamount="4" , scrollamount="5"

direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di
rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" ,
direction="left" , direction="right" .
width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari
tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai
yang di inginkan. contoh : width="30%" , width="70%" , width="100%"

height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika
ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" ,
height="400" , height="250" .

Ada variasi lain, yaitu dengan memakai tabel, contoh :

<table border="3" width="155" height="130" cellpadding="2">

<tr>

<td align="left">

<marquee onmouseover="this.stop()" onmouseout="this.start()"


scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik


Elektronik</a>
<br/><br/>
<a href="http://user-online.blogspot.com" target="_blank">User
Online</a>
<br/><br/>
<a href="http://rohman-freeblogtemplate.blogspot.com"
target="_blank">free Blog Template</a>
<br/><br/>
<a href="http://kolom-authorized.blogspot.com"
target="_blank">Authorize service</a>
<br/><br/>
<a href="http://contoh-blog.blogspot.com/" target="_blank">Blog
D'Tree</a>
<br/><br/>

</marquee>
</td>

</tr>

</table>

Blogroll dengan menu dropdown

Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :

<form>

<select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_bl
ank')"size=1 name=menu>

<option> - Blogroll - </option>

<option value="http://rubrik-elektronik.blogspot.com">Rubrik
elektronik</option>

<option value="http://user-online.blogspot.com">User
Online</option>

<option value="http://rohman-freeblogtemplate.blogspot.com">free
blog template</option>

<option value="http://kolom-authorized.blogspot.com">Authorize
service</option>

<option value="http://contoh-blog.blogspot.com/">Blog
D'tree</option>

</select>

</form>

Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :


Contoh variasi lainnya :

<h3> Blogroll </h3>

<div align="left">

<select style size=5="font-weight: normal; font-size: 13px;


width="135"; font-family: Verdana,Tahoma,Arial; background-color:
rgb(229, 229, 229);"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size="1" name="menu">

<option style="font-weight: normal; font-size: 11px; color: rgb(204,


204, 204); font-family: Verdana,Tahoma,Arial;" value=""
selected="selected">--Teman-temanku--</option>

<option value="http://rubrik-elektronik.blogspot.com">rubrik
Elektronik</option>

<option value="http://user-online.blogspot.com">User Online</option>

<option value="http://rohman-freeblogtemplate.blogspot.com">Free blog


template</option>

<option value="http://kolom-authorized.blogspot.com">Authorized
Service</option>

<option value="http://contoh-blog.blogspot.com/" target="_blank">Blog


D'Tree</option>

</select>

</form> </div>

Hasilnya akan seperti ini :

• Blogroll
--Teman-teman--
rubrik Elektronik
User Online
Free blog template
Authorized Service


Sedikit clue, kata left yang berada pada kode <div align="left"> menunjukan bahwa
menu ini akan di simpan di sebelah kiri, jika mau di rubah tinggal ganti saja dengan kata
"center" atau "right".

Dan masih banyak lagi alternatif lainnya, cuma kayanya terlalu panjang nih, cukup sekian
dulu yah, untuk contoh lainnya mudah-mudahan ada sambungannya. Eh lupa, untuk cara
memasukan kode HTML di atas pada blog milik kita

Pasang Icon Yahoo ! Messenger

Untuk menampilkan icon status online yahoo ! messenger, kita bisa memilih sebanyak 5 pilihan,
yakni style id 1, style id 2, style id 3, style id 4, serta style id 5, Apa perbedaan dari style id ini?
perbedaannya adalah ukuran dari icon itu sendiri, untuk melihat perbedaan style id, silahkan kita
perhatikan gambar berikut :

Style ID 1 Style ID 2 Style ID 3 Style ID 4 Style ID 5

masing-masing gambar mempunyai URL adddress sendiri yaitu :

http://opi.yahoo.com/online?u=YahooID&m=g&t=1
Untuk Style ID 1

http://opi.yahoo.com/online?u=YahooID&m=g&t=2
Untuk Style ID 2

http://opi.yahoo.com/online?u=YahooID&m=g&t=3
Untuk Style ID 3

http://opi.yahoo.com/online?u=YahooID&m=g&t=4
Untuk Style ID 4

http://opi.yahoo.com/online?u=YahooID&m=g&t=5
Untuk Style ID 5

itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita
harus menambah kode yaitu :
<img src="URL address">

Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan
seperti ini :

<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=1" border="0">


Untuk Style ID 1
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0">
Untuk Style ID 2
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0">
Untuk Style ID 3
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0">
Untuk Style ID 4
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0">
Untuk Style ID 5

Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi
atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya
dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung.
Ada beberapa pilihan yang bisa kita terapkan ketika pengunjung mengklik icon YM kita, yaitu :
Kirim Instant Messenger.

Kodenya sebagai berikut :

<a href="ymsgr:sendIM?YOURID">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

<a href="ymsgr:sendIM?YOURID"><img
src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Kirim Instant Messenger dengan pesan


Kodenya sebagai berikut :
<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE"><img
src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Menambahkan link ke chat room favorit


Kodenya sebagai berikut :
<a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman kita</a>
Sehingga untuk kode lengkapnya jadi seperti ini :
<a href="ymsgr:addfriend?YOURID"><img
src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Karena email kita adalah amn_tea@yahoo.co.id maka id kita adalah amn_tea, Sehingga kode
untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :
<a href="ymsgr:sendIM?amn_tea"><img
src="http://opi.yahoo.com/online?u=amn_tea&m=g&t=2" border="0"></a>

dan yang akan tampil seperti ini :

Icon di atas benar-benar Live, jadi tentunya icon nya akan menyala apabila kita sedang online di
Yahoo ! Messenger .
 

Daftar Mybloglog

Bagi kita yang baru membuat blog, pada kesempatan kali ini kami menambahkan
perbendaharaan blog tools nya, yakni pasang MyBloglog.
Apa itu Mybloglog ?
Mybloglog adalah suatu situs yang menyediakan layanan untuk melacak (tracking) para
pengunjung blog/website dimana apabila pengunjung tersebut merupakan anggota situs
mybloglog maka dapat secara otomatis terdeteksi dan di cantumkan dalam menu Recent Reader
nya (pembaca terbaru)
Apa manfaat bergabung di mybloglog?
Ada beberapa manfaat kita bergabung dengan mybloglog yaitu :
• Untuk menambah traffic ke blog kita
Dengan adanya photo kita terpampang di blog orang lain, maka ada kemungkinan banyak
yang akan berkunjung ke blog milik kita, sekurang-kurangnya dari pemilik blog itu
sendiri.
• Mengetahui link mana yang banyak di klik
Di mybloglog ada fasilitas tracking untuk memberi peringkat terhadap link-link yang kita
pasang, link mana yang banyak di klik pengunjung, maka peringkat link itu semakin baik.
• Mempererat tali silaturahmi antar pemilik blog
Tak bisa di pungkiri dengan adanya otomatisasi photo kita terpampang tanpa harus
menuliskan pesan seperti halnya buku tamu, ini tentunya akan lebih memungkinkan
saling kunjung mengunjungi antar pemilik blog.
Dan tentu saja masih ada manfaat-manfaat yang lainnya yang bisa di dapat, akan tetapi
untuk menghemat pembahasan hanya itu saja dulu. Nah sekarang bagaimana cara
bergabung dengan mybloglog,
• silahkan ikuti langkah-langkah berikut ini :
1. Silahkan klik di sini untuk menuju http://www.mybloglog.com
2. Isi form yang telah di sediakan di bawah tulisan Sign Up Now
3. Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Amen24
4. Email --> Isi dengan email kita ( yang valid)
5. Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe
6. Blog/Site URL --> Isi dengan alamat blog kita. Contoh : http://rubrik-
elektronik.blogspot.com
7. Klik Tombol Register
8. Terlihat beberapa form yang harus diisi lagi
9. Blog/Site Title --> Isi dengan judul blog kita
10. Blog platprom --> pilih blogspot.com
11. Dibagian bawah ada dua radio buttun, silahkan pilih yang kita sukai
12. Klik tombol yang bertuliskan Complete Registration
13. Klik tulisan Go to Your page
14. Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas
15. Isi semua data diri kita (tidak kita sebutkan satu2 karena terlalu banyak)
16. Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile
17. Klik tulisam MY HOME untuk kembali ke home
18. Klik tombol yang bertuliskan Get Widget
19. Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai
pada panel warna untuk merubah warna background heading
Membuat Text Area

Apa itu text area?. Untuk memudahkan kita memahami apa itu text area, silahkan alihkan
perhatian kita ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak
yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan
melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk
menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan
untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para
pengunjung.
Untuk membuat text area, silahkan kita Copy kode di bawah ini :
<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text
ataupun kode-kode yang kita inginkan di sini, maka nanti tulisan kita akan
tampil di dalam text area </textarea></p>
Sebagai contoh :
<a
href="http://kolom-tutorial.blogsp
src="http://i162.photobucket.com
border="0" alt="Blog Tutorial" />

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika kita menginginkan text area
yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.
Cols="20", menunjukan lebar dari text area. Jika kita menginginkan text area yang lebar maka
silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.
Text Area dengan memakai HighLight
Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol
highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk
mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan
saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya
akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-
kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko
tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan
menggunakan highlight ini silahkan kita copy kode HTML di bawah :
<div><form name="copy"><div align="center"><input
onclick="javascript:this.form.txt.focus();this.form.txt.select();"
type="button" value="Highlight All"> </div><div align="center"></div><p
align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt"
rows="100" wrap="VIRTUAL" cols="55">simpan tulisan kita di sini, maka tulisan
yang kita tulis akan muncul di sini dan siap di copy oleh para
pengunjung</textarea></p></div></form>
Sebagai contoh :
< s c r ip t
la n g u a g e = " J a v a S c r ip t " > f u n c t io n c lic k IE ( ) { if
( d o c u m e n t . a ll) {
r e t u r n f a ls e ; } } f u n c t io n c lic k N S ( e ) { if
( d o c u m e n t . la y e r s ( d o c u m e n t . g e t E le m e n t B y Id & & !
d o c u m e n t . a ll) ) { if
( e . w h ic h = = 2 e . w h ic h = = 3 ) { r e t u r n f a ls e ; } } } if
( d o c u m e n t . la y e r s ) {
d o c u m e n t.c a p tu r e E v e n ts ( E v e n t.M O U S E D O W N ) ;
d o c u m e n t . o n m o u s e d o w n = c lic k N S ;
} e ls e { d o c u m e n t . o n m o u s e u p = c lic k N S ;
d o c u m e n t . o n c o n t e x t m e n u = c lic k IE ; }
d o c u m e n t . o n c o n t e x t m e n u = n e w F u n c t io n ( " r e t u r n f a ls e " )
< / s c r ip t >

Agar kita lebih memahami kode di atas, sedikit akan kita uraikan. Kode di atas mempunyai dua
elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan
yang kedua adalah elemen kode untuk membuat text area.
Elemen tombol highlight All :
1. <div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di
tengah, jadi jika kita ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan
kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini
artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di
highligt (di tandai atau di blok), jadi kita jangan merubah tulisan ini.
3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam
tombol, jadi jika kita ingin merubah tulisan ini silahkan ganti dengan kata yang kita
inginkan.
Element text area :
1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika
kita ingin text area kita berada di tepi kiri, ganti kata center dengan kata left, bila ingin di
tepi kanan, ganti dengan kata right.
2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area
tersebut sebanyak 300 pixel, jadi jika kita ingin memperpendek atau memperpanjang
lebar text area, kita tinggal menggantinya dengan angka yang kita inginkan. misal:
"WIDTH:700px;"
3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi
sebesar 144 px, jadi jika kita ingin merubahnya tinggal ganti angka tersebut dengan
angka yang kita inginkan. Misal : HEIGHT:160px.
Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari
right click para pengunjung. skript ini di pakai apabila kita tidak ingin tulisan-tulisan kita di copy
paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML kita
antara kode <HEAD> dan </HEAD>
 
 
Trik Mudah membuat Read more

Membuat fasilitas Read more.. atau Selengkapnya.. pada template baru (XML), topik ini
rupanya yang paling banyak di baca dan di minati oleh para blogger baru. Dari itu tentu harus di
pikirkan cara yang tepat dalam penyampaian suatu panduan.
Saran kami, ketika kita melakukan Editing pada kode template, sebaiknya jangan memakai
browser Internet Explorer terutama Internet Explorer 6, pakailah browser lain semisal
FireFox ataupun Opera. Bagi yang belum mempunyai browser FireFox bisa mendownloadnya
secara gratis dan juga Operanya.
Bagi yang belum sukses membuat fungsi read more..., coba ikuti langkah berikut ini :
Langkah #1
• Sign in di blogger dengan id kita.
• Klik Pengaturan
• Klik Format
• Pada layar paling bawah, ada text area kosong disamping tulisan Template Posting, isi
tesxt area kosong tersebut dengan kode di bawah ini :

<span class="fullpost">

</span>

• Klik tombol Simpan Pengaturan


Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung
muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu
mengingat kode tersebut.
Langkah #2
• Klik menu Dasboard
• Klik Tata Letak
• Klik tab Edit HTML
• Klik tulisan Download Template Lengkap.
• Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila
terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data
untuk mengembalikannya seperti semula
• Beri kita centang pada kotak di samping tulisan Expand Template Widget , lihat
gambar di bawah :

Tunggu beberapa saat ketika proses sedang berlangsung


• Silahkan kita cari kode berikut pada kode template milik kita :

<data:post.body/>

atau kode di bawah ini (sama saja) ;

<p><data:post.body/></p>
< b : if c o n d = ' d a t a : b lo g . p a g e T y p e = = " it e m " ' >
< s t y le > . f u llp o s t { d is p la y : in lin e ; } < / s t y le >
< p > < d a ta :p o s t.b o d y /> < /p >
< b : e ls e / >
< s t y le > . f u llp o s t { d is p la y : n o n e ; } < / s t y le >
< p > < d a ta :p o s t.b o d y />
< a e x p r : h r e f = 'd a t a : p o s t . u r l' > < s t r o n g >
S e le n g k a p n y a . . . < / s t r o n g > < / a > < / p >
< / b : if >

• Klik tombol Simpan Template


Cara Posting Artikel
• Klik menu Posting
• Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi,
yakni :

<span class="fullpost">

</span>

• Tuliskan artikel yang ingin tampak pada blog sebelum kode :

<span class="fullpost">

• Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :

</span>
• Klik tombol bertuliskan MEMPUBLIKASIKAN POSTING
• Klik tulisan Lihat Blog(di jendela baru) untuk melihat hasil dari postingan kita,
kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang
terlewatkan.
Kita mungkin melihat bahwa artikel-artikel kita terlihat hanya berupa judul-judul dengan satu
atau dua buah paragrap saja, dan untuk melihat keseluruhan artikel harus meng klik link yang
bertuliskan >> Selengkapnya...", ini di sebut pengkaburan atau pengkamuflasean postingan
(ribet banget nyebutnya). Bagi kita yang baru posting artikel hanya satu atau dua artikel saja
mungkin menganggap tidak perlu menyingkat artikel kita, namun jika nanti artikel kita sudah
banyak, maka mungkin saja ada terbersit ingin membuat menu ini.
Untuk membuat menu Read more kita harus menambahkan beberapa kode HTML ke dalam
template blog kita. Tapi untuk postingan kali ini, kita khususkan untuk blogger yang memakai
template klasik saja,
Silahkan ikuti langkah-langkah berikut :
• Login ke blogger.com dengan id kita
• Klik menu bertuliskan Template
• Klik menu Edit HTML
• jangan lupa Copy seluruh kode template milik kita lalu paste pada notepad dan kemudian
simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam
template setelah kita otak-atik, kita masih punya cadangan data untuk
mengembalikannya.
• Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :

<MainOrArchivePage>
div.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
div.fullpost {display:inline;}
</ItemPage>

Untuk mempercepat pencarian kode </style>, silahkan kita klik menu Edit yang ada
pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis </style> trus
klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
• langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode
<$BlogItemBody$> :

<MainOrArchivePage><br/>
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan kita klik


menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu
tulis <$BlogItemBody$> trus klik tombol find next, maka secara otomatis akan di bawa
ke kode tersebut.
• Klik tombol yang bertuliskan SAVE SETTINGS
Langkah selanjutnya adalah klik menu Setting
• Klik menu Formatting
• Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi
kotak kosong tersebut dengan kode di bawah ini :

<div class="fullpost">
</div>

Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika
kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis
dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode
tersebut.
kemudian jangan lupa klik tombol Save Settings

Cara Posting Artikel


Sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting
suatu artikel agar ada menu Readmore nya.
• Klik menu Posting
• klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan
tadi, yakni :

<div class="fullpost">
</div>

simpan artikel kita yang ingin di tampilkan sebelum kode <div class="fullpost">,
kemudian simpan sisa keseluruhan artikel setelah kode <div class="fullpost"> dan
sebelum kode </div>
Agar lebih jelas, kita beri contoh, misal artikelnya begini :
Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada
blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
<div class="fullpost">
dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik
link yang bertuliskan Read more.
</div>
Hasilnya yang akan tampak pada blog kita adalah seperti ini :
Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada
blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
Read more!

Kata Read more! sebenarnya bisa kita ganti sesuai dengan keinginan kita, misalkan kita rubah
menjadi Baca selengkapnya..., Selengkapnya.., Lanjutannya... atau apa saja yang penting kata
tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita ada kelanjutannya.
Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti
semua kode div menjadi Span. Hasilnya akan sama, cuma bagi para kita yang suka posting pada
menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan perintah lain yang
memakai kode Span.
Kita yang menggunakan template baru dan ingin menggunakan menu Read more.. juga silahkan
ikuti langkah-langkah berikut :
• Sign in seperti biasa di blogger dengan id milik kita
• Klik Setting
• Klik Formatting
• Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt
area kosong tersebut dengan kode di bawah ini :

<div class="fullpost">
</div>

• Klik tombol yang bertuliskan Save Settings


Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung
muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus
selalu mengingat kode tersebut.
Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :
• Klik menu Dasboard
• Klik menu Layout
• Klik menu Edit HTML
• Klik tulisan Download Full Template
• Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila
terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data
untuk mengembalikannya seperti semula
• Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi
jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai
dengan langkah selanjutnya
• Tunggu beberapa saat ketika proses sedang berlangsung
• Silahkan Kita cari kode berikut pada kode template milik kita :

<div class='post-body'>

• Copy kode HTML di bawah ini kemudian paste di bawah kode tadi

<b:if cond='data:blog.pageType == "item"'>


<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

• Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :

<p><data:post.body/></p>

• Copy kode HTML di bawah ini kemudian paste di bawah kode tadi

<a expr:href='data:post.url'>Read More......</a>


</b:if>

• 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 :

<div class="fullpost">
</div>

• Tulisankan artikel yang ingin tampak pada blog sebelum kode :

<div class="fullpost">

• Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :

</div>

• 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:

&<BloggerArchives>
<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>
</BloggerArchives>

4. Nah, ganti kode di atas dg kode html di bawah ini:

<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value
;">
<option selected>- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>

</select>
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
:

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu><option value=0 selected>tulisan disini yang akan muncul
duluan</OPTION>
<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang
akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik kita :


<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option>- Blog Tutorial -</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-
blog.html">Membuat Blog</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-
blog.html">setting Blog</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-
template.html">Memilih Template</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-huruf-dan-
warna.html">warna & huruf</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-
artikel.html">Posting Artikel</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-
1.html">Read more (1)</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-
area.html">Text area</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-
emoticons.html">Blogger Emoticons</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-
emoticons.html">Yahoo!Emoticons</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/download-
gratis.html">Download Gratis</option>
</select></form> 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 :

<a href="http://www.nshodiq.blogspot.com">klik disini</a>

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 :

<a href="http://www.nshodiq.blogspot.com" target="new">klik di sini</a>

atau :

<a href="http://www.nshodiq.blogspot.com" target="new">klik di sini</a>

atau bisa juga seperti ini :

<a href="http://www.nshodiq.blogspot.com" target="_blank">klik di sini</a>

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 :

<a href="http://kolom-tutorial.blogspot.com:" target="_blank">Blog


Tutorial</a>
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 :

<a href="http://kolom-tutorial.blogspot.com"><img
src="http://i162.photobucket.com
/albums/t253/p-tiok/animasichicklet.gif"></a>
(kode dalam satu baris)

jika ingin dalam window baru :

<a href="http://kolom-tutorial.blogspot.com" target="_blank"><img


src="http://i162.photobucket.com
/albums/t253/p-tiok/animasichicklet.gif"></a>
(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 :

="http://ww
<a href= ww.nshodiq.bblogspot.com
mtarget="n
new" title=
="mau belajar bikin
website sendiri silahkan
s kl lik di sinni">Belajar
r Web </a>
>

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 sediakkan, 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 memmasukan kod de HTML keedalam blog.

Contoh banner
b animaasi :

Nah jika kita ingin beerkreasi senddiri, kita bisaa menggunaakan software banner maaker, dengan
software ini kita bisaa berkreasi seekehendak kita
k dan tidakk perlu onlinne terus di innternet. Untuuk
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 <div class="fullpost"> yang relatif lebih aman.
Untuk menu Edit HTML
Bagi kita yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-
kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan
akhir artikel, kodenya seperti ini :

Rata kiri :
<div align="left">
isi artikelnya di sini
</div>
Rata kanan :
<div align="right">
isi artikelnya di sini
</div>
Rata kiri-kanan :
<div align="justify">
isi artikelnya di sini
</div>
Supaya tengah semua :
<div align="center">
isi artikelnya di sini
</div>

Agar hasilnya kelihatan, kita berikan contoh dengan mengutif isi artikel di blog ini.
Contoh cara membuatnya seperti ini :
Untuk yang rata kiri :
<div align="left">
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.
</div>
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 :
<div align="right">
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.
</div>
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 :


<div align="justify">
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.
</div>
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 :


<div align="center">
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.
</div>
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 :

<li>Sig in di blogger dengan id kita </li>


<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>

Hasilnya seperti ini :

• Sig in di blogger dengan id kita


• Klik menu layout
• Klik menu Edit HTML
Bullet yang menjorok ke tengah :

<ul>
<li>Sig in di blogger dengan id kita </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
</ul>

Hasilnya seperti ini :

• Sig in di blogger dengan id kita


• Klik menu layout
• Klik menu Edit HTML

Yang memakai nomor :


<ol>
<li>Sig in di blogger dengan id kita </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
</ol>

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
</span>
contoh untuk warna merah :

<span style="color:red">
ini contoh merah
</span>

hasilnya seperti ini :

ini contoh merah


atau bisa juga seperti ini :

<span style="color:#FD0303">
ini contoh merah
</span>

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 half-
Size 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 </head> :

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

kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada


account milik 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 </head> :

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


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

Kode di bawah ini di simpan di bagian sidebar :


<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript:
d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the
years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and
Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>

Apabila 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 </head> :

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


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

Kode di bawah ini di simpan di bagian sidebar :


<div class="dtree">
<p><a href="javascript: d.openAll();"><img
src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a
href="javascript: d.closeAll();"><img
src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');

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

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-
3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-classic.html');

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


d.add(10,5,'Horizontal blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-
lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-
lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-
lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-
vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http
://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang
dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.co
m/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Software super murah


disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software
serta ebook dengan harga super murah, klik di
sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di
sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu
sangatlah mudah, temukan caranya.klik di
sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my
friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-
tutorial.blogspot.com/index.html','Recycle
bin','','http://amen24.googlepages.com/trash.gif');
document.write(d);
//-->
</script>
</div>

Untuk melihat hasilnya, silahkan klik dulu di sini !

Baiklah, 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 <title><$BlogPageTitle$></title> :

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


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

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

<div class="dtree">
<p><a href="javascript: d.openAll();"><img
src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a
href="javascript: d.closeAll();"><img
src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');

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

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-
unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-classic.html');

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


d.add(10,5,'Horizontal blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-
lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-
lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-
lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-
lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif'
,'http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.
gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.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://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us
er.gif');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');

d.add(4,0,'Software super murah


disini!','http://www.obralplus.com/?id=rohman','menjual berbagai
software serta ebook dengan harga super murah, klik di
sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di
sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website
itu sangatlah mudah, temukan caranya.klik di
sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My
friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my
friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-
tutorial.blogspot.com/index.html','Recycle
bin','','http://amen24.googlepages.com/trash.gif');

document.write(d);
//-->
</script>
</div>

7. Klik tombol Simpan Perubahan Template

8. Selesai.
• Untuk Template Baru
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman
5. Copy paste kode berikut di atas kode </head>

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


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

6. Klik tombol Simpan Template


7. Klik menu Elemen Halaman yang ada di sebelah atas monitor
8. Klik tulisan Tambahkan sebuah Elemen Halaman
9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik kita)

<div class="dtree">
<p><a href="javascript: d.openAll();"><img
src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a
href="javascript: d.closeAll();"><img
src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');

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

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-
unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-classic.html');

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


d.add(10,5,'Horizontal blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-
lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-
lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-
lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-
lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif'
,'http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.
gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.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://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us
er.gif');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');

d.add(4,0,'Software super murah


disini!','http://www.obralplus.com/?id=rohman','menjual berbagai
software serta ebook dengan harga super murah, klik di
sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di
sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website
itu sangatlah mudah, temukan caranya.klik di
sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My
friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my
friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-
tutorial.blogspot.com/index.html','Recycle
bin','','http://amen24.googlepages.com/trash.gif');

document.write(d);
//-->
</script>
</div>

11. Klik tombol Simpan


12. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di
drag & drop)
13. Klik tombol Simpan yang berada di sebelah atas
14. Selesai. Silahkan lihat hasilnya
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 
 

You might also like