Panduan membuat Blog di Blogspot

1. Apa itu Blog ?

Blog ( singkatan dari Web log) adalah situs yang sifatnya lebih pribadi, yaitu lebih berat kepada penggambaran dari si pembuat blog itu sendiri.

Blog dibuat oleh para desainer penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan , jadi bagi kita-kita yang masih bingung dengan bahasa pemrograman untuk membuat sebuah website tidak jadi persoalan

. Apabila anda sudah bisa membuat sebuah account email di internet, maka dalam membuat blog pun saya yakin anda bisa.

2. Cara membuat blog

Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, oleh karena itu silahkan daftarkan diri anda terlebih dahulu di free blog provider (penyedia hosting/domain blog gratis). Free blog provider sangatlah banyak terdapat di internet dan beberapa yang populer saat ini adalah http://www.blogger.com, http://www.wordpress.com serta http://blogsome.com.

Dalam kesempatan kali ini akan mengulas tentang cara pembuatan blog di http://www.blogger.com, Silahkan anda klik gambar dibawah untuk mendaftar.

Setelah anda berada pada situs blogger.com, anda akan melihat gambar seperti gambar di atas. Silahkan lakukan langkah-langkah berikut ini :

Klik tanda anak panah yang bertuliskan " CIPTAKAN BLOG ANDA "
Isilah Alamat Email dengan alamat email anda (tentunya yang valid)
Isikan kembali alamat email anda tadi pada form Ketik ulang alamat email
Tuliskan password yang anda inginkan pada form Masukkan sebuah password
Isikan kembali password anda tadi pada form Keyik ulang sandi (password)
Isi Nama Tampilan dengan nama yang ingin anda tampilkan
Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda tik/cek pada kotak di pinggir tulisan Saya menerima Persyaratan dan Layanan.
Klik gambar anak panah yang bertuliskan "LANJUTKAN"
Tuliskan judul blog yang anda inginkan (nanti bisa di rubah lagi) pada form Judul Blog
Tulis nama situs anda pada form Alamat Blog (URL)
Tulislah tulisan verifikasi yang ditampilkan pada form Verifikasi kata, jika sudah selesai klik gambar panah yang bertuliskan "LANJUTKAN".
Pilihlah gambar (template) yang anda inginkan (nanti bisa di rubah lagi), kemudian klik gambar anak panah yang bertuliskan "LANJUTKAN"
Setelah keluar tulisan "Blog Anda telah di iptakan". Klik gambar panah bertuliskan "MULAI POSTING". Silahkan anda tuliskan semau anda, jika sudah selesai klik tombol "MEMPUBLISKAN POSTING".

3. Isi ( Content ) blog :

Bagi para pemula, biasanya mereka bingung setelah daftar membuat blog apa yang harus di isi( diposting ) dalam sebuah blog. Isi ( content ) dari sebuah blog tentu saja terserah kepadasi pemilik blog itu sendiri, apakah mau di isi puisi, perjalan hidup, teknik, ataupun apa saja. Nah di sini saya menyarankan, isilah blog anda tersebut dengan minat ataupun hoby serta keahlian anda sendiri, karena tentu saja di luar sana banyak sekali orang yang tentunya sama minat dan hoby nya dengan anda, sehingga mereka akan tertarik untuk membaca tulisan-tulisan anda.

Cara Setting Blog

Bagi para sobat yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan agar blog kita bisa di kenali mesin pencari semisal Google,yahoo, Msn serta teman-temannya yang lain. Bila belum tahu apa yang harus di setting, silahkan ikuti langkah-langkahnya :

Silahkan sobat Login ke blogger.com dengan user name dan password milik sobat
Klik judul blog yang mau di setting ( jika sobat sudah mempunyai beberapa blog)
Klik Pengaturan, trus klik Dasar. Beberapa form yang harus di isi pada menu Dasar :

Judul ⇒ isi dengan judul blog sobat. Contoh : Blogspot Tutorial

Uraian ⇒ isi dengan deskripsi blog sobat. Contoh : disini kita akan berbagi pengalaman dan pengetahuan seputar Blog

Tambahkan blog Anda ke daftar kami? ⇒ pilih ya agar setiap posting kita selalu masuk di daftar Blogger.com.

Biarkan mesin pencari menemukan blog Anda? ⇒ pilih ya

Tampilkan Editing Cepat di Blog Anda? ⇒ pilih Ya

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

Konten Dewasa? ⇒ Pilih tidak. Kalau pilih ya berarti blog anda di anggap blog untuk dewasa (semacam blog porno)

Tampilkan Mode Compose untuk semua blog Anda? ⇒ pilih Ya

Aktifkan transliterasi? ⇒ pilih Tidak, jika anda ingin ada button untuk mengubah biasa ke hurup hindi (India), pilih ya jika sebaliknya)

Klik tombol Simpan Pengaturan . Selesai

4. Klik Publikasi untuk mengatur menu Publikasi :

Alamat Blog*Spot ⇒ isi dengan nama blog sobat. Contoh : kolom-tutorial. Biasanya alamat yang tercantum adalah langsung alamat blog anda, jadi jangan di ubah aja.

Klik tombolSimpan pengaturan. Selesai

5. Klik Format untuk mengatur menu format :

Tampilkan ⇒ pilih angka posting yang ingin anda tampilkan. Missal : Tampilkan : 6 posting, berarti posting yang akan tampil di halaman blog sobat adalah sebanyak enam posting. Pilih posting (jangan hari) pada menu pulldown.

Format Header Tanggal ⇒ pilih model tanggal/bulan yang anda sukai, Format tanggal/bulan ini akan selalu muncul diatas postingan kita.

Format tanggal Index Arsip ⇒ pilih model untuk peng-arsip-an yang anda sukai.

Format Timestamp ⇒ Pilih bentuk waktu yang anda sukai.

Zona Waktu ⇒ Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-+7.00]Asia/Jakarta.

Bahasa ⇒ Pilih bahasa yang di inginkan.

Tampilkan Field judul ⇒ Pilih ya

atau tidakpun tidak apa-apa

Tampilkan kolom link ⇒ pilih ya, tapi seandainya pilih tidak juga tidak apa-apa.

Aktifkan perataan float ⇒ pilih ya, tapi seandainya mau pilih tidak juga tidak apa-apa

Klik tombol Simpan Pengaturan. Selesai

6. Klik Komentar Untuk mengatur menu komentar :

Komentar ⇒ pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung

Siapa yang Bisa Berkomentar ? ⇒ Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.

Default Komentar untuk Posting ⇒ pilih Posting baru memiliki komentar.

Link balik ⇒ Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.

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

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

Tampilkan komentar dalam sebuah window popup? ⇒ pilih Ya. Supaya ketika di klik oleh pengunjung, halaman blog anda tidak menghilang/tertimpa halaman komntar.

Aktifkan moderasi komentar? ⇒ pilih Tidak (sebaiknya).

Tampilkan verifikasi kata untuk komentar? ⇒ pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.

Tampilkan gambar profil dalam komentar? ⇒ pilih ya. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.

Email Pemberitahuan Komentar ⇒ isi dg alamat email anda, ini di maksudkan agar setiap ada yang berkomentar pada artikel anda, anda dapat kiriman email dari blogger.com sebagai pemberitahuan.

Klik tombol Simpan Pengaturan. Selesai

7. Klik Arsipkan Untuk mengatur menu Arsipkan :

Frekuensi Arsip ⇒ pilih Bulanan.

Aktifkan Halaman Posting? ⇒ pilih ya.

Klik tombol Simpan Pengaturan . Selesai.

8. Klik Fedd Situs untuk mengatur menu feed situs :

Izinkan Feed Blog ⇒ pilih Penuh.

Posting URL Pengubahan Arah Feed ⇒ di isi dengan alamat feed penggati semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja.

Footer Feed Posting ⇒ Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.

Klik tombol Simpan Perubahan. Selesai.

Memilih Template

Bagi sobat yang sudah melakukan beberapa setting-an seperti posting terdahulu, langkah selanjutnya yang perlu sobat lakukan adalah memilih template. Sekilas tentang template

Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti banner diatas, background warna putih, kolom-kolom di samping kanan, serta semua yang sobat lihat sekarang adalah salah satu bentuk dari desain template. Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang. Hmmm.. kayanya cukup deh pembahasan tentang apa itu template, keburu bosan kalau lama-lama….Sekarang langsung aja ke topik utama, yaitu langkah-langkah pemilihan template di blogger.com :

Silahkan sobat login terlebih dahulu seperti biasa dengan memakai user name milik anda ( jangan milik saya….emang nya sampeyan mau jadi hacker ya

Klik "Tata Letak" (bila sobat menggunakan blogger baru) atau klik "Template" (bila sobat menggunakan template classic).

Klik "Pick New Template", silahkan sobat pilih template yang sobat suka. Sebelum memutuskan dalam memilih "template" ini, sebaiknya anda lihat terlebih dahulu satu persatu contoh layout yang di sediakan dengan cara meng klik tulisan "preview template". Jika di rasa sudah menemukan yang paling sobat sukai, silahkan klik tulisan "Save template" yang ada di sebelah kanan atas, selesai. :

Mungkin sobat pernah mengunjungi beberapa blog di internet yang menggunakan blogger.com (blogspot), akan tetapi template yang di gunakan tidak ada dalam pilihan ketika memilih template. Ini ada kemungkinan bahwa template yang di gunakan adalah template buatan bukan dari blogger sendiri. Di internet banyak sekali situs-situs yang memberikan template secara gratis untuk di pakai di Blogger (blogspot), Jika ingin melihat-lihat berbagai template buatan bukan dari blogger.com silahkan klik di sini. T

Mengatur Huruf dan Warna

Untuk para blogger baru, sobat akan menikmati fasilitas baru dari blogger.com, yaitu sobat bisa mengatur jenis font (hurup) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan : (ini khusus untuk template "minima")

Page Background color --> pengaturan warna background blog. Silahkan klik warna yang ada di sebelah kanan yang di sukai
Text Color --> pengaturan warna hurup dari posting-an
Link Color --> pengaturan warna hurup yang di link
Blog Title Color --> pengaturan warna hurup judul Blog
Blog Description Color --> pengaturan warna hurup deskripsi blog
Post Title Color --> pengaturan warna hurup judul posting-an
Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah
Sidebar Title Color --> pengaturan warna hurup judul yang anda di sidebar (kolom samping)
Sidebar Title Color --> pengaturan warna hurup yang ada di sidebar(kolom samping)
Visited link Color --> pengaturan warna hurup link ketika pengunjung mengarahkannya ke tulisan yang mengandung link
Text Font --> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup yang ada di sidebar
Sidebar Title Font --> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal postingan
Blog Title Font --> pengaturan jenis hurup Judul blog
Blog Description Font --> Pengaturan jenis hurup dekripsi blog
Post Footer Font --> pengaturan jenis hurup footer (contoh : posted by )
Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai

Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.

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:

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.
Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).
Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda.
Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.
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/>

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

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 :

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 :

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

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

Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru. Untuk template klasik langkahnya yaitu :

Login ke blogger.com dg id Anda
Klik Template
Di bagian sidebar blog Anda bagian archives, ada kode html sbb:

&<BloggerArchives> 

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

</BloggerArchives>

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>

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

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

login dulu, tentunya dengan id anda
klik LAYOUT
Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive
Klik Edit pada kotak Blog Archive tadi
Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek
Klik Save Changes
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')"size=1
name=menu><option value=0 selected>tulisan disini yang akan muncul
duluan</OPTION>

<option value="isi dengan addres yang ingin di tuju">tulisan
di sini yang akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik saya :

<form><select
name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>

<option>- Blog Tutorial -</option>

<option value="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html">Membuat
Blog</option>

<option
value="http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html">setting
Blog</option>

