160
Panduan membuat Blog di Blogspot 1. Apa itu Blog ? Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai posting pada halaman web. Tulisan- tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama. Awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari sebuah blog sangat bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan lain sebagainya. Secara umum, blog tidak ada bedanya dengan situs yang ada di internet. Flatform blog atau seringkali disebut juga dengan mesin blog dibuat sedemikian rupa oleh para designer blog agar mudah untuk digunakan. Dulu, untuk membuat aplikasi web diperlukan pengetahuan tentang pemrograman HTML, PHP, CSS dan lain sebagainya, dengan blog semuanya menjadi mudah semudah menyebut angka 1 2 3. 2. Cara membuat blog di blogspot Salah satu penyedia blog gratis yang cukup populer saat ini adalah blogspot atau blogger, dimana ketika mendaptar adalah melalui situs blogger.com namun nama domain yang akan anda dapatkan adalah sub domain dari blogspot, contoh : contohsaja.blogspot.com Kenapa harus membuat blog di blogger.com bukan pada situs penyedia blog lainnya? Sebenarnya tidak ada keharusan untuk membuat blog di blogger, namun ada banyak kelebihan yang dimiliki blogger di banding dengan penyedia blog lain. Beberapa contoh kelebihan blogspot di banding yang lain yaitu mudah dalam pengoperasian sehingga cocok untuk pemula, lebih leluasa dalam mengganti serta mengedit

Panduan Membuat Blog Di Blogspot

Embed Size (px)

Citation preview

Page 1: Panduan Membuat Blog Di Blogspot

Panduan membuat Blog di Blogspot

1. Apa itu Blog ?

Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum

disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan

diikuti oleh yang lama.

Awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari

sebuah blog sangat bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan lain sebagainya.

Secara umum, blog tidak ada bedanya dengan situs yang ada di internet.

Flatform blog atau seringkali disebut juga dengan mesin blog dibuat sedemikian rupa oleh para designer

blog agar mudah untuk digunakan. Dulu, untuk membuat aplikasi web diperlukan pengetahuan tentang

pemrograman HTML, PHP, CSS dan lain sebagainya, dengan blog semuanya menjadi mudah semudah

menyebut angka 1 2 3.

 

2. Cara membuat blog di blogspot

Salah satu penyedia blog gratis yang cukup populer saat ini adalah  blogspot atau blogger, dimana ketika

mendaptar adalah melalui situs blogger.com namun nama domain yang akan anda dapatkan adalah sub

domain dari blogspot, contoh : contohsaja.blogspot.com

Kenapa harus membuat blog di blogger.com bukan pada situs penyedia blog lainnya? Sebenarnya tidak

ada keharusan untuk membuat blog di blogger, namun ada banyak kelebihan yang dimiliki blogger di

banding dengan penyedia blog lain. Beberapa contoh kelebihan blogspot di banding yang lain yaitu mudah

dalam pengoperasian sehingga cocok untuk pemula, lebih leluasa dalam mengganti serta mengedit

template sehingga tampilan blog anda akan lebih fresh karena hasil kreasi sendiri, custom domain atau

anda dapat mengubah nama blog anda dengan nama domain sendiri misalkan contohsaja.blogspot.com di

ubah menjadi contohsaja.com,sedangkan hosting tetap menggunakan blogspot dan masih tetap gratis.

Page 2: Panduan Membuat Blog Di Blogspot

Perlu ditekankan dari awal bahwa internet itu sifatnya sangat dinamis, sehingga mungkin saja dalam

beberapa waktu kedepan panduan membuat blog di blogspot ini akan sedikit berbeda dengan apa yang

anda lihat di blogger.com

Untuk mengurangi hal yang tidak perlu di tulis, berikut cara membuat blogger di blogger.com

 

Membuat Email

Salah satu syarat yang harus dipenuhi dalam membuat blog adalah anda memiliki alamat email yang masih

aktif atau di gunakan. Jika anda belum mempunyai alamat email, silahkan daftar terlebih dahulu di gmail

karena blogger adalah salah satu layanan dari Google maka ketika mendaftar ke blogger sebaiknya

gunakan email gmail. Jika anda belum paham bagaimana cara membuat email, silahkan gunakan mesin

pencari google untuk mencari panduannya.

 

Daftar Blog di blogger

 

1. Silahkan kunjungi situs http://www.blogger.com

2. Setelah halaman pendaftaran terbuka, alihkan perhatian ke sebelah kanan atas, ubah bahasa ke

Indonesia agar lebih mudah difahami. Silahkan langsung login dengan menggunakan username

serta password gmail anda ( akun email anda bisa untuk login ke blogger).

3. Klik tombol bertuliskan CIPTAKAN BLOG ANDA.

Page 3: Panduan Membuat Blog Di Blogspot

4. Isilah nama judul blog serta alamat blog yang di inginkan. Ingat! dalam membuat alamat blog harus

benar-benar serius karena itu permanen tidak dapat digantikan lagi (kecuali nanti ganti dengan

custom domain). Jika alamat yang diinginkan ternyata tidak bisa digunakan, masukkan kembali

alamat lain yang masih tersedia. Jika alamat blog yang diinginkan masih tersedia, silahkan klik

anak panah bertuliskan LANJUTKAN.

5. Silahkan pilih template yang anda sukai ( template ini nanti bisa diubah lagi kapan saja anda mau),

kemudian klik LANJUTKAN.

Page 4: Panduan Membuat Blog Di Blogspot

6. Akan ada tulisan “Blog Anda Sudah Jadi!”. Silahkan lanjutkan dengan klik tombol MULAI

BLOGGING.

7. Setelah masuk post editor, silahkan isi apa saja ( disarankan untuk langsung mengisi posting,

biasanya jika tidak langsung posting akan terjaring robot anti spam milik blogger, dan blog anda

akan di lock). Contoh : hello world. Klik Tombol PRATINJAU untuk melihat tampilan yang nanti

akan muncul di blog, klik tombol TERBITKAN ENTRI jika posting anda mau dipublikasikan ke

publik.

Page 5: Panduan Membuat Blog Di Blogspot

8. Klik “Lihat Entri” untuk melihat blog anda. Berikut contoh tampilan blog yang tadi di buat.

9. Selesai.

Untuk tahap awal, blog anda sudah jadi dan bisa diakses dimana saja. Untuk pembahasan lebih dalam

tentang bagaimana blogging dengan blogger, akan di bahas pada posting berikutnya.

Cara Setting Blog Di blogger

Hal pertama yang penting anda lakukan agar blog anda di blogger mempunyai performa yang baik adalah

melakukan beberapa Setting atau pengaturan. Sebagai bahan inspirasi bagaimana cara melakukan setting

Page 6: Panduan Membuat Blog Di Blogspot

