Upload
fizz-zah
View
423
Download
7
Embed Size (px)
Citation preview
Panduan membuat Blog di Blogspot
1. Apa itu Blog ?
Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum
disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan
diikuti oleh yang lama.
Awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari
sebuah blog sangat bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan lain sebagainya.
Secara umum, blog tidak ada bedanya dengan situs yang ada di internet.
Flatform blog atau seringkali disebut juga dengan mesin blog dibuat sedemikian rupa oleh para designer
blog agar mudah untuk digunakan. Dulu, untuk membuat aplikasi web diperlukan pengetahuan tentang
pemrograman HTML, PHP, CSS dan lain sebagainya, dengan blog semuanya menjadi mudah semudah
menyebut angka 1 2 3.
2. Cara membuat blog di blogspot
Salah satu penyedia blog gratis yang cukup populer saat ini adalah blogspot atau blogger, dimana ketika
mendaptar adalah melalui situs blogger.com namun nama domain yang akan anda dapatkan adalah sub
domain dari blogspot, contoh : contohsaja.blogspot.com
Kenapa harus membuat blog di blogger.com bukan pada situs penyedia blog lainnya? Sebenarnya tidak
ada keharusan untuk membuat blog di blogger, namun ada banyak kelebihan yang dimiliki blogger di
banding dengan penyedia blog lain. Beberapa contoh kelebihan blogspot di banding yang lain yaitu mudah
dalam pengoperasian sehingga cocok untuk pemula, lebih leluasa dalam mengganti serta mengedit
template sehingga tampilan blog anda akan lebih fresh karena hasil kreasi sendiri, custom domain atau
anda dapat mengubah nama blog anda dengan nama domain sendiri misalkan contohsaja.blogspot.com di
ubah menjadi contohsaja.com,sedangkan hosting tetap menggunakan blogspot dan masih tetap gratis.
Perlu ditekankan dari awal bahwa internet itu sifatnya sangat dinamis, sehingga mungkin saja dalam
beberapa waktu kedepan panduan membuat blog di blogspot ini akan sedikit berbeda dengan apa yang
anda lihat di blogger.com
Untuk mengurangi hal yang tidak perlu di tulis, berikut cara membuat blogger di blogger.com
Membuat Email
Salah satu syarat yang harus dipenuhi dalam membuat blog adalah anda memiliki alamat email yang masih
aktif atau di gunakan. Jika anda belum mempunyai alamat email, silahkan daftar terlebih dahulu di gmail
karena blogger adalah salah satu layanan dari Google maka ketika mendaftar ke blogger sebaiknya
gunakan email gmail. Jika anda belum paham bagaimana cara membuat email, silahkan gunakan mesin
pencari google untuk mencari panduannya.
Daftar Blog di blogger
1. Silahkan kunjungi situs http://www.blogger.com
2. Setelah halaman pendaftaran terbuka, alihkan perhatian ke sebelah kanan atas, ubah bahasa ke
Indonesia agar lebih mudah difahami. Silahkan langsung login dengan menggunakan username
serta password gmail anda ( akun email anda bisa untuk login ke blogger).
3. Klik tombol bertuliskan CIPTAKAN BLOG ANDA.
4. Isilah nama judul blog serta alamat blog yang di inginkan. Ingat! dalam membuat alamat blog harus
benar-benar serius karena itu permanen tidak dapat digantikan lagi (kecuali nanti ganti dengan
custom domain). Jika alamat yang diinginkan ternyata tidak bisa digunakan, masukkan kembali
alamat lain yang masih tersedia. Jika alamat blog yang diinginkan masih tersedia, silahkan klik
anak panah bertuliskan LANJUTKAN.
5. Silahkan pilih template yang anda sukai ( template ini nanti bisa diubah lagi kapan saja anda mau),
kemudian klik LANJUTKAN.
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.
Cara Setting Blog Di blogger
Hal pertama yang penting anda lakukan agar blog anda di blogger mempunyai performa yang baik adalah
melakukan beberapa Setting atau pengaturan. Sebagai bahan inspirasi bagaimana cara melakukan setting
blog di blogger, berikut Kolom Tutorial tuliskan cara pengaturan blog di blogger (pastikan anda (pastikan
anda memilih bahasa indonesia agar sesuai dengan tutorial dibawah) :
* Silahkan login ke blogger dengan ID anda.
* Klik Pengaturan.
* Akan terlihat tab-tab menu berisi hal-hal yang harus anda atur :
Dasar
Beberapa pengaturan dalam menu Dasar:
Alat Blog : Impor blog → ini adalah faslitas untuk mengimpor data dari komputer anda ( ini
biasanya dilakukan ketika transfer blog) tidak usah di klik, biarkan saja. Ekspor blog > ini adalah
fasilitas untuk mengekspor data blog dari server blogger ke komputer anda. Fasilitas ini disebut
juga sebagai fasilitas Backup blog. Disarankan agar anda membuat backup data ke komputer
anda, minimal satu minggu sekali. Data backup tersebut sewaktu-waktu bisa bermanfaat ketika
anda ingin mentransfer ke blog lain di blogger, atau bisa juga untuk migrasi ke mesin blog yang
lain seperti Wordpress. Hapus blog > Fasilitas untuk menghapus blog anda. Jika anda tidak
berniat untuk menghapus blog, maka jangan sekali-sekali klik link ini.
Judul : isi dengan judul blog yang anda inginkan. Contoh : My personal blog
Uraian : isi dengan deskripsi blog yang ingin ditampilkan, sebaiknya ini diisi jangan dikosongkan.
Contoh : catatan kecil hidupku yang unik.
Tambahkan blog Anda ke daftar kami? : disarankan untuk memilih opsi Ya.
Biarkan mesin pencari menemukan blog Anda? : Pilih Ya, agar blog anda dapat di index oleh
mesin pencari seperti Google, Yahoo atau Bing.
Tampilkan Editing Cepat di Blog Anda? : Boleh pilih Ya atau Tidak.
Tampilkan Link Posting Email? : Ini berupa icon email, jika anda menginginkan agar pengunjung
blog dengan mudah mengirimkan email ke teman mereka tentang blog anda, maka Pilih Ya.
Namun jika tidak, silahkan pilih Tidak.
Konten Dewasa? : Jika blog anda nantinya akan berisi hal-hal yang besifat dewasa seperti
menampilkan artikel, gambar, atau video wanita seksi, dll maka pilih Ya. Namun, jika blog anda
berisi hal-hal yang aman diakses oleh anak kecil, pilih Tidak. Sebagai catatan, jika anda memilih
opsi Ya, maka nantinya ketika diakses blog anda akan ada peringatan bahwa berisi konten
dewasa.
Pilih editor entri : Ini adalah pilihan untuk post editor. Editor yang diperbarui → ini adalah post
editor terbaru yang dimiliki oleh blogger, banyak fasilitas baru yang terintegrasi dalam post editor
ini seperti tombol More untuk memotong artikel di blog anda. Editor lama → ini adalah post editor
lama yang dimiliki blogger namun masih bisa anda gunakan, ada beberapa toolbar terdapat
dalam post editor lama, namun tidak disediakan lagi di post editor baru, jadi silahkan pilih mana
yang anda mau. Sembunyikan mode penyusunan → pilihan ini khusus bagi anda yang sudah
mahir dengan kode HTML, jika anda tidak menguasai tentang HTML, jangan gunakan post editor
ini.
Aktifkan transliterasi? : Pilih Aktifkan jika post editor anda ingin mendukung ke translasi Hindi,
Kannada, Malayalam, Tamil, atau Telugu. Pilih Nonaktifkan jika post editor anda tidak ingin ada
translasi bahasa tersebut.
Akhiri pengaturan menu Basic dengan klik tombol SIMPAN SETELAN.
Publikasikan
Ini adalah fasilitas untuk mengubah nama domain anda di blogger dengan nama domain milik anda sendiri.
Misal : http://namabloganda.blogspot.com menjadi http://namabloganda.com.
Untuk sementara waktu jangan lakukan apa-apa pada menu publikasikan ini. Tutorial tentang custom
domain di blogger bisa anda baca pada artikel Cara Custom Domain di Blogger.
Format
Beberapa pengaturan dalam menu Format :
Tampilkan sebanyak mungkin : tulis jumlah post yang ingin tampil di halaman depan blog anda.
Contoh : 5. Untuk pilihan dropdown disarankan untuk memilih opsi posting, jangan hari.
Format Header Tanggal : Pilih format tampilan tanggal yang anda sukai.
Format Tanggal Index Arsip : pilih format tampilan arsip yang anda inginkan.
Format Timestamp : Pilih format tampilan jam yang anda sukai. Jam disini adalah catatan waktu
ketika artikel anda di publikasikan di blog.
Zona Waktu : Sesuikan dengan zona waktu dimana tempat anda berada.
Bahasa : Pilih bahasa yang dipakai untuk blog anda.
Konversi ganti baris : ini adalah fasilitas line break secara otomatis ketika anda klik enter ketika
membuat sebuah posting. Fasilitas ini di pakai apabila anda kedepannya tidak akan memposting
tentang kode-kode semisal HTML dan lain sebagainya. Pilih Tidak, jika anda berniat nantinya
akan memasukkan kode-kode HTML kedalam posting posting anda, misal jika konten blog anda
berisi tutorial bahasa HTML, PHP dan lain sebagainya.
Tampilkan Field Judul : Pilih Ya ataupun Tidak juga tidak ada masalah.
Tampilkan kolom Link : Pilih Tidak atau Ya juga tidak ada masalah.
Aktifkan perataan float : Pilih Ya, ini adalah agar gambar bisa diatur posisinya dalam postingan.
Namun jika pilihan ini mengganggu tampilan blog anda nantinya, pilih saja Tidak.
Templat Entri : ini adalah fasilitas agar isi dari Templat Entri ini akan selalu muncul pada saat
membuat posting. Biasanya fasilitas ini sering di gunakan untuk signature blog, yaitu tulisan atau
kode signature disimpan dalam Templat Entri, sehingga ketika anda membuat posting, kode
signature tersebut akan secara otomatis muncul tanpa harus menuliskannya secara berulang-
ulang.
Akhiri Pengaturan menu Format dengan klik tombol SIMPAN SETELAN
Komentar
Beberapa pengaturan dalam menu Komentar :
Komentar: Pilih Tampilkan, jika anda menginginkan agar postingan ada bisa di komentari oleh
pengunjung. Pilih Sembunyikan, jika artikel yang anda posting tidak ingin di komentari oleh
pengunjung.
Siapa yang Bisa Berkomentar ? : Siapa pun - termasuk Pengguna Anonim → untuk pilihan ini,
maka siapa saja dapat berkomentar, termasuk Pengguna Anonim atau tanpa identitas jelas.
Pengguna Terdaftar - termasuk OpenID → hanya user yang teregistrasi saja yang bisa
berkomentar terhadap artikel anda, yang termasuk Pengguna Terdaftar adalah mereka yang
mempunya akun di Google, Live Journal, Wordpress, Type pad, AIM, serta OpenID. Pengguna
dengan Google Account → Yang bisa berkomentar hanyalah mereka yang mempunyai akun
google. Hanya anggota blog ini → Hanya anggota dari blog anda saja yang bisa berkomentar, ini
biasanya dipakai jika blog anda adalah untuk komunitas tertentu, misal komunitas pendidikan.
Penempatan Formulir Komentar : Halaman penuh → halaman blog anda akan di timpa oleh
kotak komentar ketika ada pengunjung klik link komentar. Jendela munculan → Kotak komentar
akan muncul dalam jendela baru apabila ada pengunjung yang klik link komentar. Disemat di
bawah entri → kotak komentar akan langsung ditampilkan langsung dibawah artikel posting
anda, sehingga pengunjung dapat langsung memeberikan komentar tanpa harus klik link
komentar. Format kotak komentar yang paling banyak disukai oleh blogger adalah Disemat di
bawah entri.
Default Komentar untuk Entri : pilih Entri baru memiliki komentar jika artikel post anda ingin ada
kotak komentarnya, namun sewaktu-waktu anda bisa saja mematikan fungsi ini ketika melakukan
posting. Pilih Entri baru tidak memiliki komentar jika artikel post anda tidak ingin mempunyai kotak
komentar, namun sewaktu-waktu anda bisa saja memunculkan fungsi ini ketika melakukan
posting.
Tautbalik : Pilih Tampilkan jika anda ingin menampilkan link ke website yang membuat link ke
artikel yang anda buat. Pilih Sembunyikan jika anda tidak ingin menampilkan link ke website yang
membuat link ke artikel yang anda buat.
Bawaan Tautbalik untuk Posting : pilih Entri baru memiliki Tautbalik jika setiap artikel yang di
posting memiliki Backlinks. Pilih Entri baru tidak memiliki Tautbalik jika setiap artikel yang di
posting tidak ingin memiliki Backlinks.
Format Timestamp Komentar : pilih format tampilan tanggal komentar yang anda sukai.
Pesan Formulir Komentar : Tulis pesan yang ingin muncul diatas kotak komentar. Misal :
Silahkan anda berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar
spam.
Moderasi komentar : Pilih Selalu jika setiap komentar yang masuk ingin di moderasi terlebih
dahulu oleh anda. Pilih Hanya pada entri yang lebih lawas dari jika komentar ingin di moderasi
terlebih dahulu terhadapat posting yang umurnya telah anda tentukan. Pilih Tidak pernah, jika
komentar yang masuk tidak ingin di moderasi terlebih dahulu dan akan langsung muncul diblog
anda. Jangan lupa untuk memasukkan alamat email anda, apabila ketika ada orang yang
berkomentar anda akan mengetahuinya melalui email. Atau kosongkan saja apabila anda tidak
ingin menerima email pemberitahuan tentang komentar.
Tampilkan verifikasi kata untuk komentar? : Pilih Ya jika ingin menampilkan huruf verifikasi
ketika ada yang berkomentar, pilihan ini adalah untuk mencegah terhadap script robot spam yang
bisa membombardir blog anda dengan komentar, walaupun begitu pilihan ini mempunyai
kekurangan yaitu pengunjung blog anda biasanya malas untuk berkomentar karena merasa ribet
ketika berkomentar. Pilih Ya jika tidak ingin menampilkan huruf verifikasi, pilihan ini sedikit rentan
terhadap script robot spam, namun biasanya pengunjung akan lebih suka berkomentar karena
mudah dilakukan.
Tampilkan gambar profil dalam komentar? : Pilih Ya jika dalam kometar ingin ditampilkan
gambar profile yang berkomentar. Pilih Tidak jika tidak ingin menampilkan gambar profile pemberi
komentar.
Email Pemberitahuan Komentar : Masukkan alamat email yang ingin dikirim notifikasi apabila
ada yang berkomentar. Jumlah maksimal email yang dapat menerima adalah 10 email.
Akhiri pengaturan menu Komentar dengan klik tombol SIMPAN SETELAN.
Arsipkan
Beberapa pengaturan dalam menu Arsipkan :
Frekuensi Arsip : pilih arsip yang ingin di tampilkan apakah Arsip tidak ada, Harian,Mingguan,
atau Tiap Bulan. Disarankan untuk memilih Tiap Bulan.
Aktifkan Halaman Posting? : Silahkan pilih Ya atau Tidak.
Akhiri pengaturan menu Arsipkan dengan klik tombol SIMPAN SETELAN.
Feed Situs
Beberapa pengaturan dalam menu Feed Situs :
Izinkan Feed Blog : Silahkan pilih Tak satupun, Singkat, atau Penuh. Disarankan untuk memilih
opsi Penuh.
Posting URL Pengubahan Arah Feed : isi dengan alamat feed milik anda, ini adalah jika anda
telah melakukan burner feed seperti misalnya dengan feedburner. Namun jika belum punya,
silahkan dikosongkan saja terlebih dahulu. Untuk pembahasan feed burner akan di posting pada
posting selanjutnya.
Post Feed Footer : Isi dengan kode yang ingin tampil pada footer post feed. Jika belum mengerti
dikosongkan saja terlebih dahulu.
Akhiri Pengaturan menu Feed Situs dengan klik tombol SIMPAN SETELAN.
Email & Seluler
Untuk memposting sebuah artikel kedalam blog anda, tidak hanya melalui post editor yang ada di blogger.
Namun, anda pun bisa posting artikel melalui email ataupun perangkat seluler anda.
Beberapa pengaturan dalam menu Email & Seluler :
Alamat BlogSend : tulis alamat email yang ingin dikirim notifikasi apabila anda mempublikasikan sebuah
artikel. Maksimal jumlah yang bisa di kirim adalah sampai 10 buah email, format penulisan email di pisahkan
dengan tanda koma ( , ).
Alamat Pengeposan via Email : buatlah alamat email blogger untuk mengirimkan posting dari email atau
perangkat seluler dengan cara menuliskan pada kotak yang tersedia. Misalkan alamat email anda adalah
[email protected] maka anda bisa membuat email blogger menjadi [email protected]
atau [email protected] atau apa saja menurut anda yang bagus. Tapi ingat, rahasiakan alamat
email ini agar orang lain tidak bisa posting ke blog anda
Untuk mengaktifkan fitur ini, anda harus memilih opsi Publikasikan segera email, artinya apabila anda
mengirimkan email ke alamat diatas, isinya akan langsung diposting ke blog. Jika opsi yang dipilih adalah
Simpan email sebagai entri konsep, maka email yang dikirimkan tidak akan langsung di publikasikan,
melainkan akan masuk ke post konsep.
Namun, apabila anda tidak ingin mempublikasikan melalui email, pilih opsi Dinonaktifkan. Fungsi ini banyak
juga dipilih dengan alasan keamanan.
Jangan lupa akhiri pengaturan menu Email & Seluler dengan klik tombol SIMPAN SETELAN.
OpenID
Disini tidak ada yang harus di atur, melainkan pemberitahuan bahwa alamat blog anda bisa digunakan
sebagai alamat OpenID. Apa itu OpenID? Mungkin lain kali akan dibahas.
Izin
Pada menu ini anda dapat menambahkan penulis dengan cara di undang ke email yang anda anggap layak
untuk ikut serta menjadi penulis di blog anda.
Pada Siapa yang bisa melihat blog ini? Anda dapat memilih siapa saja yang dapat mengakses blog anda.
Opsi Siapapun berarti blog anda terbuka untuk umum atau bisa dibuka oleh siapa saja. Hanya Orang-orang
yang saya pilih yaitu hanya orang-orang yang di undang oleh anda yang dapat mengakses blog anda
dengan cara login terlebih dahulu. Hanya penulis blog berarti hanya penulis saja yang bisa mengakses isi
halaman blog anda, Opsi Hanya penulis blog terkadang di gunakan juga pada saat mengganti template,
agar blog anda tidak terlihat semrawut ketika mengganti template.
Untuk pembahasan Cara Pengaturan Blog Di blogger sepertinya sudah cukup, apa opini anda tentang ini?
Cara Custom Domain di Blogger
Karena banyak permintaan yang masuk ke kang Rohman tentang bagaimana cara custom domain di
blogger atau blogspot, maka pada posting kali ini kang Rohman mencoba untuk menuliskannya. Apa itu
custom domain di blogger? yang di maksud custom domain di blogger disini adalah mengganti alamat blog
yang di blogger atau blogspot dengan nama domain milik sendiri atau dengan Top Level Domain (TLD).,
misal http:/kolom-tutorial.blogspot.com diganti alamatnya menjadi http://www.kangrohman.com atau dengan
http://rohman.info atau dengan alamat yang lainnya.
Mengganti alamat sub domain blogger atau blogspot dengan Top Level Domain (TLD) tentu saja
mempunyai kelebihan serta kekurangan dibanding dengan tetap memakai sub domain blogspot, berikut
beberapa kelebihan custom domain blogger yang mungkin bisa anda pertimbangkan :
Tampil Lebih Professional
Memakai nama domain sendiri biasanya akan dianggap lebih professional dibandingkan dengan memakai
sub domain blogger. Anggapan seperti ini sangat diperlukan apabila blog anda adalah merupakan sebuah
blog bisnis terlebih lagi untuk toko online atau blog untuk menjual barang atau jasa, ini akan mempengaruhi
tingkat kepercayaan dari para pelanggan atau customer.
Nama domain seringkali diperhatikan oleh para pengunjung, apabila blog anda konten nya berisi tentang
tips berbisnis yang bisa mendatang uang dengan mudah, kadangkala pengunjung akan sedikit meragukan
akan apa yang ditulis. Kadangkala ada ungkapan rasa keraguan seperti ini :
Ngomongnya aja bisa dapet ratusan ampe ribuan dollar setiap bulannya, nama domain yang cuma 80 ribu
rupiah tidak kebeli, bener ngga tuh apa yang ditulis?
Nah, untuk anda yang ingin lebih sukses dalam berbisnis online sebaiknya dari sejak dini bisa menghindari
rasa keraguan para pembacanya.
Tingkat Kepercayaan Tinggi
Ini masih erat hubungannya dengan yang ditulis diatas. Blog dengan nama domain sendiri akan lebih
mendapatkan kepercayaan dibanding dengan blog yang masih memakai sub domain blogspot. Terlebih jika
anda biasa bermain di bisnis jualan link atau paid review, top level domain akan lebih mudah mendapatkan
job dibanding sub domain blogger walaupun memiliki page rank yang sama. Ini memang tidak mutlak,
namun merupakan salah satu faktor yang menunjang dalam keberhasilan bermain bisnis sale links.
Hosting Gratis Dari Blogger
Salah satu kendala yang dirasa berat untuk blog yang sudah mempunyai jumlah kunjungan yang banyak
adalah hosting, semakin banyak pengunjung maka biaya hosting yang harus dikeluarkan semakin besar.
Dengan Custom domain diblogger anda tidak perlu memikirkan biaya hosting karena blogger
memberikannya secara gratis.
Perlu diketahui bahwa apabila anda mengganti sub domain blogger dengan domain yang anda miliki, anda
tetap berhubungan dengan blogger, segala sesuatunya akan tetap seperti sebelumnya. Mesin blog yang
anda pakai tetap menggunakan mesin blogger, untuk mengatur anda tetap harus login ke blogger dsb.
Relatif Lebih Aman
Masih ingat dengan postingkan Kang Rohman tentang kasus penghapusan blog oleh blogger. Jika suatu
saat kasus tersebut menimpa anda, tidak usah terlalu risau dan itu bukan akhir dari segalanya, yang harus
diingat adalah buatlah selalu backup data blog anda secara berkala. Langkah selanjutnya adalah membuat
blog baru di blogger, lalu upload backup data yang telah dimiliki dan blog baru tersebut akan sama persis isi
postingnya seperti blog yang dihapus, dan anda tinggal mengarahkan blog tersebut dengan domain anda
sebelumnya. Semua akan kembali normal, anda tidak akan kehilangan pengunjung setia anda karena nama
domainnya tetap sama.
Langkah yang lain adalah menghilangkan ketergantungan dari blogger dengan cara membeli hosting
sendiri, lalu memakai mesin blog yang lain yang anda sukai dan tinggal di migrasi saja dari blogger ke
mesin blog baru anda.
Diatas adalah beberapa keuntungan custom domain di blogger, tentunya masih banyak lagi keuntungan
yang lainnya, namun untuk sedikit membatasi agar posting ini tidak terlalu panjang maka hanya itu saja
yang ditulis.
Namun, kang Rohman menyarankan bahwa custom domain ini untuk blog baru saja dan tidak untuk yang
telah lama, alasannya? untuk yang custom domain, blog anda akan menjadi sebuah blog baru lagi. segala
sesuatu seperti jumlah Subscriber, backlinks, Page Rank serta lain sebagainya akan menjadi baru semua.
Namun, jika anda tidak mempermasalahkan hal tersebut.tentu tidak ada masalah.
Apa yang diperlukan untuk melakukan custom domain? yang diperlukan hanyalah nama domain serta
layanan DNS. Untuk beberapa penjual domain, layanan DNS disediakan secara gratis sehingga anda tidak
perlu mengeluarkan biaya tambahan atau menggunakan layanan free DNS pihak ketiga sehingga anda
tidak terlalu repot.
Berapa harga domain? harga domain sangat bervariasi tergantung dari kejelian anda dalam memilih domain
provider, namun sebagai gambaran saja bahwa harga domain berkisar antara Rp.70.000 hingga
Rp.100.000 untuk masa kontrak selama satu tahun, atau dengan kata lain dengan modal sekitar 70rb
sampai 100rb anda akan memiliki blog yang lebih profesional dalam satu tahun kedepan dan tentunya anda
bisa memperpanjang untuk tahun berikutnya.
Perlu anda ingat bahwa anda bisa membeli domain dimana saja, namun agar lebih mudah dalam menulis
tutorial ini, sebagai contoh kang Rohman menggunakan domain dari rumah web.
Untuk sedikit mempersingkat postingan ini, maka berikut cara-cara custom domain :
* Jika anda telah mempunyai domain, silahkan login ke kontrol panel domain anda, tentunya dengan
username serta password yang telah di berikan.
* Sorot menu Domains kemudian pilih List All Orders.
* Klik pada domain yang ingin anda setting untuk custom domain.
* Klik tab menu DNS, lalu klik tombol Active DNS
* Klik tombol Auto-update nameservers
* Akan ada keterangan bahwa nameserver yang baru bisa aktif dalam waktu 24-72 jam.
Nameserver Modifications completed successfully. You will need to allow a 24-72 hour propagation time for
the DNS service to begin working.
* Masih dalam tab menu DNS, klik tombol Manage DNS, akan muncul halaman baru, kemudian klik tab
menu CNAME Records, lalu klik tombol Add CNAME Record
* Isi Host Name dengan www , lalu isi Value dengan ghs.google.com , untuk TTL biarkan saja. Akhiri
dengan klik tombol Add Record.
* Setelah proses selesai, klik tab A Records. kemudian klik tombol Add A Record
* Untuk Host Name biarkan kosong, isi Destination IPv4 Address dengan 216.239.32.21 , untuk TTL
biarkan apa adanya. Kemudian klik tombol Add Record
* Lakukan langkah Add A record sebanyak 3 kali lagi, namun IP yang di masukkan adalah nomor
216.239.34.21 , 216.239.36.21 , 216.239.38.21 . Sehingga nanti akan ada 4 records yang dihasilkan
* Langkah penambahan IP diatas dimaksudkan agar blog anda tidak mengalami error apabila diakses tanpa
www.
* Untuk setting CNAME pada domain telah selesai, langkah selanjutnya adalah setting pada blog anda yang
di blogger.
Berikut cara setting blog anda yang di blogger
* Silahkan login ke blogger dengan ID anda
* Klik Pengaturan untuk yang mau di custom domain
* Klik tab Publikasikan
* Klik Domain Ubahsesuaian
* Klik Beralihlah ke pengaturan lanjut
* Isilah Domain Anda dengan nama domain yang tadi disetting DNS nya, jangan lupa sertakan www
didepannya. formatnya adalah www.domainanda. Contoh www.indodesigner.net. Isilah verifikasi kata yang
ada dan akhiri dengan klik tombol SIMPAN SETELAN.
* Selesai.
Proses Custom domain blogger telah selesai, namun biasanya memerlukan waktu agar blog anda bisa
diakses menggunakan domain baru. Proses ini biasanya memakai waktu paling lama 24 jam, namun
banyak yang hanya dua atau tiga jam telah selesai, dan blog anda bisa diakses dengan domain anda.
Sebagai contoh langkah-langkah diatas, kang Rohman menggunakan nama domain
http://www.indodesigner.net
Selamat mencoba dan semoga blog anda semakin tampil lebih professional.
Cara Mengganti Template di blogspot
Sekilas tentang template blog, Template website atau blog adalah desain-desain halaman web ataupun
blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file
dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang anda lihat saat
ini, bahwa terlihat tatanan gambar serta tulisan di layar monitor anda, itulah yang dinamakan template.
Di blogger atau blogspot, anda dapat dapat mengganti template blog anda secara leluasa sesuai dengan
selera dan keinginan masing-masing. Jika anda telah mahir membuat template sendiri, anda dapat
menggunakan template tersebut untuk blog anda. Namun, jika anda masih awam dalam membuat template,
blogger atau blogspot sendiri telah menyediakan beberapa template yang bisa anda pilih sesuai dengan
keinginan. Selain itu, anda dapat pula mengunduh atau mendownload template blogger gratis dari penyedia
template blogger, salah satu contoh website yang menyediakan template blogger tersebut adalah beralamat
di http://blogtemplate4u.com, disana terdapat ratusan template blogger yang bisa anda gunakan secara
gratis. namun, jika anda menggunakan template gratis, syarat yang harus ditaati adalah tidak boleh
menghapus atau menghilangkan credit link dari pembuat template tersebut. Dengan tidak membuang link
credit pembuat template, itu adalah sebagai apresiasi atas kerja keras mereka dalam menyediakan template
secara gratis.
Langsung ke topik utama, Cara mengganti template di blogspot atau blogger ada dua cara, yaitu mengganti
template dengan template yang disediakan blogspot, atau mengganti template dengan template yang
didapat dari penyedia template. kita. Berikut ulasannya :
Mengganti Template dengan Template yang disediakan blogger
Berikut cara-cara untuk mengganti template dengan template yang telah disediakan blogger:
1. Silahkan login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Klik menu Perancang Template. Selanjutnya akan muncul jendela perancang template blogger.
4. Klik pada pilihan template yang tersedia (saat tartikel ini ditulis template yang terdia berjumlah 6
template). Selain itu, anda dapat pula memilih background atau gambar latar belakang dari
template tersebut. Jika sudah cocok dengan salah satu template, klik APPLY TO BLOG.
5. Selesai.
Mengganti Template dengan template dari penyedia template
Berikut cara-cara untuk mengganti template dengan template dari penyedia template :
1. Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis.
Salah satu contoh anda bisa download di blogger templates.
2. File template yang didownload, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh
karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor
seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa
mengekstraknya secara online di Wobzip.
3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
4. Silahkan login ke blogger dengan ID anda.
5. Klik Rancangan.
6. Klik menu Edit HTML.
7. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template
Lengkap.
8. Klik tombol Browse.., pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml
saja ). Kemudian klik tombol Unggah.
9. Apabila ada muncul peringatan tentang widget, klik pada tombol PERTAHANKAN WIDGET.
10. Selesai.
Cara Memposting Artikel
Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka
kali ini akan di bahas tentang tata cara posting di blogger.com. Di dalam menu posting ada beberapa toolbar
yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel
tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada
salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.
Toolbar yang ada ketika posting :
--> Untuk merubah jenis hurup yang di gunakan
--> Untuk merubah ukuran hurup (heading)
--> Untuk Menebalkan hurup
--> Untuk memiringkan hurup
--> Untuk merubah warna hurup
--> Untuk membuat link
--> Untuk membuat artikel menjadi rata kiri
--> Untuk membuat tulisan menjadi di tengah
--> Untuk membuat artikel menjadi rata kanan
--> Untuk membuat artikel menjadi rata kiri dan rata kanan
--> Untuk membuat sub bahasan oleh angka
--> Untuk membuat sub bahasan oleh bullet
--> Untuk mengecek spelling
--> Untuk memasukan gambar(upload gambar)
--> Untuk membuat artikel dalam kode HTML
--> Untuk membuat artikel dalam mode Compose (biasa)
--> Untuk me review (melihat) artikel
Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit,
kemudian tekan tombol toolbar yang di inginkan.
Langkah-langkah dalam memposting suatu artikel:
1. Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”, sering terjadi hang
pada komputer (pengalaman saya pribadi). Copy artikel yang telah anda buat sebelumnya,
kemudian paste di area posting. Edit sesuai dengan kemauan anda.
2. Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).
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
ingin membuat menu ini.
Oke... kelamaan ngawurnya, mending langsung saja. Untuk membuat menu Read more kita harus
menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali ini, saya
khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan
tunggu pada postingan yang akan datang.
Silahkan ikuti langkah-langkah berikut :
Login ke blogger.com dengan id sobat
Klik menu bertuliskan Template
Klik menu Edit HTML
jangan lupa Copy seluruh kode template milik sobat lalu paste pada notepad dan kemudian
simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam template
setelah kita otak-atik, kita masih punya cadangan data untuk mengembalikannya.
Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :
<MainOrArchivePage>
div.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
div.fullpost {display:inline;}
</ItemPage>
Untuk mempercepat pencarian kode </style>, silahkan sobat klik menu Edit yang ada pada
bar menu browser, kemudian klik Find (on this page)..., lalu tulis </style> trus klik tombol
find next, maka secara otomatis akan di bawa ke kode tersebut.
langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody$>
:
<MainOrArchivePage><br/>
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>
Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan sobat klik menu
Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis
<$BlogItemBody$> trus klik tombol find next, maka secara otomatis akan di bawa ke kode
tersebut.
Klik tombol yang bertuliskan SAVE SETTINGS
Langkah selanjutnya adalah klik menu Setting
Klik menu Formatting
Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak kosong
tersebut dengan kode di bawah ini :
<div class="fullpost">
</div>
Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika kita
mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis dahulu,
tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.
kemudian jangan lupa klik tombol Save Settings
Selesai
Cara Posting Artikel
Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu
artikel agar ada menu Readmore nya.
Klik menu Posting
klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan tadi,
yakni :
<div class="fullpost">
</div>
simpan artikel sobat yang ingin di tampilkan sebelum kode <div class="fullpost">,
kemudian simpan sisa keseluruhan artikel setelah kode <div class="fullpost"> dan
sebelum kode </div>
Agar lebih jelas, saya beri contoh, misal artikelnya begini :
Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog
kita, sedangkan tulisan yang lainnya tidak akan muncul.
<div class="fullpost">
dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang
bertuliskan Read more.
</div>
Hasilnya yang akan tampak pada blog kita adalah seperti ini :
Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog
kita, sedangkan tulisan yang lainnya tidak akan muncul.
Read more!
Bagaimana sobat, sudah jelaskan. bila belum jelas silahkan di tanyakan kembali pada komentar.
Sedikit clue, kata Read more! sebenarnya bisa kita ganti sesuai dengan keinginan kita, misalkan kita
rubah menjadi Baca selengkapnya..., Selengkapnya.., Lanjutannya... atau apa saja yang penting kata
tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita ada kelanjutannya.
Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti semua kode
div menjadi Span. Hasilnya akan sama, cuma bagi para sobat yang suka posting pada menu compose,
kode ini sering ada masalah di karenakan bertabrakan dengan perintah lain yang memakai kode Span.
Akhirul kata selamat mencoba !
Membuat Text Area
Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda
ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi
text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita
katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk
area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar
bisa di copy oleh para pengunjung.
Untuk membuat text area, silahkan anda Copy kode di bawah ini :
<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text
ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda
akan tampil di dalam text area </textarea></p>
Sebagai contoh :
Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi
maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.
Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan
ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.
Text Area dengan memakai HighLight
Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan
adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text
ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi,
maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja.
Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat
banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk
membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :
<div><form name="copy"><div align="center"><input
onclick="javascript:this.form.txt.focus();this.form.txt.select();"
type="button" value="Highlight All"> </div><div align="center"></div><p
align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt"
rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka
tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para
pengunjung</textarea></p></div></form>
Sebagai contoh :
<a href="http:/ / kolom- tuto
Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah
elemen kode untuk membuat text area.
Elemen tombol highlight All :
1. <div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi
jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika
ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika
tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di
blok), jadi anda jangan merubah tulisan ini.
3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika
anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.
Element text area :
<script language="JavaScript"> function clickIE() { if (document.all) { return false; } } function clickNS(e) { if (document.layers(document.getElementById&&!document.all)) { if (e.which==2e.which==3) { return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS; } else{ document.onmouseup=clickNS; document.oncontextmenu=clickIE; } document.oncontextmenu=new Function("return false") </ script>
1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin
text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti
dengan kata right.
2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut
sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area,
anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar
144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda
inginkan. Misal : HEIGHT:160px.
Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para
pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung.
bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD>
selamat mencoba
Membuat Menu Dropdown
Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki
bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar. Masalahnya, kalau kita
sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Bagaimana
kalau dua dan tiga tahun lagi? Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu
seperti di bawah ini:
Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan
berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah di klik, akan muncul nama
bulan arsip-arsip kita.
- Archives -
Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru.
Untuk template klasik langkahnya yaitu :
1. Login ke blogger.com dg id Anda
2. Klik Template
3. Di bagian sidebar blog Anda bagian archives, ada kode html sbb:
&<BloggerArchives>
<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>
</BloggerArchives>
4. Nah, ganti kode di atas dg kode html di bawah ini:
<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
5. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
6. Selesai.
Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :
1. login dulu, tentunya dengan id anda
2. klik LAYOUT
3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive
4. Klik Edit pada kotak Blog Archive tadi
5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown
Menu dengan cara memberi tanda tik/cek
6. Klik Save Changes
7. Selesai
Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip,
Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh
untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog
tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :
<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"s
ize=1 name=menu><option value=0 selected>tulisan disini yang akan muncul
duluan</OPTION>
<option value="isi dengan addres yang ingin di tuju">tulisan di sini
yang akan muncul</option> </select></form>
Sebagai contoh untuk menu Dropdown milik saya :
<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"s
ize=1 name=menu>
<option>- Blog Tutorial -</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-
blog.html">Membuat Blog</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-
blog.html">setting Blog</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/memilih-
template.html">Memilih Template</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-
hurup-dan-warna.html">warna & hurup</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/cara-
memposting-artikel.html">Posting Artikel</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-read-
more-1.html">Read more (1)</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/membuat-text-
area.html">Text area</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/blogger-
emoticons.html">Blogger Emoticons</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/yahoo-
messenger-emoticons.html">Yahoo!Emoticons</option>
<option value="http://kolom-tutorial.blogspot.com/2007/04/download-
gratis.html">Download Gratis</option>
</select></form> Hasilnya akan seperti ini :
Mudah bukan? Selamat mencoba !
- Blog Tutorial -
Ingin pintar dalam bahasa HTML silahkan download ebook nya di sini .Ingin pintar membuat Website sendiri, klik di sini.
Upload Gambar dan Foto Profile
Agar posting artikel pada blog lebih menarik untuk dilihat, maka sebaiknya kita menyisipkan gambar di
antara poting-an kita tersebut, di samping untuk lebih memperjelas apa yang kita sampaikan. Misalkan kita
sedang menerangkan sesuatu, maka dengan adanya gambar akan lebih memperjelas maksud dari topik
yang sedang kita jelaskan kepada para pembaca artikel kita. Bagi anda-anda yang masih bingung
bagaimana caranya untuk memasukan gambar atau istilah resminya yaitu upload gambar, maka akan saya
ulas langkah-langkahnya :
1. Login seperti biasa dengan id anda
2. Klik Posts
3. Klik New Post (bila sebelumnya anda telah mempunyai posting-an)
4. Klik toolbar yang bergambar seperti ini
5. Beri tanda tik/cek pada radio button pada pilihan Choose a layout, bila anda menginginkan posisi
gambar bisa di tempatkan di mana saja, pilih pada radio button None, bila posisi gambar di
sebelah kiri pilih left, bila ingin di tengah pilih Center, bila ingin di kanan pilih Right.
Beri tanda tik/cek pada Image size, bila ingin gambar yang di upload hasilnya kecil pilih Small,
bila ingin sedang pilih Medium, bila ingin besar pilih Large
6. Beri tanda ceklis di samping tulisan Use this layout every time bila anda menginginkan setiap
upload gambar settingnya seperti semula
7. Tekan tombol Browse, lalu masukan gambar dari komputer anda yang ingin di upload.
8. Klik Add another image bila gambar yang ingin di upload lebih dari satu gambar
9. Klik tombol UPLOAD IMAGE, tunggu beberapa saat sampai proses upload selesai
10. Klik Tombol Done untuk mengakhiri proses upload
Setelah proses upload anda selesai, untuk melihat gambar tadi, klik tombol Compose. Nah disini anda bisa
melihat gambar yang anda upload tadi sekaligus dapat mengatur kembali ukuran dari gambar ini, caranya
yaitu klik gambar tersebut sampai gambar anak panah mouse anda berubah menjadi gambar panah empat
penjuru. Arahkan mouse pada garis samping gambar sampai gambar mouse berubah menjadi panah dua
arah, tekan tombol mouse lalu tahan dan gerakan kearah kiri atau kanan untuk merubah lebar gambar, bila
susah sesuai dengan yang anda inginkan lepas tombol yang anda tahan tadi. Untuk mengatur tinggi
gambar, arahkan mouse pada tepi bawah atau atas gambar sampai gambar mouse berubah menjadi anak
gambar panah dua arah, tekan mouse lalu tahan kemudian gerakan mouse keatas atau kebawah untuk
mengatur tinggi gambar, lepaskan mouse bila ukuran gambar sudah sesuai dengan yang anda inginkan.
Nah sekarang bagaimana cara memasukan foto untuk mengisi Profile kita?, caranya sama seperti langkah-
langkah di atas, cuma ada sedikit perbedaan yaitu kamu harus menghapus beberapa kode tersebut. Jika
foto kamu sudah selesai di upload (langkahnya sama seperti di atas). Tekanlah menu Edit HTML untuk
melihat kode HTML dari Foto anda tadi, copy / paste kode HTML tersebut kedalam program notepad (agar
lebih mudah) atau bisa juga ditulis di kertas. Kemudian klik publish. Untuk memasukan foto kedalam Profile
kita, silahkan ikuti langkah berikut:
1. Setelah upload gambar, klik menu Dasboard
2. Klik menu Edit Profile
3. Di dalam form - form isian profile ada tulisan Photo URL, nah disini paste kode HTML yang telah
anda copy tadi ke dalam notepad tapi jangan semuanya, yaitu yang di paste adalah kode setelah
tulisan [src="] yaitu link yang di mulai dengan [http://] dan berakhir dengan [.jpg] atau [.jpeg]
4. Klik Save Profile, maka foto anda yang cantik dan ganteng sudah terpampang di blognya dan bisa
dilihat oleh seluruh dunia
5. Selesai
Sebenarnya ada cara lain untuk mengisi foto Profile kita, yaitu dengan cara meng-upload (memasukkan)
foto kita pada hosting lain, dan baru kemudian link URL foto yang kita dapat dari hosting tersebut di
copy/paste ke profile yang ada di blogger/blogspot. Saya ambil contoh, biasanya saya menyimpan foto-foto
saya di http://photobucket.com. jika anda mau silahkan daftarkan diri anda (gratis ko), apabila sudah selesai
daftar dan bisa login, silahkan upload photo anda. Setelah proses upload foto selesai, maka secara otomatis
foto tersebut akan di beri PHOTO URL, copy alamat link URL foto tersebut lalu paste di Profile Blogger.com
pada kolom Photo URL setelah itu tinggal SAVE CHANGES dan REPUBLISH. Selesai, selamat mencoba.
Membuat Link (1)
Dalam dunia blog, tentu anda tidak asing lagi dengan yang namanya link. Apabila anda seorang blogger
(tukang ngeblog kata orang jakarta mah), tentu saja membuat link adalah sebuah keharusan. Berbeda
dengan website pada umumnya, di jagat per blog-an ada yang namanya link exchange atau bertukar link
dengan blog lain, jadi kalau anda tidak bisa membuat link, ini dapat berakibat anda akan di asingkan alias di
cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik membuat link ini,
saya akan mengulasnya dalam beberapa sub bagian yakni :
Link pada posting-an
Jika anda membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link, misalkan
artikel tersebut bercerita tentang bisnis yang anda ikuti pada sebuah website di internet, lalu anda ingin
mengajak para pembaca artikel tersebut untuk mengunjungi website yang anda ceritakan. Misalkan dalam
artikel tersebut ada kata –kata seperti Jika anda tertarik silahkan anda klik disini, nah untuk membuat link
dari kata-kata tersebut silahkan ikuti langkah-langkah berikut :
1. Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.
2. Klik ikon yang bergambar seperti ini yang berada pada toolbar, maka setelah itu akan
muncul tulisan http:// pada window baru yang berbentuk seperti gambar di bawah ini :
3. Isi kotak yang ada tulisan tersebut dengan alamat situs yang anda inginkan, misalkan :
http://www.resepbisnis.com/?id=rohman
4. Klik OK. Selesai
Link dengan window baru
Mungkin anda punya pikiran, kalau anda membuat sebuah link trus pembaca mengkliknya, anda kwawatir
kalau pengunjung blog kita akan meninggalkan blog kita. Untuk meminimalisir hal tersebut, bisa dilakukan
dengan cara membuat window baru, jadi ketika pengunjung mengklik salah satu link yang kita buat,
halaman blog kita tidak akan tertimpa dengan halaman baru tapi yang terjadi adalah halaman blog anda
tetap ada dan halaman yang baru di klik akan muncul terpisah. Sebagai contoh, silahkan anda klik tulisan
Resep Bisnis atau Obral plus pada banner header diatas. Ketika anda mengkliknya, akan tercipta window
baru. Untuk membuat link seperti ini dapat di lakukan dengan cara :
1. Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu
yang ada pada toolbar.
2. Pada tulisan yang kita link tadi akan muncul kode seperti ini ( contoh tulisan klik disini di link ke
http://www.resepbisnis.com/?id=rohman :
<a href="http://www.resepbisnis.com/?id=rohman">klik disini</a>
maka disini anda harus menambahkan embel-embel kode HTML target="new' ataupun
target="_blank" pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di modifikasi
adalah :
<a href="http://www.resepbisnis.com/?id=rohman" target="new">klik
di sini</a>
atau :
<a href="http://www.resepbisnis.com/?id=rohman" target="new">klik
di sini</a>
atau bisa juga seperti ini :
<a href="http://www.resepbisnis.com/?id=rohman"
target="_blank">klik di sini</a>
Buat Links di sidebar
Bila anda berkeinginan membuat link kepada teman anda di sidebar, cara termudah adalah seperti ini :
( khusus untuk template klasik)
1. Sign in di blogger dengan id anda
2. Klik menu TEMPLATE
3. Klik Edit HTML
4. Klik Edit
5. Klik Find (on this page)… --> untuk mempercepat pencarian
6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah Links para sahabat, klik
Find
7. Tuliskan link yang anda inginkan, contoh jika anda ingin membuat link ke blog saya, maka kode
yang di tulis adalah :
<a href="http://kolom-tutorial.blogspot.com" target="_blank">Blog
Tutorial</a>
8. Klik Save Template Changes. Selesai
Sedikit clue untuk anda. Jika anda sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik,
sebaiknya anda copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila anda
melakukan kesalahan, anda bisa mengembalikan kesemula karena sudah mempunyai backup data
template tersebut. Atau bisa juga sebelum anda klik Save Template Changes sebaiknya anda klik terlebih
dahulu tombol preview untuk melihat perubahan yang anda lakukan, apabila sudah cocok dengan
perubahan tersebut baru di save Template Changes.
Untuk anda pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :
1. Login di blogger dengan ID anda
2. Klik menu Layout
3. Klik Page Elements
4. Klik Add a Page Element
5. Klik ADD TO BLOG pada menu Link List
6. Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog saya Adalah “ Link
partner” atau silahkan terserah anda
7. Isi nomor link yang ingin anda tunjukan di blog anda pada form Number of Links to show in list, jika
anda ingin membatasi jumlah link yang akan di tampilkan, jika anda tidak mau membatasi
silahkan di kosongkan saja.
8. Pada form Sorting, silahkan anda pilih sort Alphabetically bila ingin link anda di urutkan
berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically apabila
anda menginginkan Link yang anda buat di urutkan secara terbalik ( mulai dari Z --> A ). Bila
anda tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang anda buat,
silahkan pilih Don’t Sort
9. Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http;//kolom-
tutorial.blogspot.com
10. Tulis nama atau tulisan yang ingin muncul pada link yang anda buat pada form New site Name.
contoh : Blog Tutorial.
11. Klik Add Link, jika link yang anda buat lebih dari satu. Silahkan isi semua form sesuai dengan
langkah di atas.
12. Klik SAVE CHANGES bila sudah selesai
13. Bila anda ingin menempatkan Link yang anda buat tadi, silahkan arahkan mouse anda ke kotak
link yang baru anda buat, lalu tekan mouse sambil di tahan pindahkan ke tempat yang anda
inginkan ( di drag & drop ) .
14. Klik SAVE. Selesai
Membuat link dari gambar atau image
Apabila anda mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka caranya
seperti di bawah ini :
1. Upload gambar yang anda miliki ke hosting tempat menyimpan gambar, contoh
http://www.photobucket.com.
2. Jika anda sudah mengupload gambar anda, maka gambar tersebut akan di beri alamat URL, copy
alamat tersebut pada notepad. Sebagai contoh gambar chicklet blog tutorial di samping
mempunyai alamat URL :
http://i162.photobucket.com/albums/t253/rohman24/animasichicklet.gif
Nah jika anda ingin membuat gambar tersebut menjadi sebuah link, maka kode yang di tulis
adalah :
<a href="http://kolom-tutorial.blogspot.com"><img
src="http://i162.photobucket.com
/albums/t253/rohman24/animasichicklet.gif"></a>
(kode dalam satu baris)
jika ingin dalam window baru :
<a href="http://kolom-tutorial.blogspot.com" target="_blank"><img
src="http://i162.photobucket.com
/albums/t253/rohman24/animasichicklet.gif"></a>
(kode dalam satu baris)
Link berjudul
Mungkin anda bingung, ko judul bahasan topik ini judulnya Link berjudul? Untuk memperjelas bahasan ini, silahkan anda kembali ke halaman atas blog ini lalu arahkan mouse anda ke tulisan Resep bisnis, coba diamkan sebentar pada link tersebut, maka tidak lama kemudian akan muncul tulisan Mau belajar bikin website sendiri silahkan klik disini . Nah sekarang mungkin anda sudah mengerti maksud saya, jadi dalam sebuah link ada kata-kata untuk menekankan ajakan anda kepada para pembaca untuk mengklik link
tersebut. Untuk membuat judul link ini sangat mudah, yakni anda hanya harus menambahkan title=" ... " pada link yang anda buat. Contoh seperti yang saya berikan di atas :
<a href="http://www.resepbisnis.com/?id=rohman target="new" title="mau belajar bikin website sendiri silahkan klik di sini">Resep bisnis</a>
mudah bukan. Selamat mencoba.
Membuat efek Marquee
Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan.
Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program
ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :
BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin
cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen
Agar lebih jelas akan saya sertakan contohnya :
Contoh marquee dari gerakan :
<MARQUEE align="center" direction="right" height="200" scrollamount="2"
width="30%">
marquee dari kanan ke kiri
</MARQUEE>
hasilnya :
ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .
Contoh marquee dari perilaku gerakan :
<MARQUEE align="center" direction="left" height="200" scrollamount="3"
width="70%" behavior="alternate">
marquee menurut perilaku
</MARQUEE>
Contoh marquee dengan variasi hurup dan warna latar belakang :
<div align="left"><FONT FACE="georgia" color="White"><B><MARQUEE
BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">
</MARQUEE></b></FONT></div>
hasilnya :
Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan
berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini
hanya di tambahkan sedikit program pada kolom marquee.
Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">
silahkan tunjuk ke sini
</marquee>
hasilnya :
Contoh marquee yang di dalam nya terdapat link :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>
<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>
<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>
</marquee>
hasilnya :
Membuat Refresh
Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman
blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet,
perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol
refresh yang ada pada tool bar.
Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :
<meta http-equiv="refresh" content="10"/>
Simpan kode di atas antara <head> .... </head>
sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di
lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa
menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.
Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup
menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika
anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas,
saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia
membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai
cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita
memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi
apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke
alamat baru yang di inginkan.
Fungsi Redirect ini bisa di buat dengan kode :
<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di
sini"/>
Selamat mencoba.
Kode HTML tampil di posting-an
Ada seorang teman bertanya begini, bang rohman gimana caranya agar kode HTML bisa tampil di posting-
an blog? Nah dari situ muncul ide untuk membuat posting-an ini, barangkali ada diantara kawan-kawan
semua yang juga mempunyai pertanyaan seperti itu? jawabannya mungkin begini. Agar kode-kode HTML
dapat muncul pada posting-an blog kita, ada beberapa cara dan yang saya ketahui saat ini cuma baru dua
cara ( barangkali kawan-kawan ada yang lebih tahu ).
Yang pertama yaitu anda harus mengganti karakter-karakter perintah dari program HTML dengan notasi
tertentu. Karakter-karakter yang sering di gunakan yaitu seperti yang tertera pada tabel di bawah ini :
Karakter Notasi Keterangan
< < Kurung runcing terbuka
> > Kurung runcing tutup
& & Tanda Dan
" " Tanda petik ganda
± ± Tanda plus minus
Spasi Tanda Spasi
© © Tanda hak cipta (copyright)
® ® Tanda terdaftar (Registered)
Nah agar lebih paham akan saya beri contoh, misalkan dalam postingan anda berisi kata-kata seperti ini :
Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :
<meta http-equiv="refresh" content="10">
</meta>
Nah (dari tadi perasaan nah nah melulu , pake kata lain nape!... ) di dalam postingan anda, jika ingin
tampil seperti itu maka yang di tuliskan tidak persis seperti kode di atas, sebab nanti di postingan tulisan
kode tersebut tidak akan muncul, yang ada justru efek dari kode yang anda tuliskan. trus jalan keluarnya
gimana? Seperti yang saya tuliskan pada tabel, anda harus mengganti karakter-karakter perintah yang ada
dengan notasi penggantinya, jadi yang harus anda tuliskan pada postingan adalah seperti ini :
Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :
<br/><br/> <code>
<meta http-equiv="refresh" content="10">
<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
kebawah, hasilnya akan tetap bersatu.
Huh cape juga ya dari tadi kutak-ketik nih.., itu tadi cara yang pertama. Cara yang kedua adalah
dengan menggunakan text area. Cara membuat text area secara lengkap silahkan klik di sini. Sebagai
contoh, untuk menuliskan kode-kode di atas, pada posting-an anda harus menuliskan seperti ini :
Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :
<br/><br/>
<p align="left"><textarea name="code" rows="6" cols="400"><meta http-equiv="refresh" content="10">
</meta></textarea></p>
Maka yang akan tampil di blog anda adalah seperti ini :
Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :
mudah bukan? selamat mencoba dan berkarya.
oupss... saya lupa kawan, untuk memposting seperti yang saya jelaskan dia atas, anda harus pada posisi
Edit HTML jangan pada posisi compose.
oke kawan, untuk yang kedua kalinya...selamat mencoba.
Masalah Posting Artikel
Udah tiga hari ini saya tidak update, ma'lum kemarin abis pulang dari kampung halaman, yo'i bandung
tercinta, nemuin si kembar and istri terkasih... lho ko jadi curhat...
Ok udahan ah intermezonya..jadi garing kalo lama-lama. langsung aja tadi pas buka email, ada seorang
kawan yang bertanya kira-kira isinya begini:
Saya mau tanya nich, saya masih awam dalam blogging dan saya kesulitan untuk mengatur postingan
saya, yang saya maksud adalah untuk mengatur paragraph postingan, pada saat saya mengetik pada
kolom compose, pada tiap paragraph saya selalu memberikan jarak satu spasi dengan menekan tombol
enter, tapi hasilnya publishnya tidak sesuai dengan pengaturan saya pada kolom compose sebelumnya, itu
gimana solusinya yach ? Atas perhatian dan bantuannya saya ucapkan terima kasih...Wss
Sebenarnya sudah saya jawabin lewat email, tapi saya pikir-pikir mending di posting aja topik ini barangkali
ada manfaatnya buat kawan-kawan yang punya permasalahan yang sama.
<meta http- equiv="refresh" content="10"
</ meta>
Untuk masalah ini, saya sarankan jika setelah mengetik artikel di mode COMPOSE,sebelum di publish,
sebaiknya pindah dulu ke mode Edit HTML. Nah pada sela-sela paragrap yang ingin di beri jarak kita
sisipkan kode --> <br/>
satu kode <br/> berarti satu line break ke bawah, jadi kalau jarak yang di inginkan jauh ke bawah kita tinggal
tambahkan kode <br/> beberapa kali.
Contoh :
Di kabarkan padai awal tahun 2007 kemarin telah di luncurkan suatu produk alarm mobil yang mengklaim
dirinya sebagai alarm tercanggih di dunia. Produk tersebut terdiri dari dua item produk dengan kecanggihan
yang berbeda.
<br/><br/>
Produk pertama :
<br/><br/>
Alarm dengan menggunakan sim card, yakni alarm yang bisa me report kepada pemilik melalui teknologi
GSM. Semisal mobil kita di ganggu orang sehingga bunyi, maka mobil ini akan secara otomatis menelpon
kita untuk me report bahwa mobil kita di ganggu, Jangkauannya sampai dengan jangkauan provider dari
GSM selularnya.
Maka yang akan muncul di blog kita akan seperti ini :
Di kabarkan padai awal tahun 2007 kemarin telah di luncurkan suatu produk alarm mobil yang mengklaim
dirinya sebagai alarm tercanggih di dunia. Produk tersebut terdiri dari dua item produk dengan kecanggihan
yang berbeda.
Produk pertama :
Alarm dengan menggunakan sim card, yakni alarm yang bisa me report kepada pemilik melalui teknologi
GSM. Semisal mobil kita di ganggu orang sehingga bunyi, maka mobil ini akan secara otomatis menelpon
kita untuk me report bahwa mobil kita di ganggu, Jangkauannya sampai dengan jangkauan provider dari
GSM selularnya.
atau bisa juga kita menggunakan tag <p> ... </p>, tapi saya lebih menyukai tag <br/> tadi.
Untuk permasalahan tadi saya rasa sudah cukup jelas, nah saya sarankan bila kawan-kawan ingin terbiasa
dengan kode HTML, maka ketika posting artikel sebaiknya pada posisi Edit HTML jangan pada posisi
Compose, sebab ada peribahasa alah bisa karena biasa.
Mudah-mudahan bermanfaat.
Yahoo ! Messenger Emoticons
Buat kawan-kawan yang ingin menghiasi posting-annya dengan berbagai ekspresi dari yahoo, saya berikan
source codenya, biar anda bebas ngakak atau cemberut selagi posting. Silahkan copy source code berikut,
sisipkan pada kata yang sesuai dengan postingan anda, kalo lagi sedih jangan di pasang yang lagi ngakak,
trus kalo lagi patah hati ya nyengir aja ya...
:)happy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif"
width=18 height=18 border=0>
:(sad
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif"
width=18 height=18 border=0>
;)winking
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif"
width=18 height=18 border=0>
:Dbig grin
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif"
width=18 height=18 border=0>
;;)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>
=))rolling on the floor
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif"
width=30 height=18 border=0>
O:-)angel
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif"
width=30 height=18 border=0>
:-Bnerd
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif"
width=24 height=18 border=0>
=;talk to the hand
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif"
width=18 height=18 border=0>
Yahoo hidden emoticons
:o3puppy dog eyes - New!
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif"
width=31 height=18 border=0>
:-??I don't know
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif"
width=40 height=18 border=0>
%-(not listening
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif"
width=52 height=18 border=0>
:@)pig
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif"
width=18 height=18 border=0>
3:-Ocow
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/50.gif"
width=18 height=18 border=0>
:()monkey
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/51.gif"
width=21 height=18 border=0>
~:>chicken
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/52.gif"
width=18 height=18 border=0>
@};-rose
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif"
width=18 height=18 border=0>
%%-good luck
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/54.gif"
width=18 height=18 border=0>
**==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>
Selamat mempercantik postingan nya...
Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-
variasi dari marquee ini.
Selamat ber eksperimen
Ingin pintar dalam bahasa HTML, silahkan download ebook nya di sini
Ingin pintar membuat website sendiri, silahkan klik di sini
Blogger Emoticons
Biar senyum nya makin lebar, and kalo ketawa makin ngakak dikala posting artikel, saya berikan
perbendaharaan wajah-wajah kamu...
Blogger Emoticons
<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif">
<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif">
Selamat menghiasi postingannya...
Pasang Jam di Sidebar
Agar blog anda tampak cantik dan menarik untuk di lihat, maka anda bisa memasang beberapa aksesori
blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa anda dapatkan secara gratis pada
situs http://www.clocklink.com. Salah satu contoh jam yang tersedia adalah sebagai berikut :
Dan bagi anda yang ingin blognya di pasang jamjuga, silahkan ikuti langkah-langkah berikut :
1. Silahkan kunjungi situs http://www.clocklink.com
2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?
3. Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal,
Animation, dll
4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang
berada di bawah jam yang anda sukai tadi
5. Klik tombol yang bertuliskan Accept
6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk
indonesia bagian barat pilih GMT +7:00
7. Set ukuran jam yang anda sukai di samping tulisan size
8. Copy kode HTML yang di berikan pada notepad
9. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
10. Selesai
Karena kode jam blog ini adalah merupakan suatu kode HTML, maka bagi anda yang masih bingung cara
menempatkan kode HTML pada template blog, silahkan baca kembali postingan saya terdahulu di sini
Selamat mencoba
Membuat Banner Animasi
Agar blog kita tampil dinamis dan lebih atraktif, salah satu caranya adalah dengan memajang banner
animasi.karena dengan banner animasi, mata dari pengunjung akan langsung tertuju kepada banner
tersebut, terutama apabila anda seorang pebisnis, banner animasi akan lebih efektif untuk iklan yang kita
pasang di banding dengan banner biasa. Cara membuat banner animasi sangatlah mudah, mau yang
gratisan ada, mau yang bayar juga ada.Tapi tentunya ada kelebihan dan kekurangannya.
bagi anda yang berminat dengan banner animasi gratis, anda bisa kunjungi http://www.addesigner.com
Silahkan daftar (gratis), Jika sudah di terima anda tinggal memilih banner yang di sediakan, trus ya tinggal di
masukin ke blog, mau di sidebar atau di dalam postingan tentu bisa. Untuk cara pemasangan silahkan anda
baca postingan terdahulu bagaimana cara memasukan kode HTML kedalam blog.
Contoh banner animasi
Pasang Buku Tamu di Sidebar
Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup lumayan
penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang mpunya blog
dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung
dapat mengungkapkan isi hatinya tentang blog yang anda buat, yang pasti isi dari sebuah buku tamu ini
sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan
terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi hidup lebih hidu
(kaya iklan aja).
Ok, terlalu lama intermezonya ya, sekarang kita kembali (ke lap...top) ke topikbahasan. Bagaimana caranya
mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, anda tinggal mencarinya pada
mesin pencari semisal google ataupun yahoo, silahkan ketikan kata free shoutbox atau free guestbook pada
search engine masing-masing situs, maka dalam beberapa detik saja akan muncul berpuluh-puluh situs
penyedia buku tamu tadi, anda tinggal klik lalu coba lihat-lihat. Tapi untuk menghemat waktu pencarian
anda, maka di sini saya akan langsung memberikan alamat situs penyedia buku tamu yang servernya
lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com. Untuk caranya
silahkan anda ikuti langkah-langkah berikut ini :
1. Seperti biasa anda harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe, free>>,
ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang
telah di sediakan.
2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda
3. Pada kolom yang berjudul Style, klik menu appearance.
4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku
tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save
Setting.
5. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di
bawah menu Quick Start
6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated
Codes, lalu simpan di program Notepad anda
8. Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan
close situs tersebut.
9. Selesai
Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.
Untuk blogger dengan template klasik :
1. Log in terlebih dahulu ke blogger.com dengan id anda
2. Klik menu Template
3. Klik Edit HTML
4. Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda
inginkan
5. Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik
Edit pada browser lalu pilih Find (on this page).. trus tuliskan kata buku tamu lalu klik find, maka
kita akan langsung di bawa ke tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste
kode HTML shoutbox nya.
6. Klik tombol Preview untuk melihat perubahan yang kita buat.
7. Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
8. Selesai
Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah ukuran lebar
ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width (untuk lebar) dan Height (untuk
tinggi) dari dalam kode HTML shoutbox tersebut.
Untuk Blogger baru :
1. Silahkan Login dengan id anda
2. Klik menu Layout
3. Klik Page Element
4. Klik Add a Page Element
5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
6. Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa
saja yang anda suka
7. Copy paste kode HTML shoutbox anda di dalam form Content
8. Klik tombol Save Changes
9. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
10. Tekan tombol Save
11. Selesai
Selamat mencoba !
Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :
1. http://oggix.com
Untuk langkah-langkahnya hampir sama dengan langkah diatas.
Tutorial HTML
Bagi kawan-kawan yang sudah pernah berkunjung ke blog ini, mungkin tahu bahwa hari ini blog ku ada
banyak perubahan, yo'i.. yang tadinya sangat anti gambar sekarang tiba-tiba jadi lautan gambar, coba saja
lirik kebawah, tadinya banner yang terpasang hanya beberapa buah saja tapi sekarang jadi ngebaris kaya
tentara mau berangkat perang. Yups..tadinya cuma iseng-iseng masukin banner dari teman-teman blog lain,
eh keterusan.. ya udah sekarang semua gambar dari feedburner.com aku masukin semua..sekalian biar
rame..
Dan mulai hari ini topik bahsan pun akan ada sedikit perubahan, yakni ga cuma ngebahas blog tutorial
doank tapi ngebahas juga soal HTML, ini saya lakukan karena ada diantara sahabat saya yang hoby obrak-
abrik template blognya tapi masih menemui kesulitan karena masih bingung soal perintah-perintah HTML,
ya ngga jauhlah dari saya yang setiap edit HTMl musti inga inga dulu perintah HTML nya ma'lum baru
belajar jadi belum pada hapal.
Baiklah sobat, kita kembali ke (laptop) bahasan utama artikel ini yaitu mengenai HTML.
Apa itu HTML ?
HTML (Hypertext Markup Language)adalah merupakan suatu standar bahasa program yang di gunakan
untuk menampilkan dokumen-dokumen web. (itu menurut saya bro, kalo salah ya mohon di maafkan).
Mengenal Tag HTML
Perintah-perintah dalam HTML biasa di sebut dengan TAG. TAG ini kebanyakan mempunyai pasangan,
yakni TAG pembuka dan penutup. Misal <b>...</b>, <i>...</i> dan lain sebagainya, dan TAG
yang mempunyai pasangan ini juga bersifat Override yakni dapat menimpa fungsi TAG sebelumnya. Contoh
: sebuah teks yang sudah di buat miring oleh tag <i> ... </i>, dapat di timpa oleh tag <b> ...
</b> sehingga akan melahirkan dua hasil perintah yang berbeda sekaligus yakni kombinasi hurup miring
dan hurup tebal, contoh :
ini hanya <b><i>contoh </i></b> saja sobat
yang akan tampil di browser adalah :
ini hanya contoh saja sobat
di samping TAG yang mempunyai pasangan, ada juga tag yang tidak memerlukan pasangan, misal TAG
<hr> , <br> , ataupun <input>
Sebuah Tag tidaklah sensitif terhadap Case (hurup besar atau kecil), jadi mau di tulis hurup besar ataupun
huruf kecil akan menghasilkan fungsi yang sama. Sebagai contoh : fungsi Tag <b>....</b> akan sama
dengan Tag <B> ....</B>.
Struktur dokumen HTML
Sebuah dokumen HTML terbagi kedalam tiga bagian utama, yakni HTML, HEAD, serta BODY.
HTML
Sebuah dokumen HTML haruslah diawali dengan tag <HTML> dan di tutup dengan </HTML>, Tag ini
adalah sarana untuk memberikan informasi kepada browser bahwa apa-apa yang di tulis di dalamnya
merupakan sebuah dokumen HTML.
HEAD
Bagian header dari sebuah dokumen HTML diawali oleh tag <HEAD> dan di tutup oleh tag </HEAD>, dan
di dalam header di isi pula dengan tag title yakni judul dari dokumen, tag title ini di tulis dengan tag
pembuka <TITLE> dan di tutup oleh tag </TITLE>, contoh : title dari blog ini adalah Blog Tutorial jadi
untuk tittle nya di tulis seperti ini <TITLE> Blog Tutorial </TITLE>, akan tetapi di blogger.com
untuk penulisan title tidak harus di tulis langsung pada tag title karena sudah di otomatisasi, alamatnya yaitu
<$BlogPageTitle$>. Dalam pengisian title ini seyogya nya jangan asal-asalan, karena title merupakan
hal pertama yang di lihat oleh search engine.
Di dalam Header pun di isi pula dengan tag META, tag META ditulis dengan tag <META>, tag META ini
biasanya memuat informasi mengenai dokumen HTML. dengan tag META kita bisa menentukan keyword,
content,refresh, dan lainnya sebagainya. Khusus tentang tag META keyword akan di bahas lebih lanjut
pada postingan selanjutnya.
BODY
Semua dokumen HTML yang di simpan di dalam BODY semisal teks, image, link, dan lain sebagainya akan
di tampilakan dan bisa di lihat di dalam browser.
Ok sahabat, mungkin pengenalan pertama mengenai HTML di cukupkan sekian dulu dan akan di teruskan
pada postingan-postingan selanjutnya
Download Gratis
Dalam sesi kali ini, ada kabar baik buat kawan-kawan semua. ya saya mau
bagi-bagi software buat anda yang suka akan internet, khususnya bagi yang berminat untuk bisa membuat
website sendiri. Untuk produk-produk di bawah ini saya sudah mendapatkan hak Resale Right atau hak jual
ulang, tapi buat kawan-kawan semua khusus saya berikan gratis. Beberapa produk merupakan dalam
format ZIP, silahkan gunakan winzip untuk mengekstraknya. Untuk membacanya, anda memerlukan
Acrobat Reader versi 5.0 ke atas.
Klik di sini jika anda belum memiliki program Winzip.
Klik di sini jika anda belum memiliki program Acrobat Reader
• How to build HTML
Dengan e-book ini kita diajarkan cara menggunakan perintah-perintah HTML dasar dan tingkat lanjut. Di
buat dalam format yang mudah untuk di ikuti. untuk mendownload silahkan klik disini atau klik :
Search Engine Optimization Made Easy
Strategi sederhana yang dapat anda pakai untuk optimalisasi website atau blog anda di search engine. Ikuti
tipsnya dan dapatkan traficc sebanyak mungkin ke website atau blog anda. Untuk mendownload silahkan
klik disini atau klik :
Instant Site Maker
Software ini akan mempermudah anda membuat website dalam waktu yang singkat. Cukup baik bila anda
tidak memerlukan website yang kompleks. Untuk mendownload silahkan klik disini atau klik :
Java Buttons
Dengan kumpulan button dan menu yang menggunakan java script ini, bisa mempercantik website ataupun
blog milik anda, untuk mendownload silahkan Klik disini atau klik :
Web Template
Kumpulan template web propesional yang dapat anda gunakan untuk mendesain website anda. Untuk
mendownload silahkan klik disni atau klik :
Banner
Merupakan kumpulan banner cantik untuk mempromosikan website anda. Untuk mendownload silahkan
klik di sini atau klik :
Meta Tag Master
Program untuk membuat meta tags, sehingga mempermudah pencarian website atau blog anda di search
engine. Untuk mendownload silahkan klik di sini atau klik :
E-book "Menjadi Jutawan Via Internet"
E-book ini menjelaskan cara dan strategi mendapatkan penghasilan besar dengan memanfaatkan internet.
Cara tsb antara lain : menjadi pembuat web professional, membuat "Web Pencetak Uang Otomatis" dengan
konsep affiliasi & reseller, dan lain-lain. Dilengkapi pula dengan file-file latihan untuk memperjelas tuntunan
praktis kami.
Script Web Affiliasi
Script Web Pencetak Uang Otomatis siap pakai dengan konsep affiliasi. Anda tinggal mengganti teks dan
gambar sesuai dengan produk dan layanan anda!
Script Web Reseller
Script Web Pencetak Uang Otomatis siap pakai dengan konsep reseller. Anda tinggal mengganti teks dan
gambar sesuai dengan produk dan layanan anda!
FletMail
Software ini memungkinkan anda untuk mengirim e-mail untuk berapapun jumlah penerima dengan sekali
klik. Anda dapat menggunakan tags untuk mengganti kata-kata yang sesuai untuk penerima yang berbeda.
Dengan demikian, setiap penerima akan merasa mendapat e-mail personal dari anda.
Image Capture
Dengan menggunakan software ini, anda dapat menangkap image dari layar komputer anda.
IP Ad Web Sender
Software ini memungkinkan anda untuk mengirimkan promosi kepada komputer-komputer yang terhubung
dengan internet berdasarkan range IP addressnya.
Instant Software Downloads
Software yang bisa anda download adalah : Instant Unzip, HTML Compressor, IP Blocker, Link Evaluator,
Site Submitter, Pop Up Zapper, Secret Popup Maker, HTML E-mail Link Encrypter, File Destroyer, Internet
Explorer Blaster, MRU Wizard, Java Source Machine I, Java Source Machine II, Traffic Wizard, Password
Manager, JavaScript Compressor, HTML Encryptor, Fast HTML Remover, Password Generator, File
Splitter, HTML Editor, Picture Gallery Maker, Instant Notification.
The Building of a Better Website
Berisi tips-tips berharga bagaimana membangun sebuah website yang baik. Patut dimiliki untuk mendukung
karir anda sebagai webmaster.
Magic Subscriber
Demi meningkatkan penjualan bisnis anda, anda dapat menggunakan software ini. Software ini mudah
digunakan untuk menghasilkan prospek dan customer baru! Anda akan memiliki alat khusus yang akan
menangkap data e-mail pengunjung tanpa mereka perlu menuliskannya!
Reprint Rights Magic
Bagaimana cara menghasilkan uang tanpa perlu menggunakan produk anda sendiri ? Bagaimana
menggunakan rangkaian produk orang lain untuk menciptakan produk anda ? Informasi penting bagi anda
yang ingin menghasilkan uang tanpa perlu merancang produk.
Instant eMail Scramble
Apakah anda jengkel dengan banyaknya junk mail yang anda terima setiap hari ? Dengan menggunakan
utility ini, alamat e-mail anda di website anda akan terlindungi dari mesin penuai e-mail untuk keperluan
spam! Alamat e-mail anda akan tetap terbaca oleh pengunjung website anda, dan juga berfungsi seperti
biasa bila pengunjung mengklik link e-mail anda.
Pure Profit Software
Paket produk software yang sangat menarik! Berisi produk-produk pilihan seperti : Affiliate Defender, Instant
Affiliate Link Master, Instant Meta Maker, Instant Bookmark, JavaScript Magic, dll.
PopUps Generator
Dengan menggunakan software ini, anda dapat membuat popups window dari website anda. Anda dapat
memanfaatkannya untuk meningkatkan rasio penjualan dan pendaftar mailing list anda.
99 Websites You Should Have Bookmarked..But Probably Don't
Internet dipenuhi dengan informasi gratis, sarana penghasil uang dan sumber lainnya. Hanya saja, mungkin
anda tidak tahu tempat menemukannya. Informasi dalam e-book ini akan memberikan alamat websitenya
untuk anda! The Embarrasingly Simple Way I Grabbed the #1 Position in Google, Yahoo & AOL Search
engine merupakan gudangnya traffic. Dapatkan rahasianya bagaimana cara meraih posisi teratas di hasil
pencarian pada 3 search engine terpopuler!
Intraday Basic
Bambang Hariyadi membeberkan 2 strategi andalannya dalam membaca "CandleStick" yang terbukti
menghasilkan $4500 dalam seminggu !! (Forex market http://www.betonmarkets.com). Anda ingin
mendapatkan $4500 minggu depan? Miliki segera e-book ini, dan dapatkan strateginya!
The TrafficJam Formula
Salah satu kunci keberhasilan bisnis di internet adalah jumlah traffic/pengunjung yang dihasilkan oleh suatu
website. E-book ini memberikan informasi menarik cara menghasilkan sebanyak mungkin traffic ke website
anda dalam waktu singkat! Baca secara detail di websitenya bagaimana sang penulis berani menjamin
keberhasilan anda dalam mencari traffic!
The Affiliate Marketing Success Road Map
Jika anda ingin menjadi affiliate/reseller yang sukses, maka e-book ini untuk anda! Anda akan diberi cara
mencapai sukses dengan merencanakan dan mendesain sistim yang efektif untuk mendatangkan profit.
Newbie's Guide to Online Fortunes
E-book ini berisi petunjuk mengenai prinsip dasar dan cara sederhana untuk memulai bisnis on-line anda !
How to Write and Publish Your Own eBook in as little as 7 Days
Bagaimana cara membuat dan mempublikasikan sebuah e-book yang sukses ? Anda akan mendapatkan
informasinya di sini.
Internet Copycatting
9 Model bisnis internet yang dapat anda tiru. Disertai dengan pembahasan pro dan kontra, detail mengenai
setup, serta interview dengan pelaku bisnis untuk masing-masing model. Anda tidak perlu bingung lagi
memikirkan model bisnis internet, tinggal tiru, dan mulailah menghasilkan uang !
Download Page Generator
Dengan menggunakan program ini, maka anda tinggal mengisi formulir pertanyaan dengan data-data yang
diperlukan, dan secara otomatis halaman download/halaman ucapan terimakasih akan terbentuk untuk
anda. Yang biasanya membutuhkan waktu 30 menit sampai satu jam untuk membuatnya, dengan program
ini hanya butuh waktu satu menit saja !
Scroll Pops
Paket berisi 10 script yang mudah untuk digunakan. Anda dapat menggunakannya di website anda untuk
membuat Confirmation Windows, Subscriber PopUps, Bookmark Windows, Alert Windows, dan lain-lain.
PHP Instant Scripts
Script-script pilihan telah kami sediakan untuk anda. Untuk kepuasan anda, script-script ini telah kami uji
sebelumnya!
Terdiri dari script : Affiliasi, Portal, Forum, E-Commerce, Hit Counter, Guest Book, Polling, Image Gallery,
Classified Ad, Message Board, Search Engine, Event Calendar, Chat, News Publishing, Greeting Cards,
User-Online, Mailing List, Simple Calendar, Calculator, Simple Counter, Unit Converter.
SOFTWARE DAN E-BOOK BERHARGA LAINNYA UNTUK ANDA :
Wholesalers 2000 - Extreme Mega Edition
Website4Sale Secrets
101 Auction Secrets Revealed
Don-Lapre Info Reports
Auction Prophet
Millenium Info Reports
The Cash Flow Deluxe : Info-Software Programs
Using NLP On eBay
Cyber Tactics 101
Internet Traffic Virus 2.0
Internet Success Ladder
Free Advertising System
Yahoo Secrets Revealed
57 Free eBook Articles
WebPage-O-Matic (Personal Edition)
WebPage-O-Matic (Business Edition)
eZine Assistant
Priority Mailer
Internet Marketing Toolbar Pro
Cheap But Good
eBook Gold v3
Web Site and E-zine Promotion Made Easy
Amazing Marketing Tactics
TRAFFIC VIRUS
TYPEITIN SOFTWARE
KILLTIMER v4.9 SOFTWARE
WEB-O-RAMA SOFTWARE
CREATING PROFITABLE CLASSIFIED ADS
CASH FLOW REPORTER HOW TO SERIES
MAIL ORDER SERIES OF REPORTS
eBiz Tips Tricks
INTERNET DETECTIVE 5.0
TAKE THE INTERNET BY STORM
FILLOUT MANAGER
EXPRESS MAIL SERVER
EMS KEY GENERATOR
WEBFORCE
5000+ ADSUBMITTER
DOUBLE YOUR BUSINESS
SEARCH ENGINE TACTICS
TARGETED DIRECT EMAIL GUIDE
OFFSHORE REPORT
000 CLASSIFIEDS
AUCTION TIPS
167 REPORTS
UNLIMITED PROFITS
INTERNET OPTIMIZER
CYBCASH SOFTWARE
LIST MANAGER
ARACHNOPHILIA
INSIDER SECRETS
MAKE YOUR ADS PULL LIKE CRAZY
INTERNET MARKETING PORTFOLIO
EARN A FORTUNE
WEBCELERATOR
CREATE YOUR OWN INFO PRODUCTS
AD/SALES LETTER TIPS
CHECKER SOFTWARE
101 SECRETS
ONE MILLION ITEMS WHOLESALE
INTERNET TIPS REVEALED
Using TV
Legal Forms
Business Reports
Consumer Reports
Reference Reports
Well Known Books
Well Known Books
Volume 2 of the E-Business Encyclopedia Set
Volume 3 of the E-Business Encyclopedia Set
Historical Stuff
Membuat foto animasi
Lagi-lagi saya berbicara tentang animasi, memang dengan animasi bisa bikin hidup jadi hidup ( kaya iklan
aja ). Ya dalam kesempatan kali ini akan coba di bahas tentang bagaimana cara membuat animasi gambar
ataupun foto. Bagi para sobat (mulai sekarang saya akan membiasakan diri menyebut anda menjadi sobat,
biar lebih familier ya) yang sudah terbiasa menggunakan program animasi semisal MacroMedia Flash
Player ataupun teman-temannya sudah barang tentu bukan hal yang wah ataupun aneh, tapi bagi
sekelompok orang seperti saya ini, membuat animasi foto adalah suatu hal yang sangat sulit sekali.
Adakah diantara para sobat blogger yang seperti saya? jika jawabannya ada ya kita emang senasib
(hiduplah senasib), tapi jangan dulu patah semangat sobat blogger, pepatah bilang banyak jalan menuju
rhoma (irama).. dalam hal inipun sama ada jalannya yakni kita bisa menggunakan jasa situs-situs pembuat
animasi. Di internet buaanyak sekali situs pembuat animasi foto, jumlahnya ribuan atau bahkan jutaan. Nah
sebagai contoh yaitu http://www.slide.com. Untuk membuat sebuah foto animasi di slide.com, silahkan
ikuti langkah-langkah berikut :
1. Silahkan buka situs www.slide.com
2. Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut
3. Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)
4. Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan
5. Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account
sobat
6. Langkah selanjutnya adalah melakukan pembuatan animasi
7. Klik style, untuk memilih gaya dari animasi
8. klik skin, untuk memilih bingkai animasi
9. klik Size untuk memilih ukuran
10. Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan
11. klik tombol Upload untuk melakukan proses upload foto
12. Jika proses upload selesai, klik tombolSave
13. Copy kode HTML yang di berikan, lalu paste pada program notepad
14. Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser
15. Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat, nah
untuk cara memasukan kode HTML sudah sering saya bahas pada postingan terdahulu, jika lupa
silahkan klik di sini
Contoh gambar animasi :
Ada pula contoh animasi dari http://www.picturetrail.com :
Get Your Own!
Atau para sobat bisa juga daftar di http://www.flickr.com
Selamat mencoba !
Pasang Statistik dan Tracker
Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni
memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang
berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu
juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana,
apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.
Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan
situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs
http://www.sitemeter.com. Berikut adalah contoh tool yang bisa kita pilih :
Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :
1. Silahkan kunjungi situs http://www.sitemeter.com.
2. klik tulisan Sign Up untuk melakukan pendaftaran
3. klik tombol bertuliskan Next
4. Klik tombol Next lagi
5. Isi semua tabel yang ada lalu klik tombol Next lagi
6. Isi lagi tabel yang ada, lalu klik tombol Next lagi
7. klik tombol Next lagi
8. klik tombol Next lagi ( cape dech next..next melulu )
9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka
email yg anda berikan
10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda
untuk login ke sitemeter.com
11. Silahkan login dengan id anda
12. Bila sudah login, Klik menu Manager
13. Klik Menu Meter Style untuk memilih gaya dari site meter anda
14. Pilih style yang anda sukai, kemudian klik tombol Select
15. Klik menu HTML Code
16. Klik tulisan Adding site Meter to a Blogger.com Site
17. copy semua kode HTML yang di berikan lalu paste pada Notepad
18. Klik menu Logout untuk keluar dari situs tersebut
19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita
Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah
berikut :
khusus blog dengan template klasik :
1. Sign in di blogger dengan id anda
2. Klik menu TEMPLATE
3. Klik Edit HTML
4. Klik Edit (yang ada pada bar menu browser anda)
5. Klik Find (on this page)... ⇒ untuk mempercepat pencarian
6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat
dengan tombol blogger) klik Find
7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat
perubahan yang terjadi
8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai
Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode
<center> ...kode site meter... </center>
Untuk blog dengan Template baru :
1. Login di blogger dengan ID anda
2. Klik menu layout
3. Klik Elemen Halaman
4. Klik Tambahkan sebuah Elemen Halaman
5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript
6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak,
ya kosongkan saja)
7. Copy & paste kode Site meter pada kolom isian
8. Klik tombol Simpan Perubahan
9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag
& drop)
10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan
11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN
12. Selesai
Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya
pasti ketemu....
Selamat mencoba.
IE + FireFox dalam satu komputer
Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back
sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja
sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis,
teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser
internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain.
Saat itu pekerjaan rada dikit, tentunya saya bisa sedikit bersantai ria. Iseng-iseng saya pinjem tuh kompi
nya si mba tukang akunting temen saya, mau liat technorati barangkali ada yang nge link baru ke blog saya.
setelah di buka ntuh kompi, eh saya lihat ada dua browser dalam ntuh kompi yaitu Internet Explorer plus
Mozilla FireFox. Wah nyobain ah pake FireFox, katanya sih lebih cepat dan aman di banding dengan
Internet Explorer yakni si FireFox ini lebih kebal terhadap virus-virus semacam Trojan dan teman-temannya.
Aku buka deh langsung ntuh si FireFox, hasilnya lumayan emang rada cepet sih, tapi kayanya rada - rada
ada yang beda pada tampilan gambarnya, aku hiraukan saja ga mau mikir panjang-panjang and langsung
aja ke www.technorati mau cek yang nge -link ke blog saya. Sesudah di cek, benar saja ada yang pasang
link baru tanpa memberi tahu, aku langsung aja di klik ntuh linknya, betapa kagetnya daku saat itu, lho ko
gambarnya begini acak-acakan nih blog ada gambarnya yang kepinggir, melorot dan lain sebagai, pokoknya
pemandangan yang tidak mengasikan, apa pemilik blog ini ga sadar apa, blognya ancur begitu. Setelah
kejadian yang kurang mengenakan tadi, buru-buru deh aku lihat blog ku, takutnya kaya kejadian tadi.
Hasilnya sedikit melegakan, wah untung blogku tidak berantakan, cuma ada sedikit perbedaan saja. Karena
penasaran, aku tutup tuh si FireFox dan langsung buka browser pake IE, dan aku balik lagi ke blog yang
berantakan tadi, dan ternyata hasilnya sungguh mengherankan juga, yang tadinya aku lihat di FireFox
sangat berantakan kalo di lihat pake IE sangat tersusun rapi dan menarik.
Itu tadi pengalaman pertama, pengalaman yang kedua, aku pake IE seperti biasa. yah yang namanya
blogger musti rajin-rajin blog walking biar banyak temen. ceritanya saya mampir di suatu blog, wah ini blog
berantakan banget (menurut saya lho). Trus baca-baca tuh isi blog, eh ada sedikit artikel dari sang pemilik
blog itu sendiri, sedikit penggalan isi artikel tersebut kira-kira ada kata-kata begini : Buset deh, kebiasaan
pake FireFox pas dilihatdi IE, blog ku ancur begini ya.
Menanggapi dua pengalaman tadi, saya mempunyai kesimpulan bahwa sebaiknya bagi para blogger
mempunyai banyak browser internet dalam satu komputer, ini tentunya untuk memaksimalkan hasil dari
blog kita, terutama bagi para sobat yang blognya berupa blog untuk bisnis, satu pengunjung ke blog sobat,
berati satu peluang untuk mendapatkan keuntungan. Nah jika blog para sobat tidak menarik karena sebab
tadi dari perbedaan pemakaian browser, tentunya jangankan mau membaca artikel penawaran bisnis dari
sobat baru sampaipun langsung kabur. Ingat, di luar sana ribuan orang atau bahkan jutaan orang memakai
browser yang berbeda dengan kita, maka itu tadi sobat harus mempunyai banyak browser pada komputer
sobat, minimal dua browser paling terkenal di dunia yakni Internet Explorer dan Mozilla FireFox.
Bagi para sobat pengguna template buatan bukan dari blogger sendiri, coba cek blog sobat, barangkali blog
sobat berantakan kalau di lihat di browser lain. Bagi para sobat pecinta program HTML text berjalan
<marquee>, hati-hati karena program ini tidak di mengerti oleh FireFox, jadi jika sobat menyimpan text
terlalu banyak dalam marquee, jangan-jangan blog sobat jadi melorot atau melebar kesamping karena
kelebihan quota space. Bagi yang suka pake kode <BLINK> untuk mengedipkan hurup buat narik perhatian
pengunjung, kode sobat tidak di mengerti oleh IE tapi di mengerti oleh FireFox. Tentunya dari masing-
masing Browser ada kelebihan dan kekurangannya, ya pandai-pandailah kita mensiasatinya.
Kalau di baca-baca, kayanya artikel kali ini bukan blog tutorial ya, lebih cenderung ke tips gitu. biarin aja ya,
supaya ga bosen baca tutorial terus, cari yang beda gitu. Oke, thanks ya sobat, selamat mendownload
FireFox nya.
Cara Pasang Musik Pada Blog
Mohon maaf, karena artikel ini sudah lama sekali di buat maka situs-situs yang saya contohkan banyak
yang sudah tidak aktif.
Rupanya ada salah seorang sobat kita yang tertarik memasang musik pada blog dan belum mengetahui
caranya. Oleh karena itu dalam kesempatan kali ini, saya akan coba membahas tentang bagaimana cara
memasukan musik ke dalam blog.
Untuk memasang musik di blog, kita bisa memanfaatkan situs penyedia musik gratisan yang banyak
bertebaran di internet, yang penting kita jeli untuk mencarinya. Pada intinya ada tiga jenis situs penyedia
musik yaitu :
1. Situs tersebut menyediakan berbagai pilihan lagu yang bisa kita pilih sesuai dengan selera kita
2. Situs tersebut tidak menyediakan lagu, tapi kita harus upload lagu dari komputer kita
3. Situs tersebut menyediakan berbagai pilihan lagu, atau bisa juga kita upload lagu dari komputer
Tentu diantara ketiganya ada kelebihan dan kekurangannya. Keuntungan menggunakan jasa situs yang
pertama yaitu kita tidak perlu mempunyai lagu sendiri, kita tinggal pilih lagu yang di sukai lalu ambil kode
HTML nya kemudian masukan ke blog kita, prosesnya sangat cepat dan praktis. Tapi kekurangan nya yaitu
terkadang lagu yang kita sukai tidak tersedia di situs tersebut.
Untuk situs kedua, keuntungannya yaitu kita bisa memasukan lagu yang kita sukai tanpa harus tergantung
dari situs tersebut jadi apapun lagunya pasti bisa yang penting ya kita harus mempunyai file lagu yang harus
di upload. kekurangannya yaitu karena kita harus upload lagu ke situs tersebut maka dalam proses upload
biasanya memerlukan waktu yang cukup lumayan lama, sehingga sedikit membosankan ketika melakukan
proses upload juga tentunya biaya berinternet kita jadi semakin bengkak.
Untuk situs ketiga, untuk saat ini saya baru mengetahui satu situs saja, tolong kepada para sobat yang
mengetahui situs-situs yang masuk kategori ini untuk menginformasikan pada kotak komentar agar di
ketahui oleh para sobat lainnya. Nah untuk situs ini kelebihannya ya kita lebih bisa memilih, mau pake lagu
yang tersedia atau mau upload juga bisa. tapi ada kekurangannya yaitu tidak di sediakannya panel kontrol
untuk para pengunjung, jadi lagu yang kita pasang tidak bisa di apa-apakan oleh para pengunjung sehingga
akan jalan dengan sendirinya, yang perlu kita pikirkan adalah lagu yang kita sukai belum tentu di sukai oleh
para pengunjung, sehingga ini akan mengganggu kenyamanan bagi para pembaca blog ita.
Yo'i sobat, kayanya terlalu lama dengan fendefinisian ya, agak basi jadi membosankan...sorry bos. Kita
kembali ke (laptop) topik bahasan semula yakni memasang lagu pada blog. Contoh yang pertama adalah
memanfaatkan situs yang telah menyediakan berbagai lagu tanpa harus upload terlebih dahulu, saya ambil
contoh www.song2play.com. silahkan ikuti langkah-langkah berikut :
1. Silahkan kunjungi www.song2play.com
2. Masukan judul lagu yang anda inginkan pada search engine yang tersedia. Contoh : Hotel
California. Atau menuliskan nama penyanyi atau grup bandnya. Contoh the Eagle
3. Jika judul lagu belum muncul, biasanya ada tulisan Click here to get more Result. klik aja tulisan
tersebut
4. Setelah terlihat beberapa judul lagu, klik pada judul lagu yang sedang sobat cari, secara otomatis
akan ditampilkan kontrol navigasi dan lagu yang dipilih tadi akan di perdengarkan
5. Di pojok kiri bagian bawah ada kotak yang sudah di beri tanda centang, yaitu AutoStart, Show
song Title. AutoStart artinya ketika pengunjung mengunjungi blog sobat, maka lagu akan
langsung play. Nah jika tidak mau langsung play alias memberi kesempatan kepada pengunjung
untuk memilih sendiri apakah mau mendengarkan lagu atau tidak, sobat hilangkan tanda centang
tadi dengan cara mengkliknya
6. Show Song Title artinya pada panel navigasi akan di munculkan judul lagu yang di muat. Jika
tidak mau muncul ya hilangkan saja tanda centangnya
7. Copy seluruh kode HTML yang di sediakan pada text area, paste pada notepad. Silahkan close
window situs tersebut
8. Langkah selanjutnya yaitu sobat tinggal masukan kode HTML yang diberikan tadi ke dalam blog,
nah untuk memasukan kode HTML ke dalam blog sudah sering saya bahas pada postingan
terdahulu, jika sobat lupa silahkan klik di sini
Untuk contoh silahkan klik tombol play pada panel navigasi di bawah, ini sengaja saya setting tidak Auto
Start :
Song:
The Eagles - Hotel California
Sedikit tambahan, jika sobat ingin menyesuaikan lebar panel navigasi agar sesuai dengan sidebar blog
sobat, sobat bisa merubah nilai yang ada pada kode HTML lagu tersebut yaitu nilai width=...px.
Contoh : didalam kode tersebut ada kode width=310px, untuk memperkecilnya kita tinggal perkecil nilai
px nya. Contoh : width=200px.
Situs yang serupa dengan ini adalah www.songhere.com. Mungkin pemiliknya memang sama. Nah langkah-
langkah mendapatkan kode HTML dari situs ini mirip dengan langkah-langkah diatas,
Contoh panel navigasi dari www.songhere, silahkan klik tombol play nya :
Song: White Lion - When the children cry
Tambahan lagi, untuk yang di situs www.songhere ini tidak di sediakan pasilitas untuk memilih fasilitas
AutoStar atau tidak, jadi kalau kita memakainya akan langsung play tanpa harus di klik oleh pengunjung,
untuk mengakalinya kita harus mengganti sendiri kode nya, silahhkan sobat cari di dalam kode lagu tersebut
yang bertuliskan autostart=true, ganti tulisan true menjadi false sehingga kode tadi akan menjadi
seperti ini autostart=false, contoh hasil kode yang sudah saya rubah adalah lagu dari white lion di
atas, yang untuk menjalankannya harus di klik dulu tombol play nya.
Nah itu tadi contoh situs yang menyediakan berbagai lagu yang bisa kita pilih, sekarang contoh situs yang
harus meng upload lagu dari komputer kita salah satunya adalah www.tunefeed.com
Untuk langkah-langkahnya, silahkan ikuti seperti di bawah ini :
1. Silahkan buka situs www.tunefeed.com
2. Klik kotak di sebelah tulisan widget Color, pilih warna panel navigasi yang sobat sukai
3. Klik tombol yang ada tulisan Click here to share your music
4. Klik tombol yang bertuliskan Add Music or Photos
5. Masukan file foto atau pun lagu yang sobat miliki
6. Klik tombol upload
7. Sambil menunggu proses upload, sobat isi data-data diri sobat pada kolom yang di sediakan
8. Tunggu sampai proses upload selesai
9. jika proses upload selesai, sobat akan di minta untuk mngecek email di berikan tadi
10. silahkan buka email dari www.tunefeed.com bila sudah sampai
11. Klik link ntuk melakukan aktivasi keanggotaan, nah dengan mengklik link tadi otomatis sobat
sudah berada pada halaman acount sobat
12. Klik tulisan Share This Tunefeed
13. Pilih volume yang diinginkan pada menu dropdown di samping tulisan Select Volume
14. Pilih mode player, mau autoplay atau tidak pada menu dropdown di samping tulisan auto-play,
sebaiknya pilih No
15. Copy seluruh kode yang di berikan pada text area kemudian paste di notepad
16. Klik tulisan Log Out untuk keluar dari halaman account sobat
17. Silahkan close window browser sobat
18. Tugas selanjutnya yaitu memasukan kode HTML yang sudah diberikan ke dalam blog. Untuk
caranya sudah saya bahas pada tulisan di atas
19. Selesai
Contoh panelnya yaitu seperti di bawah ini, silahkan klik tombol play untuk mengaktifkan nya, tunggu
beberapa saat, loadingnya agak sedikit lama :
Untuk contoh kategori yang ketiga, sobat bisa kunjungi www.iwebmusic.com, caranya hampir mirip
dengan cara-cara diatas, disini sobat bisa pilih lagu yang di sediakan atau bisa juga meng upload lagu dari
komputer. Cuma sayang untuk yang satu ini tidak mempunyai panel kontrol buat pengunjung yang ada
hanya berupa banner biasa dan bekerja auto start sehingga saya tidak bisa memberi contoh panelnya.
Ok para sobat, saya rasa sudah cukup. Selamat mencoba ya...salam hangat buat semuanya.
Buat Logo & Image Button
Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun
coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit,
dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat
sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan
program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan
suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.
Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur
ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma
((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah
satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah berikut ini :
1. Silahkan buka alamat http://cooltext.com
2. Lalu klik tulisan Design a Logo
3. Klik gambar contoh logo yang sobat sukai
4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
5. Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
6. Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan
(text).silahkan pilih warna yg sobat sukai
7. Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
8. Klik tombol yang bertuliskan Render Logo Design
9. Tunggu beberapa saat ketika proses pembuatan logo berlangsung
10. Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi
langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk
kita simpan di PC kita
11. Selesai. Sobat sudah mempunyai sebuah logo.
Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau
melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal www.photobucket.com.
Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :
1. Silahkan buka alamat http://www.photobucket.com,
2. Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang
bertuliskan Join Now pada sudut kanan atas layar
3. Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
4. Silahkan Sign In dengan Id sobat
5. Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan
pilih logo yang tadi di buat
6. Klin tombol yang bertuliskan Upload
7. Tunggu beberapa saat ketika proses upload berlangsung
8. Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
9. Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
10. Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat
Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, cuma ada sedikit kode
yang harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image :
http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg. Disini sobat harus menambahkan
kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg">
Maka contoh hasilnya akan seperti ini :
Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik di sini.
Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang
sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan
beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X
40px , maka kode tersebut menjadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg" width="100"
height="40" alt="ini contoh saja">
sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau
memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk
ukuran tinggi image, sobat tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk
menampilkan tulisan ketika mouse berada pada image tersebut.
Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat
efek kode alt="..." :
Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image
button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs
cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button
:
Membuat menu D'tree
Beberapa waktu yang lampau, saya pernah menulis artikel mengenai cara membuat menu yang
menyerupai menu yang ada pada Windows explorer yaitu menu dtree, akan tetapi rupanya kemarin lusa
ada laporan bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini adalah sebagai
referensi agar kejadian tersebut tidak terulang kembali.
Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain,
sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnya
tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan
seperti ini, apabila saya menyuruh memasang script seperti ini :
pasanglah kode ini di atas kode </head> :
<script type='text/javascript'
src='http://amen24.googlepages.com/Readmore.js' />
kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada account milik
saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila saya
iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil
sobat akan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara
mengatasinya? begini caranya : copy kode sumber script ini lalu paste pada address bar browser internet
sobat :
http://amen24.googlepages.com/Readmore.js
Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java.
Langkah selanjutnya adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu
simpan di komputer sobat. Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode
tersebut pada hosting yang biasa sobat gunakan, misalkan saya sering menyimpannya di Google Page
Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkan script ini mempunyai
alamat :
http://juned.googlepages.com/Readmore.js
Nah, langkah terakhir adalah mengganti sumber script yang saya punyai dengan milik sobat, misal kode di
atas seperti ini :
<script type='text/javascript'
src='http://amen24.googlepages.com/Readmore.js' />
Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :
<script type='text/javascript'
src='http://juned.googlepages.com/Readmore.js' />
Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi
script tersebut.
Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat untuk
mencuri kode milik orang lain.
Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada
pembahasan yang tempo hari agak menyulitkan pembaca, sehingga kali ini saya akan mencoba
membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.
Untuk membuat menu dtree, sobat bisa mendownload pada situs resminya yaitu di
http://www.destroydrop.com, silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah
merupakan suatu barang yang sudah jadi, dengan kata lain sobat harus memahaminya, oleh karena alasan
tadi maka saya akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami.
Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai
berikut :
Kode ini di simpan di atas kode </head> :
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
Kode di bawah ini di simpan di bagian sidebar :
<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a
href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the
years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss
and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>
Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin tidak usah saya
terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link
milik sobat dapat di pasang pada kode-kode di atas.
Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka saya akan
mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah membuat sebuah menu
dtree buatan saya yang telah saya sertakan link-link di dalamnya : source code dari menu yang saya buat
seperti ini :
Kode ini di simpan di atas kode </head> :
<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css"
type="text/css" />
<script type="text/javascript"
src="http://amen24.googlepages.com/dtree.js"></script>
Kode di bawah ini di simpan di bagian sidebar :
<div class="dtree">
<p><a href="javascript: d.openAll();"><img
src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a
href="javascript: d.closeAll();"><img
src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');
d.add(1,0,'Free template & navigation')
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3
kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-
xml.html');
d.add(20,3,'Minima 3
ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-
column-xml.html');
d.add(30,3,'1st template
unik','http://template-unik.blogspot.com/2007/07/1st-template-
unik.html');
d.add(40,3,'Denim 3
kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-
xml.html');
d.add(50,3,'Blue lover 3
kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-
xml.html');
d.add(60,3,'Gray lover 3
kolom','http://template-unik.blogspot.com/2007/08/gray-lover-
template.html');
d.add(70,3,'UniQue template R
1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-
11.html');
d.add(80,3,'UniQue template R
1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-
12_16.html');
d.add(90,3,'UniQue template R
1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-
13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3
kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-
column.html');
d.add(120,3,'Scribe 3
kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-
classic.html');
d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue
menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-
menu.html');
d.add(20,5,'Horizontal blue menu
(2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-
2.html');
d.add(30,5,'Horizontal double line menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip
menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-
menu.html');
d.add(50,5,'Vertical green
menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-
menu.html');
d.add(60,5,'Vertical
transparent','http://css-lybrary.blogspot.com/2007/09/vertical-
transparent-menu.html');
d.add(70,5,'Vertical blue
menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-
menu.html');
d.add(80,5,'Vertical Yellow
menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-
menu.html');
d.add(90,5,'Vertical red
menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif',
'http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(30,2,'Bang
dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepag
es.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(60,2,'Pasar
Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepage
s.com/icon_user.gif');
d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?
id=rohman','menjual berbagai software serta ebook dengan harga super
murah, klik di
sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?
id=rohman','belajar membuat website itu sangatlah mudah, temukan
caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My
friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my
friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle
Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle
bin','','http://amen24.googlepages.com/trash.gif');
document.write(d);
//-->
</script>
</div>
Untuk melihat hasilnya, silahkan klik dulu di sini !
Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :
Jika sobat perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali, antara lain :
d.add(1,0
d.add(2,0
d.add(4,0
d.add(6,0
d.add(7,0
Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu dtree, jadi jika
sobat menginginkan menu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda
kemudian di belakang koma harus di susul dengan angka nol.
d.add(3,1
d.add(5,1
Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang pertama.
Akan tetapi angka di depan angka 1 (satu) adalah angka penentu bahwa menu ini akan menjadi cabang dari
kode --> d.add(1,0
d.add(10,5
d.add(20,5
d.add(30,5
d.add(40,5
d.add(50,5
d.add(60,5
Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu -->
d.add(5,1
begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu --> d.add(3,1
Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''), formasinya misal
seperti ini :
d.add(10,3,'','','','','');
Jika di jabarkan denga isi menu, seperti ini :
d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke
6');
isi ke 1 = adalah tulisan yang akan muncul terlihat langsung
isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1
isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan
tetapi ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.
isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image
isi ke 5 = adalah untuk alamat image icon yang mau di munculkan
isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5
Misal :
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif',
'http://amen24.googlepages.com/globe.gif');
Blogroll = tulisan yang kan muncul pada menu induk
http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau
dunculkan di samping tulisan Blogroll
http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau
dunculkan ketika tulisan Blogroll di klik (akan tetapi dalam hal ini
alamatnya sama, maka gambar icon seolah tidak mengalami perubahan)
dan masih banyak ciri-ciri lainnya yang dapat memudahkan sobat untuk mengnalinya.
Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending langsung bikin
menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan lupa untuk membuat Backup
data dari template sobat:
Untuk template Klasik
1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode HTML yang ada, lalu save untuk back up
5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :
<link rel="StyleSheet"
href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript"
src="http://amen24.googlepages.com/dtree.js"></script>
6. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):
<div class="dtree">
<p><a href="javascript: d.openAll();"><img
src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a>
| <a href="javascript: d.closeAll();"><img
src="http://amen24.googlepages.com/minus.gif"><b>Close
all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');
d.add(1,0,'Free template & navigation')
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3
kolom','http://template-unik.blogspot.com/2007/07/scribe-3-
column-xml.html');
d.add(20,3,'Minima 3
ckolom','http://template-unik.blogspot.com/2007/07/white-minima-
3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3
kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-
xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3
kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-
column.html');
d.add(120,3,'Scribe 3
kolom','http://template-unik.blogspot.com/2007/07/scribe-3-
column-classic.html');
d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-
lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-
lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-
lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red
menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-
menu.html');
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/glob
e.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(30,2,'Bang
dhika','http://bangdhika.blogspot.com/','','','http://24rohman.go
oglepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(4,0,'Software super murah
disini!','http://www.obralplus.com/?id=rohman','menjual berbagai
software serta ebook dengan harga super murah, klik di
sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di
sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat
website itu sangatlah mudah, temukan caranya.klik di
sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My
friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my
friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle
Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle
bin','','http://amen24.googlepages.com/trash.gif');
document.write(d);
//-->
</script>
</div>
7. Klik tombol Simpan Perubahan Template
8. Selesai.
Untuk Template Baru
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman
5. Copy paste kode berikut di atas kode </head>
<link rel="StyleSheet"
href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript"
src="http://amen24.googlepages.com/dtree.js"></script>
6. Klik tombol Simpan Template
7. Klik menu Elemen Halaman yang ada di sebelah atas monitor
8. Klik tulisan Tambahkan sebuah Elemen Halaman
9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)
<div class="dtree">
<p><a href="javascript: d.openAll();"><img
src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a>
| <a href="javascript: d.closeAll();"><img
src="http://amen24.googlepages.com/minus.gif"><b>Close
all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');
d.add(1,0,'Free template & navigation')
d.add(3,1,'free template','');
d.add(10,3,'Scribe 3
kolom','http://template-unik.blogspot.com/2007/07/scribe-3-
column-xml.html');
d.add(20,3,'Minima 3
ckolom','http://template-unik.blogspot.com/2007/07/white-minima-
3-column-xml.html');
d.add(30,3,'1st template unik','http://template-
unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3
kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-
xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-
unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-
unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-
unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-
unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-
unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3
kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-
column.html');
d.add(120,3,'Scribe 3
kolom','http://template-unik.blogspot.com/2007/07/scribe-3-
column-classic.html');
d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-
lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-
lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-
lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-
lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red
menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-
menu.html');
d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/glob
e.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-
unik.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(20,2,'Css Library','http://css-
library.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-
sasaq.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(30,2,'Bang
dhika','http://bangdhika.blogspot.com/','','','http://24rohman.go
oglepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-
elektronik.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-
link.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-
info.blogspot.com','','','http://24rohman.googlepages.com/
icon_user.gif');
d.add(4,0,'Software super murah
disini!','http://www.obralplus.com/?id=rohman','menjual berbagai
software serta ebook dengan harga super murah, klik di
sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di
sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat
website itu sangatlah mudah, temukan caranya.klik di
sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My
friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my
friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle
Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle
bin','','http://amen24.googlepages.com/trash.gif');
document.write(d);
//-->
</script>
</div>
11. Klik tombol Simpan
12. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag &
drop)
13. Klik tombol Simpan yang berada di sebelah atas
14. Selesai. Silahkan lihat hasilnya
Huuuuuhhh..... cape uy nulis tutorial ini, dua malem baru deh kelar..... tapi alhamdulillah, akhirnya bisa juga
di posting.
Selamat mencoba !
Tutorial HTML (2)
Melanjutkan posting yang terdahulu setelah terselang oleh beberapa artikel tentang blog tutorial maka kali
ini saya akan membahas tentang tutorial HTML kembali.Sebelum menginjak kepada topik bahasan ada
baiknya para sobat mengikuti bahasan kali ini dengan langsung memfraktekannya agar lebih cepat
mengerti. Caranya siapkan terlebih dahulu program notepadnya lalu tuliskan kode HTML seperti dibawah,
kemudian apabila telah selesai mempraktekan simpan file tersebut dengan extensi .htm (dot htm). Contoh
file : latihan.htm kemudian jalankan dengan internet explorer. silahkan tulis kode-kode berikut :
<html>
<head>
<title>latihan</title>
<body>
Tulis apa-apa yang saya terangkan di sini !
</body>
</html>
Kita langsung ke topik bahasan aja ya biar ga bosan.
Elemen dasar HTML
Ada beberapa elemen dasar HTML yaitu :
Elemen Blok Level
Elemen blok level yaitu tingkatan besarnya hurup yang akan di tampilkan pada browser. Elemen blok level
yang paling sering di gunakan adalah Heading (h1 sampai h6).Tag heading ini ini berupa <h1>...</h1>
sampai dengan <h6>...</h6>.
Contoh :
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<h3>Ini heading 3</h3>
<h4>Ini heading 4</h4>
<h5>Ini heading 5</h5>
<h6>Ini heading 6</h6>
Hasilnya akan seperti ini :
Ini heading 1
Ini heading 2
Ini heading 3
Ini heading 4
Ini heading 5
Ini heading 6
Sebenarnya ada cara lain untuk menampilkan berbagai ukuran hurup, yakni memakai tag <font
size="...">.....</font>.
Contoh :
<font size="1">Ini font size 1</font>
<font size="2">Ini font size 2</font>
<font size="3">Ini font size 3</font>
<font size="4">Ini font size 4</font>
<font size="5">Ini font size 5</font>
<font size="6">Ini font size 6</font>
<font size="7">Ini font size 7</font>
Hasil yang akan tampil seperti ini :
Ini font size 1
Ini font size 2
Ini font size 3
Ini font size 4
Ini font size 5
Ini font size 6
Ini font size 7
Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.
Untuk kesempatan kali ini, kaya nya udah dulu sobat soalnya belum mandi nih, mo berangkat kerja
hiii.....pantesan dari tadi ada yang bau aneh
Nantikan seri berikutnya!
Membuat Read More (2)
Update : saya telah membuat artikel yang lebih mudah untuk di praktekan dalam membuat read more,
silahkan baca di sini!
Bagi para sobat yang menggunakan template baru tentu saja akan mengalami kebingungan ketika
membaca tutorial terdahulu yang membahas tentang membuat menu Read more.. atau menu Baca
selengkapnya.., karena tutorial tersebut memang di peruntukan bagi para sobat yang menggunakan
template klasik. Nah bagi sobat yang menggunakan template baru dan ingin menggunakan menu Read
more.. juga silahkan ikuti langkah-langkah berikut :
Sign in seperti biasa di blogger dengan id milik sobat
Klik Setting
Klik Formatting
Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt area
kosong tersebut dengan kode di bawah ini :
<div class="fullpost">
</div>
Klik tombol yang bertuliskan Save Settings
Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung
muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu
mengingat kode tersebut.
Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :
Klik menu Dasboard
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Full Template
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi
kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk
mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan
lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah
selanjutnya
Tunggu beberapa saat ketika proses sedang berlangsung
Silahkan Sobat cari kode berikut pada kode template milik sobat :
<div class='post-body'>
Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :
<p><data:post.body/></p>
Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<a expr:href='data:post.url'>Read More......</a>
</b:if>
klik tombol bertuliskan Save Template
Selesai.
Cara Posting Artikel
Klik menu Posting
Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :
<div class="fullpost">
</div>
Tulisankan artikel yang ingin tampak pada blog sebelum kode :
<div class="fullpost">
Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
</div>
Klik tombol bertuliskan PUBLISH POST
Klik tulisan Open New Window untuk melihat hasil dari postingan kita, kemudian lihat apakah
hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali
langkah diatas
Selamat mencoba !
Tips Mengganti Background Blog
Beberapa hari yang lalu, sobat Uel menanyakan perihal bagaimana caranya untuk mengganti background
blog, dan tentunya saya akan coba membahasnya. Menurut saya, ada dua kemungkinan mengganti
background yaitu yang pertama adalah mengganti hanya warna background (latar belakang) saja, yang
kedua adalah mengganti background blog dengan menggunakan gambar atau image.
Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar belakang) yaitu
gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan kita menjadi
susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna atau image yang
terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya warna atau image
background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya akan membuat
pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya percuma saja kita
memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak menyita halaman langsung
saja pada topik utama. Karena kode template sangat bervariasi, yang akan saya jadikan contoh adalah
template asli blogger yaitu template minima.
Mengganti Warna Background
Untuk template minima klasik :
1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah
adalah kode yang harus di rubah) :
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :
body {
background:#E7E3E3;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.
Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan program photoshop, kapan-
kapan akan saya posting khusus tentang bagaimana cara mengetahui kode warna.
Untuk template minima baru :
1. sign in
2. Klik menu Layout
3. Klik menu Fon dan Warna
4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg
pertama sih langsung ini, jadi tidak usah di pilih lagi)
5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya
pada gambar di sebelah bawah
6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
7. Selesai.
Mudah bukan?
Mengganti Background Dengan Image
Hal yang pertama tentu saja sobat harus mempunyai file image. Image ini bisa berbentuk imaage biasa,
photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar,
saya anggap sobat sudah bisa melakukannya karena sudah saya bahas pada postingan terdahulu, atau
masih bingung? kalau iya, coba baca kembali di sini !
Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar, karena walaupun
ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan dalam jumlah yang sangat banyak
hingga memenuhi layar monitor, contoh saya sudah menguload sebuah gambar dengan ukuran yang kecil
saja, gambarnya seperti ini (ukuran gambar dalam ukuran aslinya) :
alamat gambarnya adalah
http://amen24.googlepages.com/pattern_096.gif
gambarnya seperti ini :
gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan
dalam jumlah yang sangat banyak.
Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !
Untuk template minima klasik :
1. Sign in
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di
tambahkan) :
body {
background:#fff url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.
Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar apabila background image
yang kita pakai gagal di loading oleh komputer pengunjung blog, maka yang bekerja duluan warna
background.
Untuk template minima baru :
1. Sign in
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di
tambahkan) :
body {
background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
8. Klik tombol Pratinjau untuk melihat perubahan
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10. Selesai.
Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat
contoh blog yang sudah saya pasang background dengan gambar yang saya contohkan di atas, silahkan
sobat klik di sini !
Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai gambar pattren di
sini.
Selamat mencoba !
Pasang Kalender di Blog
Sobat Guest452, itulah nama yang di kenalkan pada shoutbox. Beliau membredel shoutbox sebanyak tiga
kali berturut-turut dengan permintaan agar di postingkan cara membuat Kalender pada blog. Untuk
menghormati keinginan beliau ini, maka saya coba bahas tentang bagaimana cara pasang kalender di
dalam blog.
Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs
seperti ini sangatlah banyak, tentunya mereka berlomba dengan menampilkan kalender-kalender yang
menarik untuk di lihat. Agar tidak terlalu bingung mencarinya, saya berikan contoh satu saja yaitu
http://www.free-blog-content.com. Silahkan coba sobat kunjungi situs tersebut ! kalender yang di
sediakan sangat beragam. Silahkan klik kategori yang ada untuk memilih bentuk kalender yang sobat sukai,
kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad untuk nanti
keperluan di simpan di blog.
salah satu contoh gambar yang di sediakan seperti ini :
Untuk cara instalasi, silahkan ikuti langkah-langkah berikut !
Untuk Template klasik
1. Sig in di blogger dengan id sobat
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk
berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai
data untuk mengembalikannya ke semula
5. Copy kode yang tadi telah ada di notepad lalu paste pada tempat yang di inginkan, mau di sidebar
atau di manapun boleh
6. Klik tombol Simpan Perubahan Template
7. Selesai.
Untuk Template baru
1. Sign in di blogger dengan id sobat
2. Klik menu layout
3. Klik menu Elemen Halaman
4. Klik tulisan Tambahkan sebuah elemen halaman
5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
6. Copy kode yang tadi telah ada di notepad lalu paste pada kolom yang di sediakan
7. Klik tombol SIMPAN PERUBAHAN
8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN
9. Selesai.
Khusus bagi sobat yang muslim dan ingin kalendernya dalam bentuk kalender Hijriah, ada sumbangan
hasil karya yang bisa sobat pakai. Kalender ini di dapat dari http://mfr.jentayu.com. Bentuk kalendernya
seperti ini :
Free @ Hijriah
Bentuknya sangat menarik bukan? Jika sobat ingin memasang kalender ini, sobat tinggal menyinpan kode
berikut pada template sobat :
<script src="http://hijriah.jentayu.com/hijriah.php"> </script>
Untuk langkah-langkahnya sama persis seperti diatas, akan tetapi tentu yang di masukan adalah kode ini.
Atau bagi sobat yang memakai template baru, biar gampang silahkan klik saja tombol di bawah ini! nanti
akan secara otomatis kalendernya akan di masukan ke blog sobat. tapi ya musti sign in dulu yah :
Ada lagi yang lebih menarik, bukan hanya berfungsi sebagai kalender, akan tetapi berfungsi sebagai arsip. Pengunjung dapat dengan mudah membuka arsip postingan-postingan kita yang terdahulu melalui kalender tersebut. Apabila tertarik coba deh kunjungi blog nya mas anang di http://anangku.blogspot.com. Silahkan
baca triknya di sana, soalnya sudah kecapean nih ngetiknya, jadi tidak saya tuliskan sendiri.
Selamat mempercantik blognya dengan kalender.
Make a Magazine Style Drop Caps
Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan
Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika
saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa
indonesia, semoga dengan datangnya hari bahagia ini bangsa kita menjadi bangsa yang lebih dewasa, lebih
maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya
serius).
Saya rasa cukup deh ngomong seriusnya ya, soalnya kalau terus-terusan serius otak ku menjadi beku, jari-
jari ku menjadi kaku, lidah ku menjadi kelu, mulutku menjadi bisu, asa ku menjadi layu (keterusan deh).
Oke.... sobat, kita kembali ke.... blog tutorial tentunya. Sebelum mulai, saya mau ngadain kuiz dulu, tolong
jawab yang jujur ya, Apakah sobat pernah membaca koran atau surat kabar? jawabannya pasti sudah
pernah. benarkan? yeeeehh jawabannya ketebak deh , lalu apa hubungannya dengan tutorial blog?
ceritanya seperti ini, di dalam tulisan sebuah koran, hampir menjadi suatu kewajiban bahwa hurup awal dari
sebuah artikel di cetak lebih besar di banding dengan tulisan lainnya. Nah bagi sobat yang mempunyai
keinginan untuk membuat tulisan yang bergaya seperti tulisan dalam koran, maka teruslah membaca
sampai akhir postingan.
Untuk membuat huruf awal di cetak lebih besar, maka sobat perlu membubuhkan kode css ke dalam style
sheet nya. Karena template blogger masih terbagi dua yaitu klasik dan baru, maka untuk cara penempatan
kode pun ada sedikit berbeda. Untuk itu silahkan ikuti langkah-langkah berikut ini !
Untuk Template Klasik
1. Sigin di blogger
Tanggal Hijriah <script languag <data:content/ Tambah Kalender
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode template, lalu paste pada notepad kemudian save. Ini untuk berjaga-jaga
apabila terjadi kesalahan melakukan editting
5. Copy paste kode berikut di antara kode <style type='text/css'> dan kode </style> dan kalau sobat
merasa bingung, maka tempatkan saja di atas kode </style>
/* kode untuk hurup awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
6. Klik tombol Simpan Perubahan Template
7. Selesai
Untuk Template Baru
1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi
kesalahan dalam mengedit kode template
5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
]]></b:skin> , atau jika bingung simpan saja persis di atas kode
]]></b:skin>
/* kode untuk hurup awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
6. Klik Tombol Simpan Template
7. Selesai.
Langkah-langkah di atas merupakan langkah pertama, langkah selanjutnya yang harus sobat lakukan
adalah ketika melakukan posting harus pada posisi Edit HTML bukan pada Compose, nah simpanlah huruf
awal artikel pada kode berikut <span class="awal">hurup awal </span>. Setelah itu terserah sobat, mau
tetap pada posisi Edit HTML atau berpindah ke mode Compose tidak ada masalah. Contoh penulisan
artikelnya seperti ini :
<span class="awal">S</span>ebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari
ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak
bangsa tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat
semua selaku bagian dari bangsa indonesia, semoga dengan datangnya hari ini bangsa kita menjadi
bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih
baik. (tumben ngomongnya serius).
Maka hasilnya nanti akan seperti ini :
Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan
Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika
saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa
indonesia, semoga dengan datangnya hari ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju,
lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).
Bagaimana sobat, menarik bukan? bukan. ah ko gitu sih Agar sobat menjadi lebih faham tentang kode-
kode diatas tadi, maka akan saya bahas.
/* kode untuk hurup awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
.awal --> ini adalah penamaan saja, mau di ubah jadi begin, start, atau apa saja boleh, cuma jangan lupa
untuk membubuhkan tanda titik (dot) di awal tulisan.
float:left; --> ini adalah kode agar tulisan awal di letakan pada posisi kiri alias mepet ke kiri, jangan di ubah
kalau yang ini.
color: #000000; --> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika
sobat ingin warna yang lain maka silahkan saja di ganti.
background:#ffffff; --> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih,
jika sobat ingin warna yang lain silahkan di ganti sesuai keinginan.
line-height:80px; --> ini adalah kode untuk jarak baris, sebaiknya jangan di ganti.
padding-top:1px; --> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya, sebaiknya
jangan di ganti.
padding-right:5px; --> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya
sebesar 5 pixel, jika sobat berniat mengganti jaraknya, silahkan ganti nilainya saja.
font-family:times; --> ini adalah kode jenis hurup, yang di pakai adalah jenis times, jika tidak suka dengan
times bisa di ganti dengan yang lain, mau Georgia, Verdana, sans-serif atau yang lainnya silahkan saja.
font-size:100px; --> ini adalah kode untuk besarnya hurup, jika mau di ganti silahkan ganti nilainya saja.
Sudah jelaskah? nah jika sobat ingin berkreasi dengan yang namanya warna tapi tidak mengetahui
kodenya, jangan khawatir, kawan saya bang iwan sangat kreatif, yakni menuliskan kode warna sekalian
bentuk warnanya pada bagian footer blog beliau, jika sobat minat silahkan kunjungi blog beliau di
http://free-7.blogspot.com
satu lagi yang terakhir yaitu apabila sobat ingin melihat blog yang memakai sistem ini dengan warna lain,
silahkan sobat klik di sini !
Selamat berkreasi !
Who LInk To My Blog
S iapa yang memasang link ke blog saya ? pertanyaan ini sering terlontar dari para blogger baru yang
masih bingung bagaimana cara mengetahui ada yang pasang link milik blog mereka. Yupssss..... untuk
mengetahui siapakah yang pasang link milik kita, caranya sangatlah mudah yaitu sobat hanya tinggal
mendaftarkan blog nya di http://www.technorati.com. Dengan menjadi anggota situs mereka maka nanti
sobat akan mengetahui siapa saja kah yang pernah memasang link ke blog nya, caranya yaitu sobat hanya
tinggal menuliskan nama situs/blog ke dalam mesin pencari milik mereka. Sebagai contoh, silahkan sobat
kunjungi sebentar situs http://www.technorati.com, jika telah berada di situs tersebut silahkan tuliskan
URL blog saya ini yaitu http://kolom-tutorial.blogspot.com kemudian klik tombol Search maka secara
otomatis akan di perlihatkan berapa situs/blog yang pasang link ke blog ini. Tertarik? harus donk, dan saya
sarankan kepada sobat semua untuk mendaftarkan blognya di technorati.
Bagi sobat yang masih bingung tentang cara-cara mendaftar ke http://www.technorati.com, silahkan ikuti
langkah-langkah berikut ini :
1. Silahkan kunjungi http://www.technorati.com.
2. Klik tombol Join yang berada di sebelah kanan atas.
3. Isi beberapa form isian yang ada
o Member name --> Isi dengan nama yang sobat inginkan. Contoh : Rohman .
o Email Address --> Isi dengan alamat email sobat. Contoh : [email protected].
o Choose password --> isi dengan password yang sobat inginkan. Contoh : jayakatwang.
o Confirm password --> Isi kembali dengan pasword yang tadi di tuliskan. Contoh :
jayakatwang.
4. Beri tanda centang/ceklis pada kotak kecil di amping tulisan I agree to Tecnorati's Privacy Policy
and Terms of Service
5. Klik tombol Join
6. Setelah berada di halaman account sobat, coba alihkan perhatian ke layar sebelah kiri bawah
7. Klik tulisan Claim your blog
8. Tuliskan alamat blog sobat. Contoh : http://kolom-tutorial.blogspot.com
9. Klik tombol Begin claim, tunggu beberapa saat
10. Setelah muncul pilihan Quick Claim dan Post Claim, klik link Use Qick Claim
11. Isi Form Blogger Username dengan username blogger milik sobat
12. Isi Form Blogger Password dengan password blogger milik sobat
13. Klik tombol Quick Claim Now
14. Setelah ada ucapan Congratulations!, langkah selanjutnya adalah mengisi Edit Blog Settings
o Isi form Description dengan deskripsi blog sobat. Contoh : panduan praktis membuat
blog di blogger.com
o Pilih bahasa utama yang di pakai pada piliham language
o Isi Tags dengan keyword yang berhubungan dengan blog sobat. Contoh : Tutorial,
blogger, blog tutorial, dan lain-lain.
o Copy kode Favourite Buttons yang ingin di pasang di blog sobat.
15. Klik tombol Save Blog Info.
16. Selesai.
Langkah-langkah diatas hanya untuk daftar saja, untuk fungsi yang lainnya silahkan sobat cari sendiri di
dalam account sobat.
Nah sekarang jika sobat sudah daftar technorati, apabila ingin mengetahui siapa saja yang sudah pasang
link ke blog milik sobat cek saja di sana. Dan sebagai tambahan bagi blogger baru jangan merasa heran
apabila blog miliknya tiba-tiba saya kunjungi padahal alamat blognya belum di publikasikan, jawabnya satu
yaitu sobat pernah coba-coba buat link ke blog ini dan tercatat di technorati. mau coba buktikan, silahkan
klik link banner di bawah ini, sobat akan melihat blog mana saja yang memasang link ke blog ini :