<option
value="http://kolom-tutorial.blogspot.com/2007/04/memilih-template.html">Memilih
Template</option>

<option
value="http://kolom-tutorial.blogspot.com/2007/04/mengatur-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 !

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 :

Login seperti biasa dengan id anda
Klik Posts
Klik New Post (bila sebelumnya anda telah mempunyai posting-an)
Klik toolbar yang bergambar seperti ini
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

Beri tanda ceklis di samping tulisan Use this layout every time bila anda menginginkan setiap upload gambar settingnya seperti semula
Tekan tombol Browse, lalu masukan gambar dari komputer anda yang ingin di upload.
Klik Add another image bila gambar yang ingin di upload lebih dari satu gambar
Klik tombol UPLOAD IMAGE, tunggu beberapa saat sampai proses upload selesai
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:

Setelah upload gambar, klik menu Dasboard
Klik menu Edit Profile
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]
Klik Save Profile, maka foto anda yang cantik dan ganteng sudah terpampang di blognya dan bisa dilihat oleh seluruh dunia
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 :

Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.
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 :

Isi kotak yang ada tulisan tersebut dengan alamat situs yang anda inginkan, misalkan : http://www.resepbisnis.com/?id=rohman
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 :

Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu yang ada pada toolbar.
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)

Sign in di blogger dengan id anda
Klik menu TEMPLATE
Klik Edit HTML
Klik Edit
Klik Find (on this page)… --> untuk mempercepat pencarian

Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah Links para sahabat, klik Find
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>

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.

Membuat Link (2)

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

Login di blogger dengan ID anda
Klik menu Layout
Klik Page Elements
Klik Add a Page Element
Klik ADD TO BLOG pada menu Link List
Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog saya Adalah “ Link partner” atau silahkan terserah anda
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.
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
Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http;//kolom-tutorial.blogspot.com
Tulis nama atau tulisan yang ingin muncul pada link yang anda buat pada form New site Name. contoh : Blog Tutorial.
Klik Add Link, jika link yang anda buat lebih dari satu. Silahkan isi semua form sesuai dengan langkah di atas.
Klik SAVE CHANGES bila sudah selesai
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 ) .
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 :

Upload gambar yang anda miliki ke hosting tempat menyimpan gambar, contoh http://www.photobucket.com.
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 : tulisan berjalan

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">&ltFONT FACE="georgia"
color="White"><B><MARQUEE BGCOLOR="RED"
width="70%" scrollamount="3"
behavior="alternate">

</MARQUEE></b></FONT></div>

hasilnya :

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse 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 :

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

Selamat ber eksperimen

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 :

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

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.

Yahoo ! Messenger Emoticons

Untuk yang ingin menghiasi posting-annya dengan berbagai ekspresi dari yahoo, disini 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...

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 :

Silahkan kunjungi situs http://www.clocklink.com
Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?
Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi
Klik tombol yang bertuliskan Accept
Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
Set ukuran jam yang anda sukai di samping tulisan size
Copy kode HTML yang di berikan pada notepad
Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
Selesai

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 :

selamat mencoba.

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 :

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.
Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda
Pada kolom yang berjudul Style, klik menu appearance.
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.
Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start
Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda
Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan close situs tersebut.
Selesai

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.
Untuk blogger dengan template klasik :

Log in terlebih dahulu ke blogger.com dengan id anda
Klik menu Template
Klik Edit HTML
Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan
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.
Klik tombol Preview untuk melihat perubahan yang kita buat.
Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
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 :

Silahkan Login dengan id anda
Klik menu Layout
Klik Page Element
Klik Add a Page Element
Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa saja yang anda suka
Copy paste kode HTML shoutbox anda di dalam form Content
Klik tombol Save Changes
Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
Tekan tombol Save
Selesai

Selamat mencoba !
Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :

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

· Volume 2 of the E-Business Encyclopedia Set

· Volume 3 of the E-Business Encyclopedia Set

· Historical Stuff

Anda ingin mendapatkan semua produk diatas? Jika ya silahkan klik disini atau klik Banner di bawah ini :

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 :

Silahkan buka situs www.slide.com
Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut
Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)
Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan
Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat
Langkah selanjutnya adalah melakukan pembuatan animasi
Klik style, untuk memilih gaya dari animasi
klik skin, untuk memilih bingkai animasi
klik Size untuk memilih ukuran
Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan
klik tombol Upload untuk melakukan proses upload foto
Jika proses upload selesai, klik tombolSave
Copy kode HTML yang di berikan, lalu paste pada program notepad
Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser
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 :

Silahkan kunjungi situs http://www.sitemeter.com.
klik tulisan Sign Up untuk melakukan pendaftaran
klik tombol bertuliskan Next
Klik tombol Next lagi
Isi semua tabel yang ada lalu klik tombol Next lagi
Isi lagi tabel yang ada, lalu klik tombol Next lagi
klik tombol Next lagi
klik tombol Next lagi ( cape dech next..next melulu )
Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan
Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com
Silahkan login dengan id anda
Bila sudah login, Klik menu Manager
Klik Menu Meter Style untuk memilih gaya dari site meter anda
Pilih style yang anda sukai, kemudian klik tombol Select
Klik menu HTML Code
Klik tulisan Adding site Meter to a Blogger.com Site
copy semua kode HTML yang di berikan lalu paste pada Notepad
Klik menu Logout untuk keluar dari situs tersebut
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 :

Sign in di blogger dengan id anda
Klik menu TEMPLATE
Klik Edit HTML
Klik Edit (yang ada pada bar menu browser anda)
Klik Find (on this page)... ⇒ untuk mempercepat pencarian
Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find
Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi
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 :

Login di blogger dengan ID anda
Klik menu layout
Klik Elemen Halaman
Klik Tambahkan sebuah Elemen Halaman
Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript
Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)
Copy & paste kode Site meter pada kolom isian
Klik tombol Simpan Perubahan
Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)
Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan
Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN
Selesai

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

Selamat mencoba.

Cara Pasang Musik Pada Blog

Untuk memasang musik di blog, kita bisa memanfaatkan situs penyedia musik gratisan yang banyak bertebaran di internet, yang penting kita jeli untuk mencarinya. Pada intinya ada tiga jenis situs penyedia musik yaitu :

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

Situs tersebut tidak menyediakan lagu, tapi kita harus upload lagu dari komputer kita
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 :

Silahkan kunjungi www.song2play.com
Masukan judul lagu yang anda inginkan pada search engine yang tersedia. Contoh : Hotel California. Atau menuliskan nama penyanyi atau grup bandnya. Contoh the Eagle
Jika judul lagu belum muncul, biasanya ada tulisan Click here to get more Result. klik aja tulisan tersebut
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
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
Show Song Title artinya pada panel navigasi akan di munculkan judul lagu yang di muat. Jika tidak mau muncul ya hilangkan saja tanda centangnya
Copy seluruh kode HTML yang di sediakan pada text area, paste pada notepad. Silahkan close window situs tersebut
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 :

Silahkan buka situs www.tunefeed.com
Klik kotak di sebelah tulisan widget Color, pilih warna panel navigasi yang sobat sukai
Klik tombol yang ada tulisan Click here to share your music
Klik tombol yang bertuliskan Add Music or Photos
Masukan file foto atau pun lagu yang sobat miliki
Klik tombol upload
Sambil menunggu proses upload, sobat isi data-data diri sobat pada kolom yang di sediakan
Tunggu sampai proses upload selesai
jika proses upload selesai, sobat akan di minta untuk mngecek email di berikan tadi
silahkan buka email dari www.tunefeed.com bila sudah sampai
Klik link ntuk melakukan aktivasi keanggotaan, nah dengan mengklik link tadi otomatis sobat sudah berada pada halaman acount sobat
Klik tulisan Share This Tunefeed
Pilih volume yang diinginkan pada menu dropdown di samping tulisan Select Volume
Pilih mode player, mau autoplay atau tidak pada menu dropdown di samping tulisan auto-play, sebaiknya pilih No
Copy seluruh kode yang di berikan pada text area kemudian paste di notepad
Klik tulisan Log Out untuk keluar dari halaman account sobat
Silahkan close window browser sobat
Tugas selanjutnya yaitu memasukan kode HTML yang sudah diberikan ke dalam blog. Untuk caranya sudah saya bahas pada tulisan di atas
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 :

Silahkan buka alamat http://cooltext.com
Lalu klik tulisan Design a Logo
Klik gambar contoh logo yang sobat sukai
Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
Klik tombol yang bertuliskan Render Logo Design
Tunggu beberapa saat ketika proses pembuatan logo berlangsung
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
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 :

Silahkan buka alamat http://www.photobucket.com,
Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
Silahkan Sign In dengan Id sobat
Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
Klin tombol yang bertuliskan Upload
Tunggu beberapa saat ketika proses upload berlangsung
Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
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 :

Ok sobat, selamat menikmati hasil karyanya

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

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

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

Sign in di blogger
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode HTML yang ada, lalu save untuk back up
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>

Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):

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

d = new dTree('d');

d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');

d.add(1,0,'Free template & navigation')

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');

document.write(d);

//-->
</script>

</div>

Klik tombol Simpan Perubahan Template
Selesai.

· Untuk Template Baru

Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman
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>

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

d = new dTree('d');

//-->
</script>

</div>

Klik tombol Simpan
Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag & drop)
Klik tombol Simpan yang berada di sebelah atas
Selesai. Silahkan lihat hasilnya

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 !

User Online Status

English Version

How many people is online at your blog? you know that or don't? If you don't know how many people is online at your blog, you can use a free tracker to know it. That is much site provide this service. Once of them is www.histats.com. If you use them tool, you can know how many people online at your blog, how many people was visited to your blog, and any function. This is once of example :

How to get it? please following the steps :

Please visit www.histats.com.
If you was on the histats site, click Register at the top tab.
Content the form with your information, such as email, password, your blog url and etc.
Click Continue button.
Choose the style of histats counter, click Choose a counter from this category.
Please mark the radio button beside the counter style you wanted.
Click Continue button at the bottom of page.
Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today, Page views today, User online, Total visitors, and total page views. Choose empty if you want not to display them.
Click Continue button.
Wait a moment, your counter is updating.
Until the process is done, copy your counter code and paste to the Notepad or other text editor. Save into your computer.
Logout and close your internet browser.
Done. Now you has have a counter code to add at your blog.

Next step is add your counter code to your blog, please following the steps :

Login to blogger with your ID.
After entering the dasboard page , click Layout.
Click at Page Element tab. See the picture below :

Click at Add a Page element.
After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

Open your Counter code, copy and then paste into available column.
Click
Done. Please see the result.

Now you have a Counter, and you will know how many people online at your blog.

If you don't like with this counter, you can get at the other site, this is several site provide the same service :

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

See you next time at my new tips. Happy blogging.

Versi Bahasa Indonesia

Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.

Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.

Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :

Silahkan buka www.geovisite.com
Klik tulisan Register yang berada di bawah gambar Geo counter Flash
Tulis alamat email sobat pada kotak kosong di samping tulisan Email
Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com
Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24
Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy
Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)
Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet
Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada, belum di akui bo)
Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik
Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to service the equipment of electronic
Klik tombol yang berlogo disket
Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad
Silahkan close window browser sobat
langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di sini untuk membacanya
Selesai.

Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.

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

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

Pasang Image pada judul Artikel

Image. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. Memang segala sesuatu kalau berlebihan akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....

Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.

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

· Langkah pertama

Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.

· Langkah kedua

langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.

· Langkah ketiga

langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif

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

<img src="URL
image">

Sehingga kodenya akan jadi seperti ini :

<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">

dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :

tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :

<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0">

sehingga image yang tadi akan berubah jadi seperti ini :

Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.

· Langkah keempat

langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :

Untuk yang memakai template klasik :