blog di blogger, berikut Kolom Tutorial tuliskan cara pengaturan blog di blogger (pastikan anda (pastikan

anda memilih bahasa indonesia agar sesuai dengan tutorial dibawah) :

 

* Silahkan login ke blogger dengan ID anda.

* Klik Pengaturan.

   

* Akan terlihat tab-tab menu berisi hal-hal yang harus anda atur :

Dasar

Beberapa pengaturan dalam menu Dasar:

Alat Blog : Impor blog → ini adalah faslitas untuk mengimpor data dari komputer anda ( ini

biasanya dilakukan ketika transfer blog) tidak usah di klik, biarkan saja. Ekspor blog > ini adalah

fasilitas untuk mengekspor data blog dari server blogger ke komputer anda. Fasilitas ini disebut

juga sebagai fasilitas Backup blog. Disarankan agar anda membuat backup data ke komputer

anda, minimal satu minggu sekali. Data backup tersebut sewaktu-waktu bisa bermanfaat ketika

anda ingin mentransfer ke blog lain di blogger, atau bisa juga untuk migrasi ke mesin blog yang

lain seperti Wordpress. Hapus blog > Fasilitas untuk menghapus blog anda. Jika anda tidak

berniat untuk menghapus blog, maka jangan sekali-sekali klik link ini.

Judul : isi dengan judul blog yang anda inginkan. Contoh : My personal blog

Uraian : isi dengan deskripsi blog yang ingin ditampilkan, sebaiknya ini diisi jangan dikosongkan.

Contoh : catatan kecil hidupku yang unik.

Page 7: Panduan Membuat Blog Di Blogspot

Tambahkan blog Anda ke daftar kami? : disarankan untuk memilih opsi Ya.

Biarkan mesin pencari menemukan blog Anda? : Pilih Ya, agar blog anda dapat di index oleh

mesin pencari seperti Google, Yahoo atau Bing.

Tampilkan Editing Cepat di Blog Anda? : Boleh pilih Ya atau Tidak.

Tampilkan Link Posting Email? : Ini berupa icon email, jika anda menginginkan agar pengunjung

blog dengan mudah mengirimkan email ke teman mereka tentang blog anda, maka Pilih Ya.

Namun jika tidak, silahkan pilih Tidak.

Konten Dewasa? : Jika blog anda nantinya akan berisi hal-hal yang besifat dewasa seperti

menampilkan artikel, gambar, atau video wanita seksi, dll maka pilih Ya. Namun, jika blog anda

berisi hal-hal yang aman diakses oleh anak kecil, pilih Tidak. Sebagai catatan, jika anda memilih

opsi Ya, maka nantinya ketika diakses blog anda akan ada peringatan bahwa berisi konten

dewasa.

Pilih editor entri  : Ini adalah pilihan untuk post editor. Editor yang diperbarui → ini adalah post

editor terbaru yang dimiliki oleh blogger, banyak fasilitas baru yang terintegrasi dalam post editor

ini seperti tombol More untuk memotong artikel di blog anda. Editor lama → ini adalah post editor

lama yang dimiliki blogger namun masih bisa anda gunakan, ada beberapa toolbar terdapat

dalam post editor lama, namun tidak disediakan lagi di post editor baru, jadi silahkan pilih mana

yang anda mau. Sembunyikan mode penyusunan →  pilihan ini khusus bagi anda yang sudah

mahir dengan kode HTML, jika anda tidak menguasai tentang HTML, jangan gunakan post editor

ini.

Aktifkan transliterasi? : Pilih Aktifkan jika post editor anda ingin mendukung ke translasi Hindi,

Kannada, Malayalam, Tamil, atau Telugu. Pilih Nonaktifkan jika post editor anda tidak ingin ada

translasi bahasa tersebut.

Akhiri pengaturan menu Basic dengan klik tombol SIMPAN SETELAN.

Publikasikan

Ini adalah fasilitas untuk mengubah nama domain anda di blogger dengan nama domain milik anda sendiri.

Misal : http://namabloganda.blogspot.com menjadi http://namabloganda.com.

Untuk sementara waktu jangan lakukan apa-apa pada menu publikasikan ini. Tutorial tentang custom

domain di blogger bisa anda baca pada artikel Cara Custom Domain di Blogger.

 

Page 8: Panduan Membuat Blog Di Blogspot

Format

Beberapa pengaturan dalam menu Format :

Tampilkan sebanyak mungkin : tulis jumlah post yang ingin tampil di halaman depan blog anda.

Contoh : 5. Untuk pilihan dropdown disarankan untuk memilih opsi posting, jangan hari.

Format Header Tanggal : Pilih format tampilan tanggal yang anda sukai.

Format Tanggal Index Arsip : pilih format tampilan arsip yang anda inginkan.

Format Timestamp : Pilih format tampilan jam yang anda sukai. Jam disini adalah catatan waktu

ketika artikel anda di publikasikan di blog.

Zona Waktu : Sesuikan dengan zona waktu dimana tempat anda berada.

Bahasa : Pilih bahasa yang dipakai untuk blog anda.

Konversi ganti baris : ini adalah fasilitas line break secara otomatis ketika anda klik enter ketika

membuat sebuah posting. Fasilitas ini di pakai apabila anda kedepannya tidak akan memposting

tentang kode-kode semisal HTML dan lain sebagainya. Pilih Tidak, jika anda berniat nantinya

akan memasukkan kode-kode HTML kedalam posting posting anda, misal jika konten blog anda

berisi tutorial bahasa HTML, PHP dan lain sebagainya.

Tampilkan Field Judul : Pilih Ya ataupun Tidak juga tidak ada masalah.

Tampilkan kolom Link : Pilih Tidak atau Ya juga tidak ada masalah.

Aktifkan perataan float : Pilih Ya, ini adalah agar gambar bisa diatur posisinya dalam postingan.

Namun jika pilihan ini mengganggu tampilan blog anda nantinya, pilih saja Tidak.

Templat Entri : ini adalah fasilitas agar isi dari Templat Entri ini akan selalu muncul pada saat

membuat posting. Biasanya fasilitas ini sering di gunakan untuk signature blog, yaitu tulisan atau

kode signature disimpan dalam Templat Entri, sehingga ketika anda membuat posting, kode

signature tersebut akan secara otomatis muncul tanpa harus menuliskannya secara berulang-

ulang.

Akhiri Pengaturan menu Format dengan klik tombol SIMPAN SETELAN

Komentar

Beberapa pengaturan dalam menu Komentar :

Page 9: Panduan Membuat Blog Di Blogspot

Komentar: Pilih Tampilkan, jika anda menginginkan agar postingan ada bisa di komentari oleh

pengunjung. Pilih Sembunyikan, jika artikel yang anda posting tidak ingin di komentari oleh

pengunjung.

Siapa yang Bisa Berkomentar ? : Siapa pun - termasuk Pengguna Anonim  → untuk pilihan ini,

maka siapa saja dapat berkomentar, termasuk Pengguna Anonim atau tanpa identitas jelas.

Pengguna Terdaftar - termasuk OpenID → hanya user yang teregistrasi saja yang bisa

berkomentar terhadap artikel anda, yang termasuk Pengguna Terdaftar adalah mereka yang

mempunya akun di Google, Live Journal, Wordpress, Type pad, AIM, serta OpenID. Pengguna

dengan Google Account → Yang bisa berkomentar hanyalah mereka yang mempunyai akun

google. Hanya anggota blog ini → Hanya anggota dari blog anda saja yang bisa berkomentar, ini

biasanya dipakai jika blog anda adalah untuk komunitas tertentu, misal komunitas pendidikan.

Penempatan Formulir Komentar : Halaman penuh → halaman blog anda akan di timpa oleh

kotak komentar ketika ada pengunjung klik link komentar. Jendela munculan → Kotak komentar

akan muncul dalam jendela baru apabila ada pengunjung yang klik link komentar. Disemat di

bawah entri  → kotak komentar akan langsung ditampilkan langsung dibawah artikel posting

anda, sehingga pengunjung dapat langsung memeberikan komentar tanpa harus klik link

komentar. Format kotak komentar yang paling banyak disukai oleh blogger adalah Disemat di

bawah entri.

Default Komentar untuk Entri : pilih Entri baru memiliki komentar jika artikel post anda ingin ada

kotak komentarnya, namun sewaktu-waktu anda bisa saja mematikan fungsi ini ketika melakukan

posting. Pilih Entri baru tidak memiliki komentar jika artikel post anda tidak ingin mempunyai kotak

komentar, namun sewaktu-waktu anda bisa saja memunculkan fungsi ini ketika melakukan

posting.

Tautbalik : Pilih Tampilkan jika anda ingin menampilkan link ke website yang membuat link ke

artikel yang anda buat. Pilih Sembunyikan jika anda tidak ingin menampilkan link ke website yang

membuat link ke artikel yang anda buat.

Bawaan Tautbalik untuk Posting : pilih Entri baru memiliki Tautbalik jika setiap artikel yang di

posting memiliki Backlinks. Pilih Entri baru tidak memiliki Tautbalik jika setiap artikel yang di

posting tidak ingin memiliki Backlinks.

Format Timestamp Komentar : pilih format tampilan tanggal komentar yang anda sukai.

Pesan Formulir Komentar : Tulis pesan yang ingin muncul diatas kotak komentar. Misal :

Silahkan anda berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar

spam.

Page 10: Panduan Membuat Blog Di Blogspot

Moderasi komentar : Pilih Selalu jika setiap komentar yang masuk ingin di moderasi terlebih

dahulu oleh anda. Pilih Hanya pada entri yang lebih lawas dari jika komentar ingin di moderasi

terlebih dahulu terhadapat posting yang umurnya telah anda tentukan. Pilih Tidak pernah, jika

komentar yang masuk tidak ingin di moderasi terlebih dahulu dan akan langsung muncul diblog

anda. Jangan lupa untuk memasukkan alamat email anda, apabila ketika ada orang yang

berkomentar anda akan mengetahuinya melalui email. Atau kosongkan saja apabila anda tidak

ingin menerima email pemberitahuan tentang komentar.

Tampilkan verifikasi kata untuk komentar? : Pilih Ya jika ingin menampilkan huruf verifikasi

ketika ada yang berkomentar, pilihan ini adalah untuk mencegah terhadap script robot spam yang

bisa membombardir blog anda dengan komentar, walaupun begitu pilihan ini mempunyai

kekurangan yaitu pengunjung blog anda biasanya malas untuk berkomentar karena merasa ribet

ketika berkomentar. Pilih Ya jika tidak ingin menampilkan huruf verifikasi, pilihan ini sedikit rentan

terhadap script robot spam, namun biasanya pengunjung akan lebih suka berkomentar karena

mudah dilakukan.

Tampilkan gambar profil dalam komentar? : Pilih Ya jika dalam kometar ingin ditampilkan

gambar profile yang berkomentar. Pilih Tidak jika tidak ingin menampilkan gambar profile pemberi

komentar.

Email Pemberitahuan Komentar : Masukkan alamat email yang ingin dikirim notifikasi apabila

ada yang berkomentar. Jumlah maksimal email yang dapat menerima adalah 10 email.

Akhiri pengaturan menu Komentar dengan klik tombol SIMPAN SETELAN.

Arsipkan

Beberapa pengaturan dalam menu Arsipkan :

Frekuensi Arsip : pilih arsip yang ingin di tampilkan apakah Arsip tidak ada, Harian,Mingguan,

atau Tiap Bulan. Disarankan untuk memilih Tiap Bulan.

Aktifkan Halaman Posting? : Silahkan pilih Ya atau Tidak.

Akhiri pengaturan menu Arsipkan dengan klik tombol SIMPAN SETELAN.

Feed Situs

Beberapa pengaturan dalam menu Feed Situs :

Page 11: Panduan Membuat Blog Di Blogspot

Izinkan Feed Blog : Silahkan pilih Tak satupun, Singkat, atau Penuh. Disarankan untuk memilih

opsi Penuh.

Posting URL Pengubahan Arah Feed : isi dengan alamat feed milik anda, ini adalah jika anda

telah melakukan burner feed seperti misalnya dengan feedburner. Namun jika belum punya,

silahkan dikosongkan saja terlebih dahulu. Untuk pembahasan feed burner akan di posting pada

posting selanjutnya.

Post Feed Footer : Isi dengan kode yang ingin tampil pada footer post feed. Jika belum mengerti

dikosongkan saja terlebih dahulu.

Akhiri Pengaturan menu Feed Situs dengan klik tombol SIMPAN SETELAN.

Email & Seluler

Untuk memposting sebuah artikel kedalam blog anda, tidak hanya melalui post editor yang ada di blogger.

Namun, anda pun bisa posting artikel melalui email ataupun perangkat seluler anda.

Beberapa pengaturan dalam menu Email & Seluler :

Alamat BlogSend : tulis alamat email yang ingin dikirim notifikasi apabila anda mempublikasikan sebuah

artikel. Maksimal jumlah yang bisa di kirim adalah sampai 10 buah email, format penulisan email di pisahkan

dengan tanda koma ( , ).

Alamat Pengeposan via Email : buatlah alamat email blogger untuk mengirimkan posting dari email atau

perangkat seluler dengan cara menuliskan pada kotak yang tersedia. Misalkan alamat email anda adalah

[email protected] maka anda bisa membuat email blogger menjadi [email protected]

atau [email protected] atau apa saja menurut anda yang bagus. Tapi ingat, rahasiakan alamat

email ini agar orang lain tidak bisa posting ke blog anda

Untuk mengaktifkan fitur ini, anda harus memilih opsi Publikasikan segera email, artinya apabila anda

mengirimkan email ke alamat diatas, isinya akan langsung diposting ke blog. Jika opsi yang dipilih adalah

Page 12: Panduan Membuat Blog Di Blogspot

Simpan email sebagai entri konsep, maka email yang dikirimkan tidak akan langsung di publikasikan,

melainkan akan masuk ke post konsep.

Namun, apabila anda tidak ingin mempublikasikan melalui email, pilih opsi Dinonaktifkan. Fungsi ini banyak

juga dipilih dengan alasan keamanan.

Jangan lupa akhiri pengaturan menu Email & Seluler dengan klik tombol SIMPAN SETELAN.

OpenID

Disini tidak ada yang harus di atur, melainkan pemberitahuan bahwa alamat blog anda bisa digunakan

sebagai alamat OpenID. Apa itu OpenID? Mungkin lain kali akan dibahas.

Izin

Pada menu ini anda dapat menambahkan penulis dengan cara di undang ke email yang anda anggap layak

untuk ikut serta menjadi penulis di blog anda.

Pada Siapa yang bisa melihat blog ini? Anda dapat memilih siapa saja yang dapat mengakses blog anda.

Opsi Siapapun berarti blog anda terbuka untuk umum atau bisa dibuka oleh siapa saja. Hanya Orang-orang

yang saya pilih  yaitu hanya orang-orang yang di undang oleh anda yang dapat mengakses blog anda

dengan cara login terlebih dahulu. Hanya penulis blog berarti hanya penulis saja yang bisa mengakses isi

halaman blog anda, Opsi Hanya penulis blog terkadang di gunakan juga pada saat mengganti template,

agar blog anda tidak terlihat semrawut ketika mengganti template.

Untuk pembahasan Cara Pengaturan Blog Di blogger sepertinya sudah cukup, apa opini anda tentang ini?

Cara Custom Domain di Blogger

Karena banyak permintaan yang masuk ke kang Rohman tentang bagaimana cara custom domain di

blogger atau blogspot, maka pada posting kali ini kang Rohman mencoba untuk menuliskannya. Apa itu

custom domain di blogger? yang di maksud custom domain di blogger disini adalah mengganti alamat blog

yang di blogger atau blogspot dengan nama domain milik sendiri atau dengan Top Level Domain (TLD).,

misal http:/kolom-tutorial.blogspot.com diganti alamatnya menjadi http://www.kangrohman.com atau dengan

http://rohman.info atau dengan alamat yang lainnya.

Page 13: Panduan Membuat Blog Di Blogspot

Mengganti alamat sub domain blogger atau blogspot dengan Top Level Domain (TLD) tentu saja

mempunyai kelebihan serta kekurangan dibanding dengan tetap memakai sub domain blogspot, berikut

beberapa kelebihan custom domain blogger yang mungkin bisa anda pertimbangkan :

 

Tampil Lebih Professional

Memakai nama domain sendiri biasanya akan dianggap lebih professional dibandingkan dengan memakai

sub domain blogger. Anggapan seperti ini sangat diperlukan apabila blog anda adalah merupakan sebuah

blog bisnis terlebih lagi untuk toko online atau blog untuk menjual barang atau jasa, ini akan mempengaruhi

tingkat kepercayaan dari para pelanggan atau customer.

Nama domain seringkali diperhatikan oleh para pengunjung, apabila blog anda konten nya  berisi tentang

tips berbisnis yang bisa mendatang uang dengan mudah, kadangkala pengunjung akan sedikit meragukan

akan apa yang ditulis. Kadangkala ada ungkapan rasa keraguan seperti ini :

Ngomongnya aja bisa dapet ratusan ampe ribuan dollar setiap bulannya, nama domain yang cuma 80 ribu

rupiah tidak kebeli, bener ngga tuh apa yang ditulis?

Nah, untuk anda yang ingin lebih sukses dalam berbisnis online sebaiknya dari sejak dini bisa menghindari

rasa keraguan para pembacanya.

 

Tingkat Kepercayaan Tinggi

Ini masih erat hubungannya dengan yang ditulis diatas. Blog dengan nama domain sendiri akan lebih

mendapatkan kepercayaan dibanding dengan blog yang masih memakai sub domain blogspot. Terlebih jika

anda biasa bermain di bisnis jualan link atau paid review, top level domain akan lebih mudah mendapatkan

job dibanding sub domain blogger walaupun memiliki page rank yang sama. Ini memang tidak mutlak,

namun merupakan salah satu faktor yang menunjang dalam keberhasilan bermain bisnis sale links.

 

Page 14: Panduan Membuat Blog Di Blogspot

Hosting Gratis Dari Blogger

Salah satu kendala yang dirasa berat untuk blog yang sudah mempunyai jumlah kunjungan yang banyak

adalah hosting, semakin banyak pengunjung maka biaya hosting yang harus dikeluarkan semakin besar.

Dengan Custom domain diblogger anda tidak perlu memikirkan biaya hosting karena blogger

memberikannya secara gratis.

Perlu diketahui bahwa apabila anda mengganti sub domain blogger dengan domain yang anda miliki, anda

tetap berhubungan dengan blogger, segala sesuatunya akan tetap seperti sebelumnya. Mesin blog yang

anda pakai tetap menggunakan mesin blogger, untuk mengatur anda tetap harus login ke blogger dsb.

 

Relatif Lebih Aman

Masih ingat dengan postingkan Kang Rohman tentang kasus penghapusan blog oleh blogger. Jika suatu

saat kasus tersebut menimpa anda, tidak usah terlalu risau dan itu bukan akhir dari segalanya, yang harus

diingat adalah buatlah selalu backup data blog anda secara berkala. Langkah selanjutnya adalah membuat

blog baru di blogger, lalu upload backup data yang telah dimiliki dan blog baru tersebut akan sama persis isi

postingnya seperti blog yang dihapus, dan anda tinggal mengarahkan blog tersebut dengan domain anda

sebelumnya. Semua akan kembali normal, anda tidak akan kehilangan pengunjung setia anda karena nama

domainnya tetap sama.

Langkah yang lain adalah menghilangkan ketergantungan dari blogger dengan cara membeli hosting

sendiri, lalu memakai mesin blog yang lain yang anda sukai dan tinggal di migrasi saja dari blogger ke

mesin blog baru anda.

 

Diatas adalah beberapa keuntungan custom domain di blogger, tentunya masih banyak lagi keuntungan

yang lainnya, namun untuk sedikit membatasi agar posting ini tidak terlalu panjang maka hanya itu saja

yang ditulis.

 

Page 15: Panduan Membuat Blog Di Blogspot

Namun, kang Rohman menyarankan bahwa custom domain ini untuk blog baru saja dan tidak untuk yang

telah lama, alasannya? untuk yang custom domain, blog anda akan menjadi sebuah blog baru lagi. segala

sesuatu seperti jumlah Subscriber, backlinks, Page Rank  serta lain sebagainya akan menjadi baru semua.

Namun, jika anda tidak mempermasalahkan hal tersebut.tentu tidak ada masalah.

 

Apa yang diperlukan untuk melakukan custom domain? yang diperlukan hanyalah nama domain serta

layanan DNS. Untuk beberapa penjual domain, layanan DNS disediakan secara gratis sehingga anda tidak

perlu mengeluarkan biaya tambahan atau menggunakan layanan free DNS pihak ketiga sehingga anda

tidak terlalu repot.

Berapa harga domain? harga domain sangat bervariasi tergantung dari kejelian anda dalam memilih domain

provider, namun sebagai gambaran saja bahwa harga domain berkisar antara Rp.70.000 hingga

Rp.100.000 untuk masa kontrak selama satu tahun, atau dengan kata lain dengan modal sekitar 70rb

sampai 100rb anda akan memiliki blog yang lebih profesional dalam satu tahun kedepan dan tentunya anda

bisa memperpanjang untuk tahun berikutnya.

 

Perlu anda ingat bahwa anda bisa membeli domain dimana saja, namun agar lebih mudah dalam menulis

tutorial ini, sebagai contoh  kang Rohman menggunakan domain dari rumah web.

Untuk sedikit mempersingkat postingan ini, maka berikut cara-cara custom domain :

 

* Jika anda telah mempunyai domain, silahkan login ke kontrol panel domain anda, tentunya dengan

username serta password yang telah di berikan.

*  Sorot menu Domains kemudian pilih List All Orders.

Page 16: Panduan Membuat Blog Di Blogspot

* Klik pada domain yang ingin anda setting untuk custom domain.

* Klik tab menu DNS, lalu klik tombol Active DNS

* Klik tombol Auto-update nameservers

 

* Akan ada keterangan bahwa nameserver yang baru bisa aktif dalam waktu 24-72 jam.

Nameserver Modifications completed successfully. You will need to allow a 24-72 hour propagation time for

the DNS service to begin working.

* Masih dalam tab menu DNS, klik tombol Manage DNS, akan muncul halaman baru, kemudian klik tab

menu CNAME Records,  lalu klik tombol Add CNAME Record

Page 17: Panduan Membuat Blog Di Blogspot

* Isi Host Name dengan www , lalu isi Value dengan ghs.google.com , untuk TTL biarkan saja. Akhiri

dengan klik tombol Add Record.

* Setelah proses selesai, klik tab A Records. kemudian klik tombol Add A Record

* Untuk Host Name biarkan kosong, isi Destination IPv4 Address dengan 216.239.32.21 , untuk TTL

biarkan apa adanya. Kemudian klik tombol Add Record

Page 18: Panduan Membuat Blog Di Blogspot

* Lakukan langkah Add A record sebanyak 3 kali lagi, namun IP yang di masukkan adalah nomor

216.239.34.21 , 216.239.36.21 , 216.239.38.21 . Sehingga nanti akan ada 4 records yang dihasilkan

* Langkah penambahan IP diatas dimaksudkan agar blog anda tidak mengalami error apabila diakses tanpa

www.

* Untuk setting CNAME pada domain telah selesai, langkah selanjutnya adalah setting pada blog anda yang

di blogger.

 

Berikut cara setting blog anda yang di blogger

* Silahkan login ke blogger dengan ID anda

* Klik Pengaturan untuk yang mau di custom domain

Page 19: Panduan Membuat Blog Di Blogspot

* Klik tab Publikasikan

* Klik Domain Ubahsesuaian

* Klik Beralihlah ke pengaturan lanjut

* Isilah Domain Anda dengan nama domain yang tadi disetting DNS nya, jangan lupa sertakan www

didepannya. formatnya adalah www.domainanda. Contoh www.indodesigner.net. Isilah verifikasi kata yang

ada dan akhiri dengan klik tombol SIMPAN SETELAN.

* Selesai.

 

Proses Custom domain blogger telah selesai, namun biasanya memerlukan waktu agar blog anda bisa

diakses menggunakan domain baru. Proses ini biasanya memakai waktu paling lama 24 jam, namun

banyak yang hanya dua atau tiga jam telah selesai, dan blog anda bisa diakses dengan domain anda.

Page 20: Panduan Membuat Blog Di Blogspot

Sebagai contoh langkah-langkah diatas, kang Rohman menggunakan nama domain

http://www.indodesigner.net

Selamat mencoba dan semoga blog anda semakin tampil lebih professional.

Cara Mengganti Template di blogspot

Sekilas tentang template blog, Template website atau blog 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 anda lihat saat

ini, bahwa terlihat tatanan gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.

Di blogger atau blogspot, anda dapat dapat mengganti template blog anda secara leluasa sesuai dengan

selera dan keinginan masing-masing. Jika anda telah mahir membuat template sendiri, anda dapat

menggunakan template tersebut untuk blog anda. Namun, jika anda masih awam dalam membuat template,

blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan

keinginan. Selain itu, anda dapat pula mengunduh atau mendownload template blogger gratis dari penyedia

template blogger, salah satu contoh website yang menyediakan template blogger tersebut adalah beralamat

di http://blogtemplate4u.com, disana terdapat ratusan template blogger yang bisa anda gunakan secara

gratis. namun, jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh

menghapus atau menghilangkan credit link dari pembuat template tersebut. Dengan tidak membuang link

credit pembuat template, itu adalah sebagai apresiasi atas kerja keras mereka dalam menyediakan template

secara gratis.

Langsung ke topik utama, Cara mengganti template di blogspot atau blogger ada dua cara, yaitu mengganti

template dengan template yang disediakan blogspot, atau mengganti template dengan template yang

didapat dari penyedia template. kita. Berikut ulasannya :

Mengganti Template dengan Template yang disediakan blogger

Berikut cara-cara untuk mengganti template dengan template yang telah disediakan blogger:

1. Silahkan login ke blogger dengan ID anda.

2. Klik Rancangan. 

Page 21: Panduan Membuat Blog Di Blogspot

3. Klik menu Perancang Template. Selanjutnya akan muncul jendela perancang template blogger.

4. Klik pada pilihan template yang tersedia (saat tartikel ini ditulis template yang terdia berjumlah 6

template). Selain itu, anda dapat pula memilih background atau gambar latar belakang dari

template tersebut. Jika sudah cocok dengan salah satu template,  klik APPLY TO BLOG.

5. Selesai.

Mengganti Template dengan template dari penyedia template

Berikut cara-cara untuk mengganti template dengan template dari penyedia template :

1. Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis.

Salah satu contoh anda bisa download di blogger templates.

2. File template yang didownload, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh

karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor

seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa

mengekstraknya secara online di Wobzip.

Page 22: Panduan Membuat Blog Di Blogspot

3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.

4. Silahkan login ke blogger dengan ID anda.

5. Klik Rancangan.

6. Klik menu Edit HTML.

7. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template

Lengkap.

8. Klik tombol Browse.., pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml

saja ). Kemudian klik tombol Unggah.

