P. 1
Modul Membuat Blog Di Blogspot

Modul Membuat Blog Di Blogspot

4.82

|Views: 6,399|Likes:
Published by ana hayati

More info:

Published by: ana hayati on Jan 23, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF or read online from Scribd
See more
See less

08/19/2013

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 Uraian

isi dengan judul blog kita. Contoh : p-tiok’s blog 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? masuk di daftar Blogger.com.

pilih ya agar setiap posting kita selalu

• • •

Biarkan mesin pencari menemukan blog Kita? Tampilkan Editing Cepat di Blog Kita? Tampilkan Link Posting Email? apa

pilih ya

pilih Ya

Sebaiknya pilih ya, tapi pilih tidak juga tidak 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? Aktifkan transliterasi?

pilih Ya

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 Format Timestamp Zona Waktu

pilih model untuk peng-arsip-an yang kita kehendaki.

Pilih bentuk waktu yang kita sukai.

Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-

+7.00]Asia/Jakarta.
• •

Bahasa

Pilih bahasa yang di inginkan. Pilih ya

Tampilkan Field judul

atau tidakpun tidak apa-apa
• • •

Tampilkan kolom link Aktifkan perataan float

pilih ya, tapi sekitainya pilih tidak juga tidak apa-apa. pilih ya, tapi sekitainya mau pilih tidak juga tidak apa-apa

Klik tombol Simpan Pengaturan. Selesai

6. Klik Komentar Untuk mengatur menu komentar :

Komentar pengunjung

pilih tampilkan, ini agar artikel kita dapat di komentari oleh

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 Link balik

pilih Posting baru memiliki komentar.

Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada

yang memasang link pada artikel kita.
• • •

Default Link Balik untuk Posting Format Timestamp Komentar

pilih Posting baru Memiliki Link Balik.

pilih format jam yg singkat. Contoh: 8.00 PM. pilih Ya. Supaya ketika di klik

Tampilkan komentar dalam sebuah window popup?

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. pilih ya.

Aktifkan Halaman Posting?

Klik tombol Simpan Pengaturan . Selesai.

8. Klik Fedd Situs untuk mengatur menu feed situs :
• •

Izinkan Feed Blog

pilih Penuh. di isi dengan alamat feed penggati semisal

Posting URL Pengubahan Arah Feed

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 berlamalama 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 in : ni
<img src="http://i162.ph hotobucket.com/alb bums/t253/ /rohman24/kupu2.gi if">

dan yang akan tampil ada image d n alah dengan ukura yang sebe an enarnya. con ntoh image te ersebut adala seperti ini : ah i

te entu saja bila kita memaj a jang image s sesuai ukura image yan aslinya, in menjadi an ng ni ku urang enak dilihat jika d d dipadukan de engan tulisan judul posti Untuk m n ing. mengakalinya kita bisa men nambahkan b beberapa atri ibut kedalam kode image tersebut, an m e ntara lain atr ribut
width="..." untuk lebar, height= ="..." untu tinggi, da border=" uk an "..." untuk k

bingkai, dan dalam hal in yang dipak adalah bo d ni kai order dengan nilai 0 (nol agar terhin n l) ndar dari setting te emplate yang memakai n g nilai border. Kita ambil c contoh kode image tadi j jadi eperti ini : se

<img hotobucket.com/alb bums/t253/ /rohman24/kupu2.gi if" src="http://i162.ph " 45" border="0"> width="45" hight="4

se ehingga ima yang tadi akan berubah jadi seper ini : age i rti

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. 11. 12.

Klik tombol PREVIEW untuk melihat perubahan bila sudah OK, klik tombol SAVE TEMPLATE 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 : ….

11. 1 Membuat Yahoo ! Messenger Emoticons o
Apabila kita ingin menghiasi po a m ostingannya dengan berb bagai ekspre dari yahoo, kita harus tahu esi s source c codenya, bia kita bebas ngakak atau cemberut s ar u selagi posting Silahkan c g. copy source code beriku sisipkan pada kata yan sesuai de ut, p ng engan posting kita, kal lagi sedih jangan di pa gan lo asang yang lagi ngakak g k,...

:)h happy
<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>

;)win nking
<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>

:Dbig grin g
<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 eyela ashes
<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<big hug g
<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>

:-/conf fused
<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 s struck
<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>

:">blus shing
<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>

:Pto ongue
<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>

:-Osur rprise
<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(a angry
<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>

:>s smug
<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>

:-Swo orried
<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>

:))laug ghing
<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>

:straight face t
<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 eye / ebrow
<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>

=))ro olling 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:-)a angel
<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 t=18 borde er=0>  

:‐??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 t=18 borde er=0>  

  %‐(not list tening 
<img src= ="http://us s.i1.yimg.com/us.yim mg.com/i/m mesg/emotic cons7/107.gif" width h=52 height t=18 borde er=0>  

:@ @)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 t=18 borde er=0>  

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 t=18 borde er=0>  

