Modul Membuat Blog Di Blogspot

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 [email protected].

Selanjutnya ulangi sebagaimana gambar 02 dengan memasukkan kembali e-mail

[email protected] dan password, jika berhasil maka tampilananya seperti gambar di

bawah ini ;

Gambar 03

3. Isi Nama Tampilan dengan nama yang ingin kita tampilkan

4. Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda tik/cek pada kotak di

pinggir tulisan Kita menerima Persyaratan dan Layanan.

Gambar 04

5. Klik gambar anak panah yang bertuliskan "LANJUTKAN"

6. Tuliskan judul blog yang kita inginkan (nanti bisa di rubah lagi) pada form Judul Blog

7. Tulis nama situs kita pada form Alamat Blog (URL)

Gambar 05

8. Tulislah tulisan verifikasi yang ditampilkan pada form Cek Ketersediaan, jika sudah

selesai klik gambar panah yang bertuliskan "LANJUTKAN".

9. Pilihlah gambar (template) yang kita inginkan (nanti bisa di rubah lagi), kemudian klik

gambar anak panah yang bertuliskan "LANJUTKAN"

Gambar 06

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

Gambar 07

11. Klik gambar panah bertuliskan "MULAI BLOGGING".

Gambar 08

12. Silahkan kita tuliskan sesuai dengan visi dan Misi kita, untuk melihat hasil dari

POSTING kita maka klik tombol Lihat Blog.

4. CARA MEMPOSTING ARTIKEL

Bagi yang mengalami sedikit kendala tentang tata cara memposting suatu artikel ke dalam blog,

maka kali ini akan dibahas tentang tata cara posting di www.blogger.com. Di dalam menu

posting ada beberapa toolbar yang bisa kita gunakan. Jika kita sudah terbiasa menggunakan

microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika

memposting suatu artikel, tapi mungkin tidak ada salahnya bila kami bahas sekilas tentang ini,

barangkali ada di antara kita yang masih bingung.

Toolbar yang ada ketika posting :

--> Untuk merubah jenis huruf yang di gunakan

--> Untuk merubah ukuran huruf (heading)

--> Untuk Menebalkan huruf

--> Untuk memiringkan huruf

--> Untuk merubah warna huruf

--> Untuk membuat link

--> Untuk membuat artikel menjadi rata kiri

--> Untuk membuat tulisan menjadi di tengah

--> Untuk membuat artikel menjadi rata kanan

--> Untuk membuat artikel menjadi rata kiri dan rata kanan

--> Untuk membuat sub bahasan oleh angka

--> Untuk membuat sub bahasan oleh bullet

--> Untuk mengecek spelling

--> Untuk memasukan gambar (upload gambar)

--> Untuk membuat artikel dalam kode HTML

--> Untuk membuat artikel dalam mode Compose (biasa)

--> Untuk me review (melihat) artikel

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di

edit, kemudian tekan tombol toolbar yang di inginkan

Bagi para pemula, biasanya kita bingung setelah daftar membuat blog dan berhasil maka apa yang

harus di isi (diposting) dalam sebuah blog. Isi (conten ) dari sebuah blog tentu saja terserah kepada si

pemilik blog itu sendiri, apakah mau di isi puisi, perjalanan hidup, teknik, ataupun apa saja. Nah di

sini kami menyarankan, isilah blog kita sesuai dengan misi kita The Writer Is Blogger dengan tujuan

untuk memotivasi bapak/ibu guru selalu memperbaharui informasi dan pengetahuan dalam

menunjang tugas profesionalnya dengan menulis, meningkatkan kemampuan bapak/ibu guru dalam

mempublikasikan tulisannya, meningkatkan informasi dan komunikasi antara guru dengan siswa,

dan akhirnya meningkatkan mutu proses pembelajaran siswa.

5. CARA SETTING BLOG

Bagi kita yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan

agar blog kita bisa di kenali mesin pencari (search engine) semisal Google, Yahoo, MSN dan

lain - lain. Beberapa hal yang harus di setting, silahkan ikuti langkah-langkahnya : 1. Silahkan Login ke www.blogger.com dengan user name (e-mail) dan password yang

telah dimiliki

2. Klik judul blog yang mau di setting

3. Klik Pengaturan, lalu klik Dasar. Beberapa form yang harus di isi pada menu Dasar :

• Judul isi dengan judul blog kita. Contoh : p-tiok’s blog

• Uraian isi dengan deskripsi blog kita. Contoh : disini kami menyarankan untuk

diisikan Staf Pengajar TIK (sesuai mata pelajaran) SMAN 1 Kkitangan Kediri

• Tambahkan blog Kita ke daftar kami? pilih ya agar setiap posting kita selalu

masuk di daftar Blogger.com.

• Biarkan mesin pencari menemukan blog Kita? pilih ya

• Tampilkan Editing Cepat di Blog Kita? pilih Ya

• Tampilkan Link Posting Email? Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-

apa

• Konten Dewasa? Pilih tidak. Kalau pilih ya berarti blog kita di anggap blog untuk

dewasa (semacam blog porno)

• Tampilkan Mode Compose untuk semua blog Kita? pilih Ya

• Aktifkan transliterasi? pilih Tidak, jika kita ingin ada button untuk mengubah

biasa ke huruf hindi (India), pilih ya jika sebaliknya)

• Klik tombol Simpan Pengaturan . Selesai

4. Klik Publikasikan untuk mengatur menu Publikasi :

• Alamat Blogspot isi dengan nama kita. Contoh : p-tiok.blogspot. Biasanya alamat

yang tercantum adalah langsung alamat blog kita.

• Klik tombol Simpan pengaturan. Selesai

5. Klik Format untuk mengatur menu format :

• Tampilkan pilih angka posting yang ingin kita tampilkan. Misal: Tampilkan 6

posting, berarti posting yang akan tampil di halaman blog kita adalah sebanyak enam

posting. Pilih posting (jangan hari) pada menu pulldown.

• Format Header Tanggal pilih model tanggal/bulan yang kita sukai, Format

tanggal/bulan ini akan selalu muncul diatas postingan kita.

• Format tanggal Index Arsip pilih model untuk peng-arsip-an yang kita kehendaki.

• Format Timestamp Pilih bentuk waktu yang kita sukai.

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

+7.00]Asia/Jakarta.

• Bahasa Pilih bahasa yang di inginkan.

• Tampilkan Field judul Pilih ya

atau tidakpun tidak apa-apa

• Tampilkan kolom link pilih ya, tapi sekitainya pilih tidak juga tidak apa-apa.

• Aktifkan perataan float pilih ya, tapi sekitainya mau pilih tidak juga tidak apa-apa

• Klik tombol Simpan Pengaturan. Selesai

6. Klik Komentar Untuk mengatur menu komentar :

• Komentar pilih tampilkan, ini agar artikel kita dapat di komentari oleh

pengunjung

• Siapa yang Bisa Berkomentar ? Pilih Siapa pun - termasuk Pengguna Anonim.

Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota

blogspot saja.

• Default Komentar untuk Posting pilih Posting baru memiliki komentar.

• Link balik Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada

yang memasang link pada artikel kita.

• Default Link Balik untuk Posting pilih Posting baru Memiliki Link Balik.

• Format Timestamp Komentar pilih format jam yg singkat. Contoh: 8.00 PM.

• Tampilkan komentar dalam sebuah window popup? pilih Ya. Supaya ketika di klik

oleh pengunjung, halaman blog kita tidak menghilang/tertimpa halaman komntar.

• Aktifkan moderasi komentar? pilih Tidak (sebaiknya).

• Tampilkan verifikasi kata untuk komentar? pilih Ya. ini di maksudkan agar

terhindar dari software robot dengan tujuan melakukan spam.

• Tampilkan gambar profil dalam komentar? pilih ya. Supaya gambar komentator yg

punya id blogger, dapat menampilkan fotonya.

• Email Pemberitahuan Komentar isi dg alamat email kita, ini di maksudkan agar

setiap ada yang berkomentar pada artikel kita, kita dapat kiriman email dari

blogger.com sebagai pemberitahuan.

• Klik tombol Simpan Pengaturan. Selesai

7. Klik Arsipkan Untuk mengatur menu Arsipkan :

• Frekuensi Arsip pilih Bulanan.

• Aktifkan Halaman Posting? pilih ya.

• Klik tombol Simpan Pengaturan . Selesai.

8. Klik Fedd Situs untuk mengatur menu feed situs :

• Izinkan Feed Blog pilih Penuh.

• Posting URL Pengubahan Arah Feed di isi dengan alamat feed penggati semisal

alamat feed dari feed burner, jika belum punya, di kosongkan saja.

• Footer Feed Posting Silahkan di isi dengan kode iklan yang kita punya, misal kode

iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.

• Klik tombol Simpan Perubahan. Selesai

6. Memilih Template Bagi yang sudah melakukan beberapa settingan seperti posting terdahulu, langkah selanjutnya

yang perlu dilakukan adalah memilih template, namun tidak mutlak harus berurutan boleh

dilakukan sesuai dengan kebutuhan kita masing – masing.

Sekilas tentang template

Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya

(misal: gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program

atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang kita lihat sekarang, seperti banner

diatas, background warna putih, kolom-kolom di samping kanan, serta semua yang kita lihat

sekarang adalah salah satu bentuk dari desain template.

Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik

untuk dilihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-

lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang.

Langkah – langkah pemilihan template di www.blogger.com; • Login terlebih dahulu seperti biasa dengan memakai user name dan password

• Klik ” Tata Letak ” kemudian klik "Pilih Template Baru"

• Klik pada salah satu template yang telah disediakan. Sebelum memutuskan dalam

memilih "template" ini, sebaiknya kita lihat terlebih dahulu satu persatu contoh layout

yang di sediakan dengan cara meng-klik tulisan "pratayang template". Jika di rasa sudah

menemukan yang paling kita sukai, silahkan klik tulisan "Simpan template" yang ada di

sebelah kanan atas.

Mungkin kita pernah mengunjungi beberapa blog di internet yang menggunakan

blogger.com (blogspot), akan tetapi template yang di gunakan tidak ada dalam pilihan

ketika memilih template. Ini ada kemungkinan bahwa template yang di gunakan adalah

template buatan bukan dari blogger sendiri.

Di internet banyak sekali situs-situs yang memberikan template secara gratis untuk di

pakai di Blogger (blogspot), Jika ingin melihat-lihat berbagai template buatan bukan dari

blogger.com, bisa searching di Google. Tapi perlu di ketahui, karena blogger beta (baru)

terbilang masih sangat baru sehingga penyedia template gratis kebanyakan menyediakan

template untuk di pakai di template classic..

7. Mengatur Huruf dan Warna Untuk para blogger baru, kita akan menikmati fasilitas baru dari blogger.com, yaitu kita bisa

mengatur jenis font (huruf) serta warna font dengan sangat mudah. Di bawah adalah langkah

untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan

untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and

Colors", maka akan muncul beberapa pengaturan; (ini khusus untuk template "minima")

1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang

ada di sebelah kanan yang di sukai

2. Text Color --> pengaturan warna huruf dari posting-an

3. Link Color --> pengaturan warna huruf yang di link

4. Blog Title Color --> pengaturan warna huruf judul Blog

5. Blog Description Color --> pengaturan warna huruf deskripsi blog

6. Post Title Color --> pengaturan warna huruf judul posting-an

7. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis

pemisah

8. Sidebar Title Color --> pengaturan warna huruf judul yang kita di sidebar (kolom

samping)

9. Sidebar Title Color --> pengaturan warna huruf yang ada di sidebar(kolom samping)

10. Visited link Color --> pengaturan warna huruf link ketika pengunjung mengarahkannya

ke tulisan yang mengandung link

11. Text Font --> pengaturan jenis huruf,berlaku untuk huruf hasil dari posting-an ataupun

huruf yang ada di sidebar

12. Sidebar Title Font --> pengaturan jenis huruf untuk judul yang ada di sidebar serta

tanggal postingan

13. Blog Title Font --> pengaturan jenis huruf Judul blog

14. Blog Description Font --> Pengaturan jenis huruf dekripsi blog

15. Post Footer Font --> pengaturan jenis huruf footer (contoh : posted by )

16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai

Untuk template – template selain template "minima", pada dasarnya sama, hanya saja ada

sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang dirubah, kita

cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.

8. Pasang Image Pada Judul Artikel

IMAGE. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan.

Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat, walaupun tentu

saja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di akses oleh para

pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para

pengunjung akan menjadi malas untuk berkunjung.

Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan,

antara lain :

• Langkah pertama

Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di

inginkan. Jika kita mahir dalam program grafik & design semisal Adobe Photoshop

ataupun Coreldraw, bisa membuat sendiri dengan bentuk yang sesuka kita. Tapi kalau

tidak belum bisa gunakan layanan di internet.

• Langkah kedua

langkah kedua yaitu kita harus upload image atau logo tersebut, bisa ke blogger ataupun

ke hosting lain. Misalkan biasanya kita menyimpan setiap image yang kita punya di

www.photobucket.com.

• Langkah ketiga

Langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di

inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak

dipandang mata. Misalkan kita mempunyai URL image seperti ini : http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif

Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan

kode :

<

S<

s

d

te

te

ku

k

w

b

d

se

<

s

w

se

img src="

ehingga kodimg

rc="http:

an yang akan

ersebut adala

entu saja bila

urang enak d

ita bisa men

idth="...

ingkai, dan d

ari setting te

eperti ini :

img

rc="http:

idth="45"

ehingga ima

"URL image

denya akan j

//i162.ph

n tampil ada

ah seperti ini

a kita memaj

dilihat jika d

nambahkan b

" untuk leb

dalam hal in

emplate yang

//i162.ph

" hight="4

age yang tadi

e">

adi seperti in

hotobucke

alah image d

i :

jang image s

dipadukan de

beberapa atri

ar, height=

ni yang dipak

g memakai n

hotobucke

45" borde

i akan berub

ni :

t.com/alb

dengan ukura

sesuai ukura

engan tulisan

ibut kedalam

="..." untu

kai adalah bo

nilai border.

t.com/alb

r="0">

ah jadi seper

bums/t253/

an yang sebe

an image yan

n judul posti

m kode image

uk tinggi, da

order dengan

Kita ambil c

bums/t253/

rti ini :

/rohman24

enarnya. con

ng aslinya, in

ing. Untuk m

e tersebut, an

an border="

n nilai 0 (nol

contoh kode

/rohman24

/kupu2.gi

ntoh image

ni menjadi

mengakaliny

ntara lain atr

"..." untuk

l) agar terhin

image tadi j

/kupu2.gi

if">

a

ribut

k

ndar

jadi

if"

• 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"> <$BlogItemTitle$>

pemasangn kode adalah untuk memberi jarak spasi antara image dengan

tulisan judul, sebab jika tidak menambahkan kode 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


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


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


width="45" hight="45" border="0"></img>

<data:post.title/></a>

<b:else/>

10. Klik tombol PREVIEW untuk melihat perubahan

11. bila sudah OK, klik tombol SAVE TEMPLATE

12. Selesai

9. Upload Gambar dan Foto Profile Agar posting artikel pada blog lebih menarik untuk dilihat, maka sebaiknya kita menyisipkan

gambar di antara postingan kita tersebut, di samping untuk lebih memperjelas apa yang kita

sampaikan. Misalkan kita sedang menerangkan sesuatu, maka dengan adanya gambar akan lebih

memperjelas maksud dari topik yang sedang kita jelaskan kepada para pembaca artikel kita.

Untuk itu ikutilah langkah – langkah untuk memasukan gambar atau istilah resminya yaitu

upload gambar, yaitu :

1. Klik Posts

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

3. Klik toolbar yang bergambar seperti ini

4. Beri tanda titik/cek pada radio button pada pilihan Choose a layout, bila kita

menginginkan posisi gambar bisa di tempatkan di mana saja, pilih pada radio button

None, bila posisi gambar di sebelah kiri pilih left, bila ingin di tengah pilih Center, bila

ingin di kanan pilih Right.

Beri tanda tik/cek pada Image size, bila ingin gambar yang di upload hasilnya kecil pilih

Small, bila ingin sedang pilih Medium, bila ingin besar pilih Large

5. Beri tanda ceklis di samping tulisan Use this layout every time bila kita menginginkan

setiap upload gambar settingnya seperti semula

6. Tekan tombol Browse, lalu masukan gambar dari komputer kita yang ingin di upload.

7. Klik Add another image bila gambar yang ingin di upload lebih dari satu gambar

8. Klik tombol UPLOAD IMAGE, tunggu beberapa saat sampai proses upload selesai

9. Klik Tombol Done untuk mengakhiri proses upload

Setelah proses upload kita selesai, untuk melihat gambar tadi, klik tombol Compose. Nah disini

kita bisa melihat gambar yang kita upload tadi sekaligus dapat mengatur kembali ukuran dari

gambar ini, caranya yaitu klik gambar tersebut sampai gambar anak panah mouse kita berubah

menjadi gambar panah empat penjuru. Arahkan mouse pada garis samping gambar sampai

gambar mouse berubah menjadi panah dua arah, tekan tombol mouse lalu tahan dan gerakan

kearah kiri atau kanan untuk merubah lebar gambar, bila susah sesuai dengan yang kita inginkan

lepas tombol yang kita tahan tadi. Untuk mengatur tinggi gambar, arahkan mouse pada tepi

bawah atau atas gambar sampai gambar mouse berubah menjadi anak gambar panah dua arah,

tekan mouse lalu tahan kemudian gerakan mouse keatas atau kebawah untuk mengatur tinggi

gambar, lepaskan mouse bila ukuran gambar sudah sesuai dengan yang kita inginkan.

Nah sekarang bagaimana cara memasukan foto untuk mengisi Profile kita?, caranya sama seperti

langkah-langkah di atas, cuma ada sedikit perbedaan yaitu kita harus menghapus beberapa kode

tersebut. Jika foto kita sudah selesai di upload (langkahnya sama seperti di atas). Tekanlah menu

Edit HTML untuk melihat kode HTML dari foto kita tadi, copy / paste kode HTML tersebut

kedalam program notepad (agar lebih mudah) atau bisa juga ditulis di kertas. Kemudian klik

publish. Untuk memasukan foto kedalam Profile kita, silahkan ikuti langkah berikut:

1. Setelah upload gambar, klik menu Dasboard

2. Klik menu Edit Profile

3. Di dalam form - form isian profile ada tulisan Photo URL, nah disini paste kode HTML

yang telah kita copy tadi ke dalam notepad tapi jangan semuanya, yaitu yang di paste

adalah kode setelah tulisan [src="] yaitu link yang di mulai dengan [http://] dan berakhir

dengan [.jpg] atau [.jpeg]

4. Klik Save Profile, maka foto kita yang cantik dan ganteng sudah terpampang di blognya

dan bisa dilihat oleh seluruh dunia

5. Selesai

Sebenarnya ada cara lain untuk mengisi foto Profile kita, yaitu dengan cara mengupload

(memasukkan) foto kita pada hosting lain, dan baru kemudian link URL foto yang kita dapat dari

hosting tersebut di copy/paste ke profile yang ada di blogger/blogspot. Kita ambil contoh,

biasanya kita menyimpan foto-foto di http://photobucket.com. jika kita mau silahkan daftarkan

diri kita (gratis), apabila sudah selesai daftar dan bisa login, silahkan upload photo kita. Setelah

proses upload foto selesai, maka secara otomatis foto tersebut akan di beri PHOTO URL, copy

alamat link URL foto tersebut lalu paste di Profile Blogger.com pada kolom Photo URL setelah

itu tinggal SAVE CHANGES dan RE-PUBLISH.

10. Membuat efek Marquee Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau

berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya

karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat

tempat pada halaman blog.

Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.

Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar

Slide--> teks bergerak sekali lalu berhenti

Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka

semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right" height="200" scrollamount="2"

width="30%"> marquee dari kanan ke kiri </MARQUEE> hasilnya : …

ganti kata "left" dengan keinginan kita yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :

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

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

hasilnya : …..

Contoh marquee dengan variasi huruf dan warna latar belakang : <div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE

BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate"> </MARQUEE></b></FONT></div> hasilnya :

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan

berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini

hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse kita ke area marquee di bawah ini : <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini </marquee> hasilnya : ….

Apabila

source c

beriku

<img sr

<img sr

<img sr

<img sr

<img sr

<img sr

<img sr

<img sr

<img sr

a kita ingin m

codenya, bia

ut, sisipkan p

rc="http:/

rc="http:/

rc="http:/

rc="http:/

rc="http:/

rc="http:/

rc="http:/

rc="http:/

rc="http:/

<img src

<img src

<img src

<img src

menghiasi po

ar kita bebas

pada kata yan

//us.i1.yim

//us.i1.yim

//us.i1.yim

//us.i1.yim

//us.i1.yim

//us.i1.yim

//us.i1.yim

//us.i1.yim

//us.i1.yim

c="http://u

c="http://u

c="http://u

c="http://u

1

ostingannya

ngakak atau

ng sesuai de

mg.com/us.

mg.com/us.

mg.com/us.

mg.com/us.

mg.com/us.

mg.com/us.

mg.com/us.

mg.com/us.

mg.com/us.

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

11. Memb

dengan berb

u cemberut s

engan posting

yang

yimg.com/i

yimg.com/i

yimg.com/i

yimg.com/i

yimg.com/i

yimg.com/i

yimg.com/i

yimg.com/i

yimg.com/i

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

uat Yahoo

bagai ekspre

selagi posting

gan kita, kal

g lagi ngakak

i/mesg/emo

i/mesg/emo

i/mesg/emo

i/mesg/emo

i/mesg/emo

i/mesg/emo

i/mesg/emo

i/mesg/emo

i/mesg/emo

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

o ! Messen

esi dari yaho

g. Silahkan c

lo lagi sedih

k,...

oticons7/1.height

oticons7/2.height

oticons7/3.height

oticons7/4.height

;;)oticons7/5.

height

oticons7/6.height

oticons7/7.height

oticons7/8.height

oticons7/9.height

/mesg/emotih=18 height




ger Emoti

o, kita harus

copy source

jangan di pa

:)h.gif" widtt=18 borde