9. Apabila ada muncul peringatan tentang widget, klik pada tombol PERTAHANKAN WIDGET.

Page 23: Panduan Membuat Blog Di Blogspot

10. Selesai.

Cara Memposting Artikel

Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka

kali ini akan di bahas tentang tata cara posting di blogger.com. Di dalam menu posting ada beberapa toolbar

yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel

tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada

salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.

Toolbar yang ada ketika posting :

--> Untuk merubah jenis hurup yang di gunakan

--> Untuk merubah ukuran hurup (heading)

--> Untuk Menebalkan hurup

--> Untuk memiringkan hurup

--> Untuk merubah warna hurup

--> Untuk membuat link

--> Untuk membuat artikel menjadi rata kiri

--> Untuk membuat tulisan menjadi di tengah

--> Untuk membuat artikel menjadi rata kanan

Page 24: Panduan Membuat Blog Di Blogspot

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

Langkah-langkah dalam memposting suatu artikel:

1. Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”, sering terjadi hang

pada komputer (pengalaman saya pribadi). Copy artikel yang telah anda buat sebelumnya,

kemudian paste di area posting. Edit sesuai dengan kemauan anda.

2. Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).

Page 25: Panduan Membuat Blog Di Blogspot

3. Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin memasukan gambar

ataupun photo untuk menghiasi posting-an anda.

4. Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam

blog, barangkali masih ada yang perlu di edit.

5. Klik tombol “ publish “. Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh

dunia.

Membuat Read More untuk Template klasik

Update : Tutorial ini khusus bagi anda yang masih menggunakan template klasik, jika anda sudah

menggunakan template baru (xml/beta), silahkan baca petunjuk membuat read more di sini!

Wah judul yang aneh, "membuat Read More" maksudnya apa? Begini sobat, sebenarnya saya kurang

setuju dengan judul tersebut, tadinya saya ingin memberi judul "Membuat menu Selengkapnya", tapi

berhubung kata "Read More" yang paling di kenal di jagad blog, ya saya pun ikut-ikutan (dasar tukang

ngekor). Ya sudahlah kepanjangan ngobrolnya. Kita mulai pembahasannya. Bagi para sobat yang baru

mulai membuat blog, mungkin belum mengetahui informasi ini dan mudah-mudahan dengan membaca

artikel ini dapat menambah pengetahuan kita tentang yang namanya nge-blog.

Sobat mungkin melihat bahwa artikel-artikel saya 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 sobat yang baru posting artikel hanya satu atau dua artikel saja mungkin menganggap tidak perlu

menyingkat artikel sobat, namun jika nanti artikel sobat sudah banyak, maka mungkin saja ada terbersit

Page 26: Panduan Membuat Blog Di Blogspot

ingin membuat menu ini.

Oke... kelamaan ngawurnya, mending langsung saja. Untuk membuat menu Read more kita harus

menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali ini, saya

khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan

tunggu pada postingan yang akan datang.

Silahkan ikuti langkah-langkah berikut :

Login ke blogger.com dengan id sobat

Klik menu bertuliskan Template

Klik menu Edit HTML

jangan lupa Copy seluruh kode template milik sobat 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;}

Page 27: Panduan Membuat Blog Di Blogspot

</MainOrArchivePage>

<ItemPage>

div.fullpost {display:inline;}

</ItemPage>

Untuk mempercepat pencarian kode </style>, silahkan sobat 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 sobat 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

Page 28: Panduan Membuat Blog Di Blogspot

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

Selesai

Cara Posting Artikel

Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu

artikel agar ada menu Readmore nya.

Klik menu Posting

Page 29: Panduan Membuat Blog Di Blogspot

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

yakni :

<div class="fullpost">

</div>

simpan artikel sobat 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, saya 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!

Page 30: Panduan Membuat Blog Di Blogspot

Bagaimana sobat, sudah jelaskan. bila belum jelas silahkan di tanyakan kembali pada komentar.

Sedikit clue, 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 sobat yang suka posting pada menu compose,

kode ini sering ada masalah di karenakan bertabrakan dengan perintah lain yang memakai kode Span.

Akhirul kata selamat mencoba !

Membuat Text Area

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

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 anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text

ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda

akan tampil di dalam text area </textarea></p>

Sebagai contoh :

Page 31: Panduan Membuat Blog Di Blogspot

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda 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 anda 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 anda 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 anda di sini, maka

tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para

pengunjung</textarea></p></div></form>

Sebagai contoh :

<a href="http:/ / kolom- tuto

Page 32: Panduan Membuat Blog Di Blogspot

Agar anda lebih memahami kode di atas, sedikit akan saya 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 anda 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 anda jangan merubah tulisan ini.

3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika

anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area :