:()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 t=18 borde er=0>  

~:>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 t=18 borde er=0>  

@};‐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 t=18 borde er=0>  

%%‐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 t=18 borde er=0>  

**= ==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 t=18 borde er=0>  

(~~)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 t=18 borde er=0>  

~O)c coffee 
<img src c="http://u us.i1.yimg g.com/us.yi img.com/i/ /mesg/emoti icons7/57.gif" width h=18 height t=18 borde er=0>  

*‐:)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 t=18 borde er=0>  

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 t=18 borde er=0>  

=:)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 t=18 borde er=0>  

>‐ ‐)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 t=18 borde er=0>  

:‐Lfrust trated 
<img src c="http://u us.i1.yimg g.com/us.yi img.com/i/ /mesg/emoti icons7/62.gif" width h=18 height t=18 borde er=0>  

[‐O<pr raying 
<img src c="http://u us.i1.yimg g.com/us.yi img.com/i/ /mesg/emoti icons7/63.gif" width h=18 height t=18 borde er=0>  

  $‐)money y 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 t=18 borde er=0>  

:‐"whi istling 
<img src c="http://u us.i1.yimg g.com/us.yi img.com/i/ /mesg/emoti icons7/65.gif" width h=22 height t=18 borde er=0>  

b‐(feeling be eat 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 t=18 borde er=0>  

:)>‐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 t=18 borde er=0>  

[‐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 t=18 borde er=0>  

\:D/da ancing 
<img src c="http://u us.i1.yimg g.com/us.yi img.com/i/ /mesg/emoti icons7/69.gif" width h=26 height t=18 borde er=0>  

>:/bring g 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 t=18 borde er=0>  

;))he ee 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 t=18 borde er=0>  

:‐@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 t=18 borde er=0>  

^:)^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 t=18 borde er=0>  

:‐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 t=18 borde er=0>  

(*)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 t=18 borde er=0>  

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 t=18 borde er=0>  

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 t=18 borde er=0>  

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 t=18 borde er=0>  

(%)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 t=18 borde er=0>  

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 langkahlangkah 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 langkahlangkah 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="2">Ini   <font size="3">Ini   <font size="4">Ini   <font size="5">Ini   <font size="6">Ini   <font size="7">Ini    

font size 1</font>   font size 2</font>   font size 3</font>   font size 4</font>   font size 5</font>   font size 6</font>   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> <a href="#NamaAnchor"> .... </a>

<-- objek anchor <-- 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 : Sign in di blogger Klik menu Template Klik menu Edit HTML 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>

1. 2. 3. 4.

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 : Sign in di blogger Klik menu Layout Klik menu Edit HTML 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>

1. 2. 3. 4.

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> <a name="dua"></a> <a name="tiga"></a> --> pharagrap pertama --> pharagrap kedua --> 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. 2. 3. 4. Silahkan buka alamat http://cooltext.com Lalu klik tulisan Design a Logo Klik gambar contoh logo yang kita sukai 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" Untuk Style ID 1 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" Untuk Style ID 2 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" Untuk Style ID 3 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" Untuk Style ID 4 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" Untuk Style ID 5 border="0"> border="0"> border="0"> border="0"> border="0">

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://rubrikelektronik.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 kodekode 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/bikinblog.html">Membuat Blog</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/cara-settingblog.html">setting Blog</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/memilihtemplate.html">Memilih Template</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-huruf-danwarna.html">warna & huruf</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/cara-mempostingartikel.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-textarea.html">Text area</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/bloggeremoticons.html">Blogger Emoticons</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messengeremoticons.html">Yahoo!Emoticons</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/downloadgratis.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 link ini sangat mudah, yakn kita hanya harus mena k m ni a ambahkan title=" ... " pa link yang kita ada g buat. Con ntoh seperti yang kita be erikan di atas : s
<a href= http://ww =" ww.nshodiq.b blogspot.comtarget="n m new" title= ="mau belajar bikin website sendiri silahkan kl s lik di sin ni">Belajar Web </a> r >

 

Membuat Banner A Animasi
Agar blog kita tampil dinamis da lebih atrak salah sa caranya a an ktif, atu adalah denga memajang an g banner an nimasi.karen dengan ba na anner animasi, mata dari pengunjung akan langs i g sung tertuju kepada b banner terseb terutama apabila kita seorang pe but, a a ebisnis, bann animasi a ner akan lebih ef fektif untuk ikl yang kita pasang di b lan a banding deng banner b gan biasa. Cara m membuat ban nner animasi i sangatlah mudah, ma yang grati h au isan ada, ma yang baya juga ada.T tentunya ada kelebih au ar Tapi a han dan keku urangannya. bagi kita yang bermin dengan b nat banner anim gratis, ki bisa kunju masi ita ungi http://ww ww.addesign ner.com Silah hkan daftar ( (gratis), Jika sudah di ter a rima kita tin nggal memili ih banner ya di sediak trus ya tinggal di m ang kan, masukin ke bl log, mau di s sidebar atau di dalam postingan tentu bisa. Untuk cara pemasangan silahkan ki baca post n n ita tingan terdah hulu bagaimana cara mem masukan kod HTML ke de edalam blog. Contoh b banner anima : asi

