disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan
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.
mendaptar adalah melalui situs blogger.com namun nama domain yang akan anda dapatkan adalah sub
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.
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
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
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).
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,
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.
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.
melakukan beberapa Setting atau pengaturan. Sebagai bahan inspirasi bagaimana cara melakukan setting
blog di blogger, berikut Kolom Tutorial tuliskan cara pengaturan blog di blogger (pastikan anda (pastikan
* 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.
• 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
• 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
• 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
Publikasikan
Ini adalah fasilitas untuk mengubah nama domain anda di blogger dengan nama domain milik anda sendiri.
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.
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
• Zona Waktu : Sesuikan dengan zona waktu dimana tempat anda berada.
• 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
• 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.
Komentar
Beberapa pengaturan dalam menu Komentar :
• 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
• 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
• 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.
• 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
• 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,
Feed Situs
Beberapa pengaturan dalam menu Feed Situs :
• 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
• Akhiri Pengaturan menu Feed Situs dengan klik tombol SIMPAN SETELAN.
Namun, anda pun bisa posting artikel melalui email ataupun perangkat seluler anda.
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
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 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
Simpan email sebagai entri konsep, maka email yang dikirimkan tidak akan langsung di publikasikan,
Namun, apabila anda tidak ingin mempublikasikan melalui email, pilih opsi Dinonaktifkan. Fungsi ini banyak
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
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,
Untuk pembahasan Cara Pengaturan Blog Di blogger sepertinya sudah cukup, apa opini anda tentang ini?
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).,
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 :
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
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
Nah, untuk anda yang ingin lebih sukses dalam berbisnis online sebaiknya dari sejak dini bisa menghindari
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.
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
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.
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
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
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.
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
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
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
* Klik pada domain yang ingin anda setting untuk custom domain.
* 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
* Masih dalam tab menu DNS, klik tombol Manage DNS, akan muncul halaman baru, kemudian klik tab
* Isi Host Name dengan www , lalu isi Value dengan ghs.google.com , untuk TTL biarkan saja. Akhiri
* Untuk Host Name biarkan kosong, isi Destination IPv4 Address dengan 216.239.32.21 , untuk TTL
* 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.
didepannya. formatnya adalah www.domainanda. Contoh www.indodesigner.net. Isilah verifikasi kata yang
* 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.
http://www.indodesigner.net
Selamat mencoba dan semoga blog anda semakin tampil lebih professional.
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
2. Klik Rancangan.
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.
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
3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
5. Klik Rancangan.
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.
10. Selesai.
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.
--> Untuk membuat artikel menjadi rata kiri dan rata kanan
Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit,
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,
2. Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).
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
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
• 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;}
</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
• 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.
• Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak
<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.
Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu
• 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
Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog
<div class="fullpost">
dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang
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
Read more!
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.
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
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 :
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.
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 :
Sebagai contoh :
Top of Form
<scriptlanguage="JavaScript"> functionclickIE()
{if (document.all) {returnfalse;}}function
clickNS(e) {if
(document.layers(document.getElementById& &!
document.all)){if (e.w hich==2e.w hich==3){
returnfalse; }}}if (document.layers) {
document.captureEvents(Event.M OUSEDOW N);
document.onmousedow n=clickNS; }else{
document.onmouseup=clickNS;
document.oncontextmenu=clickIE;}
document.oncontextmenu=newFunction("return
false") </script>
Bottom of Form
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
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
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.
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
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
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
bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita
sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana
kalau dua dan tiga tahun lagi? Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu
seperti di bawah ini:
- Archives -
Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan
berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah di klik, akan muncul nama
Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru.
2. Klik Template
3. Di bagian sidebar blog Anda bagian archives, ada kode html sbb:
&<BloggerArchives>
<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>
</BloggerArchives>
<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
5. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
6. Selesai.
Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :
2. klik LAYOUT
3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive
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
<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu><option value=0 selected>tulisan disini yang akan
muncul duluan</OPTION>
<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>
<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-
blog.html">Membuat Blog</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-
blog.html">setting Blog</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-
template.html">Memilih Template</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-
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>
Bottom of Form
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 :
2. Klik Posts
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
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
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
lebih mudah) atau bisa juga ditulis di kertas. Kemudian klik publish. Untuk memasukan foto kedalam Profile
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.
(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,
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
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
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
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 :
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 :
<a href="http://www.resepbisnis.com/?id=rohman"
target="new">klik di sini</a>
<a href="http://www.resepbisnis.com/?id=rohman"
target="_blank">klik di sini</a>
4. Klik Edit
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
<a href="http://kolom-tutorial.blogspot.com"
target="_blank">Blog Tutorial</a>
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
Untuk anda pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :
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
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
anda tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang anda buat,
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.
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
Apabila anda mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka caranya
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
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>
<a href="http://kolom-tutorial.blogspot.com"
target="_blank"><img src="http://i162.photobucket.com
/albums/t253/rohman24/animasichicklet.gif"></a>
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
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 :
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.
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
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen
</MARQUEE>
hasilnya :
ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .
</MARQUEE>
</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.
</marquee>
hasilnya :
</marquee>
hasilnya :
Membuat Refresh
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
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
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
Selamat mencoba.
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
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 :
Nah agar lebih paham akan saya beri contoh, misalkan dalam postingan anda berisi kata-kata seperti ini :
</meta>
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 :
<br/><br/> <code>
<br/>
</meta>
</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
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 :
<br/><br/>
</meta></textarea></p>
</ meta>
oupss... saya lupa kawan, untuk memposting seperti yang saya jelaskan dia atas, anda harus pada posisi
Ok udahan ah intermezonya..jadi garing kalo lama-lama. langsung aja tadi pas buka email, ada seorang
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
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
satu kode <br/> berarti satu line break ke bawah, jadi kalau jarak yang di inginkan jauh ke bawah kita tinggal
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.
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.
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
Mudah-mudahan bermanfaat.
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,
:)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>
;;)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
<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"
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>
<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>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif"
width=18 height=18 border=0>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif"
width=31 height=18 border=0>
<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>
**==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
<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"
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>
Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-
Ingin pintar dalam bahasa HTML, silahkan download ebook nya di sini
Blogger Emoticons
<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif">
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 :
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
6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk
indonesia bagian barat pilih GMT +7:00
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
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.
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
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
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
2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda
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
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
9. Selesai
Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.
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
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
6. Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau
9. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
11. Selesai
Selamat mencoba !
Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :
1. http://oggix.com
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..
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
Baiklah sobat, kita kembali ke (laptop) bahasan utama artikel ini yaitu mengenai 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).
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 :
di samping TAG yang mempunyai pasangan, ada juga tag yang tidak memerlukan pasangan, misal TAG
Sebuah Tag tidaklah sensitif terhadap Case (hurup besar atau kecil), jadi mau di tulis hurup besar ataupun
huruf kecil akan menghasilkan fungsi yang sama. Sebagai contoh : fungsi Tag <b>....</b> akan sama
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
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
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
BODY
Semua dokumen HTML yang di simpan di dalam BODY semisal teks, image, link, dan lain sebagainya akan
Ok sahabat, mungkin pengenalan pertama mengenai HTML di cukupkan sekian dulu dan akan di teruskan
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
buat dalam format yang mudah untuk di ikuti. untuk mendownload silahkan klik disini atau klik :
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
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
Merupakan kumpulan banner cantik untuk mempromosikan website anda. Untuk mendownload silahkan
Program untuk membuat meta tags, sehingga mempermudah pencarian website atau blog anda di search
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 Pencetak Uang Otomatis siap pakai dengan konsep affiliasi. Anda tinggal mengganti teks dan
Script Web Pencetak Uang Otomatis siap pakai dengan konsep reseller. Anda tinggal mengganti teks dan
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
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
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
Berisi tips-tips berharga bagaimana membangun sebuah website yang baik. Patut dimiliki untuk mendukung
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
menggunakan rangkaian produk orang lain untuk menciptakan produk anda ? Informasi penting bagi anda
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
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
Dengan menggunakan software ini, anda dapat membuat popups window dari website anda. Anda dapat
memanfaatkannya untuk meningkatkan rasio penjualan dan pendaftar mailing list anda.
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
Intraday Basic
Bambang Hariyadi membeberkan 2 strategi andalannya dalam membaca "CandleStick" yang terbukti
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
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.
E-book ini berisi petunjuk mengenai prinsip dasar dan cara sederhana untuk memulai bisnis on-line anda !
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 !
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
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.
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.
Website4Sale Secrets
Auction Prophet
eZine Assistant
Priority Mailer
eBook Gold v3
TRAFFIC VIRUS
TYPEITIN SOFTWARE
WEB-O-RAMA SOFTWARE
FILLOUT MANAGER
EXPRESS MAIL SERVER
WEBFORCE
5000+ ADSUBMITTER
OFFSHORE REPORT
000 CLASSIFIEDS
AUCTION TIPS
167 REPORTS
UNLIMITED PROFITS
INTERNET OPTIMIZER
CYBCASH SOFTWARE
LIST MANAGER
ARACHNOPHILIA
INSIDER SECRETS
EARN A FORTUNE
WEBCELERATOR
CREATE YOUR OWN INFO PRODUCTS
CHECKER SOFTWARE
101 SECRETS
Using TV
Legal Forms
Business Reports
Consumer Reports
Reference Reports
Historical Stuff
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
2. Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut
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
10. Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan
11. klik tombol Upload untuk melakukan proses upload foto
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
Selamat mencoba !
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
5. Isi semua tabel yang ada lalu klik tombol Next lagi
6. Isi lagi tabel yang ada, lalu klik tombol Next lagi
9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka
10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda
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
17. copy semua kode HTML yang di berikan lalu paste pada Notepad
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 :
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
6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau
9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di
10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan
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.
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
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
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-
Kalau di baca-baca, kayanya artikel kali ini bukan blog tutorial ya, lebih cenderung ke tips gitu. biarin aja ya,
supaya ga bosen baca tutorial terus, cari yang beda gitu. Oke, thanks ya sobat, selamat mendownload
FireFox nya.
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
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
Untuk situs kedua, keuntungannya yaitu kita bisa memasukan lagu yang kita sukai tanpa harus tergantung
dari situs tersebut jadi apapun lagunya pasti bisa yang penting ya kita harus mempunyai file lagu yang harus
di upload. kekurangannya yaitu karena kita harus upload lagu ke situs tersebut maka dalam proses upload
biasanya memerlukan waktu yang cukup lumayan lama, sehingga sedikit membosankan ketika melakukan
proses upload juga tentunya biaya berinternet kita jadi semakin bengkak.
Untuk situs ketiga, untuk saat ini 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
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
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
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
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
Untuk contoh silahkan klik tombol play pada panel navigasi di bawah, ini sengaja saya setting tidak Auto
Start :
Song:
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
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 :
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
2. Klik kotak di sebelah tulisan widget Color, pilih warna panel navigasi yang sobat sukai
3. Klik tombol yang ada tulisan Click here to share your music
4. Klik tombol yang bertuliskan Add Music or Photos
7. Sambil menunggu proses upload, sobat isi data-data diri sobat pada kolom yang di sediakan
9. jika proses upload selesai, sobat akan di minta untuk mngecek email di berikan tadi
11. Klik link ntuk melakukan aktivasi keanggotaan, nah dengan mengklik link tadi otomatis sobat
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
19. Selesai
Contoh panelnya yaitu seperti di bawah ini, silahkan klik tombol play untuk mengaktifkan nya, tunggu
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.
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
((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah
4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
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
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
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.
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)
5. Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan
pilih logo yang tadi di buat
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 :
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
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
Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat
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
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
Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain,
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
<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
<script type='text/javascript'
src='http://amen24.googlepages.com/Readmore.js' />
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
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 :
<h2>Example</h2>
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
document.write(d);
//-->
</script>
</div>
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
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 :
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-
unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-classic.html');
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif'
,'http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.
gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gi
f');
d.add(30,2,'Bang
dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepa
ges.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_us
er.gif');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif
');
document.write(d);
//-->
</script>
</div>
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
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
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,'','','','','');
isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1
isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan
tetapi ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.
isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image
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
1. Sign in di blogger
4. Copy seluruh kode HTML yang ada, lalu save untuk back up
6. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik
sobat):
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-
unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-classic.html');
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/glo
be.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/icon_u
ser.gif');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/ico
n_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.g
ooglepages.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_u
ser.gif');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/icon_u
ser.gif');
document.write(d);
//-->
</script>
</div>
8. Selesai.
1. Sign in di blogger
<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>
10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-
unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-
unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-
unik.blogspot.com/2007/07/scribe-3-column-classic.html');
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/glo
be.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/icon_u
ser.gif');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/ico
n_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.g
ooglepages.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_u
ser.gif');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/icon_u
ser.gif');
document.write(d);
//-->
</script>
</div>
12. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag &
drop)
Huuuuuhhh..... cape uy nulis tutorial ini, dua malem baru deh kelar..... tapi alhamdulillah, akhirnya bisa juga
di posting.
Selamat mencoba !
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 :
<html>
<head>
<title>latihan</title>
<body>
</body>
</html>
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>
Contoh :
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 :
Untuk kesempatan kali ini, kaya nya udah dulu sobat soalnya belum mandi nih, mo berangkat kerja
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
• Klik Setting
• Klik Formatting
• Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt area
<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
Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :
• 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
• 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
<div class='post-body'>
• Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<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>
• Selesai.
• Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :
<div class="fullpost">
</div>
• Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
</div>
• 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 !
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
1. Sign in
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
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;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
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.
1. sign in
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
7. Selesai.
Mudah bukan?
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
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
gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan
1. Sign in
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 {
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;
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.
1. Sign in
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
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-size/* */:/**/small;
font-size: /**/small;
text-align: center;
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 !
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
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
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
5. Copy kode yang tadi telah ada di notepad lalu paste pada tempat yang di inginkan, mau di
7. Selesai.
6. Copy kode yang tadi telah ada di notepad lalu paste pada kolom yang di sediakan
8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN
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 :
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 :
Top of Form
Bottom of Form
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.
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
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 !
1. Sigin di blogger
4. Copy seluruh kode template, lalu paste pada notepad kemudian save. Ini untuk berjaga-jaga
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>
7. Selesai
1. Sign in di blogger
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>
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
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
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-
float:left; --> ini adalah kode agar tulisan awal di letakan pada posisi kiri alias mepet ke kiri, jangan di ubah
color: #000000; --> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika
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,
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
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
Bagi sobat yang masih bingung tentang cara-cara mendaftar ke http://www.technorati.com, silahkan ikuti
○ Member name --> Isi dengan nama yang sobat inginkan. Contoh : Rohman .
○ Email Address --> Isi dengan alamat email sobat. Contoh : kolom@yahoo.com.
○ Choose password --> isi dengan password yang sobat inginkan. Contoh : jayakatwang.
○ 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
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
14. Setelah ada ucapan Congratulations!, langkah selanjutnya adalah mengisi Edit Blog Settings
○ Isi form Description dengan deskripsi blog sobat. Contoh : panduan praktis membuat
blog di blogger.com
○ Isi Tags dengan keyword yang berhubungan dengan blog sobat. Contoh : Tutorial,
16. Selesai.
Langkah-langkah diatas hanya untuk daftar saja, untuk fungsi yang lainnya silahkan sobat cari sendiri di
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 :
748
Selamat mencoba !