<script language="JavaScript"> function clickIE() { if (document.all) { return false; } } function clickNS(e) { if (document.layers(document.getElementById&&!document.all)) { if (e.which==2e.which==3) { return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS; } else{ document.onmouseup=clickNS; document.oncontextmenu=clickIE; } document.oncontextmenu=new Function("return false") </ script>

Page 33: Panduan Membuat Blog Di Blogspot

1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin

text area anda 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 anda ingin memperpendek atau memperpanjang lebar text area,

anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"

3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar

144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda

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 anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung.

bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD>

selamat mencoba

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:

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.

- Archives -

Page 34: Panduan Membuat Blog Di Blogspot

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 Anda

2. Klik Template

3. Di bagian sidebar blog Anda 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>

Page 35: Panduan Membuat Blog Di Blogspot

<BloggerArchives>

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

</BloggerArchives>

</select>

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

6. Selesai.

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

1. login dulu, tentunya dengan id anda

2. klik LAYOUT

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

4. Klik Edit pada kotak Blog Archive tadi

Page 36: Panduan Membuat Blog Di Blogspot

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

7. Selesai

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, saya ambil contoh

untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog

tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :

<form><select name="menu"

onchange="window.open(this.options[this.selectedIndex].value,'_blank')"s

ize=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 saya :

<form><select name="menu"

onchange="window.open(this.options[this.selectedIndex].value,'_blank')"s

ize=1 name=menu>

<option>- Blog Tutorial -</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-

Page 37: Panduan Membuat Blog Di Blogspot

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-

hurup-dan-warna.html">warna & hurup</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 :

Mudah bukan?   Selamat mencoba !

- Blog Tutorial -

Page 38: Panduan Membuat Blog Di Blogspot

Ingin pintar dalam bahasa HTML silahkan download ebook nya di sini .Ingin pintar membuat Website sendiri, klik di sini.

Upload Gambar dan Foto Profile

Agar posting artikel pada blog lebih menarik untuk dilihat, maka sebaiknya kita menyisipkan gambar di

antara poting-an 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. Bagi anda-anda yang masih bingung

bagaimana caranya untuk memasukan gambar atau istilah resminya yaitu upload gambar, maka akan saya

ulas langkah-langkahnya :

1. Login seperti biasa dengan id anda

2. Klik Posts

3. Klik New Post (bila sebelumnya anda telah mempunyai posting-an)

4. Klik toolbar yang bergambar seperti ini

5. Beri tanda tik/cek pada radio button pada pilihan Choose a layout, bila anda 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

Page 39: Panduan Membuat Blog Di Blogspot

6. Beri tanda ceklis di samping tulisan Use this layout every time bila anda menginginkan setiap

upload gambar settingnya seperti semula

7. Tekan tombol Browse, lalu masukan gambar dari komputer anda yang ingin di upload.

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

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

10. Klik Tombol Done untuk mengakhiri proses upload

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

melihat gambar yang anda upload tadi sekaligus dapat mengatur kembali ukuran dari gambar ini, caranya

yaitu klik gambar tersebut sampai gambar anak panah mouse anda 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 anda inginkan lepas tombol yang anda 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 anda inginkan.

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

langkah di atas, cuma ada sedikit perbedaan yaitu kamu harus menghapus beberapa kode tersebut. Jika

foto kamu sudah selesai di upload (langkahnya sama seperti di atas). Tekanlah menu Edit HTML untuk

melihat kode HTML dari Foto anda tadi, copy / paste kode HTML tersebut kedalam program notepad (agar

Page 40: Panduan Membuat Blog Di Blogspot

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

anda 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 anda 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 meng-upload (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. Saya ambil contoh, biasanya saya menyimpan foto-foto

saya di http://photobucket.com. jika anda mau silahkan daftarkan diri anda (gratis ko), apabila sudah selesai

daftar dan bisa login, silahkan upload photo anda. 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 REPUBLISH. Selesai, selamat mencoba.

Membuat Link (1)

Page 41: Panduan Membuat Blog Di Blogspot

Dalam dunia blog, tentu anda tidak asing lagi dengan yang namanya link. Apabila anda seorang blogger

(tukang ngeblog kata orang jakarta mah), 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 anda tidak bisa membuat link, ini dapat berakibat anda akan di asingkan alias di

cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik membuat link ini,

saya akan mengulasnya dalam beberapa sub bagian yakni :

Link pada posting-an

Jika anda membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link, misalkan

artikel tersebut bercerita tentang bisnis yang anda ikuti pada sebuah website di internet, lalu anda ingin

mengajak para pembaca artikel tersebut untuk mengunjungi website yang anda ceritakan. Misalkan dalam

artikel tersebut ada kata –kata seperti Jika anda tertarik silahkan anda 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 anda inginkan, misalkan :

http://www.resepbisnis.com/?id=rohman

Page 42: Panduan Membuat Blog Di Blogspot

4. Klik OK. Selesai

Link dengan window baru

Mungkin anda punya pikiran, kalau anda membuat sebuah link trus pembaca mengkliknya, anda 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 anda

tetap ada dan halaman yang baru di klik akan muncul terpisah. Sebagai contoh, silahkan anda klik tulisan

Resep Bisnis atau Obral plus pada banner header diatas. Ketika anda 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.resepbisnis.com/?id=rohman :

<a href="http://www.resepbisnis.com/?id=rohman">klik disini</a>

maka disini anda 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.resepbisnis.com/?id=rohman" target="new">klik

di sini</a>

atau :

Page 43: Panduan Membuat Blog Di Blogspot

<a href="http://www.resepbisnis.com/?id=rohman" target="new">klik

di sini</a>

atau bisa juga seperti ini :

<a href="http://www.resepbisnis.com/?id=rohman"

target="_blank">klik di sini</a>

Buat Links di sidebar

Bila anda berkeinginan membuat link kepada teman anda di sidebar, cara termudah adalah seperti ini :

( khusus untuk template klasik)

1. Sign in di blogger dengan id anda

2. Klik menu TEMPLATE

3. Klik Edit HTML

4. Klik Edit

5. Klik Find (on this page)… --> untuk mempercepat pencarian

Page 44: Panduan Membuat Blog Di Blogspot

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

Find

7. Tuliskan link yang anda inginkan, contoh jika anda ingin membuat link ke blog saya, maka kode

yang di tulis adalah :

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

Tutorial</a>

8. Klik Save Template Changes. Selesai

Sedikit clue untuk anda. Jika anda sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik,

sebaiknya anda copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila anda

melakukan kesalahan, anda bisa mengembalikan kesemula karena sudah mempunyai backup data

template tersebut. Atau bisa juga sebelum anda klik Save Template Changes sebaiknya anda klik terlebih

dahulu tombol preview untuk melihat perubahan yang anda lakukan, apabila sudah cocok dengan

perubahan tersebut baru di save Template Changes.

Page 45: Panduan Membuat Blog Di Blogspot

Untuk anda pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :

1. Login di blogger dengan ID anda

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 saya Adalah “ Link

partner” atau silahkan terserah anda

7. Isi nomor link yang ingin anda tunjukan di blog anda pada form Number of Links to show in list, jika

anda ingin membatasi jumlah link yang akan di tampilkan, jika anda tidak mau membatasi

silahkan di kosongkan saja.

8. Pada form Sorting, silahkan anda pilih sort Alphabetically bila ingin link anda di urutkan

berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically apabila

anda menginginkan Link yang anda buat di urutkan secara terbalik ( mulai dari Z --> A ). Bila

Page 46: Panduan Membuat Blog Di Blogspot

anda tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang anda buat,

silahkan pilih Don’t Sort

9. Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http;//kolom-

tutorial.blogspot.com

10. Tulis nama atau tulisan yang ingin muncul pada link yang anda buat pada form New site Name.

contoh : Blog Tutorial.

11. Klik Add Link, jika link yang anda buat lebih dari satu. Silahkan isi semua form sesuai dengan

langkah di atas.

12. Klik SAVE CHANGES bila sudah selesai

13. Bila anda ingin menempatkan Link yang anda buat tadi, silahkan arahkan mouse anda ke kotak

link yang baru anda buat, lalu tekan mouse sambil di tahan pindahkan ke tempat yang anda

inginkan ( di drag & drop ) .

14. Klik SAVE. Selesai

Membuat link dari gambar atau image

Page 47: Panduan Membuat Blog Di Blogspot

Apabila anda mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka caranya

seperti di bawah ini :

1. Upload gambar yang anda miliki ke hosting tempat menyimpan gambar, contoh

http://www.photobucket.com.

2. Jika anda sudah mengupload gambar anda, 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/rohman24/animasichicklet.gif

Nah jika anda 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/rohman24/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/rohman24/animasichicklet.gif"></a>

(kode dalam satu baris)

Link berjudul

Mungkin anda bingung, ko judul bahasan topik ini judulnya Link berjudul? Untuk memperjelas bahasan ini, silahkan anda kembali ke halaman atas blog ini lalu arahkan mouse anda 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 anda sudah mengerti maksud saya, jadi dalam sebuah link ada kata-kata untuk menekankan ajakan anda kepada para pembaca untuk mengklik link

Page 48: Panduan Membuat Blog Di Blogspot

tersebut. Untuk membuat judul link ini sangat mudah, yakni anda hanya harus menambahkan title=" ... " pada link yang anda buat. Contoh seperti yang saya berikan di atas :

<a href="http://www.resepbisnis.com/?id=rohman target="new" title="mau belajar bikin website sendiri silahkan klik di sini">Resep bisnis</a>

mudah bukan. Selamat mencoba.

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

Page 49: Panduan Membuat Blog Di Blogspot

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

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

Agar lebih jelas akan saya sertakan contohnya :

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

Page 50: Panduan Membuat Blog Di Blogspot

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left"><FONT 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 anda 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 :

Page 51: Panduan Membuat Blog Di Blogspot

Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

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

<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>

<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>

</marquee>

hasilnya :

Membuat Refresh

Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman

blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet,

perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol

refresh yang ada pada tool bar.

Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :

Page 52: Panduan Membuat Blog Di Blogspot

<meta http-equiv="refresh" content="10"/>

Simpan kode di atas antara <head> .... </head>

sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di

lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa

menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.

Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup

menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika

anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas,

saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia

membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai

cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita

memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi

apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke

alamat baru yang di inginkan.

Fungsi Redirect ini bisa di buat dengan kode :

<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di

sini"/>

Selamat mencoba.

Kode HTML tampil di posting-an

Page 53: Panduan Membuat Blog Di Blogspot

Ada seorang teman bertanya begini, bang rohman gimana caranya agar kode HTML bisa tampil di posting-

an blog? Nah dari situ muncul ide untuk membuat posting-an ini, barangkali ada diantara kawan-kawan

semua yang juga mempunyai pertanyaan seperti itu? jawabannya mungkin begini. Agar kode-kode HTML

dapat muncul pada posting-an blog kita, ada beberapa cara dan yang saya ketahui saat ini cuma baru dua

cara ( barangkali kawan-kawan ada yang lebih tahu ).

Yang pertama yaitu anda harus mengganti karakter-karakter perintah dari program HTML dengan notasi

tertentu. Karakter-karakter yang sering di gunakan yaitu seperti yang tertera pada tabel di bawah ini :

    Karakter         Notasi         Keterangan    

< &lt;    Kurung runcing terbuka

> &gt;    Kurung runcing tutup

& &amp;    Tanda Dan

 " &quot;    Tanda petik ganda

± &plusmn;    Tanda plus minus

Spasi &nbsp;    Tanda Spasi

© &copy;    Tanda hak cipta (copyright)

® &reg;    Tanda terdaftar (Registered)

Nah agar lebih paham akan saya beri contoh, misalkan dalam postingan anda berisi kata-kata seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<meta http-equiv="refresh" content="10">

</meta>

Page 54: Panduan Membuat Blog Di Blogspot

Nah (dari tadi perasaan nah nah melulu , pake kata lain nape!...      ) di dalam postingan anda, jika ingin

tampil seperti itu maka yang di tuliskan tidak persis seperti kode di atas, sebab nanti di postingan tulisan

kode tersebut tidak akan muncul, yang ada justru efek dari kode yang anda tuliskan. trus jalan keluarnya

gimana? Seperti yang saya tuliskan pada tabel, anda harus mengganti karakter-karakter perintah yang ada

dengan notasi penggantinya, jadi yang harus anda tuliskan pada postingan adalah seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<br/><br/> <code>

&lt;meta http-equiv="refresh" content="10"&gt;

<br/>

&lt;/meta&gt;

</code>

Pembubuhan perintah <code> dan </code> adalah untuk menandakan bahwa yang anda tulis adalah

sebuah kode HTML, dan nantinya pun tulisan-tulisan yang berada dalam perintah ini akan tanpil beda

dengan tulisan-tulisan yang lainnya, sebagai contoh silahkan anda lihat postingan saya yang lainya yang

membubuhkan kode-kode HTML. pembubuhan perintah <br/> adalah untuk membuat tulisan berpindah

kebawah, jika anda tidak membubuhkan perintah <br/> tadi, walaupun di posting-an anda tulis jauh

kebawah, hasilnya akan tetap bersatu.

  Huh cape juga ya dari tadi kutak-ketik nih.., itu tadi cara yang pertama. Cara yang kedua adalah

dengan menggunakan text area. Cara membuat text area secara lengkap silahkan klik di sini. Sebagai

contoh, untuk menuliskan kode-kode di atas, pada posting-an anda harus menuliskan seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<br/><br/>

<p align="left"><textarea name="code" rows="6" cols="400">&lt;meta http-equiv="refresh" content="10"&gt;

&lt;/meta&gt;</textarea></p>

Maka yang akan tampil di blog anda adalah seperti ini :

Page 55: Panduan Membuat Blog Di Blogspot

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

mudah bukan? selamat mencoba dan berkarya.

oupss... saya lupa kawan, untuk memposting seperti yang saya jelaskan dia atas, anda harus pada posisi

Edit HTML jangan pada posisi compose.

oke kawan, untuk yang kedua kalinya...selamat mencoba.

Masalah Posting Artikel

Udah tiga hari ini saya tidak update, ma'lum kemarin abis pulang dari kampung halaman, yo'i bandung

tercinta, nemuin si kembar and istri terkasih...   lho ko jadi curhat...

Ok udahan ah intermezonya..jadi garing kalo lama-lama. langsung aja tadi pas buka email, ada seorang

kawan yang bertanya kira-kira isinya begini:

Saya mau tanya nich, saya masih awam dalam blogging dan saya kesulitan untuk mengatur postingan

saya, yang saya maksud adalah untuk mengatur paragraph postingan, pada saat saya mengetik pada

kolom compose, pada tiap paragraph saya selalu memberikan jarak satu spasi dengan menekan tombol

enter, tapi hasilnya publishnya tidak sesuai dengan pengaturan saya pada kolom compose sebelumnya, itu

gimana solusinya yach ? Atas perhatian dan bantuannya saya ucapkan terima kasih...Wss

Sebenarnya sudah saya jawabin lewat email, tapi saya pikir-pikir mending di posting aja topik ini barangkali

ada manfaatnya buat kawan-kawan yang punya permasalahan yang sama.

<meta http- equiv="refresh" content="10"

</ meta>

Page 56: Panduan Membuat Blog Di Blogspot

Untuk masalah ini, saya sarankan jika setelah mengetik artikel di mode COMPOSE,sebelum di publish,

sebaiknya pindah dulu ke mode Edit HTML. Nah pada sela-sela paragrap yang ingin di beri jarak kita

sisipkan kode --> <br/>

satu kode <br/> berarti satu line break ke bawah, jadi kalau jarak yang di inginkan jauh ke bawah kita tinggal

tambahkan kode <br/> beberapa kali.

Contoh :

Di kabarkan padai awal tahun 2007 kemarin telah di luncurkan suatu produk alarm mobil yang mengklaim

dirinya sebagai alarm tercanggih di dunia. Produk tersebut terdiri dari dua item produk dengan kecanggihan

yang berbeda.

<br/><br/>

Produk pertama :

<br/><br/>

Alarm dengan menggunakan sim card, yakni alarm yang bisa me report kepada pemilik melalui teknologi

GSM. Semisal mobil kita di ganggu orang sehingga bunyi, maka mobil ini akan secara otomatis menelpon

kita untuk me report bahwa mobil kita di ganggu, Jangkauannya sampai dengan jangkauan provider dari

GSM selularnya.

Maka yang akan muncul di blog kita akan seperti ini :

Di kabarkan padai awal tahun 2007 kemarin telah di luncurkan suatu produk alarm mobil yang mengklaim

dirinya sebagai alarm tercanggih di dunia. Produk tersebut terdiri dari dua item produk dengan kecanggihan

yang berbeda.

Produk pertama :

Alarm dengan menggunakan sim card, yakni alarm yang bisa me report kepada pemilik melalui teknologi

GSM. Semisal mobil kita di ganggu orang sehingga bunyi, maka mobil ini akan secara otomatis menelpon

kita untuk me report bahwa mobil kita di ganggu, Jangkauannya sampai dengan jangkauan provider dari

GSM selularnya.

Page 57: Panduan Membuat Blog Di Blogspot

atau bisa juga kita menggunakan tag <p> ... </p>, tapi saya lebih menyukai tag <br/> tadi.

Untuk permasalahan tadi saya rasa sudah cukup jelas, nah saya sarankan bila kawan-kawan ingin terbiasa

dengan kode HTML, maka ketika posting artikel sebaiknya pada posisi Edit HTML jangan pada posisi

Compose, sebab ada peribahasa alah bisa karena biasa.

Mudah-mudahan bermanfaat.

Yahoo ! Messenger Emoticons

Buat kawan-kawan yang ingin menghiasi posting-annya dengan berbagai ekspresi dari yahoo, saya berikan

source codenya, biar anda bebas ngakak atau cemberut selagi posting. Silahkan copy source code berikut,

sisipkan pada kata yang sesuai dengan postingan anda, kalo lagi sedih jangan di pasang yang lagi ngakak,

trus kalo lagi patah hati ya nyengir aja ya...               

:)happy

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif"

width=18 height=18 border=0>

:(sad

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif"

width=18 height=18 border=0>

;)winking

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif"

width=18 height=18 border=0>

:Dbig grin

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif"

width=18 height=18 border=0>

Page 58: Panduan Membuat Blog Di Blogspot

;;)batting eyelashes

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif"

width=18 height=18 border=0>

>:D<big hug

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif"

width=42 height=18 border=0>

:-/confused

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif"

width=20 height=18 border=0>

:xlove struck

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif"

width=18 height=18 border=0>

:">blushing

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif"

width=18 height=18 border=0>

:Ptongue

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif"

width=18 height=18 border=0>

:-*kiss

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif"

width=18 height=18 border=0>

=((broken heart

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif"

width=18 height=18 border=0>

:-Osurprise

Page 59: Panduan Membuat Blog Di Blogspot

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif"

width=18 height=18 border=0>

X(angry

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif"

width=34 height=18 border=0>

:>smug

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif"

width=18 height=18 border=0>

B-)cool

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif"

width=18 height=18 border=0>

:-Sworried

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif"

width=18 height=18 border=0>

#:-Swhew!

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif"

width=34 height=18 border=0>

>:)devil

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif"

width=18 height=18 border=0>

:((crying

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif"

width=22 height=18 border=0>

:))laughing

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif"

Page 60: Panduan Membuat Blog Di Blogspot

width=18 height=18 border=0>

:straight face

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif"

width=18 height=18 border=0>

/:)raised eyebrow

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif"

width=18 height=18 border=0>

=))rolling on the floor

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif"

width=30 height=18 border=0>

O:-)angel

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif"

width=30 height=18 border=0>

:-Bnerd

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif"

width=24 height=18 border=0>

=;talk to the hand

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif"

width=18 height=18 border=0>

Yahoo hidden emoticons

:o3puppy dog eyes - New!

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif"

width=31 height=18 border=0>

Page 61: Panduan Membuat Blog Di Blogspot

:-??I don't know

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif"

width=40 height=18 border=0>

%-(not listening

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif"

width=52 height=18 border=0>

:@)pig

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif"