.gif" widtt=18 borde

;)win.gif" widtt=18 borde

:Dbig.gif" widtt=18 borde

batting eyela.gif" widtt=18 borde

>:D<big.gif" widtt=18 borde

:-/conf.gif" widtt=18 borde

:xlove s.gif" widtt=18 borde

:">blus.gif" widtt=18 borde

:Ptoicons7/10.t=18 borde

:-icons7/11.t=18 borde

=((broken icons7/12.t=18 borde

:-Osuricons7/13.t=18 borde

cons

s tahu

code

asang

happy th=18 er=0>

:(sad th=18 er=0> nking th=18 er=0> g grin th=18 er=0> ashes th=18 er=0> g hug th=42 er=0> fused th=20 er=0> struck th=18 er=0> shing th=18 er=0> ongue gif" er=0> -*kiss gif" er=0>

heart gif" er=0> rprise gif" er=0>

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src=

<img src=

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

="http://us

="http://us

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

s.i1.yimg.

s.i1.yimg.

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

com/us.yim

com/us.yim

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

mg.com/i/mwidth

mg.com/i/mwidth










//mesg/emotih=18 height

=))ro/mesg/emotih=30 height



=/mesg/emotih=18 height

:o3puppmesg/emotich=31 height

mesg/emotich=40 height

X(aicons7/14.t=18 borde

:>sicons7/15.t=18 borde

B-icons7/16.t=18 borde

:-Swoicons7/17.t=18 borde

#:-Swicons7/18.t=18 borde

>:)icons7/19.t=18 borde

:((cicons7/20.t=18 borde

:))laugicons7/21.t=18 borde

:straighticons7/22.t=18 borde

/:)raised eyeicons7/23.t=18 borde

olling on the icons7/24.t=18 borde

O:-)aicons7/25.t=18 borde

:-Bicons7/26.t=18 borde

=;talk to the icons7/27.t=18 borde

py dog eyes ‐cons7/108.t=18 borde

:‐??I don't cons7/106.t=18 borde

angry gif" er=0> smug gif" er=0> -)cool gif" er=0> orried gif" er=0> whew! gif" er=0> )devil gif" er=0> rying gif" er=0> ghing gif" er=0> t face gif" er=0> ebrow gif" er=0>

floor gif" er=0> angel gif" er=0> Bnerd gif" er=0>

hand gif" er=0> New! gif" er=0>

know gif" er=0>

<img src=

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

="http://us

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

s.i1.yimg.

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

com/us.yim

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

mg.com/i/mwidth

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

mesg/emotich=52 height
















%‐(not listcons7/107.t=18 borde

:@icons7/49.t=18 borde

3:‐icons7/50.t=18 borde

:()moicons7/51.t=18 borde

~:>chicons7/52.t=18 borde

@}icons7/53.t=18 borde

%%‐goodicons7/54.t=18 borde

**=icons7/55.t=18 borde

(~~)pumicons7/56.t=18 borde

~O)cicons7/57.t=18 borde

*‐icons7/58.t=18 borde

8‐Xicons7/59.t=18 borde

=icons7/60.t=18 borde

>‐icons7/61.t=18 borde

:‐Lfrusticons7/62.t=18 borde

[‐O<pricons7/63.t=18 borde

tening gif" er=0>

@)pig gif" er=0>

Ocow gif" er=0>

onkey gif" er=0>

hicken gif" er=0>

;‐rose gif" er=0>

d luck gif" er=0>

==flag gif" er=0>

mpkin gif" er=0>

coffee gif" er=0>

:)idea gif" er=0>

Xskull gif" er=0>

=:)bug gif" er=0>

‐)alien gif" er=0>

trated gif" er=0>

raying gif" er=0>

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

<img src

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

c="http://u

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

us.i1.yimg

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

g.com/us.yi

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

img.com/i/width

















$‐)moneyicons7/64.t=18 borde

:‐"whiicons7/65.t=18 borde

b‐(feeling beicons7/66.t=18 borde

:)>‐peacicons7/67.t=18 borde

[‐Xshame oicons7/68.t=18 borde

\:D/daicons7/69.t=18 borde

>:/bringicons7/70.t=18 borde

;))heicons7/71.t=18 borde

:‐@chatticons7/76.t=18 borde

^:)^not wicons7/77.t=18 borde

:‐joh icons7/78.t=18 borde

(icons7/79.t=18 borde

o‐icons7/72.t=18 borde

o=icons7/73.t=18 borde

o‐icons7/74.t=18 borde

(%)yinicons7/75.t=18 borde

y eyes gif" er=0>

istling gif" er=0>

eat up gif" er=0>

e sign gif" er=0>

n you gif" er=0>

ancing gif" er=0>

g it on gif" er=0>

ee hee gif" er=0>

erbox gif" er=0>

worthy gif" er=0>

go on gif" er=0>

*)star gif" er=0>

‐>hiro gif" er=0>

=>billy gif" er=0>

+april gif" er=0>

n yang gif" 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 langkah-

langkah berikut ini :

1. Seperti biasa kita harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe,

free>>, ataupun dengan mengklik tulisan Sign Up, silahkan kita tulis data – data kita pada

form yang telah di sediakan.

2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan kita login dengan id

kita

3. Pada kolom yang berjudul Style, klik menu appearance.

4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur

tampilan buku tamu kita, silahkan pilih yang sesuai dengan keinginan kita. Jika sudah

selesai klik Save Setting.

5. Untuk mendapatkan kode HTML dari shoutbox kita, silahkan klik Use Shoutbox yang

berada di bawah menu Quick Start

6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan

7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan

Generated Codes, lalu simpan di program Notepad kita

8. Klik Log out yang berada di atas layar kita untuk keluar dari halaman shoutmix kita.

Silahkan close situs tersebut.

9. Selesai

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

berikut ini;

Untuk blogger dengan template klasik :

1. Silahkan Login dengan id kita


3. Klik Edit HTML

4. Paste kode HTML shoutbox kita yang telah di copy pada notepad tadi di tempat yang kita

inginkan

5. Untuk jelasnya kita ambil contoh dengan shoubox milik kita, untuk menempatkannya

tinggal klik Edit pada browser lalu pilih Find (on this page).. kemudian tuliskan kata

buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah

ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.

6. Klik tombol Preview untuk melihat perubahan yang kita buat.

7. Jika sudah cocok dengan perubahan tadi, klik Save Template Changes

8. Selesai

Agar shoutbox kita sesuai dengan ukuran lebar sidebar, kita bisa merubah ukuran lebar ataupun

tinggi dari shoutbox , caranya kita tinggal merubah angka Width (untuk lebar) dan Height (untuk

tinggi) dari dalam kode HTML shoutbox tersebut.

Untuk Blogger baru :

1. Silahkan Login dengan id kita

2. Klik menu Layout

3. Klik Page Element

4. Klik Add a Page Element

5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript

6. Tuliskan judul shoutbox kita pada form title. Contoh : Buku tamu, atau my guestbook

atau apa saja yang kita suka

7. Copy paste kode HTML shoutbox kita di dalam form Content

8. Klik tombol Save Changes

9. Drag & Drop element yang telah kita buat tadi di tempat yang di sukai

10. Tekan tombol Save

dsfgsdfgsdf pikirkan adalah lagu yang kita sukai belum tentu di sukai oleh para pengunjung,

sehingga ini akan mengganggu kenyamanan bagi para pembaca blog ita.

Contoh

14. Cara Pasang Musik Pada Blog Untuk memasang musik di blog, kita bisa memanfaatkan situs penyedia musik gratisan yang

banyak bertebaran di internet, yang penting kita jeli untuk mencarinya. Pada intinya ada tiga

jenis situs penyedia music, yaitu :

1. Situs tersebut menyediakan berbagai pilihan lagu yang bisa kita pilih sesuai dengan selera

kita

2. Situs tersebut tidak menyediakan lagu, tapi kita harus upload lagu dari komputer kita

3. Situs tersebut menyediakan berbagai pilihan lagu, atau bisa juga kita upload lagu dari

komputer

Tentu diantara ketiganya ada kelebihan dan kekurangannya. Keuntungan menggunakan jasa situs

yang pertama yaitu kita tidak perlu mempunyai lagu sendiri, kita tinggal pilih lagu yang di sukai

lalu ambil kode HTML nya kemudian masukan ke blog kita, prosesnya sangat cepat dan praktis.

Tapi kekurangannya yaitu terkadang lagu yang kita sukai tidak tersedia di situs tersebut.

Untuk situs kedua, keuntungannya yaitu kita bisa memasukan lagu yang kita sukai tanpa harus

tergantung dari situs tersebut jadi apapun lagunya pasti bisa yang penting ya kita harus

mempunyai file lagu yang harus di upload. Kekurangannya yaitu karena kita harus upload lagu

ke situs tersebut maka dalam proses upload biasanya memerlukan waktu yang cukup lumayan

lama, sehingga sedikit membosankan ketika melakukan proses upload juga tentunya biaya

berinternet kita jadi semakin bengkak.

Untuk situs ketiga, untuk saat ini kita baru mengetahui satu situs saja, tolong kepada para kita

yang mengetahui situs-situs yang masuk kategori ini untuk menginformasikan pada kotak

komentar agar di ketahui oleh para kita lainnya. Untuk situs ini kelebihannya ya kita lebih bisa

memilih, mau pake lagu yang tersedia atau mau upload juga bisa. tapi ada kekurangannya yaitu

tidak di sediakannya panel kontrol untuk para pengunjung, jadi lagu yang kita pasang tidak bisa

di apa – apakan oleh para pengunjung sehingga akan jalan dengan sendirinya, yang perlu kita

pikirkan adalah lagu yang kita sukai belum tentu di sukai oleh para pengunjung, sehingga ini

akan mengganggu kenyamanan bagi para pembaca blog ita.

Contoh yang pertama adalah memanfaatkan situs yang telah menyediakan berbagai lagu tanpa

harus upload terlebih dahulu, kita ambil contoh www.song2play.com. silahkan ikuti langkah-

langkah berikut :

1. Silahkan ketik alamat untuk menuju www.song2play.com

2. Masukan judul lagu yang kita inginkan pada search engine yang tersedia. Contoh : Hotel

California. Atau menuliskan nama penyanyi atau grup bandnya. Contoh the Eagle

3. Jika judul lagu belum muncul, biasanya ada tulisan Click here to get more Result. klik

aja tulisan tersebut

4. Setelah terlihat beberapa judul lagu, klik pada judul lagu yang sedang kita cari, secara