Sign in ke blogger dengan id sobat
Klik menu Template
Klik menu Edit HTML
Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template
Cari kode berikut pada kode HTML sobat :

<$BlogItemTitle$>

cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada bar menu browser lalu klik Find kemudian tuliskan kode diatas tadi lalu klik tombol Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode <$BlogItemTitle$> adalah merupakan kode untuk menampilkan judul postingan, maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Saya ambil contoh kode image di simpan sebelum tulisan judul :

<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45"
border="0">&nbsp;&nbsp;<$BlogItemTitle$>

pemasangn kode    adalah untuk memberi jarak spasi antara image dengan tulisan judul, sebab jika tidak menambahkan kode   maka image dengan tulisan akan bersatu walaupun kode image dengan kode judul di tulis ada jarak spasinya.

Klik tombol Preview untuk melihat perubahan yang dilakukan
Jika sudah OK, klik tombol Save Settings
Selesai

Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.

Untuk yang memakai template baru :

Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :

<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0">

kode image tersebut tag nya harus ditutup dengan tag penutup :

</img>

Sehingga kode image jadi bertambah menjadi :

<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0"></img>

Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :

Sign in ke blogger dengan id sobat
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Full Template
Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting
Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya
Tunggu beberapa saat sampai proses selesai
Cari kode berikut pada template sobat :

<a
expr:href='data:post.url'><data:post.title/></a>

<b:else/>

Sisipkan kode gambar yang kita miliki diantara kode :

<a
expr:href='data:post.url'>


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

<b:else/>

Sehingga bila di satukan kodenya menjadi :

<a
expr:href='data:post.url'>


<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"
width="45" hight="45" border="0"></img>
&nbsp;&nbsp;<data:post.title/></a>

<b:else/>

Klik tombol PREVIEW untuk melihat perubahan
bila sudah OK, klik tombol SAVE TEMPLATE
Selesai

Pasang Icon Yahoo ! Messenger

Menanggapi pertanyaan sobat takdir yang di ajukan melalui shoutbox beberapa waktu yang lalu, beliau menanyakan tentang bagaimana cara menampilkan status online Yahoo ! Messenger pada halaman blog. Barangkali ada di antara para sobat juga berkeinginan yang sama namun belum mengetahui caranya,ada baiknya menyimak beberapa penjelasan yang akan saya utarakan.

Sebenarnya jika saya pikir-pikir, kayanya agak merasa malu menerangkan ini, mungkin bagi para sobat yang sudah beberapa kali mengunjungi blog ini hampir atau bahkan belum pernah melihat Icon Yahoo ! Messenger saya menyala tanda sedang online chatting. Memang benar saya sangat jarang sekali ber chatting ria di dunia maya, paling-paling kalau ada perlu dan itupun janjian terlebih dahulu baru saya chatting (lho ko jadi cerita...kelamaan), oh iya lupa

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

Style ID 1 Style ID 2 Style ID 3 Style ID 4 Style ID 5

masing-masing gambar mempunyai URL adddress sendiri yaitu :

http://opi.yahoo.com/online?u=YahooID&m=g&t=1
Untuk Style ID 1

http://opi.yahoo.com/online?u=YahooID&m=g&t=2
Untuk Style ID 2

http://opi.yahoo.com/online?u=YahooID&m=g&t=3
Untuk Style ID 3

http://opi.yahoo.com/online?u=YahooID&m=g&t=4
Untuk Style ID 4

http://opi.yahoo.com/online?u=YahooID&m=g&t=5
Untuk Style ID 5

itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita harus menambah kode yaitu :

<img src="URL
address">

Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan seperti ini :

<img
src="http://opi.yahoo.com/online?u=

YahooID&m=g&t=1"
border="0">

Untuk Style ID 1

<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0">
Untuk Style ID 2

<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0">
Untuk Style ID 3

<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0">
Untuk Style ID 4

<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0">
Untuk Style ID 5

Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung.

Ada beberapa pilihan yang bisa kita terapkan ketika pengunjung mengklik icon YM kita, yaitu :

Kirim Instant Messenger.

Kodenya sebagai berikut :

<a href="ymsgr:sendIM?YOURID">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

<a href="ymsgr:sendIM?YOURID

"><img
src="http://opi.yahoo.com/online?u=

YourID&m=g&t=StyleID" border="0"></a>

Kirim Instant Messenger dengan pesan

Kodenya sebagai berikut :

<a
href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

<a href="ymsgr:sendIM?YOURID

&m=YOUR+MESSAGE"><img
src="http://opi.yahoo.com/online?u=

YourID&m=g&t=StyleID" border="0"></a>

Menambahkan link ke chat room favorit

Kodenya sebagai berikut :

<a
href="ymsgr:addfriend?

YOURID">Masukan ke daftar teman sobat</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

<a
href="ymsgr:addfriend?

YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Bagaimana jelaskan? biar lebih jelas lagi saya beri contoh.

Karena email saya adalah amn_tea@yahoo.co.id maka id saya adalah amn_tea, Sehingga kode untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :

<a href="ymsgr:sendIM?amn_tea

"><img
src="http://opi.yahoo.com/online?u=

amn_tea&m=g&t=2" border="0"></a>

dan yang akan tampil seperti ini :

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

Mudah-mudahan jelas. Selamat mencoba !

Ada Video di artikel

Memuat video diantara artikel, selain untuk memperindah artikel itu sendiri, juga video ini bisa berfungsi sebagai media yang efektif dalam menyampaikan sesuatu kepada para pengunjung. Terlebih apabila anda merupakan seorang pebisnis yang dengan video ini dapat lebih memperjelas tujuan anda di banding dengan hanya sebuah tulisan. dibawah ini adalah contoh sederhana dari video , silahkan anda klik tombol icon Play untuk mengaftifkannya.

Untuk membuat sebuah video, kita bisa menggunakan situs layanan pembuatan video, salah satunya adalah http://www.youtube.com. Ikuti langkah-langkah berikut ini :

Untuk daftar silahkan kunjungi http://www.youtube.com
Setelah berada di situs tersebut, klik tulisan Sign Up yang berada pada layar bagian atas
Isi semua data diri anda pada form yang di sediakan, jangan lupa beri tanda tik/cek pada kotak di samping tulisan »» Sign me up for the "Broadcast Yourself" email - I agree to the terms of use and privacy policy. lalu klik tombol Sign Up
Setelah berhasil, anda diminta untuk veryfikasi, silahkan cek email yang anda daftarkan tadi untuk melakukan veryfikasi
Jika email dari youtube.com sudah masuk, silahkan buka lalu klik tulisan Confirm your email addres
Dengan meng klik tulisan tadi, secara otomatis anda sudah masuk kedalam halaman account anda dan siap untuk upload video
Klik tulisan Upload Video yang berada pada layar sebelah atas
Isi form yang di sediakan
Klik tombol bertuliskan Continue Uploading
Klik tombol Browse, masukan file video yang ingin anda masukan
Beri tanda tik/cek pada radio button, public »» jika video anda bisa dilihat oleh umum. Private »» Jika video anda bersifat pribadi yang hanya bisa di lihat oleh orang yang anda tunjuk
Klik tombol Upload Video, tunggu beberapa saat sampai proses upload selesai
Setelah proses upload selesai, anda tinggal mengcopy kode HTML yang di berikan. lalu paste pada Notepad
Silahkan klik Log Out untuk keluar dari situs tersebut
Selesai. anda sudah mempunyai video yang bisa di simpan pada artikel anda

Untuk memasukan kode video yang telah anda copy tadi, caranya yaitu anda tinggal posting artikel seperti biasa lalu sisipkan kode tersebut pada tempat yang anda inginkan. Cuma saat copy n' paste kode tersebut posisi posting harus pada Edit HTML jangan pada posisi Compose. Jika sudah selesai memasukan artikel, Tinggal klik Publish dan video anda siap di lihat oleh para pengunjung blog anda.

Daftar Mybloglog

Bagi para sobat yang baru membuat blog, pada kesempatan kali ini saya mau menambahkan perbendaharaan blog tools nya, yakni pasang MyBloglog.

Apa itu Mybloglog ?

Bingung kalau harus mendifinisikan apa itu mybloglog

biar kita tidak sama-sama bingung, silahkan alihkan perhatian sobat ke bagian sidebar sebelah kanan layar monitor, di bawah tulisan Tamu terdapat photo yang ganteng-ganteng serta cantik-cantik. Nah itu bukanlah photo saya ataupun my family, tapi itu merupakan tamu yang pernah berkunjung ke blog ini dan beliau-beliau inipun sama-sama anggota dari mybloglog, atau barangkali photo sobat sudah terpampang disana? selamat kalau iya, karena sobat akan mulai jadi orang terkenal. Ko bisa? Ya iiyya...lah, karena tercatat tak kurang dari lima puluh pengunjung setiap harinya yang mampir kemari dan selalu melihat photo sobat, keren kan! makanya sering-sering main kemari biar cepat terkenal..he..he..(wuyyy...udah dong ngelanturnya

).

Bagaimana sobat sudah dapat gambaran? saya yakin sudah. Atau belum? kalau belum bolehlah saya yang mendefinisikan, tapi tentunya dengan versi saya sendiri. Mybloglog adalah suatu situs yang menyediakan layanan untuk melacak (tracking) para pengunjung blog/website dimana apabila pengunjung tersebut merupakan anggota situs mybloglog maka dapat secara otomatis terdeteksi dan di cantumkan dalam menu Recent Reader nya (pembaca terbaru).

Apa manfaat bergabung di mybloglog?

Ada beberapa manfaat kita bergabung dengan mybloglog yaitu :

· Untuk menambah traffic ke blog kita

Dengan adanya photo kita terpampang di blog orang lain, maka ada kemungkinan banyak yang akan berkunjung ke blog milik kita, sekurang-kurangnya dari pemilik blog itu sendiri.

· Mengetahui link mana yang banyak di klik

Di mybloglog ada fasilitas tracking untuk memberi peringkat terhadap link-link yang kita pasang, link mana yang banyak di klik pengunjung, maka peringkat link itu semakin baik.

· Mempererat tali silaturahmi antar pemilik blog

Tak bisa di pungkiri dengan adanya otomatisasi photo kita terpampang tanpa harus menuliskan pesan seperti halnya buku tamu, ini tentunya akan lebih memungkinkan saling kunjung mengunjungi antar pemilik blog.

Dan tentu saja masih ada manfaat-manfaat yang lainnya yang bisa di dapat, akan tetapi untuk menghemat pembahasan hanya itu saja dulu. Nah sekarang bagaimana cara bergabung dengan mybloglog, silahkan ikuti langkah-langkah berikut ini :

Silahkan buka situs http://www.mybloglog.com
Isi form yang telah di sediakan di bawah tulisan Sign Up Now
Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Amen24
Email --> Isi dengan email sobat ( yang valid)
Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe
Blog/Site URL --> Isi dengan alamat blog sobat. Contoh : http://rubrik-elektronik.blogspot.com
Klik Tombol Register
Terlihat beberapa form yang harus diisi lagi
Blog/Site Title --> Isi dengan judul blog sobat
Blog platporm --> pilih blogspot.com
Dibagian bawah ada dua radio buttun, silahkan pilih yang sobat sukai
Klik tombol yang bertuliskan Complete Registration
Klik tulisan Go to Your page
Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas
Isi semua data diri sobat (tidak saya sebutkan satu2 karena terlalu banyak)
Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile
Klik tulisam MY HOME untuk kembali ke home
Klik tombol yang bertuliskan Get Widget
Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna background heading
Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading
Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link
Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link
Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom
Tulis ukuran lebar yang sesuai dengan sidebar blog sobat (kalau mau di tempatkan di sidebar) contoh : 160
Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh
Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-Size juga boleh
Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah)
Disamping tulisan Title, tulis kata yang sobat suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja
Di bagian bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu
Kembali ke bagian atas
Klik tombol bertuliskan Preview and Get Code
Copy seluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad
Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account sobat
Silahkan close window situs tersebut.

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