width=18 height=18 border=0>

3:-Ocow

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/50.gif"

width=18 height=18 border=0>

:()monkey

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/51.gif"

width=21 height=18 border=0>

~:>chicken

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/52.gif"

width=18 height=18 border=0>

@};-rose

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif"

width=18 height=18 border=0>

%%-good luck

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/54.gif"

width=18 height=18 border=0>

Page 62: Panduan Membuat Blog Di Blogspot

**==flag

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/55.gif"

width=25 height=18 border=0>

(~~)pumpkin

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/56.gif"

width=17 height=18 border=0>

~O)coffee

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif"

width=18 height=18 border=0>

*-:)idea

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif"

width=30 height=18 border=0>

8-Xskull

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/59.gif"

width=18 height=18 border=0>

=:)bug

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/60.gif"

width=20 height=18 border=0>

>-)alien

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/61.gif"

width=18 height=18 border=0>

:-Lfrustrated

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif"

width=18 height=18 border=0>

[-O<praying

Page 63: Panduan Membuat Blog Di Blogspot

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif"

width=18 height=18 border=0>

$-)money eyes

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/64.gif"

width=18 height=18 border=0>

:-"whistling

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif"

width=22 height=18 border=0>

b-(feeling beat up

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif"

width=18 height=18 border=0>

:)>-peace sign

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/67.gif"

width=22 height=18 border=0>

[-Xshame on you

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif"

width=22 height=18 border=0>

\:D/dancing

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif"

width=26 height=18 border=0>

>:/bring it on

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/70.gif"

width=23 height=18 border=0>

;))hee hee

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"

Page 64: Panduan Membuat Blog Di Blogspot

width=18 height=18 border=0>

:-@chatterbox

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/76.gif"

width=36 height=18 border=0>

^:)^not worthy

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif"

width=32 height=18 border=0>

:-joh go on

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif"

width=26 height=18 border=0>

(*)star

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/79.gif"

width=18 height=18 border=0>

o->hiro

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/72.gif"

width=18 height=18 border=0>

o=>billy

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/73.gif"

width=18 height=18 border=0>

o-+april

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/74.gif"

width=18 height=18 border=0>

(%)yin yang

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/75.gif"

width=18 height=18 border=0>

Page 65: Panduan Membuat Blog Di Blogspot

Selamat mempercantik postingan nya...

Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-

variasi dari marquee ini.

Selamat ber eksperimen

Ingin pintar dalam bahasa HTML, silahkan download ebook nya di sini

Ingin pintar membuat website sendiri, silahkan klik di sini

Blogger Emoticons

Biar senyum nya makin lebar, and kalo ketawa makin ngakak dikala posting artikel, saya berikan

perbendaharaan wajah-wajah kamu...

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

Page 66: Panduan Membuat Blog Di Blogspot

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

Selamat menghiasi postingannya...

Pasang Jam di Sidebar

Agar blog anda tampak cantik dan menarik untuk di lihat, maka anda bisa memasang beberapa aksesori

blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa anda dapatkan secara gratis pada

situs http://www.clocklink.com. Salah satu contoh jam yang tersedia adalah sebagai berikut :

Dan bagi anda yang ingin blognya di pasang jamjuga, silahkan ikuti langkah-langkah berikut :

Page 67: Panduan Membuat Blog Di Blogspot

1. Silahkan kunjungi situs http://www.clocklink.com

2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?

3. Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal,

Animation, dll

4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang

berada di bawah jam yang anda sukai tadi

5. Klik tombol yang bertuliskan Accept

6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk

indonesia bagian barat pilih GMT +7:00

7. Set ukuran jam yang anda 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 anda inginkan

10. Selesai

Karena kode jam blog ini adalah merupakan suatu kode HTML, maka bagi anda yang masih bingung cara

menempatkan kode HTML pada template blog, silahkan baca kembali postingan saya terdahulu di sini

Selamat mencoba

Membuat Banner Animasi

Agar blog kita tampil dinamis dan lebih atraktif, salah satu caranya adalah dengan memajang banner

animasi.karena dengan banner animasi, mata dari pengunjung akan langsung tertuju kepada banner

tersebut, terutama apabila anda seorang pebisnis, banner animasi akan lebih efektif untuk iklan yang kita

pasang di banding dengan banner biasa. Cara membuat banner animasi sangatlah mudah, mau yang

gratisan ada, mau yang bayar juga ada.Tapi tentunya ada kelebihan dan kekurangannya.

bagi anda yang berminat dengan banner animasi gratis, anda bisa kunjungi http://www.addesigner.com

Silahkan daftar (gratis), Jika sudah di terima anda tinggal memilih banner yang di sediakan, trus ya tinggal di

masukin ke blog, mau di sidebar atau di dalam postingan tentu bisa. Untuk cara pemasangan silahkan anda

baca postingan terdahulu bagaimana cara memasukan kode HTML kedalam blog.

Page 68: Panduan Membuat Blog Di Blogspot

Contoh banner animasi

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 mpunya blog

dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung

dapat mengungkapkan isi hatinya tentang blog yang anda 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 anda, dan justru dengan adanya variasi itulah membuat blog kita jadi hidup lebih hidu

(kaya iklan aja).

Ok, terlalu lama intermezonya ya, sekarang kita kembali (ke lap...top) ke topikbahasan. Bagaimana caranya

mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, anda 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, anda tinggal klik lalu coba lihat-lihat. Tapi untuk menghemat waktu pencarian

anda, maka di sini saya 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 anda ikuti langkah-langkah berikut ini :

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

ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang

telah di sediakan.

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

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 anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save

Setting.

5. Untuk mendapatkan kode HTML dari shoutbox anda, 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

Page 69: Panduan Membuat Blog Di Blogspot

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

Codes, lalu simpan di program Notepad anda

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

close situs tersebut.

9. Selesai

 

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.

Untuk blogger dengan template klasik :

1. Log in terlebih dahulu ke blogger.com dengan id anda

2. Klik menu Template

3. Klik Edit HTML

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

inginkan

5. Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik

Edit pada browser lalu pilih Find (on this page).. trus 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

 

Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah ukuran lebar

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

tinggi) dari dalam kode HTML shoutbox tersebut.

 

Untuk Blogger baru :

1. Silahkan Login dengan id anda

Page 70: Panduan Membuat Blog Di Blogspot

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 anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa

saja yang anda suka

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

8. Klik tombol Save Changes

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

10. Tekan tombol Save

11. Selesai

 

Selamat mencoba !

 

Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :

1. http://oggix.com

Untuk langkah-langkahnya hampir sama dengan langkah diatas.

Tutorial HTML

Bagi kawan-kawan yang sudah pernah berkunjung ke blog ini, mungkin tahu bahwa hari ini blog ku ada

banyak perubahan, yo'i.. yang tadinya sangat anti gambar sekarang tiba-tiba jadi lautan gambar, coba saja

lirik kebawah, tadinya banner yang terpasang hanya beberapa buah saja tapi sekarang jadi ngebaris kaya

tentara mau berangkat perang. Yups..tadinya cuma iseng-iseng masukin banner dari teman-teman blog lain,

eh keterusan.. ya udah sekarang semua gambar dari feedburner.com aku masukin semua..sekalian biar

rame..

Page 71: Panduan Membuat Blog Di Blogspot

Dan mulai hari ini topik bahsan pun akan ada sedikit perubahan, yakni ga cuma ngebahas blog tutorial

doank tapi ngebahas juga soal HTML, ini saya lakukan karena ada diantara sahabat saya yang hoby obrak-

abrik template blognya tapi masih menemui kesulitan karena masih bingung soal perintah-perintah HTML,

ya ngga jauhlah dari saya yang setiap edit HTMl musti inga inga dulu perintah HTML nya ma'lum baru

belajar jadi belum pada hapal.

Baiklah sobat, kita kembali ke (laptop) bahasan utama artikel ini yaitu mengenai HTML.

Apa itu HTML ?

HTML (Hypertext Markup Language)adalah merupakan suatu standar bahasa program yang di gunakan

untuk menampilkan dokumen-dokumen web. (itu menurut saya bro, kalo salah ya mohon di maafkan).

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 hurup miring

dan hurup tebal, contoh :

ini hanya <b><i>contoh </i></b> saja sobat

yang akan tampil di browser adalah :

ini hanya contoh saja sobat

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 (hurup besar atau kecil), jadi mau di tulis hurup besar ataupun

Page 72: Panduan Membuat Blog Di Blogspot

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 tampilakan dan bisa di lihat di dalam browser.

Page 73: Panduan Membuat Blog Di Blogspot

Ok sahabat, mungkin pengenalan pertama mengenai HTML di cukupkan sekian dulu dan akan di teruskan

pada postingan-postingan selanjutnya

Download Gratis

Dalam sesi kali ini, ada kabar baik buat kawan-kawan semua. ya saya mau

bagi-bagi software buat anda yang suka akan internet, khususnya bagi yang berminat untuk bisa membuat

website sendiri. Untuk produk-produk di bawah ini saya sudah mendapatkan hak Resale Right atau hak jual

ulang, tapi buat kawan-kawan semua khusus saya berikan gratis. Beberapa produk merupakan dalam

format ZIP, silahkan gunakan winzip untuk mengekstraknya. Untuk membacanya, anda memerlukan

Acrobat Reader versi 5.0 ke atas.

Klik di sini jika anda belum memiliki program Winzip.

Klik di sini jika anda belum memiliki program Acrobat Reader

• How to build HTML

Dengan e-book ini kita diajarkan cara menggunakan perintah-perintah HTML dasar dan tingkat lanjut. Di

buat dalam format yang mudah untuk di ikuti. untuk mendownload silahkan klik disini atau klik :

Search Engine Optimization Made Easy

Strategi sederhana yang dapat anda pakai untuk optimalisasi website atau blog anda di search engine. Ikuti

tipsnya dan dapatkan traficc sebanyak mungkin ke website atau blog anda. Untuk mendownload silahkan

klik disini atau klik :

Page 74: Panduan Membuat Blog Di Blogspot

Instant Site Maker

Software ini akan mempermudah anda membuat website dalam waktu yang singkat. Cukup baik bila anda

tidak memerlukan website yang kompleks. Untuk mendownload silahkan klik disini atau klik :

Java Buttons

Dengan kumpulan button dan menu yang menggunakan java script ini, bisa mempercantik website ataupun

blog milik anda, untuk mendownload silahkan Klik disini atau klik :

Web Template

Kumpulan template web propesional yang dapat anda gunakan untuk mendesain website anda. Untuk

mendownload silahkan klik disni atau klik :

Banner

Merupakan kumpulan banner cantik untuk mempromosikan website anda. Untuk mendownload silahkan

klik di sini atau klik :

Meta Tag Master

Program untuk membuat meta tags, sehingga mempermudah pencarian website atau blog anda di search

engine. Untuk mendownload silahkan klik di sini atau klik :

Page 75: Panduan Membuat Blog Di Blogspot

E-book "Menjadi Jutawan Via Internet"

E-book ini menjelaskan cara dan strategi mendapatkan penghasilan besar dengan memanfaatkan internet.

Cara tsb antara lain : menjadi pembuat web professional, membuat "Web Pencetak Uang Otomatis" dengan

konsep affiliasi & reseller, dan lain-lain. Dilengkapi pula dengan file-file latihan untuk memperjelas tuntunan

praktis kami.

Script Web Affiliasi

Script Web Pencetak Uang Otomatis siap pakai dengan konsep affiliasi. Anda tinggal mengganti teks dan

gambar sesuai dengan produk dan layanan anda!

Script Web Reseller

Script Web Pencetak Uang Otomatis siap pakai dengan konsep reseller. Anda tinggal mengganti teks dan

gambar sesuai dengan produk dan layanan anda!

FletMail

Software ini memungkinkan anda untuk mengirim e-mail untuk berapapun jumlah penerima dengan sekali

klik. Anda dapat menggunakan tags untuk mengganti kata-kata yang sesuai untuk penerima yang berbeda.

Dengan demikian, setiap penerima akan merasa mendapat e-mail personal dari anda.

Image Capture

Dengan menggunakan software ini, anda dapat menangkap image dari layar komputer anda.

IP Ad Web Sender

Software ini memungkinkan anda untuk mengirimkan promosi kepada komputer-komputer yang terhubung

dengan internet berdasarkan range IP addressnya.

Instant Software Downloads

Software yang bisa anda download adalah : Instant Unzip, HTML Compressor, IP Blocker, Link Evaluator,

Site Submitter, Pop Up Zapper, Secret Popup Maker, HTML E-mail Link Encrypter, File Destroyer, Internet

Page 76: Panduan Membuat Blog Di Blogspot

Explorer Blaster, MRU Wizard, Java Source Machine I, Java Source Machine II, Traffic Wizard, Password

Manager, JavaScript Compressor, HTML Encryptor, Fast HTML Remover, Password Generator, File

Splitter, HTML Editor, Picture Gallery Maker, Instant Notification.

The Building of a Better Website

Berisi tips-tips berharga bagaimana membangun sebuah website yang baik. Patut dimiliki untuk mendukung

karir anda sebagai webmaster.

Magic Subscriber

Demi meningkatkan penjualan bisnis anda, anda dapat menggunakan software ini. Software ini mudah

digunakan untuk menghasilkan prospek dan customer baru! Anda akan memiliki alat khusus yang akan

menangkap data e-mail pengunjung tanpa mereka perlu menuliskannya!

Reprint Rights Magic

Bagaimana cara menghasilkan uang tanpa perlu menggunakan produk anda sendiri ? Bagaimana

menggunakan rangkaian produk orang lain untuk menciptakan produk anda ? Informasi penting bagi anda

yang ingin menghasilkan uang tanpa perlu merancang produk.

Instant eMail Scramble

Apakah anda jengkel dengan banyaknya junk mail yang anda terima setiap hari ? Dengan menggunakan

utility ini, alamat e-mail anda di website anda akan terlindungi dari mesin penuai e-mail untuk keperluan

spam! Alamat e-mail anda akan tetap terbaca oleh pengunjung website anda, dan juga berfungsi seperti

biasa bila pengunjung mengklik link e-mail anda.

Pure Profit Software

Paket produk software yang sangat menarik! Berisi produk-produk pilihan seperti : Affiliate Defender, Instant

Affiliate Link Master, Instant Meta Maker, Instant Bookmark, JavaScript Magic, dll.

PopUps Generator

Page 77: Panduan Membuat Blog Di Blogspot

Dengan menggunakan software ini, anda dapat membuat popups window dari website anda. Anda dapat

memanfaatkannya untuk meningkatkan rasio penjualan dan pendaftar mailing list anda.