otomatis akan ditampilkan kontrol navigasi dan lagu yang dipilih tadi akan di

perdengarkan

5. Di pojok kiri bagian bawah ada kotak yang sudah di beri tanda centang, yaitu AutoStart,

Show song Title. AutoStart artinya ketika pengunjung mengunjungi blog kita, maka lagu

akan langsung play. Jika tidak mau langsung play alias memberi kesempatan kepada

pengunjung untuk memilih sendiri apakah mau mendengarkan lagu atau tidak, kita

hilangkan tanda centang tadi dengan cara mengkliknya

6. Show Song Title artinya pada panel navigasi akan di munculkan judul lagu yang di muat.

Jika tidak mau muncul ya hilangkan saja tanda centangnya

7. Copy seluruh kode HTML yang di sediakan pada text area, paste pada notepad. Silahkan

close window situs tersebut

8. Langkah selanjutnya yaitu kita tinggal masukan kode HTML yang diberikan tadi ke

dalam blog.

Jika kita ingin menyesuaikan lebar panel navigasi agar sesuai dengan sidebar blog kita, kita bisa

merubah nilai yang ada pada kode HTML lagu tersebut yaitu nilai width=...px. Contoh :

didalam kode tersebut ada kode width=310px, untuk memperkecilnya kita tinggal perkecil nilai

px nya. Contoh : width=200px.

Situs yang serupa dengan ini adalah www.songhere.com. Mungkin pemiliknya memang sama.

Langkah-langkah mendapatkan kode HTML dari situs ini mirip dengan langkah-langkah diatas,

Untuk yang di situs www.songhere.com ini tidak di sediakan pasilitas untuk memilih fasilitas

AutoStart atau tidak, jadi kalau kita memakainya akan langsung play tanpa harus di klik oleh

pengunjung, untuk mengakalinya kita harus mengganti sendiri kode nya, silahkan kita cari di

dalam kode lagu tersebut yang bertuliskan autostart=true, ganti tulisan true menjadi false

sehingga kode tadi akan menjadi seperti ini autostart=false, contoh hasil kode yang sudah

kita rubah adalah lagu dari white lion di atas, yang untuk menjalankannya harus di klik dulu

tombol play nya.

Contoh situs yang menyediakan berbagai lagu yang bisa kita pilih, sekarang contoh situs yang

harus meng upload lagu dari komputer kita salah satunya adalah www.tunefeed.com

Untuk langkah-langkahnya, silahkan ikuti seperti di bawah ini :

1. Ketik alamat untuk menuju situs www.tunefeed.com

2. Klik kotak di sebelah tulisan widget Color, pilih warna panel navigasi yang kita sukai

3. Klik tombol yang ada tulisan Click here to share your music

4. Klik tombol yang bertuliskan Add Music or Photos

5. Masukan file foto atau pun lagu yang kita miliki

6. Klik tombol upload

7. Sambil menunggu proses upload, kita isi data-data diri kita pada kolom yang di sediakan

8. Tunggu sampai proses upload selesai

9. jika proses upload selesai, kita akan di minta untuk mngecek email di berikan tadi

10. silahkan buka email dari www.tunefeed.com bila sudah sampai

11. Klik link ntuk melakukan aktivasi keanggotaan, nah dengan mengklik link tadi otomatis

kita sudah berada pada halaman acount kita

12. Klik tulisan Share This Tunefeed

13. Pilih volume yang diinginkan pada menu dropdown di samping tulisan Select Volume

14. Pilih mode player, mau autoplay atau tidak pada menu dropdown di samping tulisan

auto-play, sebaiknya pilih No

15. Copy seluruh kode yang di berikan pada text area kemudian paste di notepad

16. Klik tulisan Log Out untuk keluar dari halaman account kita

17. Silahkan close window browser kita

18. Tugas selanjutnya yaitu memasukan kode HTML yang sudah diberikan ke dalam blog.

Untuk caranya sudah kita bahas pada tulisan di atas.

Contoh panelnya yaitu seperti di bawah ini, silahkan klik tombol play untuk mengaktifkannya,

tunggu beberapa saat, loadingnya agak sedikit lama : Untuk contoh kategori yang ketiga, kita

bisa kunjungi www.iwebmusic.com, caranya hampir mirip dengan cara-cara diatas, disini kita

bisa pilih lagu yang di sediakan atau bisa juga meng upload lagu dari komputer. Cuma kita untuk

yang satu ini tidak mempunyai panel kontrol buat pengunjung yang ada hanya berupa banner

biasa dan bekerja auto start sehingga kita tidak bisa memberi contoh panelnya.

15. Ada Video di artikel Memuat video diantara artikel, selain untuk memperindah artikel itu sendiri, juga video ini bisa

berfungsi sebagai media yang efektif dalam menyampaikan sesuatu kepada para pengunjung.

Terlebih apabila kita merupakan seorang pengajar yang dengan video ini dapat lebih

memperjelas tujuan kita di banding dengan hanya sebuah tulisan.

Untuk membuat sebuah video, kita bisa menggunakan situs layanan pembuatan video, salah

satunya adalah http://www.youtube.com. Ikuti langkah-langkah berikut ini :

1. Untuk daftar www.youtube.com silahkan ketik alamat tersebut di address bar

2. Setelah berada di situs tersebut, klik tulisan Sign Up yang berada pada layar bagian atas

3. Isi semua data diri kita pada form yang di sediakan, jangan lupa beri tanda tik/cek pada

kotak di samping tulisan --> Sign me up for the "Broadcast Yourself" email - I agree to

the terms of use and privacy policy. lalu klik tombol Sign Up

4. Setelah berhasil, kita diminta untuk veryfikasi, silahkan cek email yang kita daftarkan

tadi untuk melakukan veryfikasi

5. Jika email dari www.youtube.com sudah masuk, silahkan buka lalu klik tulisan Confirm

your email addres

6. Dengan mengklik tulisan tadi, secara otomatis kita sudah masuk kedalam halaman

account kita dan siap untuk upload video

7. Klik tulisan Upload Video yang berada pada layar sebelah atas

8. Isi form yang di sediakan

9. Klik tombol bertuliskan Continue Uploading

10. Klik tombol Browse, masukan file video yang ingin kita masukan

11. Beri tanda tik/cek pada radio button, public--> jika video kita bisa dilihat oleh umum.

Private -->Jika video kita bersifat pribadi yang hanya bisa di lihat oleh orang yang kita

tunjuk

12. Klik tombol Upload Video, tunggu beberapa saat sampai proses upload selesai

13. Setelah proses upload selesai, kita tinggal mengcopy kode HTML yang di berikan. lalu

paste pada Notepad

14. Silahkan klik Log Out untuk keluar dari situs tersebut

15. Selesai. kita sudah mempunyai video yang bisa di simpan pada artikel kita

Untuk memasukan kode video yang telah kita copy tadi, caranya yaitu kita tinggal posting artikel

seperti biasa lalu sisipkan kode tersebut pada tempat yang kita inginkan. Cuma saat copy dan

paste kode tersebut posisi posting harus pada Edit HTML jangan pada posisi Compose. Jika

sudah selesai memasukan artikel, Tinggal klik Publish dan video kita siap di lihat oleh para

pengunjung blog kita.

16. Cara Daftar di Search Engine Tak di sangkal bahwa tujuan utama dari membuat blog antara lain adalah agar tulisan-tulisan kita

bisa di baca oleh orang lain atau pengunjung blog, semakin banyak yang berkunjung apalagi

memberikan komentar pada apa yang kita posting tentunya akan membuat hati kita merasa

senang dan bahagia. Akan tetapi tentunya tidak serta merta blog kita akan ramai di kunjungi, ini

memerlukan usaha publikasi yang gencar dari pemilik blog apabila ingin banyak pengunjungnya.

Banyak cara yang bisa kita lakukan agar blog kita bisa dikenal dan di kunjungi, antara lain

adalah dengan rajinnya kita blogwalking atau berkunjung ke blog milik orang lain, mendaftarkan

ke berbagai agregator, dan yang paling efektif adalah melalui search engine atau mesin pencari.

Bagi blogger pemula mungkin berangggapan bahwa apabila kita membuat website atau blog

akan secara otomatis terindeks atau berada pada list berbagai search engine, dan kenyataannya

tidaklah demikian. Seperti halnya sebuah sekolah, agar nama kita terdaftar pada buku daftar

siswa, tentunya kita harus melakukan pendaftaran terlebih dahulu ke sekolah tersebut. Sama

halnya dengan mesin pencari, agar blog kita terindeks pada mesin pencari, maka kita harus

terlebih dahulu mendaftarkan blog milik kita pada situs pemilik mesin pencari.

Mesin pencari tentu jumlahnya sangat banyak sekali, dan pada saat ini yang paling terkenal di

dunia adalah Google, Yahoo, serta MSN. Apabila blog kita ingin terindeks pada mesin pencari

mereka, maka kewajiban kita adalah mendaftarkan URL blog kita pada mesin pencari mereka.

Bila ada yang belum tahu ke manakah harus mendaftarkan blognya, maka silahkan simak tulisan

berikut :

Daftar Google Untuk mendaftar ke google, silahkan kita kunjungi

http://www.google.com/addurl/, apabila sudah berada pada halaman pendaftaran ada

beberapa langkah yang harus di lakukan, yaitu mengisi form yang di sediakan :

• URL --> Isi dengan URL blog kita.

• Comments --> Isi dengan keyword atau kata kunci yang berhubungan dengan blog kita

• Isi kotak kosong dengan huruf Verifikasi yang tersedia

• Klik tombol Add URL

Setelah kita melakukan pendaftaran ke Google, maka tidak serta merta blog kita terindeks pada

mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog kita bisa terindeks.

Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog kita pada mesin pencari google,

apakah sudah terindeks atau belum? Jika belum, tunggu beberapa minggu lagi, dan tuliskan

kembali alamat blog kita seperti langkah di atas.

Daftar Yahoo! Untuk mendaftar ke yahoo! silahkan kita kunjungi

https://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo,

kita harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih

dahulu ke account yahoo. Bagi yang belum punya account yahoo (email di yahoo)

silahkan bikin dulu, bagi yang sudah punya, kita tinggal login dengan username serta

password kita. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi

kolom tersebut dengan URL kita, kemudian klik tombol Add URL, selesai. Jika ingin

memasukan alamat feed sekalian, kita bisa memasukannya. Ingat, alamat feed di blogger

hanya tinggal menambahkan atom.xml di belakang uRL blog kita, contoh : untuk blog

kita ini mempunyai alamat feed sebagai berikut :

http://kolom-tutorial.blogspot.com/atom.xml

atau memakai www pun sama saja :

http://www.kolom-tutorial.blogspot.com/atom.xml

Daftar ke Msn Untuk daftar ke Msn, silahkan kita kunjungi

http://search.msn.com/docs/submit.aspx?FORM=WSDD2 silahkan kita isi huruf