Menu Navigasi dengan CSS

Update : Tutorial ini khusus pagi anda yang masih memakai template klasik

Hallo sobat, bagaimana kabarnya hari ini? mudah-mudahan sehat selalu ya, biar baca ni artikel semangat, ga loyo gitoe.

Ok, biar ga terlalu garing sedikit demi sedikit kita mulai memasuki topik bahasan, yoi kali ini saya mau membahas tentang cara membuat menu navigasi menggunakan CSS. Untuk melihat demo Navigasi yang akan saya terangkan, silahkan klik tombol di bawah ini:

Bagaimana sobat, sudah mendapat gambaran apa yang akan saya sampaikan? pasti jawabnya iya. Dengan adanya menu navigasi seperti di atas, tentunya akan lebih menarik perhatian para pengunjung blog kita di banding dengan hanya menu biasa, dan selain itu pula menu ini lebih memperjelas bahwa tulisan atau tombol tersebut merupakan sebuah tombol navigasi yang bisa di klik oleh para pengunjung.

Sekarang timbul pertanyaan bagaimana cara membuatnya? bagi yang belum tahu dan berminat untuk mengetahuinya silahkan sobat terus membaca sampai akhir artikel. Untuk membuat menu seperti yang terlihat di atas tadi, kita perlu menambahkan beberapa kode tambahan pada blog kita.

Seperti pada contoh tadi di atas, ada dua jenis menu navigasi yang akan saya bahas yakni yang tidak menggunakan Image backround serta yang menggunakan Image backround, silahkan simak langkah-langkah berikut ini :

· buatlah dua buah tombol navigasi yang bentuknya sama persis, akan tetapi berbeda warna, ini di maksudkan agar ketika tombol mouse menunjuk tombol tersebut tombolnya akan berubah warna. Bagaimana cara membuat tombol? Tentu saja untuk membuat sebuah tombol, kita bisa menggunakan berbagai program komputer semisal adobe photoshop, coreldraw ataupun berbagai program lainnya.

· Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini.

Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

· Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :

Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.

.unyil{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.unyil:hover{
background:#97A4B9;
text-decoration:none;
}

copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :

<a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span
class="hide"> | </span>

<a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span
class="hide"> | </span>

<a class="unyil" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span
class="hide"> | </span>

<a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span
class="hide"> | </span>

biar tidak telalu bingung, sedikit saya uraikan :

.unyil --> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

text-align:left; --> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

display:block; --> kata block artinya di tampilkan di layar monitor.

width:180px; --> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

height:20px; --> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

background:#f0f0f0; --> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

padding:3px 4px 3px 8px; --> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

margin:7px 10px 7px 0; --> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

.unyil:hover{ --> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

background:#97A4B9; --> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

text-decoration:none; --> text dekorasi jangan di rubah.

Bagaimana sudah jelas? mudah-mudahan jelas.

Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :

Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.

.cuplis{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif) top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.cuplis:hover{ background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;

text-decoration:none;
}

· copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :

<a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide">
| </span>

<a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span
class="hide"> | </span>

<a class="cuplis" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span
class="hide"> | </span>

<a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span
class="hide"> | </span>

Yang membedakan hanya pemasangan URL image saja, yang lainnya sama persis. Kata cuplis adalah untuk membedakan dengan perintah menu navigasi unyil, jadi kalau dua efek ini mau besamaan ada dalam satu blog, ya harus berbeda.

Selamat mencoba !

Template baru VS Template Klasik

Sudah dua hari ini saya tidak menelorkan tulisan baru ( emangnya ayam pake bertelor segala ) mungkin buat sobat yang rajin datang ke sini merasa bosan karena tulisannya itu-itu melulu. OK, biar ga basi langsung aja.Menanggapi banyaknya pertanyaan yang di ajukan melalui shoutbox beberapa waktu lalu seputar masalah mengganti template, maka kali ini saya akan membahasnya agar bagi sobat yang masih bingung dapat mempunyai gambaran seputar template ini.

Sebenarnya tentang masalah template ini sudah saya posting, jika mau iseng-iseng baca silahkan klik di sini, tapi biar lebih jelas akan saya bahas lebih dalam.

Mungkin ada diantara sobat semua masih bingung dengan yang namanya template klasik sama template baru. Di blogger.com saat ini template yang di gunakan ada dua pilihan yaitu template klasik dan baru. Bagaimana caranya kita membedakan apakah kita menggunakan template klasik atau template baru? Ada beberapa ciri untuk mengenal apakah yang kita pakai template baru atau klasik, diantaranya yaitu :

· Template baru :

Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :
Manage : Posts, Settings, Layout
Jika kita klik menu Layout, akan ada menu seperti ini :
Page Elements | Fonts and Colors | Edit HTML | Pick New Template
Jika kita klik menu Edit HTML maka akan muncul beberapa ciri khas, yaitu :
Tulisan --> download Full Template
Tombol bertuliskan --> Browse..., Upload
Ada kotak kecil di samping tulisan Expand Widget Templates
Tombol bertuliskan ---> CLEAR EDITS, PREVIEW, SAVE TEMPLATE
Dibagian bawah terdapat tulisan :

• Revert to Classic Template
• View Classic Template

Itu tadi sedikit ciri apabila kita memakai template baru.

Apabila memakai template klasik, cirinya adalah :

Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :
Manage : Posts, Settings, Template
Jika kita klik menu Template, akan ada menu seperti ini :
Edit HTML | Pick New | customize Design | Adsense
Jika klik menu Edit HTML akan muncul beberapa ciri :
terdapat tulisan --> Change the Blogger Navbar
Tombol bertuliskan ---> Save Template Changes, Preview, Clear

Itu tadi beberapa ciri jika kita memakai template klasik.

Dari kedua contoh ciri diatas, tentu saja kita dapat mengetahui template apa yang sekarang kita pakai.
Apa kelebihan atau kekurangan dari kedua template tersebut?
Template baru

Terdapat menu : Page Elements
Dengan menu ini kita dapat dengan mudah menambahkan element tanpa harus mengerti bahasa HTML. Element-element yang bisa ditambahkan bisa berupa Newsreel, Video Bar, List, Links List, Picture, Text, HTML/JavaScript, Feed, Labels, Logo, Profile, Blog Archive, serta Page Header.
Sistem Drag & Drop
Dengan sistem ini kita dapat dengan mudah memindahkan setiap element yang telah kita buat dimana saja yang kita sukai.
Terdapat menu : Fonts and Colors
Dengan menu ini kita dapat dengan mudah merubah warna serta bentuk huruf tanpa harus repot-repot merubah style sheet dan tentunya tidak memerlukan kemampuan berbahasa HTML

Itu tadi beberapa keuntungan memakai template baru, dan kekurangannya yaitu :

bagi sobat yang suka otak-atik kode HTML, pada template ini agak susah tuk di otak-atik (khusus buat pemula seperti saya, lain halnya bila sobat sudah expert).

Sekarang apa kelebihan dari template klasik :

Kode HTML sangat mudah untuk di otak-atik, jadi bagi sobat yg suka bermain dengan HTML sangat cocok memakai template ini.

Kekurangan :

Tidak tersedia menu Page Elements, sehingga bagi sobat yang masih bingung dengan HTML akan menemui kesulitan.
Tidak tersedianya menu : Fonts and Colors, sehingga menyulitkan dalam mengatur Font serta warna hurup.

Nah itu tadi beberapa keunggulan serta kekurangan dari kedua template, silahkan pikirkan mana yang mau sobat pilih.

Cara Migrasi Template

Setelah menimbang-nimbang, tentunya sobat tertarik dengan salah satu diantara keduanya. jika ternyata sobat tertarik untuk bermigrasi(pindah) template dan belum mengtahui caranya silahkan ikuti langkah berikut:

Dari Template baru ke template klasik :

Sign in di blogger dengan id sobat
Klik menu Layout
Klik menu Edit HTML
Klik tulisan yang ada di bagian bawah layar yaitu : Revert to Classic Template
Bila muncul kotak dialog, klik OK aja
Selesai, sobat memasuki dunia baru yaitu template klasik.

Dari template klasik ke template baru :

Sign in di blogger dengan id sobat
Klik menu Template
Klik menu Customize Design
Klik tombol bertuliskan UPGRADE YOUR TEMPLATE
Pilih template yang di sukai, lalu klik tombol SAVE TEMPLATE
Selesai. sobat sudah memasuki alam baru, yaitu Template Baru.

Cara mengganti Template

Ada dua kemungkinan, yaitu mengganti template dengan buatan blogger dan mengganti template bukan buatan blogger.

· Ganti template dengan template buatan blogger

Untuk template Klasik, ikuti langkah-langkah berikut :

Sign in di blogger dengan id sobat
Klik menu Template
Klik menu Pick New
Pilih template mana yang paling cocok, lalu klik tombol bertuliskan Use This Template yang berada di bawah gambar template
Selesai. Blog sobat sudah punya wajah baru.

Untuk template baru, ikuti langkah-langkah berikut :

Sign in di blogger dengan id sobat
Klik menu Layout
Klik menu Pick New Template
Pilih template mana yang sobat sukai, lalu klik tombol SAVE TEMPLATE
Selesai.Blog sobat sudah mempunyai wajah baru

Ada yang perlu di ketahui yaitu jika kita mengganti template dengan template buatan blogger sendiri, maka data-data semisal link, shoutbox, image dan lain-lain. Data ini tidak akan hilang. Lain halnya apabila kita mengganti dengan template buatan bukan blogger.com, maka semua data-data yang di sebutkan tadi akan menghilang (kecuali postingan artikel tidak akan hilang) dan tentunya harus di input ulang, dan judulnya Caaaaapppppee deeeeehhhhh .....

· Ganti template dengan template bukan buatan blogger

Hal pertama yang harus di ingat adalah semua data-data yang ada seperti yang saya sebutkan tadi, maka apabila kita mengganti template dengan template bukan buatan blogger sendiri, kita harus mengcopy dulu seluruh data tersebut, dan kemudian nanti setelah kita sudah mengganti template, data-data tadi kita input ulang.

· Template baru

Sign in di blogger dengan id sobat
Klik menu Layout
Klik menu page Elements
Klik tulisan Edit pada masing-masing Element, lalu copy seluruh datanya
Jika semua data di pastikan sudah di copy, maka langkah selanjutnya adalah klik menu edit HTML
Klik tulisan --> download Full Template, save dalam komputer. Ini di maksudkan apabila nanti sobat berubah pikiran dan ingin kembali lagi, sobat masih punya data template tersebut
Beri tanda centang dulu pada kotak kecil disamping tulisan Expand Widget Template
Klik tombol Browse..., lalu masukan data Template baru yang ingin di masukan
Klik Tombol Upload
Biasanya keluar peringatan bahwa data-data yang kita punya seperti link, shoutbox dan lain-lain akan ter delete (terhapus)
Klik tombol --> Confirm & Save, dengan asumsi bahwa sobat sudah mengcopy data-data tadi
Selesai. Blog sobat sudah mempunyai wajah baru.

· Template Klasik

Sign in di blogger dengan id sobat
Klik menu Template
Klik menu Edit HTML
Tandai (highligh/blok) semua data template yang ada, sorot pada tulisan yang sudah di tandai, klik kanan Copy,lalu paste pada program notepad, save dan beri judul dengan nama yg mudah di ingat. Ini dimaksudkan untuk backup data untuk nanti input ulang data-data seperti link,shoutbox dll
Delete semua data template yang lama
Copy seluruh data template yang baru yang mau di masukan, lalu paste pada kotak data template yang sudah di delete tadi
Klik tombol Preview, lihat perubahan yang ada (biasanya preview ini agak berbeda dengan tampilan blog aslinya), Jika sudah cocok, klik tombol Save Template Changes
Selesai. blog sobat sudah mempunyai wajah baru.

Bagaimana sobat? mudah-mudahan keterangan diatas dapat menjawab semua pertanyaan mengenai ganti template.

Selamat mencari dan menemukan template yang sobat suka.

Membuat Penggalan Artikel

Menanggapi pertanyaan sobat tanggo yang menanyakan perihal penggalan artikel dari rubrik elektronik yang katanya selalu muncul di atas posting artikel, maka dari itu kali ini saya akan membahas cara pembuatannya, barangkali ada dari sobat-sobat lainnya sama-sama tertarik atau kalau tidak tertarik, ya sekedar pengetahuan saja juga tidak ada ruginya kan.

Sebenarnya penggalan artikel di atas adalah bukanlah suatu tulisan hasil posting, akan tetapi hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya yakni artikel yang terdapat pada blog rubrik elektronik. Maksud pemasangan penggalan kalimat itu sebenarnya untuk membawa para pembaca ke blog saya yang satu lagi yaitu Rubrik Elektronik tadi, soalnya itu blog kan ada iklan google adsense nya, nah barangkali saja ada diantara para sobat sekalian yang mau berbaik hati meng klik iklan google adsense milik saya

cuma hiks.... hiks

masih dikit yang mau klik iklan aku

tapi ga apa-apa berarti belum rezekinya

(berarti ga ikhlas donk bikin tutorialnya kalo gitu

/ weith..... maaf bukan begitu maksud saya, jadi ga enak hati nih

).

Untuk membuat penggalan artikel seperti diatas, langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, nah ujung dari kalimat tersebut kita buatkan link. Agar tidak terlalu membingungkan saya beri contoh. Misalkan address dari artikel yang mau saya pasang linknya adalah sebagai berikut :

http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html

Isi dari penggalan kalimatnya adalah sebagai berikut :

Electronic Shopping

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them?

Maka kode yang kita buat adalah sebagai berikut :

<span
style="color:#FD8403"><font size="6">Electronic
Shopping</font></span>

<hr width="100%" align="left">
<br/>

Many Indonesians were still believing that products that in marketed
overseas his quality was far more better than products that in marketed in the
country. Around them many that were deliberate went overseas only a to shop.
You some among them? <a
href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read
more...</b></a>

<hr width="90%" align="left">
<br/>

Kode tersebut hasilnya akan seperti ini :

Electronic Shopping

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...

Biar lebih faham, sedikit saya uraikan :

<span
style="color:#FD8403"> ..... </span>

--> ini adalah kode untuk merubah warna text. #FD8403 merupakan kode warna orange.

<font
size="6">.......</font><

--> ini adalah kode untuk menampilkan huruf dalam ukuran font 6 (ukuran besar)

<hr width="100%"
align="left">

--> ini adalah kode untuk membuat garis sebesar 100% dari lebarnya halaman blog yang dimulai dari tepi kiri.
<br/> --> kode untuk membuat suatu kalimat pindah ke bawah sebesar satu line break.

Mudah-mudahan keterangan diatas dapat di pahami. Setelah kita membuat kode seperti yang di terangkan diatas, tugas selanjutnya yaitu memasukan kode tersebut kedalam blog. Tentunya ada perbedaan cara memasukan kode antara template klasik dengan template baru. Silahkan ikuti langkah-langkahnya :

Untuk template klasik :

· Sign in di blogger dengan id sobat

· Klik menu Template

· Klik menu Edit HTML

· Copy seluruh kode HTML yang ada, kemudian save di komputer sobat. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template

· Cari kode seperti di bawah ini :

<div
class="post"><a name="<$BlogItemNumber$>"></a>

<BlogItemTitle>

Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi :

<span
style="color:#FD8403"><font size="6">Electronic
Shopping</font></span>

<hr width="100%" align="left">
<br/>

Many Indonesians were still believing that products that in marketed
overseas his quality was far more better than products that in marketed in the
country. Around them many that were deliberate went overseas only a to shop.
You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read
more...</b></a>

<hr width="90%" align="left">
<br/>

<div class="post"><a
name="<$BlogItemNumber$>"></a>

<BlogItemTitle>

· Klik tombol Preview untuk melihat perubahan yang baru di lakukan

· Apabila sudah OK, klik tombol save Template Changes

· Selesai.

Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel.

Untuk template baru :

· Sign In di blogger dengan id sobat

· Klik menu Layout

· Klik menu Page Elements

· Klik Add a Page Element

· Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript

· Copy paste kode penggalan artikel yang telah kita buat tadi

· Klik tombol SAVE CHANGES

· Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post (di drag & drop)

· Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi

· Bila sudah OK, klik tombol SAVE

· Selesai.

Membuat Link Untuk Download

Agar tidak terlalu bingung, penyedia layanan ini salah satunya adalah www.SnapDrive.net. dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini :

Silahkan klik di sini untuk menuju http://www.SnapDrive.net
Klik tulisan Register
Isi formulir yang disediakan dengan data diri sobat

Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat. contoh : Unyil
Password --> isi dengan password yang di inginkan. contoh : pakraden
Confirm password --> isi kembali dengan password yang tadi di tuliskan.contoh : pakraden
Email address --> isi dengan alamat email sobat, tentunya yang masih valid. contoh : amn_tea@yahoo.co.id
First name -->isi dengan nama depan sobat
Last name --> isi dengan nama belakang sobat
Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia
Postcode --> isi dengan kode post daerah sobat
Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)
Date of birth --> pilih tanggal kelahiran sobat
Preferances isi dengan tulisan yang tertera di situ

Klik tombol Register
Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi
Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum
Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi, klik saja link tersebut
Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih
Klik tombol OK
Silahkan Login dengan username serta password yang tadi di tuliskan saat register
Setelah berada di halaman account sobat, klik tulisan Upload
Klik tombol Add Files
Pilih file yang ada dikomputer sobat yang mau di upload
Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung
Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya
Klik tulisan HTML Code
Copy kode yang di berikan lalu paste pada program notepad
Klik tulisan Logout untuk keluar dari situs tersebut
Silahkan tutup layar browser sobat

Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini :

<a
href="http://www.snapdrive.net/files/452250/billing%20internet.zip">

billing internet.zip</a>

Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download, maka kode diatas menjadi seperti di bawah ini :

<a
href="http://www.snapdrive.net/files/452250/billing%20internet.zip">

download</a>

Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :
<br/><br/>

<a
href="http://www.snapdrive.net/files/452250/billing%20internet.zip">

download</a>

Maka nanti di blog kita akan tampil seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :

download

Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya!

Menu Dropdown dengan JavaScript

Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dropdown menggunakan JavaScript.

Biar agak seru, silahkan klik tombol di bawah untuk melihat demo :

Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba :

Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya.

Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.

Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :

· Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya. sebagai contoh lihat gambar tombol di bawah ini :

· Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com. Untuk cara upload gambar ke situs ini sudah saya terangkan pada postingan terdahulu, jika ingin baca - baca lagi silahkan klik di sini. Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

· Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :

Sign in di blogger.com dengan id sobat
Klik menu LayOut
Klik menu Edit HTML
Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
Tunggu beberapa saat sampai proses selesai
Simpan kode berikut di bawah kode <title><data:blog.pageTitle/></title>

<script>

var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}