99 Websites You Should Have Bookmarked..But Probably Don't

Internet dipenuhi dengan informasi gratis, sarana penghasil uang dan sumber lainnya. Hanya saja, mungkin

anda tidak tahu tempat menemukannya. Informasi dalam e-book ini akan memberikan alamat websitenya

untuk anda! The Embarrasingly Simple Way I Grabbed the #1 Position in Google, Yahoo & AOL Search

engine merupakan gudangnya traffic. Dapatkan rahasianya bagaimana cara meraih posisi teratas di hasil

pencarian pada 3 search engine terpopuler!

Intraday Basic

Bambang Hariyadi membeberkan 2 strategi andalannya dalam membaca "CandleStick" yang terbukti

menghasilkan $4500 dalam seminggu !! (Forex market http://www.betonmarkets.com). Anda ingin

mendapatkan $4500 minggu depan? Miliki segera e-book ini, dan dapatkan strateginya!

The TrafficJam Formula

Salah satu kunci keberhasilan bisnis di internet adalah jumlah traffic/pengunjung yang dihasilkan oleh suatu

website. E-book ini memberikan informasi menarik cara menghasilkan sebanyak mungkin traffic ke website

anda dalam waktu singkat! Baca secara detail di websitenya bagaimana sang penulis berani menjamin

keberhasilan anda dalam mencari traffic!

The Affiliate Marketing Success Road Map

Jika anda ingin menjadi affiliate/reseller yang sukses, maka e-book ini untuk anda! Anda akan diberi cara

mencapai sukses dengan merencanakan dan mendesain sistim yang efektif untuk mendatangkan profit.

Newbie's Guide to Online Fortunes

E-book ini berisi petunjuk mengenai prinsip dasar dan cara sederhana untuk memulai bisnis on-line anda !

How to Write and Publish Your Own eBook in as little as 7 Days

Page 78: Panduan Membuat Blog Di Blogspot

Bagaimana cara membuat dan mempublikasikan sebuah e-book yang sukses ? Anda akan mendapatkan

informasinya di sini.

Internet Copycatting

9 Model bisnis internet yang dapat anda tiru. Disertai dengan pembahasan pro dan kontra, detail mengenai

setup, serta interview dengan pelaku bisnis untuk masing-masing model. Anda tidak perlu bingung lagi

memikirkan model bisnis internet, tinggal tiru, dan mulailah menghasilkan uang !

Download Page Generator

Dengan menggunakan program ini, maka anda tinggal mengisi formulir pertanyaan dengan data-data yang

diperlukan, dan secara otomatis halaman download/halaman ucapan terimakasih akan terbentuk untuk

anda. Yang biasanya membutuhkan waktu 30 menit sampai satu jam untuk membuatnya, dengan program

ini hanya butuh waktu satu menit saja !

Scroll Pops

Paket berisi 10 script yang mudah untuk digunakan. Anda dapat menggunakannya di website anda untuk

membuat Confirmation Windows, Subscriber PopUps, Bookmark Windows, Alert Windows, dan lain-lain.

PHP Instant Scripts

Script-script pilihan telah kami sediakan untuk anda. Untuk kepuasan anda, script-script ini telah kami uji

sebelumnya!

Terdiri dari script : Affiliasi, Portal, Forum, E-Commerce, Hit Counter, Guest Book, Polling, Image Gallery,

Classified Ad, Message Board, Search Engine, Event Calendar, Chat, News Publishing, Greeting Cards,

User-Online, Mailing List, Simple Calendar, Calculator, Simple Counter, Unit Converter.

SOFTWARE DAN E-BOOK BERHARGA LAINNYA UNTUK ANDA :

Wholesalers 2000 - Extreme Mega Edition

Website4Sale Secrets

Page 79: Panduan Membuat Blog Di Blogspot

101 Auction Secrets Revealed

Don-Lapre Info Reports

Auction Prophet

Millenium Info Reports

The Cash Flow Deluxe : Info-Software Programs

Using NLP On eBay

Cyber Tactics 101

Internet Traffic Virus 2.0

Internet Success Ladder

Free Advertising System

Yahoo Secrets Revealed

57 Free eBook Articles

WebPage-O-Matic (Personal Edition)

WebPage-O-Matic (Business Edition)

eZine Assistant

Priority Mailer

Internet Marketing Toolbar Pro

Cheap But Good

eBook Gold v3

Web Site and E-zine Promotion Made Easy

Amazing Marketing Tactics

Page 80: Panduan Membuat Blog Di Blogspot

TRAFFIC VIRUS

TYPEITIN SOFTWARE

KILLTIMER v4.9 SOFTWARE

WEB-O-RAMA SOFTWARE

CREATING PROFITABLE CLASSIFIED ADS

CASH FLOW REPORTER HOW TO SERIES

MAIL ORDER SERIES OF REPORTS

eBiz Tips Tricks

INTERNET DETECTIVE 5.0

TAKE THE INTERNET BY STORM

FILLOUT MANAGER

EXPRESS MAIL SERVER

EMS KEY GENERATOR

WEBFORCE

5000+ ADSUBMITTER

DOUBLE YOUR BUSINESS

SEARCH ENGINE TACTICS

TARGETED DIRECT EMAIL GUIDE

OFFSHORE REPORT

000 CLASSIFIEDS

AUCTION TIPS

Page 81: Panduan Membuat Blog Di Blogspot

167 REPORTS

UNLIMITED PROFITS

INTERNET OPTIMIZER

CYBCASH SOFTWARE

LIST MANAGER

ARACHNOPHILIA

INSIDER SECRETS

MAKE YOUR ADS PULL LIKE CRAZY

INTERNET MARKETING PORTFOLIO

EARN A FORTUNE

WEBCELERATOR

CREATE YOUR OWN INFO PRODUCTS

AD/SALES LETTER TIPS

CHECKER SOFTWARE

101 SECRETS

ONE MILLION ITEMS WHOLESALE

INTERNET TIPS REVEALED

Using TV

Legal Forms

Business Reports

Consumer Reports

Page 82: Panduan Membuat Blog Di Blogspot

Reference Reports

Well Known Books

Well Known Books

Volume 2 of the E-Business Encyclopedia Set

Volume 3 of the E-Business Encyclopedia Set

Historical Stuff

Membuat foto animasi

Lagi-lagi saya berbicara tentang animasi, memang dengan animasi bisa bikin hidup jadi hidup ( kaya iklan

aja ). Ya dalam kesempatan kali ini akan coba di bahas tentang bagaimana cara membuat animasi gambar

ataupun foto. Bagi para sobat (mulai sekarang saya akan membiasakan diri menyebut anda menjadi sobat,

biar lebih familier ya) yang sudah terbiasa menggunakan program animasi semisal MacroMedia Flash

Player ataupun teman-temannya sudah barang tentu bukan hal yang wah ataupun aneh, tapi bagi

sekelompok orang seperti saya ini, membuat animasi foto adalah suatu hal yang sangat sulit sekali.

Adakah diantara para sobat blogger yang seperti saya? jika jawabannya ada ya kita emang senasib

(hiduplah senasib), tapi jangan dulu patah semangat sobat blogger, pepatah bilang banyak jalan menuju

rhoma (irama).. dalam hal inipun sama ada jalannya yakni kita bisa menggunakan jasa situs-situs pembuat

animasi. Di internet buaanyak sekali situs pembuat animasi foto, jumlahnya ribuan atau bahkan jutaan. Nah

sebagai contoh yaitu http://www.slide.com. Untuk membuat sebuah foto animasi di slide.com, silahkan

ikuti langkah-langkah berikut :

1. Silahkan buka situs www.slide.com

2. Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut

3. Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)

Page 83: Panduan Membuat Blog Di Blogspot

4. Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan

5. Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account

sobat

6. Langkah selanjutnya adalah melakukan pembuatan animasi

7. Klik style, untuk memilih gaya dari animasi

8. klik skin, untuk memilih bingkai animasi

9. klik Size untuk memilih ukuran

10. Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan

11. klik tombol Upload untuk melakukan proses upload foto

12. Jika proses upload selesai, klik tombolSave

Page 84: Panduan Membuat Blog Di Blogspot

13. Copy kode HTML yang di berikan, lalu paste pada program notepad

14. Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser

15. Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat, nah

untuk cara memasukan kode HTML sudah sering saya bahas pada postingan terdahulu, jika lupa

silahkan klik di sini

Contoh gambar animasi :

  

Ada pula contoh animasi dari http://www.picturetrail.com :

Get Your Own!

Atau para sobat bisa juga daftar di http://www.flickr.com

Page 85: Panduan Membuat Blog Di Blogspot

Selamat mencoba !

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,

apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.

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

Page 86: Panduan Membuat Blog Di Blogspot

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 ( cape dech next..next melulu    )

9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka

email yg anda berikan

10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda

untuk login ke sitemeter.com

11. Silahkan login dengan id anda

12. Bila sudah login, Klik menu Manager

Page 87: Panduan Membuat Blog Di Blogspot

13. Klik Menu Meter Style untuk memilih gaya dari site meter anda

14. Pilih style yang anda 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. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita

Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah

berikut :

khusus blog dengan template klasik :

1. Sign in di blogger dengan id anda

Page 88: Panduan Membuat Blog Di Blogspot

2. Klik menu TEMPLATE

3. Klik Edit HTML

4. Klik Edit (yang ada pada bar menu browser anda)

5. Klik Find (on this page)... ⇒ untuk mempercepat pencarian

6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya 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 anda 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 anda

Page 89: Panduan Membuat Blog Di Blogspot

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 anda 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 anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag

& drop)

10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan

Page 90: Panduan Membuat Blog Di Blogspot

11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN

12. Selesai

Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya

pasti ketemu....      

Selamat mencoba.

IE + FireFox dalam satu komputer

Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back

sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja

sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis,

teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser

internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain.

Saat itu pekerjaan rada dikit, tentunya saya bisa sedikit bersantai ria. Iseng-iseng saya pinjem tuh kompi

nya si mba tukang akunting temen saya, mau liat technorati barangkali ada yang nge link baru ke blog saya.

setelah di buka ntuh kompi, eh saya lihat ada dua browser dalam ntuh kompi yaitu Internet Explorer plus

Mozilla FireFox. Wah nyobain ah pake FireFox, katanya sih lebih cepat dan aman di banding dengan

Internet Explorer yakni si FireFox ini lebih kebal terhadap virus-virus semacam Trojan dan teman-temannya.

Aku buka deh langsung ntuh si FireFox, hasilnya lumayan emang rada cepet sih, tapi kayanya rada - rada

ada yang beda pada tampilan gambarnya, aku hiraukan saja ga mau mikir panjang-panjang and langsung

aja ke www.technorati mau cek yang nge -link ke blog saya. Sesudah di cek, benar saja ada yang pasang

Page 91: Panduan Membuat Blog Di Blogspot

link baru tanpa memberi tahu, aku langsung aja di klik ntuh linknya, betapa kagetnya daku saat itu, lho ko

gambarnya begini acak-acakan nih blog ada gambarnya yang kepinggir, melorot dan lain sebagai, pokoknya

pemandangan yang tidak mengasikan, apa pemilik blog ini ga sadar apa, blognya ancur begitu. Setelah

kejadian yang kurang mengenakan tadi, buru-buru deh aku lihat blog ku, takutnya kaya kejadian tadi.

Hasilnya sedikit melegakan, wah untung blogku tidak berantakan, cuma ada sedikit perbedaan saja. Karena

penasaran, aku tutup tuh si FireFox dan langsung buka browser pake IE, dan aku balik lagi ke blog yang

berantakan tadi, dan ternyata hasilnya sungguh mengherankan juga, yang tadinya aku lihat di FireFox

sangat berantakan kalo di lihat pake IE sangat tersusun rapi dan menarik.

Itu tadi pengalaman pertama, pengalaman yang kedua, aku pake IE seperti biasa. yah yang namanya

blogger musti rajin-rajin blog walking biar banyak temen. ceritanya saya mampir di suatu blog, wah ini blog

berantakan banget (menurut saya lho). Trus baca-baca tuh isi blog, eh ada sedikit artikel dari sang pemilik

blog itu sendiri, sedikit penggalan isi artikel tersebut kira-kira ada kata-kata begini : Buset deh, kebiasaan

pake FireFox pas dilihatdi IE, blog ku ancur begini ya.

Menanggapi dua pengalaman tadi, saya mempunyai kesimpulan bahwa sebaiknya bagi para blogger

mempunyai banyak browser internet dalam satu komputer, ini tentunya untuk memaksimalkan hasil dari

blog kita, terutama bagi para sobat yang blognya berupa blog untuk bisnis, satu pengunjung ke blog sobat,

berati satu peluang untuk mendapatkan keuntungan. Nah jika blog para sobat tidak menarik karena sebab

tadi dari perbedaan pemakaian browser, tentunya jangankan mau membaca artikel penawaran bisnis dari

sobat baru sampaipun langsung kabur. Ingat, di luar sana ribuan orang atau bahkan jutaan orang memakai

browser yang berbeda dengan kita, maka itu tadi sobat harus mempunyai banyak browser pada komputer

sobat, minimal dua browser paling terkenal di dunia yakni Internet Explorer dan Mozilla FireFox.

Bagi para sobat pengguna template buatan bukan dari blogger sendiri, coba cek blog sobat, barangkali blog

sobat berantakan kalau di lihat di browser lain. Bagi para sobat pecinta program HTML text berjalan

<marquee>, hati-hati karena program ini tidak di mengerti oleh FireFox, jadi jika sobat menyimpan text

terlalu banyak dalam marquee, jangan-jangan blog sobat jadi melorot atau melebar kesamping karena

kelebihan quota space. Bagi yang suka pake kode <BLINK> untuk mengedipkan hurup buat narik perhatian

pengunjung, kode sobat tidak di mengerti oleh IE tapi di mengerti oleh FireFox. Tentunya dari masing-

masing Browser ada kelebihan dan kekurangannya, ya pandai-pandailah kita mensiasatinya.

Kalau di baca-baca, kayanya artikel kali ini bukan blog tutorial ya, lebih cenderung ke tips gitu. biarin aja ya,

Page 92: Panduan Membuat Blog Di Blogspot

supaya ga bosen baca tutorial terus, cari yang beda gitu. Oke, thanks ya sobat, selamat mendownload

FireFox nya.

Cara Pasang Musik Pada Blog

Mohon maaf, karena artikel ini sudah lama sekali di buat maka situs-situs yang saya contohkan banyak

yang sudah tidak aktif.

Rupanya ada salah seorang sobat kita yang tertarik memasang musik pada blog dan belum mengetahui

caranya. Oleh karena itu dalam kesempatan kali ini, saya akan coba membahas tentang bagaimana cara