verifikasi dan URL kita pada kotak yang tersedia, kemudian klik tombol Submit URL,

selesai.

Apabila kita mempunyai keinginan lebih, yaitu URL blog kita terindeks pada puluhan

mesin pencari, kita bisa menggunakan bantuan situs submitter. Coba klik saja banner

dibawah ini :

Tugas kita hanya mengisi alamat URL blog miliknya, serta menuliskan alamat email saja,

kemudian klik tombol Submit Your Site.

Jika ingin lebih cepat terkenal coba lakukan ping ke berbagai agregator, silahkan klik link

di bawah :

http://pingomatic.com

Kita tinggal mengisi form yang di sediakan.

17. Cepat Terindeks di Google Setelah kita mendaftar di www.google.com, blog kita tidaklah langsung terindeks pada mesin

pencari google, akan tetapi bisa memakan waktu 3 sampai 4 minggu bahkan apabila bernasib

kurang baik bisa sampai 8 minggu barulah blog kita terlisting pada mesin pencarinya.

Memperbaiki Pengaturan blog

Untuk langkah-langkah pengaturan (Setting) blog, pada langkah sebelumnya sudah

dibahas.

Link ke blog dengan page rank tinggi

Salah satu cara agar blog kita lebih cepat terindeks di google adalah kita di link oleh blog

yang mempunyai page rank yang tinggi, dan biasanya blog-blog tersebut adalah blog

terkenal. Contoh blog Indonesia yang sangat terkenal adalah blog miliknya mas fatih

syuhud yaitu http://fatihsyuhud.com, blognya kang Agus hery di

http://edittag.blogspot.com, dan masih banyak lagi yang lainnya. Saran kami pasanglah

terlebih dahulu link blog mereka pada halaman blog milik kita, setelah itu mintalah agar

blog kita di linkback atau di link balik oleh mereka. Permintaan untuk di linkback bisa di

ajukan pada buku tamu (shoutbox) atau bisa juga melalui komentar pada postingan atau

jika ingin lebih pribadi kirim melalui email. Kita yakin mereka akan segera memasang

link kita pada blog mereka, atau jika dalam waktu tiga hari masih belum di linkback,

ajukan kembali permintaan untuk dilinkback karena untuk blog-blog terkenal dalam

sehari tidak hanya satu atau dua blog saja yang pasang link blog mereka, maka wajar saja

apabila ada satu atau dua blog yang terlewatkan untuk di linkback.

Pasang tag meta

Salah satu cara agar blog kita lebih di lirik atau di kenali oleh mesin pencari miliknya

www.google.com adalah memasang tag meta di bagian header pada kode template blog.

contoh tag meta untuk blogger seperti ini :

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

<meta name="description" content="Deskripsi dari blog kita di sini "/>

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>






Hasilnya akan seperti ini :

Ini heading 1

Ini heading 2

Ini heading 3

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

Ini font size 4

Ini font size 5

Ini font size 6

Ini font size 7

Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.

Anchor Link / Link Satu Halaman