</script>

Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode ]]></b:skin>, lalu simpan kode berkut di atasnya

.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.hide{
display: none;
}

.show{
display: block;
}

a{cursor: hand}

Klik tombol SAVE TEMPLATE

Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; --> angka "90" artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi "80" atau berapa saja.

Klik menu Page Elements
Klik tulisan Add a Page Element
Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript
Masukan kode berikut :

<a
class="ogah" onclick="showHide('ogahku1')">Menu utama
1</a>

<div id="ogahku1" class="hide">

<a href="#" class="ogahniye">Link 1 di
sini</a>>

<a href="#" class="ogahniye">Link 2 di
sini</a>

<a href="#" class="ogahniye">Link 3 di
sini</a>

<a href="#" class="ogahniye">Link 4 di
sini</a>

</div>

<a class="ogah"
onclick="showHide('ogahku2')">Menu utama 2 </a>

<div id="ogahku2" class="hide">

<a href="#" class="ogahniye">Link 1 di
sini</a>

<a href="#" class="ogahniye">Link 2 di
sini</a>

<a href="#" class="ogahniye">Link 3 di
sini</a>

<a href="#" class="ogahniye">Link 4 di
sini</a>

</div>

<a class="ogah"
onclick="showHide('ogahku3')">Menu utama 3 </a>

<div id="ogahku3" class="hide">

<a href="#" class="ogahniye">Link 1 di
sini</a>

<a href="#" class="ogahniye">Link 2 di
sini</a>

<a href="#" class="ogahniye">Link 3 di
sini</a>

<a href="#" class="ogahniye">Link 4 di
sini</a>

</div>

<a class="ogah"
onclick="showHide('ogahku4')">Menu utama 4 </a>

<div id="ogahku4" class="hide">

<a href="#" class="ogahniye">Link 1 di
sini</a>

<a href="#" class="ogahniye">Link 2 di
sini</a>

<a href="#" class="ogahniye">Link 3 di
sini</a>

<a href="#" class="ogahniye">Link 4 di
sini</a>

</div>

Klik tombol SAVE CHANGES
Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )
Klik tombol SAVE
Selesai

Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang.

Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.

Mudah-mudahan dapat di mengerti. Selamat mencoba !

Random Banner Header

Menjawab pertanyaan mba Ati beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton seperti blog saya ini

, tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian

.

Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :

· Langkah pertama

Langkah pertama yang harus dilakukan tentunya sobat wajib membuat beberapa banner, bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan sobat. Untuk membuatnya sobat bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya. Jika sobat ingin berkonsultasi mengenai program adobe photoshop, silahkan kunujungi http://jaloee.blogspot.com miliknya kang jaloee, beliau ini pakarnya kalau masalah photoshop.

· langkah kedua

Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh www.photobucket.com untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik di sini.

Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk di masukan kedalam kode/script yang akan saya berikan.

· Langkah ketiga

Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :

<script
type="text/javascript">

var
banner= new Array()

banner[0]="bannerURL0"
banner[1]="bannerURL1"
banner[2]="bannerURL2"
banner[3]="bannerURL3"
banner[4]="bannerURL4"
banner[5]="bannerURL5"
banner[6]="bannerURL6"
banner[7]="bannerURL7"
banner[8]="bannerURL8"
banner[9]="bannerURL9"