memasukan musik ke dalam 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

musik 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 kekurangan nya 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

Page 93: Panduan Membuat Blog Di Blogspot

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 saya baru mengetahui satu situs saja, tolong kepada para sobat yang

mengetahui situs-situs yang masuk kategori ini untuk menginformasikan pada kotak komentar agar di

ketahui oleh para sobat lainnya. Nah 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.

Yo'i sobat, kayanya terlalu lama dengan fendefinisian ya, agak basi jadi membosankan...sorry bos. Kita

kembali ke (laptop) topik bahasan semula yakni memasang lagu pada blog. Contoh yang pertama adalah

memanfaatkan situs yang telah menyediakan berbagai lagu tanpa harus upload terlebih dahulu, saya ambil

contoh www.song2play.com. silahkan ikuti langkah-langkah berikut :

1. Silahkan kunjungi www.song2play.com

2. Masukan judul lagu yang anda 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 sobat cari, secara otomatis

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

Page 94: Panduan Membuat Blog Di Blogspot

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 sobat, maka lagu akan

langsung play. Nah jika tidak mau langsung play alias memberi kesempatan kepada pengunjung

untuk memilih sendiri apakah mau mendengarkan lagu atau tidak, sobat 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 sobat tinggal masukan kode HTML yang diberikan tadi ke dalam blog,

nah untuk memasukan kode HTML ke dalam blog sudah sering saya bahas pada postingan

terdahulu, jika sobat lupa silahkan klik di sini

Untuk contoh silahkan klik tombol play pada panel navigasi di bawah, ini sengaja saya setting tidak Auto

Start :

Song:

The Eagles - Hotel California

Page 95: Panduan Membuat Blog Di Blogspot

Sedikit tambahan, jika sobat ingin menyesuaikan lebar panel navigasi agar sesuai dengan sidebar blog

sobat, sobat 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. Nah langkah-

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

Contoh panel navigasi dari www.songhere, silahkan klik tombol play nya :

Song: White Lion - When the children cry

Tambahan lagi, untuk yang di situs www.songhere ini tidak di sediakan pasilitas untuk memilih fasilitas

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

untuk mengakalinya kita harus mengganti sendiri kode nya, silahhkan sobat 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 saya rubah adalah lagu dari white lion di

atas, yang untuk menjalankannya harus di klik dulu tombol play nya.

Nah itu tadi 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. Silahkan buka situs www.tunefeed.com

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

Page 96: Panduan Membuat Blog Di Blogspot

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 sobat miliki

6. Klik tombol upload

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

8. Tunggu sampai proses upload selesai

9. jika proses upload selesai, sobat 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 sobat

sudah berada pada halaman acount sobat

12. Klik tulisan Share This Tunefeed

Page 97: Panduan Membuat Blog Di Blogspot

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 sobat

17. Silahkan close window browser sobat

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

caranya sudah saya bahas pada tulisan di atas

19. Selesai

Contoh panelnya yaitu seperti di bawah ini, silahkan klik tombol play untuk mengaktifkan nya, tunggu

beberapa saat, loadingnya agak sedikit lama :

Page 98: Panduan Membuat Blog Di Blogspot

Untuk contoh kategori yang ketiga, sobat bisa kunjungi www.iwebmusic.com, caranya hampir mirip

dengan cara-cara diatas, disini sobat bisa pilih lagu yang di sediakan atau bisa juga meng upload lagu dari

komputer. Cuma sayang untuk yang satu ini tidak mempunyai panel kontrol buat pengunjung yang ada

hanya berupa banner biasa dan bekerja auto start sehingga saya tidak bisa memberi contoh panelnya.

Ok para sobat, saya rasa sudah cukup. Selamat mencoba ya...salam hangat buat semuanya.   

Buat Logo & Image Button

Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun

coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit,

dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat

sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan

program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan

suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.

Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur

ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma

Page 99: Panduan Membuat Blog Di Blogspot

((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah

satunya yaitu cooltext.com, 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 sobat 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 sobat 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, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi

langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk

kita simpan di PC kita

11. Selesai. Sobat sudah mempunyai sebuah logo.

Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau

melalui situs lain. Tapi saya 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 bo) dengan meng klik tombol yang

bertuliskan Join Now pada sudut kanan atas layar

3. Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)

4. Silahkan Sign In dengan Id sobat

5. Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan

pilih logo yang tadi di buat

6. Klin tombol yang bertuliskan Upload

Page 100: Panduan Membuat Blog Di Blogspot

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 sobat. tutup layar browser sobat

Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, 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/rohman24/logoblogtutorial.jpg. Disini sobat harus menambahkan

kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :

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

Maka contoh hasilnya akan seperti ini :

Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik di sini.

Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang

sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan

beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X

40px , maka kode tersebut menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg" width="100"

height="40" alt="ini contoh saja">

Page 101: Panduan Membuat Blog Di Blogspot

sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau

memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk

ukuran tinggi image, sobat 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="..." :

Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image

button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs

cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button

:

Membuat menu D'tree

Beberapa waktu yang lampau, saya 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 saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain,

Page 102: Panduan Membuat Blog Di Blogspot

sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnya

tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan

seperti ini, apabila saya 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

saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila saya

iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil

sobat 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

sobat :

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 sobat. Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode

tersebut pada hosting yang biasa sobat gunakan, misalkan saya 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 saya punyai dengan milik sobat, misal kode di

atas seperti ini :

<script type='text/javascript'

src='http://amen24.googlepages.com/Readmore.js' />

Page 103: Panduan Membuat Blog Di Blogspot

Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :

<script type='text/javascript'

src='http://juned.googlepages.com/Readmore.js' />

Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi

script tersebut.

Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat 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 saya akan mencoba

membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.

Untuk membuat menu dtree, sobat 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 sobat harus memahaminya, oleh karena alasan

tadi maka saya 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 :

Page 104: Panduan Membuat Blog Di Blogspot

<h2>Example</h2>

<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a

href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">

<!--

d = new dTree('d');

d.add(0,-1,'My example tree');

d.add(1,0,'Node 1','example01.html');

d.add(2,0,'Node 2','example01.html');

d.add(3,1,'Node 1.1','example01.html');

d.add(4,0,'Node 3','example01.html');

d.add(5,3,'Node 1.1.1','example01.html');

d.add(6,5,'Node 1.1.1.1','example01.html');

d.add(7,0,'Node 4','example01.html');

d.add(8,1,'Node 1.2','example01.html');

d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the

years','','','img/imgfolder.gif');

d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss

and Geysir');

d.add(11,9,'Mom\'s birthday','example01.html');

d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

document.write(d);

//-->

</script>

</div>

Page 105: Panduan Membuat Blog Di Blogspot

Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin tidak usah saya

terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link

milik sobat dapat di pasang pada kode-kode di atas.

Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka saya akan

mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah membuat sebuah menu

dtree buatan saya yang telah saya sertakan link-link di dalamnya : source code dari menu yang saya 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">

<!--

Page 106: Panduan Membuat Blog Di Blogspot

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-

Page 107: Panduan Membuat Blog Di Blogspot

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');

Page 108: Panduan Membuat Blog Di Blogspot

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.googlepag

es.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.googlepage

s.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

Page 109: Panduan Membuat Blog Di Blogspot

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, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :

Jika sobat 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

sobat menginginkan menu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda

kemudian di belakang koma harus di susul dengan angka nol.

Page 110: Panduan Membuat Blog Di Blogspot

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

Page 111: Panduan Membuat Blog Di Blogspot

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 saya 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 sobat 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 sobat:

Untuk template Klasik

1. Sign in di blogger

2. Klik menu Template

Page 112: Panduan Membuat Blog Di Blogspot

3. Klik menu Edit HTML

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

5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :

<link rel="StyleSheet"

href="http://amen24.googlepages.com/dtree.css" type="text/css" />

<script type="text/javascript"

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

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

<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');

Page 113: Panduan Membuat Blog Di Blogspot

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');

Page 114: Panduan Membuat Blog Di Blogspot

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

e.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

Page 115: Panduan Membuat Blog Di Blogspot

dhika','http://bangdhika.blogspot.com/','','','http://24rohman.go

oglepages.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>

Page 116: Panduan Membuat Blog Di Blogspot

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"

Page 117: Panduan Membuat Blog Di Blogspot

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 sobat)

<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');

Page 118: Panduan Membuat Blog Di Blogspot

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-

Page 119: Panduan Membuat Blog Di Blogspot

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

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

Page 120: Panduan Membuat Blog Di Blogspot

icon_user.gif');

d.add(30,2,'Bang

dhika','http://bangdhika.blogspot.com/','','','http://24rohman.go

oglepages.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>

Page 121: Panduan Membuat Blog Di Blogspot

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

Huuuuuhhh..... cape uy nulis tutorial ini, dua malem baru deh kelar..... tapi alhamdulillah, akhirnya bisa juga

di posting.

Selamat mencoba !

Tutorial HTML (2)

Melanjutkan posting yang terdahulu setelah terselang oleh beberapa artikel tentang blog tutorial maka kali

ini saya akan membahas tentang tutorial HTML kembali.Sebelum menginjak kepada topik bahasan ada

baiknya para sobat mengikuti bahasan kali ini dengan langsung memfraktekannya agar lebih cepat

mengerti. Caranya siapkan 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 :

Page 122: Panduan Membuat Blog Di Blogspot

<html>

<head>

<title>latihan</title>

<body>

Tulis apa-apa yang saya terangkan di sini !

</body>

</html>

 

Kita langsung ke topik bahasan aja ya biar ga bosan.

Elemen dasar HTML

Ada beberapa elemen dasar HTML yaitu :

Elemen Blok Level

Elemen blok level yaitu tingkatan besarnya hurup yang akan di tampilkan pada browser. Elemen blok level

yang paling sering di gunakan adalah Heading (h1 sampai h6).Tag heading ini ini berupa <h1>...</h1>

sampai dengan <h6>...</h6>.

Contoh :

<h1>Ini heading 1</h1>

<h2>Ini heading 2</h2>

Page 123: Panduan Membuat Blog Di Blogspot

<h3>Ini heading 3</h3>

<h4>Ini heading 4</h4>

<h5>Ini heading 5</h5>

<h6>Ini heading 6</h6>

Hasilnya akan seperti ini :

Ini heading 1

Ini heading 2

Ini heading 3

Ini heading 4

Ini heading 5

Ini heading 6

Sebenarnya ada cara lain untuk menampilkan berbagai ukuran hurup, yakni memakai tag <font

size="...">.....</font>.

Contoh :

<font size="1">Ini font size 1</font>

Page 124: Panduan Membuat Blog Di Blogspot

<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

Page 125: Panduan Membuat Blog Di Blogspot

Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.

Untuk kesempatan kali ini, kaya nya udah dulu sobat soalnya belum mandi nih, mo berangkat kerja       

hiii.....pantesan dari tadi ada yang bau aneh  

Nantikan seri berikutnya!

Membuat Read More (2)

Update : saya telah membuat artikel yang lebih mudah untuk di praktekan dalam membuat read more,

silahkan baca di sini!

Bagi para sobat yang menggunakan template baru tentu saja akan mengalami kebingungan ketika

membaca tutorial terdahulu yang membahas tentang membuat menu Read more.. atau menu Baca

selengkapnya.., karena tutorial tersebut memang di peruntukan bagi para sobat yang menggunakan

template klasik. Nah bagi sobat 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 sobat

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 :

Page 126: Panduan Membuat Blog Di Blogspot

<div class="fullpost">

</div>

Klik tombol yang bertuliskan Save Settings

Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung

muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu

mengingat kode tersebut.

Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :

Klik menu Dasboard

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template

Page 127: Panduan Membuat Blog Di Blogspot

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 Sobat cari kode berikut pada kode template milik sobat :

<div class='post-body'>

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

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

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

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

Page 128: Panduan Membuat Blog Di Blogspot

<b:else/>

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

Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :

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

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

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

</b:if>

klik tombol bertuliskan Save Template

Selesai.

Cara Posting Artikel

Klik menu Posting

Page 129: Panduan Membuat Blog Di Blogspot

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

<div class="fullpost">

</div>

Tulisankan artikel yang ingin tampak pada blog sebelum kode :

<div class="fullpost">

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

</div>

Klik tombol bertuliskan PUBLISH POST

Page 130: Panduan Membuat Blog Di Blogspot

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

hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali

langkah diatas

Selamat mencoba !

Tips Mengganti Background Blog

Beberapa hari yang lalu, sobat Uel menanyakan perihal bagaimana caranya untuk mengganti background

blog, dan tentunya saya akan coba membahasnya. Menurut saya, ada dua kemungkinan mengganti

background yaitu yang pertama adalah mengganti hanya warna background (latar belakang) saja, yang

kedua adalah mengganti background blog dengan menggunakan gambar atau image.

Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar belakang) yaitu

gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan kita menjadi

susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna atau image yang

terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya warna atau image

background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya akan membuat

pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya percuma saja kita

memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak menyita halaman langsung

saja pada topik utama. Karena kode template sangat bervariasi, yang akan saya jadikan contoh adalah

template asli blogger yaitu template minima.

Mengganti Warna Background

Untuk template minima klasik :

1. Sign in

Page 131: Panduan Membuat Blog Di Blogspot

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data

5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah

adalah kode yang harus di rubah) :

body {

background:#fff;

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}

Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :

body {

background:#E7E3E3;

margin:0;

padding:40px 20px;

Page 132: Panduan Membuat Blog Di Blogspot

font:x-small Georgia,Serif;

text-align:center;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}

6. Klik tombol Pratinjau untuk melihat perubahan

7. Jika sudah OK, klik tombol Simpan Perubahan Template

8. Selesai.

Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan program photoshop, kapan-

kapan akan saya posting khusus tentang bagaimana cara mengetahui kode warna.

Untuk template minima baru :

1. sign in

2. Klik menu Layout

3. Klik menu Fon dan Warna

Page 133: Panduan Membuat Blog Di Blogspot

4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg

pertama sih langsung ini, jadi tidak usah di pilih lagi)

5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya

pada gambar di sebelah bawah

6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN

7. Selesai.

Mudah bukan?

Mengganti Background Dengan Image

Hal yang pertama tentu saja sobat harus mempunyai file image. Image ini bisa berbentuk imaage biasa,

photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar,

saya anggap sobat sudah bisa melakukannya karena sudah saya bahas pada postingan terdahulu, atau

masih bingung? kalau iya, coba baca kembali di sini !

Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar, karena walaupun

ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan dalam jumlah yang sangat banyak

hingga memenuhi layar monitor, contoh saya sudah menguload sebuah gambar dengan ukuran yang kecil