erkreasi send kita bisa mengguna diri, a akan software banner ma aker, dengan Nah jika kita ingin be a ekehendak k dan tidak perlu onlin terus di in kita k ne nternet. Untu uk software ini kita bisa berkreasi se mendapa atkannya sila ahkan klik di sini , denga harga yan super mur kita bisa i an ng rah mendapa atkannya di samping pulu s uhan software berharga lainnya. Contoh s sederhana an nimasi banne : er

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, kirikanan, 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 halfSize juga boleh Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah) Disamping tulisan Title, tulis kata yang kita suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja Di bagan bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu Kembali ke bagian atas Klik tmbol bertuliskan Preview and Get Code Copy eluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account kita Silahkan close window situs tersebut. Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML,.

 

Membuat menu D'tree 
Beberapa waktu yang lampau, kita pernah menulis artikel mengenai cara membuat menu yang menyerupai menu yang ada pada Windows explorer yaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporan bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini adalah sebagai referensi agar kejadian tersebut tidak terulang kembali. Saran kita, apabila kita memasang suatu script atau image yang bersumber dari milik orang lain, sebaiknya bersegeralah untuk menyimpannya pada account milik kita, akan tetapi sebelum mengambilnya tentu kita harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan seperti ini, apabila kita menyuruh memasang script seperti ini :

pasanglah kode ini di atas kode </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://templateunik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://templateunik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://templateunik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://templateunik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://templateunik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://templateunik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://templateunik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://template-

unik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://templateunik.blogspot.com/2007/07/scribe-3-column-classic.html'); d.add(5,1,'Free css menu navigation'); d.add(10,5,'Horizontal blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://csslybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://csslybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://csslybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://csslybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://csslybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/redvertical-menu.html'); d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http ://amen24.googlepages.com/globe.gif'); d.add(10,2,'UniQue template','http://templateunik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Css Library','http://csslibrary.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Terune sasaQ','http://terunesasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.co m/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrikelektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(50,2,'Tukeran link','http://tukeranlink.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(60,2,'Pasar Info','http://pasarinfo.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif'); d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif'); d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://kolomtutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');

document.write(d); //--> </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://templateunik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://templateunik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://templateunik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://templateunik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://templateunik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://templateunik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://templateunik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://templateunik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://templateunik.blogspot.com/2007/07/scribe-3-column-classic.html'); d.add(5,1,'Free css menu navigation'); d.add(10,5,'Horizontal blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://csslybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://csslybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://csslybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://csslybrary.blogspot.com/2007/09/vertical-transparent-menu.html');

d.add(70,5,'Vertical blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://csslybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://csslybrary.blogspot.com/2007/09/red-vertical-menu.html'); d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif' ,'http://amen24.googlepages.com/globe.gif'); d.add(10,2,'UniQue template','http://templateunik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(20,2,'Css Library','http://csslibrary.blogspot.com','','','http://24rohman.googlepages.com/icon_user. gif'); d.add(20,2,'Terune sasaQ','http://terunesasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gi f'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepa ges.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrikelektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us er.gif'); d.add(50,2,'Tukeran link','http://tukeranlink.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(60,2,'Pasar Info','http://pasarinfo.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif'); d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif'); d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://kolomtutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');

document.write(d); //--> </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://templateunik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://templateunik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://templateunik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://templateunik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://templateunik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://templateunik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://templateunik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://templateunik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik');

d.add(110,3,'Minima 3 kolom','http://templateunik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://templateunik.blogspot.com/2007/07/scribe-3-column-classic.html'); d.add(5,1,'Free css menu navigation'); d.add(10,5,'Horizontal blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://csslybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://csslybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://csslybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://csslybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://csslybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://csslybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://csslybrary.blogspot.com/2007/09/red-vertical-menu.html'); d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif' ,'http://amen24.googlepages.com/globe.gif'); d.add(10,2,'UniQue template','http://templateunik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(20,2,'Css Library','http://csslibrary.blogspot.com','','','http://24rohman.googlepages.com/icon_user. gif'); d.add(20,2,'Terune sasaQ','http://terunesasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gi f'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepa ges.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrikelektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us er.gif'); d.add(50,2,'Tukeran link','http://tukeranlink.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(60,2,'Pasar Info','http://pasarinfo.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif '); d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif'); d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');

d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://kolomtutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');

document.write(d); //--> </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're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->