Apa itu Anchor Link ? Anchor link biasa di sebut juga dengan link dalam satu halaman, berbeda dengan hyperlink pada umumnya yang biasa di gunakan untuk menghubungkan suatu tulisan dengan tulisan lain yang berada pada halaman yang berbeda atau blog yang berbeda, anchor link ini lebih banyak di gunakan untuk halaman yang sama. Pada bagian paling bawah blog, ada tulisan berupa link yang tertera : ->> Kembali lagi ke atas <<- Apabila kita meng klik link tulisan tersebut maka secara otomatis yang akan tampil pada layar monitor kita adalah halaman yang paling atas dari blog tersebut, Kelebihan anchor link dengan link biasa adalah link ini tidak memerlukan loading ulang untuk memanggil obyek yang telah di tandai sebagai anchor. Bagaimana cara membuat anchor link? Prinsip dasarnya adalah kita menandai terlebih dahulu suatu objek, lalu pada bagian yang lain kita buat link untuk memanggilnya. Kode dasarnya seperti ini : <a name="NamaAnchor"> .... </a> <-- objek anchor <a href="#NamaAnchor"> .... </a> <-- link pemanggil anchor Perhatikan tanda pagar (#) di atas, untuk nama anchor tidak memakai tanda pagar, akan tetapi untuk link pemanggil anchor harus memakai tanda pagar. Objek dari suatu anchor bisa di tampilkan bisa juga tidak, terlihat dari kode di atas ada tanda berupa titik-titik. Titik-titik tersebut bisa di isi tulisan bisa juga di biarkan kosong, contoh : <a name="AtasBlog"></a> <-- objek anchor yang tidak ingin menampilkan tulisan. <a name="AtasBlog">Blog bagian atas</a> <-- objek anchor yang ingin menampilkan tulisan. Berbeda dengan objek dari anchor, link pemanggil anchor haruslah di beri tulisan untuk bisa di klik oleh pengunjung, contoh : <a href="#AtasBlog">Kembali ke atas</a> <-- link pemanggil anchor harus di beri tulisan. Tertarik ingin membuatnya, silahkan ikuti langkah-langkah berikut : Untuk template klasik :

1. Sign in di blogger 2. Klik menu Template 3. Klik menu Edit HTML 4. Copy seluruh kode template kita, lalu paste pada notepad, silahkan save dulu untuk

backup data 5. Copy kode berikut lalu paste persis di bawah kode <body>

<a name="atas"></a>

6. Copy paste kode berikut di atas kode </body> <center><a href="#atas"> Kembali lagi ke atas</a> </center>

7. Klik tombol Pratinjau untuk melihat perubahan 8. Jika sudah OK, klik tombol Simpan Perubahan Template

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

1. Sign in di blogger 2. Klik menu Layout 3. Klik menu Edit HTML 4. Klik tulisan Download Template Lengkap, silahkan save dulu template kita untuk

backup data 5. Klik kotak kecil di samping tulisan Expand Template Widget 6. Tunggu beberapa saat sampai proses selesai 7. Copy kode berikut lalu paste persis di bawah kode <body>

<a name="atas"></a> 8. Copy paste kode berikut di atas kode </body>

<center><a href="#atas"> Kembali lagi ke atas</a> </center> Klik tombol Pratinjau untuk melihat perubahan

9. Jika sudah OK, klik tombol SIMPAN TEMPLATE Satu lagi yang menarik dari fungsi kode ini, yaitu buat para kita yang suka menulis posting yang sangat panjang, atau merupakan tulisan-tulisan yang berupa karya ilmiah, Kode ini bisa membantu kita untuk membuatkan sebuah navigasi untuk mempermudah pembaca. Misalkan pada setiap pharagrap kita sisipkan sebuah anchor link yang mana anchor link ini bisa berupa tulisan yang terlihat ataupun hanya sebuah objek yang tidak bisa terlihat oleh pembaca. Dan tentunya pada tempat-tempat tertentu kita membuat tulisan berupa link untuk memanggil anchor link. Sebagai contoh kita telah membuat beberapa anchor link pada setiap pharagrap, kode anchor link yang kita sisipkan seperti ini : <a name="satu"></a> --> pharagrap pertama <a name="dua"></a> --> pharagrap kedua <a name="tiga"></a> --> pharagrap ketiga Coba klik masing-masing link berikut : Kembali ke pharagrap Pertama ! Kembali ke pharagrap Kedua ! Kembali ke pharagrap Ketiga !

Pasang Statistik dan Tracker

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

Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :

1. Silahkan kunjungi situs http://www.sitemeter.com. 2. klik tulisan Sign Up untuk melakukan pendaftaran 3. klik tombol bertuliskan Next 4. Klik tombol Next lagi 5. Isi semua tabel yang ada lalu klik tombol Next lagi 6. Isi lagi tabel yang ada, lalu klik tombol Next lagi 7. Klik tombol Next lagi 8. klik tombol Next lagi 9. Setelah ada keterangan proses sign up selesai, kita harus melakukan veryfikasi, silahkan

buka email yg kita berikan 10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password kita

untuk login ke sitemeter.com 11. Silahkan login dengan id kita 12. Bila sudah login, Klik menu Manager 13. Klik Menu Meter Style untuk memilih gaya dari site meter kita 14. Pilih style yang kita sukai, kemudian klik tombol Select 15. Klik menu HTML Code 16. Klik tulisan Adding site Meter to a Blogger.com Site 17. Copy semua kode HTML yang di berikan lalu paste pada Notepad 18. Klik menu Logout untuk keluar dari situs tersebut 19. Memasukan kode yang kita dapat ke dalam blog kita

Ikuti langkah- langkah berikut : Khusus blog dengan template klasik :

1. Sign in di blogger dengan id kita 2. Klik menu TEMPLATE 3. Klik Edit HTML 4. Klik Edit (yang ada pada bar menu browser kita) 5. Klik Find (on this page)... untuk mempercepat pencarian 6. Tuliskan kata dimana kita ingin tempatkan, contoh di blog kita adalah blogger (karena

dekat dengan tombol blogger) klik Find 7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk

melihat perubahan yang terjadi 8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila kita ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode <center> ...kode site meter... </center> Untuk blog dengan Template baru :

1. Login di blogger dengan ID kita 2. Klik menu layout 3. Klik Elemen Halaman 4. Klik Tambahkan sebuah Elemen Halaman 5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript 6. Tulis Judul site meter kita pada isian di sebelah form judul (bila ingin ada keterangan.

kalau tidak, ya kosongkan saja) 7. Copy & paste kode Site meter pada kolom isian 8. Klik tombol Simpan Perubahan 9. Klik Elemen yang baru kita buat tadi, tahan lalu pindahkan ke tempat yang kita inginkan

( di drag & drop) 10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan 11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN

Buat Logo & Image Button

Silahkan ikuti langkah-langkah berikut ini :

1. Silahkan buka alamat http://cooltext.com 2. Lalu klik tulisan Design a Logo 3. Klik gambar contoh logo yang kita sukai 4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog

Tutorial 5. Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50 6. Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih

warna tulisan (text).silahkan pilih warna yg kita sukai

7. Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF 8. Klik tombol yang bertuliskan Render Logo Design 9. Tunggu beberapa saat ketika proses pembuatan logo berlangsung 10. Lihat hasil logo, bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas,

rubah yang kita inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita simpan di PC kita

11. Selesai. Kita sudah mempunyai sebuah logo.

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

1. Silahkan buka alamat http://www.photobucket.com, 2. Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis) dengan meng klik tombol

yang bertuliskan Join Now pada sudut kanan atas layar 3. Sekarang kita asumsikan kita sudah terdaftar 4. Silahkan Sign In dengan Id kita 5. Bila sudah berada pada halaman Account kita, Klik tombol yang bertuliskan Browse...

Silahkan pilih logo yang tadi di buat 6. Klin tombol yang bertuliskan Upload 7. Tunggu beberapa saat ketika proses upload berlangsung 8. Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya 9. Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad 10. Silahkan klik tulisan Log Out untuk keluar dari account kita. tutup layar browser kita

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

Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang sebenarnya. Apabila kita ingin memperbesar atau memperkecil image tersebut, kita bisa menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin kita tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini : <img src="http://i162.photobucket.com/albums/t253/p-tiok/logoblogtutorial.jpg" width="100" height="40" alt="ini contoh saja"> Kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil image, kita tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk ukuran tinggi image, kita tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk menampilkan tulisan ketika mouse berada pada image tersebut. Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat efek kode alt="..." :

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

BLOG TOOLS

Blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita. Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :

1. Ketik alamat website menuju www.geovisite.com 2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash 3. Tulis alamat email kita pada kotak kosong di samping tulisan Email 4. Tulis address blog milik kita disamping tulisan URL. Contoh : http://p-tiok.blogspot.com 5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh : 6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : 7. Pilih waktu yang sesuai dengan daerah kita disamping tulisan Location. contoh :untuk

daerah jakarta adalah Asia/Jakarta (GMT+7) 8. Pilih kategori yang sesuai dengan blog kita di samping tulisan Category. Contoh :

Internet 9. Pilih bahasa yang sesuai dengan blog kita di samping tulisan Language of your site.

Contoh : English 10. Pilih judul blog kita disamping tulisan Title. Contoh : Rubrik Elektronik 11. Tulis deskripsi dari blog milik kita pada kotak di samping tulisan Description. Contoh :

All about Electronic, tips, maintenance, until how to service the equipment of electronic 12. Klik tombol yang berlogo disket 13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE,

GEOCOUNTER, GEOMAP lalu paste pada program notepad 14. Silahkan close window browser kita 15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik

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

• http://www.neoworx.net • http://www.webfooted.net • http://www.fastonlineusers.com • http://www.histats.com

Blogroll Alternatif .

Apa itu Blogroll?

Blogroll atau di sebut juga Link Exchange atau tukeran link antar blog atau website

adalah menyimpan link address milik orang lain pada blog/website milik kita.

Apa manfaat dari blogroll?

Mungkin secara sekilas para kita berpikir bahwa memasang link address milik orang lain

pada blog/website milik kita akan merugikan, sebab dengan itu tentu saja kita

memberikan jalan kepada para pengunjung untuk meninggalkan blog kita. Alasan itu

mungkin ada benarnya, akan tetapi tidak seutuhnya benar. Dengan adanya blogroll

banyak sekali manfaat yang kita dapatkan, antara lain yaitu mempererat tali silaturahmi

atau tali persaudaraan diantara pemilik blog/website. selain itu semakin banyak blog kita

di link oleh blog lain maka semakin baik pula posisi rangking blog kita pada Search

Engine semacam Google, Yahoo, Msn serta teman-temannya. Tentu saja sama-sama kita

ketahui bahwa setiap pemilik blog/website berkeinginan bahwa blog/website miliknya

mempunyai rangking yang baik pada search engine. Makanya budayakan tukeran link

jangan pelit, karena kalau kita pelit memberi link ya tentu saja tidak akan ada yang mau

pasang link addres milik kita pada blog mereka.

Terus apa hubungannya dengan judul di atas?

Bagi para kita yang baru membuat blog dan baru memiliki blogroll hanya beberapa saja

mungkin tulisan ini tidak terlalu bermanfaat, tapi mungkin barangkali nanti setelah link

kita jumlahnya sampai ratusan atau bahkan ribuan informasi ini bisa jadi bermanfaat.

Memang seperti yang tadi kita katakan di awal bahwa bertukar link atau link Exchange

sangat bermanfaat, tetapi kita kalo link kita sudah mencapai ratusan atau bahkan ribuan

tentu saja akan menemui masalah, yaitu tentu saja link ini akan memakan tempat yang

banyak dan jadi tidak enak untuk di pandang mata para pengunjung. Nah jika kita

mempunyai masalah demikian, maka kita akan memberikan beberapa alternatif jalan

keluarnya, Yaitu antara lain :

Blogroll dengan marquee

yang paling banyak di gunakan oleh para blogger untuk menghemat space pada blog

adalah dengan menggunakan perintah marquee.

Contoh membuat blogroll dengan perintah marquee :

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

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

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

Elektronik</a>

<br/><br/>

<a href="http://user-online.blogspot.com" target="_blank">User

Online</a>

<br/><br/>

<a href="http://rohman-freeblogtemplate.blogspot.com"

target="_blank">free Blog Template</a>

<br/><br/>

<a href="http://kolom-authorized.blogspot.com"

target="_blank">Authorize service</a>

<br/><br/>

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

D'Tree</a>

<br/><br/>

</marquee>

Kode diatas tidak baku harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan

dengan kondisi dan keinginan kita. Kode yang bisa di rubah adalah :

scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin

lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3"

,scrollamount="4" , scrollamount="5"

direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di

rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" ,

direction="left" , direction="right" .

width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari

tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai

yang di inginkan. contoh : width="30%" , width="70%" , width="100%"

height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika

ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" ,

height="400" , height="250" .

Ada variasi lain, yaitu dengan memakai tabel, contoh :

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

<tr>

<td align="left">

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

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

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

Elektronik</a>

<br/><br/>

<a href="http://user-online.blogspot.com" target="_blank">User

Online</a>

<br/><br/>

<a href="http://rohman-freeblogtemplate.blogspot.com"

target="_blank">free Blog Template</a>

<br/><br/>

<a href="http://kolom-authorized.blogspot.com"

target="_blank">Authorize service</a>

<br/><br/>

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

D'Tree</a>

<br/><br/>

</marquee>

</td>

</tr>

</table>

Blogroll dengan menu dropdown Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah : <form> <select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"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 ElektronikUser OnlineFree blog templateAuthorized Service

•

Sedikit clue, kata left yang berada pada kode <div align="left"> menunjukan bahwa menu ini akan di simpan di sebelah kiri, jika mau di rubah tinggal ganti saja dengan kata "center" atau "right". Dan masih banyak lagi alternatif lainnya, cuma kayanya terlalu panjang nih, cukup sekian dulu yah, untuk contoh lainnya mudah-mudahan ada sambungannya. Eh lupa, untuk cara memasukan kode HTML di atas pada blog milik kita

Pasang Icon Yahoo ! Messenger

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

masing-masing gambar mempunyai URL adddress sendiri yaitu : http://opi.yahoo.com/online?u=YahooID&m=g&t=1 Untuk Style ID 1 http://opi.yahoo.com/online?u=YahooID&m=g&t=2 Untuk Style ID 2 http://opi.yahoo.com/online?u=YahooID&m=g&t=3 Untuk Style ID 3 http://opi.yahoo.com/online?u=YahooID&m=g&t=4 Untuk Style ID 4 http://opi.yahoo.com/online?u=YahooID&m=g&t=5 Untuk Style ID 5 itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita harus menambah kode yaitu :

<img src="URL address"> Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan seperti ini : <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=1" border="0"> Untuk Style ID 1 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0"> Untuk Style ID 2 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0"> Untuk Style ID 3 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0"> Untuk Style ID 4 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0"> Untuk Style ID 5 Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung. Ada beberapa pilihan yang bisa kita terapkan ketika pengunjung mengklik icon YM kita, yaitu : Kirim Instant Messenger. Kodenya sebagai berikut : <a href="ymsgr:sendIM?YOURID">Kirim IM</a> Sehingga untuk kode lengkapnya jadi seperti ini : <a href="ymsgr:sendIM?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a> Kirim Instant Messenger dengan pesan Kodenya sebagai berikut : <a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a> Sehingga untuk kode lengkapnya jadi seperti ini : <a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a> Menambahkan link ke chat room favorit Kodenya sebagai berikut : <a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman kita</a> Sehingga untuk kode lengkapnya jadi seperti ini : <a href="ymsgr:addfriend?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a> Karena email kita adalah [email protected] maka id kita adalah amn_tea, Sehingga kode untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :

<a href="ymsgr:sendIM?amn_tea"><img src="http://opi.yahoo.com/online?u=amn_tea&m=g&t=2" border="0"></a> dan yang akan tampil seperti ini :

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

Daftar Mybloglog

Bagi kita yang baru membuat blog, pada kesempatan kali ini kami menambahkan

perbendaharaan blog tools nya, yakni pasang MyBloglog.

Apa itu Mybloglog ?

Mybloglog adalah suatu situs yang menyediakan layanan untuk melacak (tracking) para

pengunjung blog/website dimana apabila pengunjung tersebut merupakan anggota situs

mybloglog maka dapat secara otomatis terdeteksi dan di cantumkan dalam menu Recent Reader

nya (pembaca terbaru)

Apa manfaat bergabung di mybloglog?

Ada beberapa manfaat kita bergabung dengan mybloglog yaitu :

• Untuk menambah traffic ke blog kita

Dengan adanya photo kita terpampang di blog orang lain, maka ada kemungkinan banyak

yang akan berkunjung ke blog milik kita, sekurang-kurangnya dari pemilik blog itu

sendiri.

• Mengetahui link mana yang banyak di klik

Di mybloglog ada fasilitas tracking untuk memberi peringkat terhadap link-link yang kita

pasang, link mana yang banyak di klik pengunjung, maka peringkat link itu semakin baik.

• Mempererat tali silaturahmi antar pemilik blog

Tak bisa di pungkiri dengan adanya otomatisasi photo kita terpampang tanpa harus

menuliskan pesan seperti halnya buku tamu, ini tentunya akan lebih memungkinkan

saling kunjung mengunjungi antar pemilik blog.

Dan tentu saja masih ada manfaat-manfaat yang lainnya yang bisa di dapat, akan tetapi

untuk menghemat pembahasan hanya itu saja dulu. Nah sekarang bagaimana cara

bergabung dengan mybloglog,

• silahkan ikuti langkah-langkah berikut ini :

1. Silahkan klik di sini untuk menuju http://www.mybloglog.com

2. Isi form yang telah di sediakan di bawah tulisan Sign Up Now

3. Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Amen24

4. Email --> Isi dengan email kita ( yang valid)

5. Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe

6. Blog/Site URL --> Isi dengan alamat blog kita. Contoh : http://rubrik-

elektronik.blogspot.com

7. Klik Tombol Register

8. Terlihat beberapa form yang harus diisi lagi

9. Blog/Site Title --> Isi dengan judul blog kita

10. Blog platprom --> pilih blogspot.com

11. Dibagian bawah ada dua radio buttun, silahkan pilih yang kita sukai

12. Klik tombol yang bertuliskan Complete Registration

13. Klik tulisan Go to Your page

14. Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas

15. Isi semua data diri kita (tidak kita sebutkan satu2 karena terlalu banyak)

16. Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile

17. Klik tulisam MY HOME untuk kembali ke home

18. Klik tombol yang bertuliskan Get Widget

19. Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai

pada panel warna untuk merubah warna background heading

Membuat Text Area

Apa itu text area?. Untuk memudahkan kita memahami apa itu text area, silahkan alihkan

perhatian kita ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak

yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan

melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk

menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan

untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para

pengunjung.

Untuk membuat text area, silahkan kita Copy kode di bawah ini : <p align="center"><textarea name="code" rows="6" cols="20"> Tulis text

ataupun kode-kode yang kita inginkan di sini, maka nanti tulisan kita akan

tampil di dalam text area </textarea></p> Sebagai contoh :

<ahref="http://kolom-tutorial.blogspsrc="http://i162.photobucket.comborder="0" alt="Blog Tutorial" />

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika kita menginginkan text area

yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="20", menunjukan lebar dari text area. Jika kita menginginkan text area yang lebar maka

silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol

highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk

mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan

saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya

akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-

kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko

tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan

menggunakan highlight ini silahkan kita copy kode HTML di bawah : <div><form name="copy"><div align="center"><input

onclick="javascript:this.form.txt.focus();this.form.txt.select();"

type="button" value="Highlight All"> </div><div align="center"></div><p

align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt"

rows="100" wrap="VIRTUAL" cols="55">simpan tulisan kita di sini, maka tulisan

yang kita tulis akan muncul di sini dan siap di copy oleh para

pengunjung</textarea></p></div></form> Sebagai contoh :

< s c r ip tla 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 l l) {r e t u r n f a ls e ; } } f u n c t io n c lic k N S ( e ) { i f( 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 l l) ) { i f( 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 t u r e E v e n t s ( 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 l ic 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 l ic 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 : i f c o n d = 'd a t a : b lo g . p a g e T y p e = = " i t e m " '> < s t y le > . f u l lp o s t { d is p la y : in l in e ; } < / s t y le > < p > < d a t a : p o s t . b o d y / > < / p > < b : e ls e / > < s t y le > . f u l lp o s t { d is p la y : n o n e ; } < / s t y le > < p > < d a t a : 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 : i f >

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

• Tuliskan artikel yang ingin tampak pada blog sebelum kode :


• 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


Sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting

suatu artikel agar ada menu Readmore nya.


• klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan

tadi, yakni :


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

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


<b:else/>

<style>.fullpost{display:none;}</style>

• Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :


• 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



• Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi,

yakni :


</div>

• Tulisankan artikel yang ingin tampak pada blog sebelum kode :


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

</div>

• Klik tombol bertuliskan PUBLISH POST

• Klik tulisan Open New Window untuk melihat hasil dari postingan kita, kemudian lihat

apakah hasilnya sukses atau tidak.

Membuat Menu Dropdown

Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap

memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar.

Masalahnya, kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan

berjejer di sidebar kita. Bagaimana kalau dua dan tiga tahun lagi? Langkah praktis mengatasi hal

ini adalah dengan membuat pull-down menu seperti di bawah ini:

- Archives - Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan

memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah

di klik, akan muncul nama bulan arsip-arsip kita.

Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan

template baru. Untuk template klasik langkahnya yaitu :

1. Login ke blogger.com dg id Kita

2. Klik Template

3. Di bagian sidebar blog Kita bagian archives, ada kode html sbb:

&<BloggerArchives>

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

</BloggerArchives>

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

<select name="archivemenu"

onchange="document.location.href=this.options[this.selectedIndex].value

;">

<option selected>- Archives -</option>

<BloggerArchives>

<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>

</BloggerArchives>

</select>

5. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.

6. Selesai.

Untuk kita yang memakai template baru, langkahnya lebih mudah yaitu :

1. login dulu, tentunya dengan id kita

2. klik LAYOUT

3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive

4. Klik Edit pada kotak Blog Archive tadi

5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan

Dropdown Menu dengan cara memberi tanda tik/cek

6. Klik Save Changes

Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk

Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya,

kita ambil contoh untuk menu Dropdown milik kita pribadi yang berada di sebelah kanan atas

yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan kita copy kode HTML di bawah

:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION> <option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form> Sebagai contoh untuk menu Dropdown milik kita : <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu> <option>- Blog Tutorial -</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html">Membuat Blog</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">setting Blog</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih Template</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-huruf-dan-warna.html">warna & huruf</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/cara-memposting-artikel.html">Posting Artikel</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-

1.html">Read more (1)</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-area.html">Text area</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html">Blogger Emoticons</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html">Yahoo!Emoticons</option> <option value="http://kolom-tutorial.blogspot.com/2007/04/download-gratis.html">Download Gratis</option> </select></form> Hasilnya akan seperti ini :

.

Membuat Link (1) Dalam dunia blog, tentu kita tidak asing lagi dengan yang namanya link. Apabila kita seorang blogger, tentu saja membuat link adalah sebuah keharusan. Berbeda dengan website pada umumnya, di jagat per blog-an ada yang namanya link exchange atau bertukar link dengan blog lain, jadi kalau kita tidak bisa membuat link, ini dapat berakibat kita akan di asingkan alias di cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik membuat link ini, kita akan mengulasnya dalam beberapa sub bagian yakni : Link pada postingan Jika kita membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link, misalkan artikel tersebut bercerita tentang bisnis yang kita ikuti pada sebuah website di internet, lalu kita ingin mengajak para pembaca artikel tersebut untuk mengunjungi website yang kita ceritakan. Misalkan dalam artikel tersebut ada kata –kata seperti Jika kita tertarik silahkan kita klik disini, nah untuk membuat link dari kata-kata tersebut silahkan ikuti langkah-langkah berikut :

1. Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.

2. Klik ikon yang bergambar seperti ini yang berada pada toolbar, maka setelah itu akan muncul tulisan http:// pada window baru yang berbentuk seperti gambar di bawah ini :

3. Isi kotak yang ada tulisan tersebut dengan alamat situs yang kita inginkan, misalkan : http://www.nshodiq.blogspot.com

4. Klik OK. Selesai Link dengan window baru Mungkin kita punya pikiran, kalau kita membuat sebuah link trus pembaca mengkliknya, kita kwawatir kalau pengunjung blog kita akan meninggalkan blog kita. Untuk meminimalisir hal tersebut, bisa dilakukan dengan cara membuat window baru, jadi ketika pengunjung mengklik salah satu link yang kita buat, halaman blog kita tidak akan tertimpa dengan halaman baru tapi yang terjadi adalah halaman blog kita tetap ada dan halaman yang baru di klik akan muncul terpisah.Ketika kita mengkliknya, akan tercipta window baru. Untuk membuat link seperti ini dapat di lakukan dengan cara :

1. Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu

yang ada pada toolbar. 2. Pada tulisan yang kita link tadi akan muncul kode seperti ini ( contoh tulisan klik disini

di link ke http://www.nshodiq.blogspot.com : <a href="http://www.nshodiq.blogspot.com">klik disini</a> maka disini kita harus menambahkan embel-embel kode HTML target="new' ataupun target="_blank" pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di modifikasi adalah : <a href="http://www.nshodiq.blogspot.com" target="new">klik di sini</a> atau : <a href="http://www.nshodiq.blogspot.com" target="new">klik di sini</a> atau bisa juga seperti ini : <a href="http://www.nshodiq.blogspot.com" target="_blank">klik di sini</a>

Buat Links di sidebar Bila kita berkeinginan membuat link kepada teman kita di sidebar, cara termudah adalah seperti ini : ( khusus untuk template klasik)

1. Sign in di blogger dengan id kita 2. Klik menu TEMPLATE 3. Klik Edit HTML 4. Klik Edit 5. Klik Find (on this page)… --> untuk mempercepat pencarian

6. Tuliskan kata dimana kita ingin tempatkan, contoh di blog kita adalah Links para sahabat, klik Find

7. Tuliskan link yang kita inginkan, contoh jika kita ingin membuat link ke blog kita, maka kode yang di tulis adalah : <a href="http://kolom-tutorial.blogspot.com:" target="_blank">Blog Tutorial</a>

8. Klik Save Template Changes. Selesai

Jika kita sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik, sebaiknya kita copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila kita melakukan kesalahan, kita bisa mengembalikan kesemula karena sudah mempunyai backup data template tersebut. Atau bisa juga sebelum kita klik Save Template Changes sebaiknya kita klik terlebih dahulu tombol preview untuk melihat perubahan yang kita lakukan, apabila sudah cocok dengan perubahan tersebut baru di save Template Changes.

Membuat Link (2) Untuk kita pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :

1. Login di blogger dengan ID kita 2. Klik menu Layout 3. Klik Page Elements 4. Klik Add a Page Element 5. Klik ADD TO BLOG pada menu Link List 6. Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog kita Adalah “

Link partner” atau silahkan terserah kita 7. Isi nomor link yang ingin kita tunjukan di blog kita pada form Number of Links to show

in list, jika kita ingin membatasi jumlah link yang akan di tampilkan, jika kita tidak mau membatasi silahkan di kosongkan saja.

8. Pada form Sorting, silahkan kita pilih sort Alphabetically bila ingin link kita di urutkan berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically apabila kita menginginkan Link yang kita buat di urutkan secara terbalik ( mulai dari Z --

> A ). Bila kita tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang kita buat, silahkan pilih Don’t Sort

9. Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http://www.nshodiq.blogspot.com

10. Tulis nama atau tulisan yang ingin muncul pada link yang kita buat pada form New site Name. contoh : Blog Tutorial.

11. Klik Add Link, jika link yang kita buat lebih dari satu. Silahkan isi semua form sesuai dengan langkah di atas.

12. Klik SAVE CHANGES bila sudah selesai 13. Bila kita ingin menempatkan Link yang kita buat tadi, silahkan arahkan mouse kita ke

kotak link yang baru kita buat, lalu tekan mouse sambil di tahan pindahkan ke tempat yang kita inginkan ( di drag & drop ) .

14. Klik SAVE. Selesai Membuat link dari gambar atau image Apabila kita mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka caranya seperti di bawah ini :

1. Upload gambar yang kita miliki ke hosting tempat menyimpan gambar, contoh http://www.photobucket.com.

2. Jika kita sudah mengupload gambar kita, maka gambar tersebut akan di beri alamat URL, copy alamat tersebut pada notepad. Sebagai contoh gambar chicklet blog tutorial di samping mempunyai alamat URL : http://i162.photobucket.com/albums/t253/p-tiok/animasichicklet.gif Nah jika kita ingin membuat gambar tersebut menjadi sebuah link, maka kode yang di tulis adalah : <a href="http://kolom-tutorial.blogspot.com"><img src="http://i162.photobucket.com /albums/t253/p-tiok/animasichicklet.gif"></a> (kode dalam satu baris) jika ingin dalam window baru : <a href="http://kolom-tutorial.blogspot.com" target="_blank"><img src="http://i162.photobucket.com /albums/t253/p-tiok/animasichicklet.gif"></a> (kode dalam satu baris)

Link berjudul Untuk memperjelas bahasan ini, silahkan kita kembali ke halaman atas blog ini lalu arahkan mouse kita ke tulisan Resep bisnis, coba diamkan sebentar pada link tersebut, maka tidak lama kemudian akan muncul tulisan Mau belajar bikin website sendiri silahkan klik disini . Nah sekarang mungkin kita sudah mengerti maksud kita, jadi dalam sebuah link ada kata-kata untuk menekankan ajakan kita kepada para pembaca untuk mengklik link tersebut. Untuk membuat

judul linkbuat. Con <a href=website

Agar blobanner ankepada buntuk iklsangatlahdan keku bagi kita http://wwbanner yapostingancara mem Contoh b

Nah jika software mendapamendapa Contoh s

k ini sangat mntoh seperti

="http://wwsendiri s

g kita tampinimasi.karen

banner terseblan yang kitah mudah, maurangannya.

yang berminww.addesignang di sediakn tentu bisa.

masukan kod

banner anima

kita ingin beini kita bisa

atkannya silaatkannya di s

sederhana an

mudah, yaknyang kita be

ww.nshodiq.bsilahkan kl

l dinamis dana dengan babut, terutamaa pasang di bau yang grati

nat dengan bner.com Silahkan, trus ya Untuk cara

de HTML ke

asi :

erkreasi senda berkreasi seahkan klik disamping pulu

nimasi banne

ni kita hanyaerikan di atas

blogspot.comlik di sin

Membuat

an lebih atrakanner animaa apabila kitabanding dengisan ada, ma

banner animhkan daftar (tinggal di mpemasangan

edalam blog.

diri, kita bisaekehendak ki sini , dengauhan softwa

er :

a harus menas :

mtarget="nni">Belajar

Banner A

ktif, salah sasi, mata daria seorang pegan banner bau yang baya

masi gratis, ki(gratis), Jika

masukin ke bln silahkan ki

a menggunakita dan tidakan harga yanre berharga

ambahkan ti

new" title=r Web </a>

Animasi

atu caranya ai pengunjungebisnis, bannbiasa. Cara mar juga ada.T

ita bisa kunjua sudah di terlog, mau di sita baca post

akan softwark perlu onlinng super murlainnya.

tle=" ... " pa

="mau bela>

adalah dengag akan langs

ner animasi amembuat banTapi tentunya

ungi rima kita tinsidebar atau tingan terdah

e banner mane terus di inrah kita bisa

ada link yang

jar bikin

an memajangsung tertuju akan lebih efnner animasia ada kelebih

nggal memilidi dalam

hulu bagaim

aker, dengan nternet. Untu

g kita

g

fektif i han

ih

ana

uk

Mengatur Perataan Posting Artikel

Untuk membuat perataan (align), baik rata kiri, kanan, kiri-kanan, atau mau tengah-tengah semuanya, bisa dengan dua cara tergantung dari kebiasaan kita saat posting artikel, apakah biasa pakai menu Compose atau Edit HTML. Oleh karena itu akan kita bahas untuk keduanya. Untuk menu Compose Pada menu compose sebenarnya ini lebih mudah, sebab untuk membuat perataan sudah di sediakan tool (peralatan) yang sama dengan yang ada di Microsoft Word atau Exel, icon tool nya seperti ini :

--> Untuk merubah jenis huruf yang di gunakan

--> Untuk merubah ukuran huruf (heading)

--> Untuk Menebalkan huruf

--> Untuk memiringkan huruf

--> Untuk merubah warna huruf

--> Untuk membuat link

--> Untuk membuat artikel menjadi rata kiri

--> Untuk membuat tulisan menjadi di tengah

--> Untuk membuat artikel menjadi rata kanan

--> Untuk membuat artikel menjadi rata kiri dan rata kanan

--> Untuk membuat sub bahasan oleh angka

--> Untuk membuat sub bahasan oleh bullet

--> Untuk mengecek spelling

--> Untuk memasukan gambar(upload gambar)

--> Untuk membuat artikel dalam kode HTML

--> Untuk membuat artikel dalam mode Compose (biasa) --> Untuk me review (melihat) artikel

Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang kita mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan? Akan tetapi bagi kita yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang kita ajarkan di blog ini adalah dengan

memakai kode <div class="fullpost"> yang relatif lebih aman. Untuk menu Edit HTML Bagi kita yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan akhir artikel, kodenya seperti ini : Rata kiri : <div align="left"> isi artikelnya di sini </div> Rata kanan : <div align="right"> isi artikelnya di sini </div> Rata kiri-kanan : <div align="justify"> isi artikelnya di sini </div> Supaya tengah semua : <div align="center"> isi artikelnya di sini </div> Agar hasilnya kelihatan, kita berikan contoh dengan mengutif isi artikel di blog ini. Contoh cara membuatnya seperti ini : Untuk yang rata kiri : <div align="left"> Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. </div> Maka hasilnya akan seperti ini : Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. Untuk yang rata kanan : <div align="right"> Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. </div> Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang

tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih.

Untuk yang rata kiri-kanan : <div align="justify"> Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. </div> Maka hasilnya akan seperti ini : Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. Untuk yang tengah semua : <div align="center"> Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal yang baik,Terima kasih. </div> Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para kita semua, kita menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu kita untuk hal-hal

yang baik,Terima kasih. Untuk yang bullet & numbering, ini bisa juga dilakukan : contohnya seperti ini : Bullet saja : <li>Sig in di blogger dengan id kita </li> <br/> <li>Klik menu layout </li> <br/> <li>Klik menu Edit HTML </li> Hasilnya seperti ini :

• Sig in di blogger dengan id kita • Klik menu layout • Klik menu Edit HTML

Bullet yang menjorok ke tengah : <ul> <li>Sig in di blogger dengan id kita </li> <br/> <li>Klik menu layout </li> <br/> <li>Klik menu Edit HTML </li> </ul> Hasilnya seperti ini :

• Sig in di blogger dengan id kita • Klik menu layout • Klik menu Edit HTML

Yang memakai nomor : <ol> <li>Sig in di blogger dengan id kita </li> <br/> <li>Klik menu layout </li> <br/> <li>Klik menu Edit HTML </li> </ol> Hasilnya seperti ini :

1. Sig in di blogger dengan id kita 2. Klik menu layout 3. Klik menu Edit HTML

Untuk warna : <span style="color:kode warna"> tulisan yang mau di warnai </span> contoh untuk warna merah : <span style="color:red"> ini contoh merah </span> hasilnya seperti ini : ini contoh merah

atau bisa juga seperti ini : <span style="color:#FD0303"> ini contoh merah </span> Hasilnya tetap sama : ini contoh merah untuk mengetahui kode warna sangat gampang, kita bisa menggunakan bantuan program photosop, kita tinggal sorot warna yg di kehendaki, nanti kode warnanya akan di tampilkan. Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga pada edit HTML untuk kode template. Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link

Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom Tulis ukuran lebar yang sesuai dengan sidebar blog kita (kalau mau di tempatkan di sidebar) contoh : 160 Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-Size juga boleh Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah) Disamping tulisan Title, tulis kata yang kita suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja Di bagan bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu Kembali ke bagian atas Klik tmbol bertuliskan Preview and Get Code Copy eluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account kita Silahkan close window situs tersebut.

Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML,.

Membuat menu D'tree

Beberapa waktu yang lampau, kita pernah menulis artikel mengenai cara membuat menu yang menyerupai menu yang ada pada Windows explorer yaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporan bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini adalah sebagai referensi agar kejadian tersebut tidak terulang kembali. Saran kita, apabila kita memasang suatu script atau image yang bersumber dari milik orang lain, sebaiknya bersegeralah untuk menyimpannya pada account milik kita, akan tetapi sebelum mengambilnya tentu kita harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan seperti ini, apabila kita menyuruh memasang script seperti ini : pasanglah kode ini di atas kode </head> : <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' /> kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada account milik kita. Tentu apabila kita memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila kita iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil kita akan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya : copy kode sumber script ini lalu paste pada address bar browser internet kita : http://amen24.googlepages.com/Readmore.js Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java. Langkah selanjutnya adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu simpan di komputer kita. Apabila kode tersebut sudah tersimpan di komputer kita, uploadlah kode tersebut pada hosting yang biasa kita gunakan, misalkan kita sering menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkan script ini mempunyai alamat : http://juned.googlepages.com/Readmore.js Nah, langkah terakhir adalah mengganti sumber script yang kita punyai dengan milik kita, misal kode di atas seperti ini : <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' /> Gantilah sumber script di atas dengan yang kita miliki, sehingga kodenya jadi seperti ini : <script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />

Apabila kita melakukan hal yang di atas, maka kita tidak usah khawatir akan kehilangan dari fungsi script tersebut. Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan kita untuk mencuri kode milik orang lain. Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada pembahasan yang tempo hari agak menyulitkan pembaca, sehingga kali ini kita akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami. Untuk membuat menu dtree, kita bisa mendownload pada situs resminya yaitu di http://www.destroydrop.com, silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain kita harus memahaminya, oleh karena alasan tadi maka kita akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami. Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai berikut : Kode ini di simpan di atas kode </head> : <link rel="StyleSheet" href="dtree.css" type="text/css" /> <script type="text/javascript" src="dtree.js"></script> Kode di bawah ini di simpan di bagian sidebar : <h2>Example</h2> <div class="dtree"> <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p> <script type="text/javascript">  </script>

</div> Apabila kita mempunyai intelegensi yang cukup lumayan bagus, maka kita yakin tidak usah kita terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link milik kita dapat di pasang pada kode-kode di atas. Dengan tidak ada maksud kita untuk merendahkan kita yang masih belum mengerti, maka kita akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka kita telah membuat sebuah menu dtree buatan kita yang telah kita sertakan link-link di dalamnya : source code dari menu yang kita buat seperti ini : Kode ini di simpan di atas kode </head> : <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" /> <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script> Kode di bawah ini di simpan di bagian sidebar : <div class="dtree"> <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p> <script type="text/javascript"> <!-- d = new dTree('d'); d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com'); d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://template-

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

document.write(d); //--> </script> </div> Untuk melihat hasilnya, silahkan klik dulu di sini ! Baiklah, 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



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

5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> : <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" /> <script type="text/javascript"

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

6. Copy kode berikut, lalu paste pada kode sidebar kita (link nya harus di ganti dengan milik kita): <div class="dtree"> <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p> <script type="text/javascript"> <!-- d = new dTree('d'); d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com'); d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html'); d.add(5,1,'Free css menu navigation'); d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');

d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html'); d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif'); d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif'); d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif'); d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif'); document.write(d); //--> </script> </div>

7. Klik tombol Simpan Perubahan Template

8. Selesai.

• Untuk Template Baru

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

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

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

<div class="dtree"> <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p> <script type="text/javascript"> <!-- d = new dTree('d'); d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com'); d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik');

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

d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif'); document.write(d); //--> </script> </div>

11. Klik tombol Simpan 12. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di

drag & drop) 13. Klik tombol Simpan yang berada di sebelah atas 14. Selesai. Silahkan lihat hasilnya

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

Modul Membuat Blog Di Blogspot

Documents

Transcript of Modul Membuat Blog Di Blogspot