saja, gambarnya seperti ini (ukuran gambar dalam ukuran aslinya) :

alamat gambarnya adalah

Page 134: Panduan Membuat Blog Di Blogspot

http://amen24.googlepages.com/pattern_096.gif

gambarnya seperti ini :

gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan

dalam jumlah yang sangat banyak.

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

1. Sign in

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data

5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di

tambahkan) :

body {

Page 135: Panduan Membuat Blog Di Blogspot

background:#fff url('http://amen24.googlepages.com/pattern_096.gif');

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}

6. Klik tombol Pratinjau untuk melihat perubahan

7. Jika sudah OK, klik tombol Simpan Perubahan Template

8. Selesai.

Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar apabila background image

yang kita pakai gagal di loading oleh komputer pengunjung blog, maka yang bekerja duluan warna

background.

Untuk template minima baru :

1. Sign in

2. Klik menu Layout

Page 136: Panduan Membuat Blog Di Blogspot

3. Klik menu Edit HTML

4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

5. Klik kotak kecil di samping tulisan Expand Template Widget

6. Tunggu beberapa saat sampai proses selesai

7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di

tambahkan) :

body {

background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

8. Klik tombol Pratinjau untuk melihat perubahan

Page 137: Panduan Membuat Blog Di Blogspot

9. Bila sudah OK, klik tombol SIMPAN TEMPLATE

10. Selesai.

Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat

contoh blog yang sudah saya pasang background dengan gambar yang saya contohkan di atas, silahkan

sobat klik di sini !

Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai gambar pattren di

sini.

Selamat mencoba !

Pasang Kalender di Blog

Sobat Guest452, itulah nama yang di kenalkan pada shoutbox. Beliau membredel shoutbox sebanyak tiga

kali berturut-turut dengan permintaan agar di postingkan cara membuat Kalender pada blog. Untuk

menghormati keinginan beliau ini, maka saya coba bahas tentang bagaimana cara pasang kalender di

dalam blog.

Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs

seperti ini sangatlah banyak, tentunya mereka berlomba dengan menampilkan kalender-kalender yang

menarik untuk di lihat. Agar tidak terlalu bingung mencarinya, saya berikan contoh satu saja yaitu

http://www.free-blog-content.com. Silahkan coba sobat kunjungi situs tersebut ! kalender yang di

sediakan sangat beragam. Silahkan klik kategori yang ada untuk memilih bentuk kalender yang sobat sukai,

kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad untuk nanti

keperluan di simpan di blog.

Page 138: Panduan Membuat Blog Di Blogspot

salah satu contoh gambar yang di sediakan seperti ini :

Untuk cara instalasi, silahkan ikuti langkah-langkah berikut !

Untuk Template klasik

1. Sig in di blogger dengan id sobat

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk

berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai

data untuk mengembalikannya ke semula

5. Copy kode yang tadi telah ada di notepad lalu paste pada tempat yang di inginkan, mau di sidebar

atau di manapun boleh

6. Klik tombol Simpan Perubahan Template

Page 139: Panduan Membuat Blog Di Blogspot

7. Selesai.

Untuk Template baru

1. Sign in di blogger dengan id sobat

2. Klik menu layout

3. Klik menu Elemen Halaman

4. Klik tulisan Tambahkan sebuah elemen halaman

5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

6. Copy kode yang tadi telah ada di notepad lalu paste pada kolom yang di sediakan

7. Klik tombol SIMPAN PERUBAHAN

8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN

Page 140: Panduan Membuat Blog Di Blogspot

9. Selesai.

Khusus bagi sobat yang muslim dan ingin kalendernya dalam bentuk kalender Hijriah, ada sumbangan

hasil karya yang bisa sobat pakai. Kalender ini di dapat dari http://mfr.jentayu.com. Bentuk kalendernya

seperti ini :

Free @ Hijriah

Bentuknya sangat menarik bukan? Jika sobat ingin memasang kalender ini, sobat tinggal menyinpan kode

berikut pada template sobat :

<script src="http://hijriah.jentayu.com/hijriah.php"> </script>

 

Untuk langkah-langkahnya sama persis seperti diatas, akan tetapi tentu yang di masukan adalah kode ini.

Atau bagi sobat yang memakai template baru, biar gampang silahkan klik saja tombol di bawah ini! nanti

akan secara otomatis kalendernya akan di masukan ke blog sobat. tapi ya musti sign in dulu yah :

Page 141: Panduan Membuat Blog Di Blogspot

Ada lagi yang lebih menarik, bukan hanya berfungsi sebagai kalender, akan tetapi berfungsi sebagai arsip. Pengunjung dapat dengan mudah membuka arsip postingan-postingan kita yang terdahulu melalui kalender tersebut. Apabila tertarik coba deh kunjungi blog nya mas anang di http://anangku.blogspot.com. Silahkan

baca triknya di sana, soalnya sudah kecapean nih ngetiknya, jadi tidak saya tuliskan sendiri.

Selamat mempercantik blognya dengan kalender.

Make a Magazine Style Drop Caps

Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan

Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika

saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa

indonesia, semoga dengan datangnya hari bahagia ini bangsa kita menjadi bangsa yang lebih dewasa, lebih

maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya

serius).

Saya rasa cukup deh ngomong seriusnya ya, soalnya kalau terus-terusan serius otak ku menjadi beku, jari-

jari ku menjadi kaku, lidah ku menjadi kelu, mulutku menjadi bisu, asa ku menjadi layu (keterusan deh).

Oke.... sobat, kita kembali ke.... blog tutorial tentunya. Sebelum mulai, saya mau ngadain kuiz dulu, tolong

jawab yang jujur ya, Apakah sobat pernah membaca koran atau surat kabar? jawabannya pasti sudah

pernah. benarkan? yeeeehh jawabannya ketebak deh , lalu apa hubungannya dengan tutorial blog?

ceritanya seperti ini, di dalam tulisan sebuah koran, hampir menjadi suatu kewajiban bahwa hurup awal dari

sebuah artikel di cetak lebih besar di banding dengan tulisan lainnya. Nah bagi sobat yang mempunyai

keinginan untuk membuat tulisan yang bergaya seperti tulisan dalam koran, maka teruslah membaca

sampai akhir postingan.

Untuk membuat huruf awal di cetak lebih besar, maka sobat perlu membubuhkan kode css ke dalam style

sheet nya. Karena template blogger masih terbagi dua yaitu klasik dan baru, maka untuk cara penempatan

kode pun ada sedikit berbeda. Untuk itu silahkan ikuti langkah-langkah berikut ini !

Untuk Template Klasik

1. Sigin di blogger

Tanggal Hijriah <script languag <data:content/ Tambah Kalender

Page 142: Panduan Membuat Blog Di Blogspot

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode template, lalu paste pada notepad kemudian save. Ini untuk berjaga-jaga

apabila terjadi kesalahan melakukan editting

5. Copy paste kode berikut di antara kode <style type='text/css'> dan kode </style> dan kalau sobat

merasa bingung, maka tempatkan saja di atas kode </style>

 

/* kode untuk hurup awal

----------------------------------------------- */

.awal {

float:left;

color: #000000;

background:#ffffff;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}

6. Klik tombol Simpan Perubahan Template

Page 143: Panduan Membuat Blog Di Blogspot

7. Selesai

Untuk Template Baru

1. Sign in di blogger

2. Klik menu Layout

3. Klik menu Edit HTML

4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi

kesalahan dalam mengedit kode template

5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode

]]></b:skin> , atau jika bingung simpan saja persis di atas kode

]]></b:skin>

 

/* kode untuk hurup awal

----------------------------------------------- */

.awal {

Page 144: Panduan Membuat Blog Di Blogspot

float:left;

color: #000000;

background:#ffffff;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}

6. Klik Tombol Simpan Template

7. Selesai.

Langkah-langkah di atas merupakan langkah pertama, langkah selanjutnya yang harus sobat lakukan

adalah ketika melakukan posting harus pada posisi Edit HTML bukan pada Compose, nah simpanlah huruf

awal artikel pada kode berikut <span class="awal">hurup awal </span>. Setelah itu terserah sobat, mau

tetap pada posisi Edit HTML atau berpindah ke mode Compose tidak ada masalah. Contoh penulisan

artikelnya seperti ini :

<span class="awal">S</span>ebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari

ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak

bangsa tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat

semua selaku bagian dari bangsa indonesia, semoga dengan datangnya hari ini bangsa kita menjadi

bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih

baik. (tumben ngomongnya serius).

Maka hasilnya nanti akan seperti ini :

Page 145: Panduan Membuat Blog Di Blogspot

Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan

Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika

saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa

indonesia, semoga dengan datangnya hari ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju,

lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).

Bagaimana sobat, menarik bukan? bukan. ah ko gitu sih Agar sobat menjadi lebih faham tentang kode-

kode diatas tadi, maka akan saya bahas.

/* kode untuk hurup awal

----------------------------------------------- */

.awal {

float:left;

color: #000000;

background:#ffffff;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}

.awal    --> ini adalah penamaan saja, mau di ubah jadi begin, start, atau apa saja boleh, cuma jangan lupa

untuk membubuhkan tanda titik (dot) di awal tulisan.

float:left;    --> ini adalah kode agar tulisan awal di letakan pada posisi kiri alias mepet ke kiri, jangan di ubah

kalau yang ini.

color: #000000;    --> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika

sobat ingin warna yang lain maka silahkan saja di ganti.

Page 146: Panduan Membuat Blog Di Blogspot

background:#ffffff;    --> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih,

jika sobat ingin warna yang lain silahkan di ganti sesuai keinginan.

line-height:80px;    --> ini adalah kode untuk jarak baris, sebaiknya jangan di ganti.

padding-top:1px;    --> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya, sebaiknya

jangan di ganti.

padding-right:5px;    --> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya

sebesar 5 pixel, jika sobat berniat mengganti jaraknya, silahkan ganti nilainya saja.

font-family:times;    --> ini adalah kode jenis hurup, yang di pakai adalah jenis times, jika tidak suka dengan

times bisa di ganti dengan yang lain, mau Georgia, Verdana, sans-serif atau yang lainnya silahkan saja.

font-size:100px;    --> ini adalah kode untuk besarnya hurup, jika mau di ganti silahkan ganti nilainya saja.

Sudah jelaskah? nah jika sobat ingin berkreasi dengan yang namanya warna tapi tidak mengetahui

kodenya, jangan khawatir, kawan saya bang iwan sangat kreatif, yakni menuliskan kode warna sekalian

bentuk warnanya pada bagian footer blog beliau, jika sobat minat silahkan kunjungi blog beliau di

http://free-7.blogspot.com

satu lagi yang terakhir yaitu apabila sobat ingin melihat blog yang memakai sistem ini dengan warna lain,

silahkan sobat klik di sini !

Selamat berkreasi !

Who LInk To My Blog

S iapa yang memasang link ke blog saya ? pertanyaan ini sering terlontar dari para blogger baru yang

masih bingung bagaimana cara mengetahui ada yang pasang link milik blog mereka. Yupssss..... untuk

mengetahui siapakah yang pasang link milik kita, caranya sangatlah mudah yaitu sobat hanya tinggal

mendaftarkan blog nya di http://www.technorati.com. Dengan menjadi anggota situs mereka maka nanti

Page 147: Panduan Membuat Blog Di Blogspot

sobat akan mengetahui siapa saja kah yang pernah memasang link ke blog nya, caranya yaitu sobat hanya

tinggal menuliskan nama situs/blog ke dalam mesin pencari milik mereka. Sebagai contoh, silahkan sobat

kunjungi sebentar situs http://www.technorati.com, jika telah berada di situs tersebut silahkan tuliskan

URL blog saya ini yaitu http://kolom-tutorial.blogspot.com kemudian klik tombol Search maka secara

otomatis akan di perlihatkan berapa situs/blog yang pasang link ke blog ini. Tertarik? harus donk, dan saya

sarankan kepada sobat semua untuk mendaftarkan blognya di technorati.

Bagi sobat yang masih bingung tentang cara-cara mendaftar ke http://www.technorati.com, silahkan ikuti

langkah-langkah berikut ini :

1. Silahkan kunjungi http://www.technorati.com.

2. Klik tombol Join yang berada di sebelah kanan atas.

3. Isi beberapa form isian yang ada

o Member name --> Isi dengan nama yang sobat inginkan. Contoh : Rohman .

o Email Address --> Isi dengan alamat email sobat. Contoh : [email protected].

o Choose password --> isi dengan password yang sobat inginkan. Contoh : jayakatwang.

o Confirm password --> Isi kembali dengan pasword yang tadi di tuliskan. Contoh :

jayakatwang.

4. Beri tanda centang/ceklis pada kotak kecil di amping tulisan I agree to Tecnorati's Privacy Policy

and Terms of Service

5. Klik tombol Join

6. Setelah berada di halaman account sobat, coba alihkan perhatian ke layar sebelah kiri bawah

7. Klik tulisan Claim your blog

8. Tuliskan alamat blog sobat. Contoh : http://kolom-tutorial.blogspot.com

9. Klik tombol Begin claim, tunggu beberapa saat

Page 148: Panduan Membuat Blog Di Blogspot

10. Setelah muncul pilihan Quick Claim dan Post Claim, klik link Use Qick Claim

11. Isi Form Blogger Username dengan username blogger milik sobat

12. Isi Form Blogger Password dengan password blogger milik sobat

13. Klik tombol Quick Claim Now

14. Setelah ada ucapan Congratulations!, langkah selanjutnya adalah mengisi Edit Blog Settings

o Isi form Description dengan deskripsi blog sobat. Contoh : panduan praktis membuat

blog di blogger.com

o Pilih bahasa utama yang di pakai pada piliham language

o Isi Tags dengan keyword yang berhubungan dengan blog sobat. Contoh : Tutorial,

blogger, blog tutorial, dan lain-lain.

o Copy kode Favourite Buttons yang ingin di pasang di blog sobat.

15. Klik tombol Save Blog Info.

16. Selesai.

Langkah-langkah diatas hanya untuk daftar saja, untuk fungsi yang lainnya silahkan sobat cari sendiri di

dalam account sobat.

Nah sekarang jika sobat sudah daftar technorati, apabila ingin mengetahui siapa saja yang sudah pasang

link ke blog milik sobat cek saja di sana. Dan sebagai tambahan bagi blogger baru jangan merasa heran

apabila blog miliknya tiba-tiba saya kunjungi padahal alamat blognya belum di publikasikan, jawabnya satu

yaitu sobat pernah coba-coba buat link ke blog ini dan tercatat di technorati. mau coba buktikan, silahkan

klik link banner di bawah ini, sobat akan melihat blog mana saja yang memasang link ke blog ini :