var
random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header
{");

document.write('
background:url("' + banner[random] + '") no-repeat top left;');

document.write("
}");

document.write("</style>");
</script>

Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang sobat inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.

Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif

http://i162.photobucket.com/albums/t253/rohman24/banner5.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif

dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :

Contoh script dari banner-banner ini adalah :

<script
type="text/javascript">

var
banner= new Array()

banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"

var
random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header
{");

document.write('
background:url("' + banner[random] + '") no-repeat top left;');

document.write("
}");

document.write("</style>");
</script>

Jika script diatas tulisannya terlalu kecil silahkan klik di sini untuk melihat tulisan yang normal.

Untuk caranya silahkan ikuti langkah-langkah berikut ini.

Untuk Template klasik

Sig in di blogger dengan id sobat
Klik menu Template
Klik menu Edit HTML
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
Copy kode berikut ini lalu paste di bawah kode <div id='header'> (biasanya)

<script type="text/javascript">

var
banner= new Array()

var
random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header
{");

document.write('
background:url("' + banner[random] + '") no-repeat top left;');

document.write("
}");

document.write("</style>");
</script>

· Klik tombol Save Template Changes

· Selesai.

Untuk Template baru

Sign in di blogger dengan id sobat
Klik menu layout
Klik menu Page Elements
Klik tulisan Add a Page Element
Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript
Copy paste kode berikut kedalamnya

<script
type="text/javascript">

var
banner= new Array()

var
random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header
{");

document.write('
background:url("' + banner[random] + '") no-repeat top left;');

document.write("
}");

document.write("</style>");
</script>

Klik tombol SAVE CHANGES
Selesai.

Sekedar tambahan (padahal masih banyak

), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.

Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :

@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :

@media all {
#header {
width:660px;
height:150px;
margin:0 auto 10px;
border:1px solid #ccc;
}

Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.

Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat di sini

Selamat mencoba !!!!

Cara membuat kategori (label)

Menanggapi beberapa pertanyaan dari para sobat yang di ajukan baik melalui shoutbox, kotak komentar dan bahkan ada yang melalui yahoo messenger menyoal tentang bagaimana cara membuat kategori dari artiekl-artikel yang telah di posting. Memang betul, tentu dengan adanya pengkategorian atau pengelompokan artikel yang telah di posting oleh pemilik blog dapat lebih mempermudah bagi para pembaca untuk memilih artikel mana yang ingin dibaca.

Di blogger.com fasilitas ini sebenarnya sudah di sediakan, akan tetapi walaupun fasilitas tersebut telah tersedia tentu saja jika kita tidak mengetahui cara menggunakannya akan menjadi tidak berguna. Untuk membuat kategori, di blogger.com di kenal dengan istilah Label. Dengan adanya fasilitas ini kita sebagai pemilik blog hanya tinggal mengisi kotak label yang di sedikan pada setiap posting artikel, sangat simpel dan sederhana.

Agar tidak membingungkan, silahkan sobat lihat pada akhir postingan artikel ini. Disana ada tulisan seperti ini : Labels : Blog tutorial, membuat label. Nah berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Blog tutorial dan kategori membuat label. Untuk melihat fungsi dari label ini silahkan sobat klik label yang bertuliskan Blog tutorial, maka secara otomatis seluruh postingan yang saya beri label Blog tutorial akan di tampilkan dan siap untuk di baca oleh pengunjung.

Bagaimana cara membuat label?

Untuk membuat sebuah kategori atau label, sobat hanya tinggal mengisi kotak kosong di samping tulisan Label untuk postingan ini : (karena sekarang blogger sudah ada yang berbahasa indonesia) yang berada di bawah kotak tempat membuat artikel. Isi kotak tersebut dengan kategori yang kira-kiracocok untuk postingan yang kita buat. Contoh : liburan musim dingin. Satu postingan tidak hanya terpatok hanya pada satu kategori saja, akan tetapi satu postingan bisa mempunyai beberapa kategori. untuk membuatnya tinggal di pisahkan dengan tanda koma ( , )saja, misal untuk postingan artikel blog ini ada yang ber label Blog tutorial, blog tools, aksesori blog, karena postingan tersebut memang cocok dan masuk kedalam ketiga kategori tersebut.

Apakah kategori (label) bisa di tampilkan di sidebar?

Untuk sobat para pengguna template baru, Label (kategori) bisa di tampilkan di sidebar, dan biasanya element label ini sudah tersedia ketika baru memasang template. Jika element label belum tersidia, sobat bisa membuatnya sendiri, silahkan ikuti langkah - langkah berikut ini :

Sig in di blogger dengan id sobat
Klik menu Layout
Klik menu Elemen Halaman
Klik tulisan Tambahkan sebuah Elemen Halaman
Klik tombol yang bertuliskan TAMBAHKAN KE BLOG yang berada di bawah tulisan Label
Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya
Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A --> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)
Klik tombol yang bertuliskan SIMPAN PERUBAHAN
Selesai.

Sedikit pengumumam, karena blogger sekarang sudah ada yang berbahasa indonesia, maka mulai sekarang dalam memandu mengikuti dengan memakai yang berbahasa indonesia.

Selamat mencoba !

Pasang Link di New Blogger Template

Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan.

Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu :

http://rubrik-elektronik.blogspot.com
http://www.rohman24.co.nr
http://jaya-example.blogspot.com
http://user-online.blogspot.com
http://amen24.googlepages.com/koded%27treemenu

Untuk membuat kode link yang arah vertikal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
<br/>
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
<br/>
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
<br/>
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
<br/>
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Hasilnya akan seperti ini :

Rubrik Elektronik
Free blog template
Rotating banner blog
User Online status
Kode menu d tree

kode <br/> yang saya tuliskan di atas merupakan kode atau tag untuk memindahkan link ataupun tulisan berpindah satu line break kebawah. Jika sobat tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya akan berdempetan kepinggir. satu kode/tag <br/> adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal <br/><br/>, atau <br/><br/><br/>, dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Untuk membuat kode link yang arah horizontal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
 
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
 
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
 
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
 
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Maka hasilnya akan seperti ini :

Rubrik Elektronik Free blog template Rotating banner blog User Online status Kode menu d tree

kode   yang saya tuliskan di atas merupakan kode untuk memindahkan link ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap berdempetan. satu kode   adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal    , atau     , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira jawabannya melalui contoh saja.

Ambil contoh blog yang ingin di link adalah seperti berikut ini :

http://sncepuspiritualsciencequantum.blogspot.com --> Abu Amin
http://adry-fx.blogspot.com --> Adryy-fx
http://belati.blogspot.com --> Belati
http://benhardleroy.blogspot.com --> Benhard Journey
http://melileagroup.blogspot.com --> Capunk
http://catatanpojok.blogspot.com --> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini :

<b>:::A:::</b>
<br/>
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b>:::B:::</b>
<br/>
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b>:::C:::</b>
<br/>
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

:::A:::
Abu Amin
Adryy-fx

:::B:::
Belati
Benhard Journey

:::C:::
Capunk
Catatan pojok

Untuk membuat link yang arah horizontal seperti ini :

<b>:::A:::</b>
  
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
  
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
  

<b>:::B:::</b>
  
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
  
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
  

<b>:::C:::</b>
  
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
  
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

maka hasilnya akan seperti ini :

:::A::: Abu Amin Adryy-fx :::B::: Belati Benhard Journey :::C::: Capunk Catatan pojok

Pemakaian tag <b>...</b> adalah agar karakter yang ada diantara tag tersebut menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa yang ada di keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat lebih menarik.

Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan.

contoh untuk arah vertikal :

<b><< A >></b>
<br/>
• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b><< B >></b>
<br/>
• <a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b><< C >></b>
<br/>
• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

<< A >>
• Abu Amin
• Adryy-fx

<< B >>
• Belati
• Benhard Journey

<< C >>
• Capunk
• Catatan pojok

Untuk arah horizontal :

<b><< A >></b>
 
• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
  
• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
  

<b><< B >></b>
 
• <a href="http://belati.blogspot.com" target="_blank">Belati</a>
  
• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
  

<b><< C >></b>
 
• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
  
• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Hasilnya akan seperti ini :

<< A >> • Abu Amin • Adryy-fx << B >> • Belati • Benhard Journey << C >> • Capunk • Catatan pojok

Bagaimana lebih menarik bukan?

Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan link, ini bisa di lakukan dengan hanya mengganti kode &ampbull; diatas dengan kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam bentuk bulatan dan mempunyai alamat gambar sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif

Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar, yaitu :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif">

hasilnya akan seperti ini :

Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya misalkan jadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="12" hight="12" border="0">

hasilnya akan seperti ini :

Nah, tugas sobat hanya mengganti kode &ampbull; diatas dengan kode ini :

misalkan :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="10" hight="10" border="0"> <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

Maka hasilnya akan seperti ini :

Abu Amin

Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan terdahulu, silahkan baca saja ya.

Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode   di antara gambar link tadi. misal saya punya alamat gambar butto seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif

http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif

Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog milik saya yang lain :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif" border="0"></a>
  
<a href="http://www.rohman24.co.nr" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif" border="0"></a>

Hasilnya akan seperti ini :

jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa sisipkam kode   agar ada jarak antara buttonnya.

Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode link-link yang telah saya contohkan diatas ke dalam blog.

Yoi...sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah berikut berlaku bagi yang memakai template baru alias new blogger template :

Sig in di blogger dengan id sobat
Klik menu Layout
Klik menu Elemen Halaman
Klik tulisan Tambahkan sebuah Elemen Halaman
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar link
Beri judul link yang sobat kehendaki. contoh : link temanku :
Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersedia
Klik tombol SIMPAN PERUBAHAN
Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki
Klik tombol SIMPAN
Selesai.

Akhirnya selesai juga postingan ini. Mudah-mudahan penjelasan diatas mudah untuk di mengerti.

Pasang Feed di Blog

Mengutip sebuah permintaan yang saya kutif dari shoutbox yang kira-kira seperti ini :

"aku mau tiap ada artikel baru di blog ni aku bisa tahu diblog aku"

Permintaan tersebut melukiskan keinginan untuk selalu mengetahui apakah ada artikel baru atau tidak di blog ini dengan tidak harus bercape ria bolak-balik membuka browser. Bila ada pertanyaan apakah bisa kita memasang sesuatu di blog milik sendiri agar mengetahui perkembangan atau update terbaru dari blog yang kita senangi? jawabannya bisa, bahkan banyak cara yang bisa di tempuh.

Agar tidak terlalu memakan space, saya akan menerangkan hanya dengan satu cara yaitu memakai RSS feed. Apa itu RSS? RSS singkatan dari Rich Site Summary atau jika dalam bahasa indonesia adalah ringkasan dari isi sebuah situs (blog juga termasuk di dalamnya). Tapi dalam postingan kali ini saya tidak akan menerangkan secara gamblang tentang RSS feed tadi, bagi yang ingin tahu lebih jauh tentang ini sobat bisa baca di wiki indonesia.

Dari mana kita mengetahui alamat RSS feed blog milik kita? biasanya untuk alamat di blogger ditambah dengan --> atom.xml , jadi alamat feed untuk blog ini adalah :

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

Sekarang bagaimana cara memasang kode feed di blog milik kita? bagi sobat yang menggunakan template baru alias new blogger template cara nya sangat mudah. Silahkan ikuti langkah-langkah berikut ini :

Sig in di blogger dengan id sobat
Klik menu layout
Klik menu Elemen Halaman
Klik tulisan Tambahkan sebuah Elemen Halaman
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan Feed
Tulis alamat ini pada kotak di samping tulisan URL feed --> http://kolom-tutorial.blogspot.com/atom.xml
Klik tombol SIMPAN PERUBAHAN
Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki
Klik tombol SIMPAN
Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat
Selesai

Untuk melihat contoh, judul postingan terbaru pada blog ini bisa muncul di blog lain, silahkan klik di sini !

Ada satu lagi bagi sobat yang lebih mengutamakan penampilan, spring widget telah membuat suatu panel yang sangat unik sehingga akan bisa di jadikan sebagai aksesori blog. Contoh dari panelnya adalah seperti di bawah ini :

Bagaimana lebih menarik bukan di banding dengan tadi yang hanya menampilakan judul artikel saja. Bila tertarik memasang ini silahkan ikuti langkah-langkahnya.

Untuk template klasik :

Sign in di blogger dengan id sobat
Klik menu Template
Klik menu Edit HTML
Copy kode berikut, lalu paste pada sidebar

Sedikit clue, untuk bagian sidebar. jika template asli buatan blogger biasanya seperti ini :


<div id="sidebar">

.......................

.......................

.......................

</div>


nah pasang kode tadi diantara kode diatas.

Klik tombol Pratinjau, lihat hasilnya. jika sudah OK klik tombol Simpan Perubahan Template
Selesai.

Untuk yang template baru :

Sign in di blogger
Klik menu layout
Klik menu Elemen Halaman
Klik tulisan Tambahkan sebuah Elemen Halaman
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
Copy kode berikut, lalu paste pada kotak yang ada :

Klik tombol SIMPAN PERUBAHAN
Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki
Klik tombol SIMPAN
Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat
Selesai.

Untuk contoh bisa di lihat di sini !
Ada satu hal penting yang saya lupa, sobat harus mengatur menu setting agar bisa di menampilkan feed. Langkah-langkahnya yaitu :

Sig in
Klik menu layout (untuk template baru), atau klik menu Template (untuk template klasik)
Klik menu Pengaturan
Klik menu Feed situs
Klik menu dropdown di samping tulisan Ijinkan Feed blog
Pilih yang Penuh
Klik tombol Simpan Setting
Selesai.

Bagaimana sobat? mudah-mudahan dengan ini sobat tidak perlu bolak-balik karena setiap ada postingan terbaru akan langsung bisa di lihat di blog milik sobat sendiri.

Cara pasang search Engine

Sebenarnya petanyaan ini sudah pernah di tanyakan oleh salah seorang sobat pengunjung blog ini, namun jika di tunda untuk menjawabnya terkadang saya lupa atau memang masih belum menemukan kata-kata yang tepat untuk menerangkannya, pertanyaannya kira-kira seperti ini :

Mas rohman, bagaimana caranya memasang Search Engine pada blog?

Baikklah, saya akan mencoba menjawabnya. Semoga mudah untuk di mengerti. Bagi sobat yang sudah bergabung di Google adsense, tentunya untuk memasang sebuah search engine bisa memakai layanan dari Google adsense tersebut. Selain berfungsi sebagai search engine, tentunya sobat akan mendapatkan imbalan dari Google setiap ada pegunjung yang menggunakan search engine tersebut. Contoh yang nyata adalah Search Engine yang terpampang di sebelah atas blog ini, jika sobat bermaksud ingin menyumbang ke saya maka tidak usah mengeluarkan kocek dari kantong sobat sendiri akan tetapi cukup dengan terbiasa menggunakan Search Engine tersebut apabila berniat ingin mencari sesuatu yang ada di Web, biarlah Google adsense yang membayar saya.

Pertanyaan berikutnya yang mungkin muncul yaitu :

Bagaimana kalau saya belum tergabung di Google adsense, akan tetapi tetap ingin memasang Search Engine di blog saya agar pengunjung lebih mudah untuk mencari apa yang mereka inginkan di blog saya?

Seandainya kasusnya seperti itu, maka janganlah sobat merasa risau karena sobat bisa membuatkan search engine untuk blog sobat tanpa harus tergabung di Google adsense. Mau tahu caranya? baca aja sampai akhir tulisan ini.

Untuk membuat sebuah Search Engine pada sebuah blog, sebenarnya mudah karena sobat hanya membuatkan sedikit kode HTML, scriptnya seperti ini :

<form
id="searchform" action="http://AlamatBlogAnda.blogspot.com/search"
name="searchform" method="get">

<input id="s" value="" name="q"
type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>

Yang perlu sobat perhatikan adalah tulisan yang saya cetak merah yaitu http://AlamatBlogAnda.blogspot.com/search, tulisan AlamatBlogAnda harus sobat ganti tentunya dengan alamat blog sobat yang ingin di pasangi seacrh engine, misalkan apabila di pasang untuk blog ini maka tulisan tersebut di ganti dengan http://kolom-tutorial.blogspot.com/search. Selain itu, ada juga yang bisa sobat ubah yaitu di bagian kode --> value="Search". Tulisan Search ini adalah tulisan yang akan muncul pada tombol search engine, apabila sobat ingin mengubahnya, silahkan ubah dengan keinginan, contoh : tulisan tersebut ingin di ubah menjadi Cari atau Go.

Sebagai contoh hasil dari search engine dari script diatas adalah seperti ini :

Atau seperti ini :

Atau juga seperti ini :

Silahkan coba fungsinya, apakah berfungsi dengan baik atau tidak?

Untuk cara pemasangan sama seperti kode HTML lainya, untuk template klasik silahkan sobat cari sendiri karena masing-masing template mempunyai kode yang berbeda-beda. Untuk yang template baru, sobat bisa memasukannya melalui Elemen Halaman kemudian pilih yang HTML/Javascript.

Saya rasa pembahsanya sudah cukup.

Bagi yang ingin melihat-lihat template, template yang satu ini boleh juga untuk di pertimbangkan, silahkan klik di sini !

http://kolom-tutorial.blogspot.com/2007/11/cara-pasang-search-engine.html sudah....

http://blogger-templates.blogspot.com/

Revisi: Cara Modifikasi Kotak Komentar

Sudah baca tutorial kemarin tentang cara modifikasi kotak komentar? Bagaimana hasilnya? dari komentar yang masuk dan setelah kang rohman kunjungi blognya, ternyata memang banyak yang sudah berhasil. Namun ada yang mengeluhkan bahwa hasilnya sedikit berbeda dengan yang di miliki kang rohman, yaitu di sebelah atas garisnya tidak rata sehingga mengurangi keindahan dari kotak komentar tersebut. Screenshotnya seperti ini :

Hiks…. kenapa ya bisa begitu? ternyata permasalahnya adalah gambar yang di upload ke blogger sebagai background kotak komentar tersebut mengalami penyusutan alias di perkecil oleh mesin blogger. So, gambar yang tadinya sudah pas menjadi tidak pas. Apakah ada solusi? tentu saja. solusinya anda harus menyimpan gambar background di server lain seperti di photobucket, google pages, imageshack, yahoo geocities atau di server lainnya yang biasa anda gunakan untuk menyimpan gambar. Tentunya sudah tahu kan cara menyimpan gambar dan mengambil alamat URL nya, belum tahu juga? sok atuh di baca postingan kang rohman tentang “upload gambar ke photobucket” atau tentang “google page creator”.

Trus bagaimana kelanjutan tentang kotak komentarnya? hiksss…lupa. Sekarang begini, silahkan anda save gambar di bawah ini! belum tahu caranya? tinggal sorot saja gambarnya, kemudian klik kanan lalu pilih Save Image As… (untuk fire fox) atau Save Picture As… (untuk internet explorer), kemudian simpan di komputer anda.

Sudah di simpan gambarnya? jika sudah, silahkan upload ke server tempat anda biasa menyimpan gambar, kemudian jangan lupa untuk mengcopy alamat URL nya.
Jika sudah dapat, silahkan ikuti tutorial berikut untuk memperbaiki kotak komentar yang kemarin.
Login ke blogger dengan ID anda.

Klik Tata Letak.
Klik tab Edit HTML.
Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
Cari kode css yang seperti ini (kode yang kemarin hasil modifikasi).

.commenttext {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 490px;
    background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoceP4uzw5fGe5ThrOE4gEHoTt1NuoYDdZoC6hNzfBuAqMci27ZK4BQMLAzQn3CnznKHGrDi58sBb8o0y9l7-VEdhb6cNf7LUjuHfFsrtLVbwVim9i0o0e0GKjeD_6ZWr03mUt6lWYA28z/s320-r/comment.gif) no-repeat top left;
    }

.commenttext-admin {
    clear: both;
    margin: 3px 0px 10px 0px;
    padding: 20px 10px 5px 10px;
    width: 490px;
    background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoceP4uzw5fGe5ThrOE4gEHoTt1NuoYDdZoC6hNzfBuAqMci27ZK4BQMLAzQn3CnznKHGrDi58sBb8o0y9l7-VEdhb6cNf7LUjuHfFsrtLVbwVim9i0o0e0GKjeD_6ZWr03mUt6lWYA28z/s320-r/comment.gif) no-repeat top left;
    }

5. Gantilah alamat gambar yang saya beri warna merah dengan alamat gambar yang anda miliki. contoh ( ini contoh saja lho, jangan di pakai) :

.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(http://kangrohman.googlepages.com/commentgray.gif) no-repeat top left;
}
.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(http://kangrohman.googlepages.com/commentgray.gif) no-repeat top left;
}

6. Klik Tombol SIMPAN TEMPLATE.

7. Selesai, silahkan lihat hasilnya.

Mudah-mudahan dengan tutorial ini, keluhan anda bisa jadi terobati. Satu lagi, pada posting berikutnya akan saya berikan altenatif warna lain dari kotak komentar hasil modifikasi ini. Jadi, jangan lewatkan seri berikutnya ya.
Selamat berkreasi.

Free HTML dan PHP Editor

Beberapa tahun kebelakang, trend membuat blog adalah untuk sekedar untuk curhat, menyimpan catatan perjalanan hidup (online diary), sharing informasi antar teman dan semacamnya. Akhir-akhir ini jika kang Rohman cermati ada trend baru yang sedang mewabah di blogosphere, apaan tuh? trend yang di maksud adalah mempercantik tampilan blog hasil rekayasa atau otak-atik tangan sendiri (pemilik blog). Fenomena ini muncul imbas dari banyak bermunculan blog-blog yang bertajuk blog tutorial. Apakah ini suatu fenomena yang buruk atau baik? jika menurut kang Rohman sendiri ini justru fenomena yang sangat baik untuk dunia blogger di indonesia. Kenapa demikian? ketika dulu pertama kali kang Rohman belajar membuat blog, hanya sedikit blog berbahasa indonesia yang mengajarkan tentang tata cara membuat blog, tapi sekarang? jangan di tanya deh, karena banyak sekali blog berbahasa indonesia yang berisi tentang tutorial blog. Ini tentunya akan membawa dampak positif bagi kemajuan di bidang teknologi untuk bangsa kita karena tutorial yang di suguhkan akan lebih mudah untuk di mengerti.
Beberapa blog yang Kang rohman kenal bertajuk blog tutorial di antaranya blog miliknya OOM, Kang Jaloe, Ade Sanusi, Subagya, anasku, abi bakar serta sederet nama lainnya yang mungkin sudah anda kenal, dan sepertinya cewek centil yang punya panggilan Jovie sepertinya sudah melirik ke arah-arah sana juga. Dengan kehadiran mereka semua tentunya merupakan suatu kemajuan besar bagi dunia blogger di indonesia, karena tak ayal lagi, membuat blog bukan lagi suatu yang susah untuk di lakukan meskipun anda sangat buta dengan bahasa pemrograman berbasis web semisal HTML, CSS, Java Script dan lain sebagainya.
Bagi kita yang awam, di saat mengikuti tutorial mereka, terkadang ada tersirat di dalam hati dan berkeinginan agar bisa seperti mereka yang ahli-ahli, Pernah tidak terpikir seperti itu di benak anda? jika jawabannya iya, itu merupakan modal awal bagi anda untuk menjadi seorang ahli. Namun tentu niat saja tidak cukup, perlu keseriusan kita dalam mencapai keinginan tersebut. Dan di samping itu pula, ada faktor-faktor pendukung lainnya yang perlu anda miliki. Sebut saja komputer dan software-software pendukung ketika anda melakukan pembelajaran.
Ambil contoh kecil saja, jika anda ingin belajar HTML atau PHP anda memerlukan software atau tool pengolahnya. Untuk masalah ini pilihan kang Rohman jatuh kepada software MacroMedia Dreamweaver. Dengan tool ini Kang Rohman lebih mudah untuk melakukan proses belajar baik itu HTML, CSS, Java Script ataupun PHP, semuanya bisa di lakukan pada software ini. Namun MacroMedia Dreamweaver bukanlah sebuah tool yang bisa di dapat secara gratisan, harga nya pun terbilang relatif mahal. Bagi anda yang masih tetap ingin belajar namun sedikit enggan mengeluarkan biaya terlalu mahal, jangan berkecil hati dulu, karena di dunia maya sana banyak terdapat website penyedia tool gratis yang bisa anda dapatkan.
Bagi anda yang sedang belajar HTML atau PHP, anda bisa menggunakan HTML Editor atau PHP Editor. Dimana Downloadnya Kang? hehehe…tidak sabar yah… ya sudah silahkan download toolnya. Klik pada banner di bawah deh :

Silahkan di download jika berminat. Software ini sudah kang Rohman coba dan cukup lumayan bagus, namun karena tools ini bukan buatan Kang Rohman maka segala resiko dalam menginstall tools ini adalah sepenuhnya tanggung jawab anda.
Sebenarnya inti dari postingan ini adalah info download software di atas, akan tetapi biar sedikit seru jadinya Kang Rohman ajak muter-muter dulu

Selamat belajar dan semoga anda akan menjadi seorang ahli seperti mereka-mereka yang sudah lebih dulu dari anda.

Tips Menghilangkan Pesan Pencarian Blogger

Jika anda melakukan pencarian di blog, baik itu melalui mesin pencari yang di pasang pada blog tersebut atau melalui label ataupun arsip blog, maka biasanya di atas halaman pencarian akan muncul pesan seperti ini :

Rupanya ada blogger yang tidak suka dengan kehadiran pesan ini dan menanyakan ke kang Rohman, apakah pesan ini bisa di hilangkan atau tidak? jawabannya tentu saja bisa, dan sangat mudah sekali. anda cukup menambahkan sedikit kode pada style sheet CSS anda. Kodenya seperti ini :
.status-msg-wrap{
display:none;
}
Kalau anda sudah memasang kode tersebut, niscaya pesan pencarian yang biasanya muncul akan malu-malu untuk menampakkan diri lagi. Aihhh.. kang Rohman suka bingungin dech, kasih tau donk cara lengkapnya bagaimana, masa gitu doank? hihihi.. bingung yach, ya sudah, saya kasih cara lengkapnya. Berikut langkah-langkah untuk menghilangkan pesan pencarian di blogger :

Sign in ke blogger dengan ID anda.
Klik Tata Letak.
Klik tab Edit HTML.
Klik tulisan Download Template Lengkap. silahkan di backup dulu biar aman.
Cari kode seperti ini ]]></b:skin>
simpan kode berikut di atas kode yang tadi :

.status-msg-wrap{
display:none;
}

Klik tombol Simpan Template.

8. Selesai.

Jika anda sudah melakukan langkah-langkah di atas, maka langkah selanjunya tinggal ucapkan “bye bye dech loe”.
Cobain dech biar seru!

Cara membuat Contact form / Kontak Kami

Akibat dari Kang Rohman memasang fasilitas kontak kami di blog ini, maka banyak sekali email masuk yang menanyakan bagaimana cara membuat contact form seperti itu. Hmmm.. gimana ya? lupa lagi dhenk, soalnya dulu tidak saya catat langkah-langkah nya… sebentar ya Kang Rohman ingat-ingat dulu

.
Sebelum anda memasang kontak form di blog, ada baiknya mempertimbangkan baik dan buruknya terlebih dahulu. Salah satu kebaikan atau kelebihan dari mamasang fasilitas kontak form yaitu mempermudah pengunjung untuk mengirimkan pesan ke anda. Lalu kekukarangan atau keburukannya yaitu karena sangat mudahnya orang mengirimkan pesan, maka anda harus bersiap-siap kebanjiran email di inbox anda dan tentunya anda harus meluangkan waktu untuk membalasnya, betul tidaaakk? dan sekaian saja Kang Rohman mohon maaf kepada pengirim email yang belum sempat kang Rohman balas, karena banyak sekali email yang masuk sehingga belum sempat kang Rohman jawab semuanya.
Dimanakah kita bisa mendapatkan kontak form? di luar sana banyak sekali website yang menyediakan fasilitas ini, selain yang berbayar ada juga yang gratisan. Dan Kang Rohman sebagai peramal masa depan sudah tahu isi kepala anda, pasti ingin tahu yang gratisan bukan? o’o….. kamu ketauan… suka gratisan… karna dirimu sama dengan aku

. Web penyedia kotak form secara gratisan antara lain http://www.emailmeform.com, http://kontactr.com, http://www.zoho.com dan banyak lagi yang lainnya.
Kontak form yang kang Rohman pergunakan adalah kontak form dari http://www.emailmeform.com, dan agar seragam maka tutorial yang akan kang rohman terangkan adalah tentunya dari web ini. Masih ingin lanjut? berikut adalah langkah-langkah membuat sebuah kontak form :

Silahkan kunjungi situs http://www.emailmeform.com.
Arahkan pandangan anda ke sebelah kanan atas monitor.
Klik pada tulisan Sign up for free.
Isilah form yang ada dengan data diri anda :

First Name : » isi dengan nama depan anda. Misal : jaka.

Last Name : » isi dengan nama belakang anda. Misal : tingkir.

Username : » isi dengan username yang di inginkan. Misal : jaka25.

Password : » isi dengan kata kunci yang di inginkan. Misal : juralitjungkel.

Retype Password : » isi dengan kata kunci yang tadi di isikan. Misal : juralitjungkel.

Your Email : » isi dengan alamat email anda. Misal : jakatingkir25@yahoo.com.

5. Klik tombol Sign up.

6. Setelah muncul tulisan terima kasih, silahkan cek email yang tadi di masukan oleh anda untuk memeriksa email verifikasi.

7. Buka email kiriman dari EmailMeForm yang bertajuk Your new account information.

8. klik link yang di berikan di email tersebut atau kalau tidak bisa, copy alamat URL tersebut lalu paste di address bar browser internet anda untuk melakukan verifikasi bahwa email yang tadi di masukan adalah benar-benar milik anda.

9. Setelah proses verifikasi selesai, silahkan klik tulisan click here untuk menuju halaman akun kontrol panel anda.

10. Alihkan perhatian anda ke sebelah kanan monitor. Klik tulisan Create new form.

11. Ada beberapa form yang perlu di sisi :

Web form Name : » isi dengan nama yang anda inginkan, atau biarkan saja (di sana sudah tertera Contact Webmaster).

Recipients Emails : » isi dengan alamat email yang akan menerima pesan.

Spam Email address : » isi dengan alamat email yang di inginkan untuk menerima pesan spam (email sampah, email iseng doank, email iklan, dll) atau kosongkan saja bila tidak mau menerima pesan email spam.

Thank you page : » isi dengan alamat URL yang memuat tulisan terima kasih, contoh postingan yang ini. Atau jika bingung, tulis saja alamat blog anda.

Number of fields : » biarkan 4 saja.

12. Klik tombol next yang ada di sebelah kanan.

13. Ada beberapa field name yang bisa di ganti sesuai keinginan, misal : Your Name jadi Nama, Your Email Address jadi alamat Email, dst. Atau biarkan saja seperti itu.

14. Klik tombol next yang ada di sebelah kanan.

15. Klik tombol next lagi.

16. Silahkan isi dengan keinginan anda ( hehehe… cape kalau nerangin yang ini) atau biarkan saja seperti itu.

17. Klik tombol next lagi.

18. Klik tombol next lagi.

19. Akan di perlihatkan contoh tampilan kontak form yang tadi di buat oleh anda.

20. Klik tombol Finish.

21. Klik tulisan Get the HTML codes.

22. Copy kode yang ada di text area, di bawah tulisan Copy and paste this HTML code into your page. Lalu paste pada notepad atau text editor lainnya.

23. Selesai.

Untuk membuat sebuah halaman kontak kami, anda tinggal membuat sebuah postingan seperti biasa. Untuk memasukan kode yang tadi di dapat dari EmailMeForm, anda pindah dulu dari menu compose ke Edit HTML lalu paste di situ. publish dech. Beres.

Revisi: Cara Modifikasi Kotak Komentar

Login ke blogger dengan ID anda.
Klik Tata Letak.
Klik tab Edit HTML.
Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
Cari kode css yang seperti ini (kode yang kemarin hasil modifikasi).

6. Gantilah alamat gambar yang saya beri warna merah dengan alamat gambar yang anda miliki. contoh ( ini contoh saja lho, jangan di pakai) :

7. Klik Tombol SIMPAN TEMPLATE.

8. Selesai, silahkan lihat hasilnya.

Membuat Warna Link Berkedip Warna Warni

Ada yang nanya ke kang rohman :

assalam mualaikum ww. kang ! bagaimana ya caranya bila tulisan tersebut berwarna dan bergerak pergantian warnanya...kayaknya kalau blog saya nantinya jadi lebih bagus deh.
Mungkin maksudnya ketika sebuah link di sorot, link tersebut akan berganti warna secara bergantian. Emang bisa? bisa saja sih, namun harus memakai script. Salah satu script gratis yang bisa di pakai adalah dari http://www.dynamicdrive.com yaitu script rainbow. Ingin tahu caranya? silahkan ikuti langkah-langkah berikut ini :
Langkah Pertama :

1. Silahkan download dahulu script rainbow, klik pada link di bawah ini :

Download | mirror 1

atau

Download | mirror 2

2. Ekstraklah file yang sudah di download tadi ( file zip) menjadi file java ( js file ) dengan memakai software ekstraktor seperti winzip ataupun winrar :

3. Uploadlah file tersebut ke server yang biasa anda gunakan, contoh ke google page creator.

4. Jika sudah di upload, ambillah alamat URL file tersebut, contoh ( ini contoh saja, jangan di pakai) :

http://kangrohman.googlepages.com/rainbow.js

5. Ubahlah alamat URL tersebut menjadi seperti ini (contoh saja) :

Langkah Kedua :

Silahkan login ke blogger dengan ID .
Klik Tata Letak.
Klik tab Edit HTML.
Cari kode seperti ini </head>.
Simpan kode scriptnya di bawah kode </head> (contoh saja).

6. Klik tombol Simpan Template.

7. Selesai.

Sekarang coba lihat blog anda dan sorot link nya, jika berhasil maka linknya akan berkedip berganti warna.

Selamat mencoba.

http://kolom-tutorial.blogspot.com/2008/08/membuat-warna-link-berkedip-warna-warni.html

Memasang Gambar di Sudut Blog

Salah satu trik blogger agar blog kelihatan tambah menarik adalah memasang image di sudut blog. Pemasangan image bisa di atas kiri, atas kanan, bawah kiri, dan bawah kanan. Selain itu trik ini juga dapat dimanfaatkan untuk fungsi yang lain, sesuai dengan apa yang kamu inginkan. Sebab kalau disebutin kebanyakan... :O

*) Login ke account blogger kamu
*) Pilih Tata Letak --> Edit HTML

*) Tambahkan kode berikut di atas kode ]]>

#anima_sudut {
position:fixed;_position:relative;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

*)Ganti kode yang berwarna biru dengan posisi image yang kamu inginkan (ex : top=atas, bottom=bawah, right=kanan, left=kiri)

*) Kemudian tambahkan kode ini di atas kode </body>.

<div id='anima_sudut'>
<a href='http://optimasi-blog.blogspot.com/'>
<img alt='' border='0' src='http://i647.photobucket.com/albums/uu191/ariamsi/disiniann.gif'/></a>
</div>

Ganti kode yang berwarna merah dengan alamat blog kamu dan alamat penyimpanan image kamu.

Tips: Kalau mau cari gambar animasi keren dan bagus untuk image pojoknya (seperti punyaku :D) buka aja di mynicespace.com. Dan kita cuma tinggal kopi paste dari alamat url-nya

Rabu, 31 Oktober 2012

Belajar Membuat Blog

Yahoo hidden emoticons

Ini heading 1

Ini heading 5

Ini heading 6

Blogroll

Tidak ada komentar:

Posting Komentar