Docstoc

Belajar Bikin Blog

Document Sample
Belajar Bikin Blog Powered By Docstoc
					PENGENALAN BLOG

Apa itu Blog?

Blog merupakan sengakatan dari "web log" adalah bentuk aplikasi web yang menyerupai
tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Situs web
seperti ini biasanya dapat diakses oleh semua pengguna internet sesuai dengan topik dan
tujuan dari si pengguna blog tersebut.
Fungsi Blog
Blog mempunyai fungsi yang sangat beragam, dari sebuah catatan harian, media
pembelajaran, media publikasi, sampai dengan program media dan perusahaan-
perusahaan.
Fasilitas Blog
Secara umum penyedia layanan blog memberikan fasilitas sebagai berikut: penerbitan
tulisan dengan cepat, edit tulisan, kirim komentar ke tulisan, upload gambar, video, ubah
template/desain web. Semuanya disediakan dalam antarmuka yang sederhana.
Contoh Blog
Contoh penyedia blog antara lain : Blogger (blogspot), Wordpress, Live Journal,
Dagdigdug(indonesia), Multipliy, Friendster, dan lain sebagainya.
Istilah-istilah Blog
- Archive : Arsip tulisan blog kita
- Avatar : Foto profil kita
- Blogging : Menulis blog (nge-blog)
- Blogroll : Kumpulan link blog-blog lain
- Bookmark : Menyimpan situs favorit
- Blogger : Orang yang mempunyai/mengelola blog
- Category : Kategori tulisan
- Comment : Komentar untuk tulisan blog
- Posting : menulis suatu post/tulisan di blog
- Permalink : Permanent Link, link tetap menuju posting sebuah blog
- Template : Desain antarmuka blog
- Trackback : Notifikasi jika ada yang membuat link ke blog.
Perbedaan Blog dengan Website
Perbedaan blog dengan website hanyalah pada sisi pembuatan, pengelolaan dan interaksi
antara pembaca dengan penulis, disamping itu posisi blog lebih terarah ke personal dan
lebih bebas.


Cara Memposting Artikel

Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel
kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com. Di
dalam menu posting ada beberapa toolbar yang bisa anda gunakan.Jika anda sudah
terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak
akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada
salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang
masih bingung.

Toolbar yang ada ketika posting :

                 --> Untuk merubah jenis hurup yang di gunakan

    --> Untuk merubah ukuran hurup (heading)

     --> Untuk Menebalkan hurup

    --> Untuk memiringkan hurup

    --> Untuk merubah warna hurup

    --> Untuk membuat link

   --> Untuk membuat artikel menjadi rata kiri

   --> Untuk membuat tulisan menjadi di tengah

   --> Untuk membuat artikel menjadi rata kanan

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

   --> Untuk membuat sub bahasan oleh angka

   --> Untuk membuat sub bahasan oleh bullet

   --> Untuk mengecek spelling

   --> Untuk memasukan gambar(upload gambar)



            --> Untuk membuat artikel dalam kode HTML



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

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang
akan di edit, kemudian tekan tombol toolbar yang di inginkan.

Langkah-langkah dalam memposting suatu artikel:

   1. Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”,
      sering terjadi hang pada komputer (pengalaman saya pribadi). Copy artikel yang
      telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan
      kemauan anda.



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



   3. Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin
      memasukan gambar ataupun photo untuk menghiasi posting-an anda.



   4. Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan
      tampil di dalam blog, barangkali masih ada yang perlu di edit.



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

Membuat efek Marquee

Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa
bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para
blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di
lihat disamping untuk menghemat tempat pada halaman blog.

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

Atribut yang sering di gunakan adalah :

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

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

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

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar
angka semajin cepat gerakannya.

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

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

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

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right" height="200" scrollamount="2"
width="30%">

marquee dari kanan ke kiri

</MARQUEE>

hasilnya :




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

Contoh marquee dari perilaku gerakan :

<MARQUEE align="center" direction="left" height="200" scrollamount="3"
width="70%" behavior="alternate">

marquee menurut perilaku

</MARQUEE>
Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left">&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

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




Masalah Posting Artikel

Udah tiga hari ini saya tidak update, ma'lum kemarin abis pulang dari kampung halaman,
yo'i bandung tercinta, nemuin si kembar and istri terkasih...  lho ko jadi curhat...

Ok udahan ah intermezonya..jadi garing kalo lama-lama. langsung aja tadi pas buka
email, ada seorang kawan yang bertanya kira-kira isinya begini:

Saya mau tanya nich, saya masih awam dalam blogging dan saya kesulitan untuk
mengatur postingan saya, yang saya maksud adalah untuk mengatur paragraph postingan,
pada saat saya mengetik pada kolom compose, pada tiap paragraph saya selalu
memberikan jarak satu spasi dengan menekan tombol enter, tapi hasilnya publishnya
tidak sesuai dengan pengaturan saya pada kolom compose sebelumnya, itu gimana
solusinya yach ? Atas perhatian dan bantuannya saya ucapkan terima kasih...Wss

Sebenarnya sudah saya jawabin lewat email, tapi saya pikir-pikir mending di posting aja
topik ini barangkali ada manfaatnya buat kawan-kawan yang punya permasalahan yang
sama.

Untuk masalah ini, saya sarankan jika setelah mengetik artikel di mode
COMPOSE,sebelum di publish, sebaiknya pindah dulu ke mode Edit HTML. Nah pada
sela-sela paragrap yang ingin di beri jarak kita sisipkan kode --> <br/>
satu kode <br/> berarti satu line break ke bawah, jadi kalau jarak yang di inginkan jauh
ke bawah kita tinggal tambahkan kode <br/> beberapa kali.

Contoh :

Di kabarkan padai awal tahun 2007 kemarin telah di luncurkan suatu produk alarm mobil
yang mengklaim dirinya sebagai alarm tercanggih di dunia. Produk tersebut terdiri dari
dua item produk dengan kecanggihan yang berbeda.
<br/><br/>
Produk pertama :
<br/><br/>
Alarm dengan menggunakan sim card, yakni alarm yang bisa me report kepada pemilik
melalui teknologi GSM. Semisal mobil kita di ganggu orang sehingga bunyi, maka mobil
ini akan secara otomatis menelpon kita untuk me report bahwa mobil kita di ganggu,
Jangkauannya sampai dengan jangkauan provider dari GSM selularnya.

Maka yang akan muncul di blog kita akan seperti ini :

Di kabarkan padai awal tahun 2007 kemarin telah di luncurkan suatu produk alarm mobil
yang mengklaim dirinya sebagai alarm tercanggih di dunia. Produk tersebut terdiri dari
dua item produk dengan kecanggihan yang berbeda.

Produk pertama :

Alarm dengan menggunakan sim card, yakni alarm yang bisa me report kepada pemilik
melalui teknologi GSM. Semisal mobil kita di ganggu orang sehingga bunyi, maka mobil
ini akan secara otomatis menelpon kita untuk me report bahwa mobil kita di ganggu,
Jangkauannya sampai dengan jangkauan provider dari GSM selularnya.


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

Untuk permasalahan tadi saya rasa sudah cukup jelas, nah saya sarankan bila kawan-
kawan ingin terbiasa dengan kode HTML, maka ketika posting artikel sebaiknya pada
posisi Edit HTML jangan pada posisi Compose, sebab ada peribahasa alah bisa karena
biasa.

Mudah-mudahan bermanfaat.



Pasang Jam di Sidebar

Agar blog anda tampak cantik dan menarik untuk di lihat, maka anda bisa memasang
beberapa aksesori blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa
anda dapatkan secara gratis pada situs http://www.clocklink.com. Salah satu contoh jam
yang tersedia adalah sebagai berikut :




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

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



Karena kode jam blog ini adalah merupakan suatu kode HTML, maka bagi anda yang
masih bingung cara menempatkan kode HTML pada template blog, silahkan baca
kembali postingan saya terdahulu di sini

Selamat mencoba.


Pasang Buku Tamu di Sidebar
Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang
cukup lumayan penting,karena buku tamu ini merupakan salah satu sarana untuk
berinteraksi antara yang mpunya blog dengan para pengunjung blog. Dengan di
pajangnya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi
hatinya tentang blog yang anda buat, yang pasti isi dari sebuah buku tamu ini sangatlah
bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan
kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog
kita jadi hidup lebih hidu (kaya iklan aja).

Ok, terlalu lama intermezonya ya, sekarang kita kembali (ke lap...top) ke topikbahasan.
Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat
mudah, anda tinggal mencarinya pada mesin pencari semisal google ataupun yahoo,
silahkan ketikan kata free shoutbox atau free guestbook pada search engine masing-
masing situs, maka dalam beberapa detik saja akan muncul berpuluh-puluh situs penyedia
buku tamu tadi, anda tinggal klik lalu coba lihat-lihat. Tapi untuk menghemat waktu
pencarian anda, maka di sini saya akan langsung memberikan alamat situs penyedia buku
tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni
http://www.shoutmix.com. Untuk caranya silahkan anda ikuti langkah-langkah berikut
ini :

   1. Seperti biasa anda harus daftar terlebih dahulu dengan cara mengklik tulisan Get
      One noe, free>>, ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis
      data-data anda pada form yang telah di sediakan.
   2. Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login
      dengan id anda
   3. Pada kolom yang berjudul Style, klik menu appearance.
   4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk
      mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan
      anda. Jika sudah selesai klik Save Setting.
   5. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox
      yang berada di bawah menu Quick Start
   6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di
      inginkan
   7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan
      Generated Codes, lalu simpan di program Notepad anda
   8. Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix
      anda. Silahkan close situs tersebut.
   9. Selesai



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

Untuk blogger dengan template klasik :
   1.   Log in terlebih dahulu ke blogger.com dengan id anda
   2.   Klik menu Template
   3.   Klik Edit HTML
   4.   Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat
        yang anda inginkan
   5.   Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk
        menempatkannya tinggal klik Edit pada browser lalu pilih Find (on this page)..
        trus tuliskan kata buku tamu lalu klik find, maka kita akan langsung di bawa ke
        tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste kode HTML
        shoutbox nya.
   6.   Klik tombol Preview untuk melihat perubahan yang kita buat.
   7.   Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
   8.   Selesai



Sedikit Clue, agar shoutbox anda sesuai dengan ukuran lebar sidebar , anda bisa merubah
ukuran lebar ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width
(untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.



Untuk Blogger baru :

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



Selamat mencoba !



Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :

   1. http://oggix.com
Untuk langkah-langkahnya hampir sama dengan langkah diatas.



Pasang Kalender di Blog

Sobat Guest452, itulah nama yang di kenalkan pada shoutbox. Beliau membredel
shoutbox sebanyak tiga kali berturut-turut dengan permintaan agar di postingkan cara
membuat Kalender pada blog. Untuk menghormati keinginan beliau ini, maka saya coba
bahas tentang bagaimana cara pasang kalender di dalam blog.

Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia
kalender gratisan. Situs seperti ini sangatlah banyak, tentunya mereka berlomba dengan
menampilkan kalender-kalender yang menarik untuk di lihat. Agar tidak terlalu bingung
mencarinya, saya berikan contoh satu saja yaitu http://www.free-blog-content.com.
Silahkan coba sobat kunjungi situs tersebut ! kalender yang di sediakan sangat beragam.
Silahkan klik kategori yang ada untuk memilih bentuk kalender yang sobat sukai,
kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad
untuk nanti keperluan di simpan di blog.

salah satu contoh gambar yang di sediakan seperti ini :




Untuk cara instalasi, silahkan ikuti langkah-langkah berikut !

Untuk Template klasik

   1. Sig in di blogger dengan id sobat



   2. Klik menu Template



   3. Klik menu Edit HTML



   4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di
      maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting
      template, sobat masih mempunyai data untuk mengembalikannya ke semula
   5. Copy kode yang tadi telah ada di notepad lalu paste pada tempat yang di inginkan,
      mau di sidebar atau di manapun boleh



   6. Klik tombol Simpan Perubahan Template



   7. Selesai.




Untuk Template baru

   1. Sign in di blogger dengan id sobat



   2. Klik menu layout



   3. Klik menu Elemen Halaman



   4. Klik tulisan Tambahkan sebuah elemen halaman



   5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript



   6. Copy kode yang tadi telah ada di notepad lalu paste pada kolom yang di sediakan



   7. Klik tombol SIMPAN PERUBAHAN
   8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik
      tombol SIMPAN



   9. Selesai.




Khusus bagi sobat yang muslim dan ingin kalendernya dalam bentuk kalender Hijriah,
ada sumbangan hasil karya yang bisa sobat pakai. Kalender ini di dapat dari
http://mfr.jentayu.com. Bentuk kalendernya seperti ini :




Bentuknya sangat menarik bukan? Jika sobat ingin memasang kalender ini, sobat tinggal
menyinpan kode berikut pada template sobat :


<script src="http://hijriah.jentayu.com/hijriah.php"> </script>




Untuk langkah-langkahnya sama persis seperti diatas, akan tetapi tentu yang di masukan
adalah kode ini. Atau bagi sobat yang memakai template baru, biar gampang silahkan
klik saja tombol di bawah ini! nanti akan secara otomatis kalendernya akan di masukan
ke blog sobat. tapi ya musti sign in dulu yah :


                                     Tambah Kalender




Ada lagi yang lebih menarik, bukan hanya berfungsi sebagai kalender, akan tetapi
berfungsi sebagai arsip. Pengunjung dapat dengan mudah membuka arsip postingan-
postingan kita yang terdahulu melalui kalender tersebut. Apabila tertarik coba deh
kunjungi blog nya mas anang di http://anangku.blogspot.com. Silahkan baca triknya di
sana, soalnya sudah kecapean nih ngetiknya, jadi tidak saya tuliskan sendiri.

Selamat mempercantik blognya dengan kalender.
Minggu, Juli 22, 2007

Pelacak IP Address

Bagi sobat yang suka akan aksesori blog, ada lagi nih blog toolsekaligus sebagai aksesori
blog. Tool ini berfungsi untuk melacak alamat IP (Internet Protocol) sang pengunjung
blog kita. Selain IP address, tool ini juga bisa melacak browser serta Operating system
yang dipakai oleh pengunjung.

Untuk mendapatkan tool ini, sobat bisa mendapatkannya di banyak situs pada internet.
Agar tidak usah bingung mencari, saya ambil contoh salah satunya adalah
http://www.ipnow.org. Salah satu contoh tampilan yang di miliki situs ini adalah sebagai
berikut :




Tertarik memasang ini? Silahkan ikuti langkah-langkah berikut ini :

   1. Silahkan buka situs http://www.ipnow.org



   2. Di bawah tulisan Custom Image ada beberapa tampilan yang bisa di pilih. Ambil
      contoh : klik yang Custom Graphical Info Image



   3. Pilih warna backround serta warna text yang di inginkan oleh sobat



   4. Klik tombol Create My Image



   5. Tunggu beberapa saat sampai proses selesai
   6. Copy kode yang di bawah tulisan Linked Image, paste pada notepad untuk
      keperluan nanti di masukan ke blog



   7. Silahkan tutup situs tersebut



Untuk cara memasukan kode yang di copy tadi, silahkan ikuti petunjuknya !

Untuk template klasik :

   1. Sign in di blogger



   2. Klik menu Template



   3. Klik menu Edit HTML



   4. Copy seluruh kode template sobat, lalu paste pada notepad, silahkan save dulu
      untuk backup data



   5. Copy kode yang ada di notepad tadi lalu paste pada tempat yang sobat inginkan



   6. Klik tombol Pratinjau untuk melihat perubahan



   7. Jika sudah OK, klik tombol Simpan Perubahan Template



   8. Selesai.
Untuk template baru :

   1. Sign in di blogger



   2. Klik menu Layout



   3. Klik menu Elemen halaman



   4. Klik tulisan Tambah sebuah Halaman Elemen



   5. Klik tulisan TAMBAHKAN KE BLOG di bawah tulisan HTML/javascript



   6. Copy kode yang ada pada notepad, kemudian paste pada kolom yang tersedia



   7. Klik tombol SIMPAN PERUBAHAN



   8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik
      tombol SIMPAN



   9. Selesai.



Situs lain yang menyediakan layanan seperti ini bisa sobat kunjungi :

   1. http://www.danasoft.com
   2. http://www.ip2phrase.com



Mau lihat contoh blog yang memakai fasilitas ini? Silahkan klik di sini !

Selamat mencoba deh !


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 :

                                <a
                                href="http://kolom-tutorial.blogspot.com" target="_blank"><img
                                src="http://i162.photobucket.com/albums/t253/rohman24/animasichicklet.gif"
                                border="0" alt="Blog Tutorial" /></a>




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 :
                                      <script
                                      language="JavaScript"> f unction clickIE() { if
                                      (document.all) {
                                      return f alse; } } f unction clickNS(e) { if
                                      (document.layers(document.getElementById&&!
                                      document.all)) { if
                                      (e.w hich==2e.w hich==3) { return f alse; } } } if
                                      (document.layers) {
                                      document.captureEvents(Event.MOUSEDOWN);
                                      document.onmousedow n=clickNS;
                                      } else{ document.onmouseup=clickNS;
                                      document.oncontextmenu=clickIE; }
                                      document.oncontextmenu=new Function("return f alse")
                                      </script>




Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas
mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang
bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All :

   1. <div align="center"> --> kata center menunjukan bahwa posisi tombol akan
      berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri,
      tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal
      ganti dengan kata right.
   2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode
      ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di
      dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah
      tulisan ini.



   3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di
      dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata
      yang anda inginkan.



Element text area :

   1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah,
      nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata
      left, bila ingin di tepi kanan, ganti dengan kata right.
   2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari
      text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau
      memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang
      anda inginkan. misal: "WIDTH:700px;"



   3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan
      mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti
      angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.



Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi
dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-
tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu
pasang pada kode HTML anda antara kode <HEAD> dan </HEAD> selamat mencoba.

Pasang Jadwal Sholat

Dari kemarin yang di omongin kayanya soal ngotak-ngatik template melulu, biar tidak
jenuh kali ini saya akan membahas tentang aksesori blog. Bagi sobat yang notabene
muslim, ada nih aksesori blog plus buat mengingatkan kepada kita akan waktu sholat biar
para pengunjung blog kita tidak terlalu terlena ketika memmbaca berbagai artikel yang
kita tulis di blog. Jadwal waktu sholat ini bisa sobat dapatkan di
http://www.islamicfinder.org, untuk cara mendapatkannya silahkan ikuti langkah-langkah
berikut ini :

   1. Silahkan sobat kunjungi situs http://www.islamicfinder.org atau hanya klik di sini
      !



   2. Klik link yang bertuliskan Add new sevices to your site di halaman bagian
      bawah



   3. Alihkan perhatian ke nomor pilihan ke 2. Klik menu Dropdown yang bertuliskan
      Select a Country



   4. Klik nama negara yang sobat inginkan, lalu klik Go. Contoh : Indonesia



   5. Klik nama kota yang sobat inginkan. Contoh : Jakarta



   6. KLik tombol Generated Code



   7. Copy kode yang di berikan, lalu paste pada notepad untuk nanti keperluan di
      simpan ke blok kita



   8. Silahkan tutup window situs tersebut



   9. Selesai.




Itu tadi cara mendapatkan kode jadwal sholatnya, untuk memasukan kode tersebut ke
dalam blog, silahkan ikuti langkah berikut :
Untuk Template Klasik

   1. Sign in di blogger



   2. Klik menu Template



   3. Klik menu Edit HTML



   4. Copy seluruh kode template, paste pada notepad lalu simpan untuk backup data



   5. Copy kode jadwal sho;at yang tadi lalu paste pada tempat yang sobat inginkan



   6. Klik tombol Pratinjau untuk melihat perubahan



   7. Bila sudah Ok, klik tombol Simpan Perubahan Template



   8. Selesai.




Untuk Template baru

   1. Sign in di blogger



   2. Klik menu Layout
   3. Klik menu Elemen Halaman



   4. Klik tulisan Tambahkan sebuah Elemen Halaman



   5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript



   6. Paste kode Jadwal sholat tadi ke kolom yang di sediakan



   7. Klik tombol Simpan Perubahan



   8. Pindahkan elemen yang baru di buat pada tempat yang sobat sukai



   9. Klik tombol Simpan



   10. Selesai




Contoh jadwal sholat yang saya terangkan diatas seperti ini :


Yang arah vertical :



Yang arah horizontal




Selamat mempunyai jadwal sholat dan jangan lupa sholat ye jangan ngeblog melulu !
Tips Mengubah Warna Link

Jika pada postingan yang lalu membahas tentang bagaimana cara menghilangkan garis
bawah pada sebuah tulisan yang berbentuk link, maka pada kesempatan ini saya ingin
mengulas tentang cara mengubah warna link. kenapa merubah warna link di perlukan?
alasannya begini, pernah saya mengunjungi beberapa blog yang mempunyai latar
belakang bergambar, masalahnya yaitu warna latar belakang dengan warna link hampir
sama, sehingga penglihatan kita menjadi kabur dan tidak bisa membaca tulisan link.
Sebenarnya kejadian tersebut tidak perlu terjadi, karena warna link dapat kita ubah
sendiri. Bagi sobat yang memakai template baru, tentunya hal ini bukan masalah besar,
karena fasilitas untuk merubah warna dan huruf sudah di sediakan. Lain halnya bagi
sobat yang memakai template klasik, untuk merubah warna link, sobat harus sedikit
berkeringat karena harus merubah kode-kode yang ada pada kode template sobat. Kode-
kode yang manakah yang harus ubah? Untuk mengubah warna link, setiap template
tentunya berbeda-beda, Akan tetapi untuk gambaran saja saya ambil contoh di dalam
template ada kode seperti ini : a:link { color:#3333FF; text-decoration:underline; }
a:hover { color:#000066; text-decoration:underline; } a:visited { color:#663366; text-
decoration:underline; } Agar menjadi faham, akan saya uraikan : a:link { color:#3333FF;
text-decoration:underline; } kode ini mempunyai arti --> sebuah link akan berwarna biru
dan bergaris bawah. a:hover { color:#000066; text-decoration:underline; } Sebuah link
apabila di sorot oleh mouse akan berubah warna menjadi biru tua dan bergaris bawah.
a:visited { color:#663366; text-decoration:underline; } Sebuah link apabila pernah di klik
oleh komputer yang sama akan berwarna ungu dan bergaris bawah. Pertanyaan
selanjutnya manakah kode diatas yang menentukan warna link? jawabnya adalah kode :
color:#3333FF; Tulisan yang saya cetak merah adalah penentu warna atau di sebut juga
dengan kode warna heksa, kode tersebutlah yang menentukan warna sebuah link.
Bagaimana cara merubahnya? caranya tentu saja kita harus mengganti kode warna
tersebut dengan kode warna yang kita inginkan. untuk mencari tau kode heksa dari
warna, saya biasanya menggunakan bantuan dari program photoshop, disana telah
disediakan contoh warna lengkap dengan kode heksa nya, kita tinggal memilih warna
yang diinginkan kemudian secara otomatis akan di perlihatkan kode heksanya. Masih
bingung? kalau masih bingung soal warna, sobat kunjungi deh blognya bang iwan di link
ini http://free-7.blogspot.com, ada juga di bagian Side bar blog beliau di tuliskan berbagai
kode heksa. Saran dari saya, apabila sobat menggunakan warna latar belakang yang
terang, maka pilihlah warna link yang gelap. Sebaliknya, apabila warna latar belakang
berwarna gelap, maka warna link haruslah berwarna terang. Selamat mencoba !



Tips Mengganti Background Blog

Beberapa hari yang lalu, sobat Uel menanyakan perihal bagaimana caranya untuk
mengganti background blog, dan tentunya saya akan coba membahasnya. Menurut saya,
ada dua kemungkinan mengganti background yaitu yang pertama adalah mengganti
hanya warna background (latar belakang) saja, yang kedua adalah mengganti background
blog dengan menggunakan gambar atau image.

Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar
belakang) yaitu gantilah background dengan warna atau image yang sekiranya tidak
membuat tulisan-tulisan kita menjadi susah untuk di baca. Jika tulisan yang tersedia
berwarna gelap, maka pilihlah warna atau image yang terang, akan tetapi sebaliknya
apabila tulisan yang ada berwarna terang, maka sebaiknya warna atau image background
berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya akan
membuat pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan
tentunya percuma saja kita memposting artikel jika tidak ada yang mau untuk
membacanya.OK, biar tidak menyita halaman langsung saja pada topik utama. Karena
kode template sangat bervariasi, yang akan saya jadikan contoh adalah template asli
blogger yaitu template minima.

 Mengganti Warna Background

Untuk template minima klasik :

   1. Sign in



   2. Klik menu Template



   3. Klik menu Edit HTML



   4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
   5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang
      warna merah adalah kode yang harus di rubah) :




      body {
      background:#fff;
      margin:0;
      padding:40px 20px;
      font:x-small Georgia,Serif;
      text-align:center;
      color:#333;
      font-size/* */:/**/small;
      font-size: /**/small;
      }

      Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :

      body {
      background:#E7E3E3;
      margin:0;
      padding:40px 20px;
      font:x-small Georgia,Serif;
      text-align:center;
      color:#333;
      font-size/* */:/**/small;
      font-size: /**/small;
      }


   6. Klik tombol Pratinjau untuk melihat perubahan



   7. Jika sudah OK, klik tombol Simpan Perubahan Template



   8. Selesai.



Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan program
photoshop, kapan-kapan akan saya posting khusus tentang bagaimana cara mengetahui
kode warna.


Untuk template minima baru :

   1. sign in



   2. Klik menu Layout



   3. Klik menu Fon dan Warna



   4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman
      (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)



   5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu
      lihat perubahannya pada gambar di sebelah bawah



   6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN



   7. Selesai.




Mudah bukan?


 Mengganti Background Dengan Image

Hal yang pertama tentu saja sobat harus mempunyai file image. Image ini bisa berbentuk
imaage biasa, photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke
situs untuk menyimpan gambar, saya anggap sobat sudah bisa melakukannya karena
sudah saya bahas pada postingan terdahulu, atau masih bingung? kalau iya, coba baca
kembali di sini !

Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar,
karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan
dalam jumlah yang sangat banyak hingga memenuhi layar monitor, contoh saya sudah
menguload sebuah gambar dengan ukuran yang kecil saja, gambarnya seperti ini (ukuran
gambar dalam ukuran aslinya) :

alamat gambarnya adalah

http://amen24.googlepages.com/pattern_096.gif

gambarnya seperti ini :




gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena
akan di tampilkan dalam jumlah yang sangat banyak.

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

   1. Sign in



   2. Klik menu Template



   3. Klik menu Edit HTML



   4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data



   5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah
      kode yang harus di tambahkan) :




       body {
       background:#fff url('http://amen24.googlepages.com/pattern_096.gif');
       margin:0;
       padding:40px 20px;
       font:x-small Georgia,Serif;
       text-align:center;
       color:#333;
       font-size/* */:/**/small;
       font-size: /**/small;
       }

   6. Klik tombol Pratinjau untuk melihat perubahan



   7. Jika sudah OK, klik tombol Simpan Perubahan Template



   8. Selesai.



Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar apabila
background image yang kita pakai gagal di loading oleh komputer pengunjung blog,
maka yang bekerja duluan warna background.


Untuk template minima baru :

   1. Sign in



   2. Klik menu Layout



   3. Klik menu Edit HTML



   4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat
      untuk backup data
   5. Klik kotak kecil di samping tulisan Expand Template Widget



   6. Tunggu beberapa saat sampai proses selesai



   7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah
      kode yang harus di tambahkan) :




      body {
      background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');
      margin:0;
      color:$textcolor;
      font:x-small Georgia Serif;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: center;
      }


   8. Klik tombol Pratinjau untuk melihat perubahan



   9. Bila sudah OK, klik tombol SIMPAN TEMPLATE



   10. Selesai.




Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di
tambahkan, Untuk melihat contoh blog yang sudah saya pasang background dengan
gambar yang saya contohkan di atas, silahkan sobat klik di sini !

Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai
gambar pattren di sini.
Pasang Banner di Header Blog

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline
pada YM milik saya yang isinya kira-kira seperti ini :

"Bagaimana caranya menyimpan banner pada header blog"

Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah
barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita
sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita
bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah
bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya
akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti
banner yang ada di header.

Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus
mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa
menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop,
coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya
adalah program yang bisa membuat banner.

Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini
tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit
memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di
header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan
mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template
ini merupakan template asli blogger.

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah
membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut,
atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut,
bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah
saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di
www.photbucket.com dan mempunyai alamat banner seperti ini :

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

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):
Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :

   1. Sign in di blogger



   2. Klik menu Template



   3. Klim menu Edit HTML



   4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini
      sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting
      template



   5. Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode
      asli dan yang merah adalah kode yang harus di tambahkan



       /* Header ----------------------------------------------- */
       @media all {
       #header {
       width:660px;
       margin:0 auto 10px;
       border:1px solid #ccc;
       background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif
       ) no-repeat top center;
       }
       }


   6. Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus
      menghapus kode berikut :



       #blog-title {
       margin:5px 5px 0;
       padding:20px 20px .25em;
       border:1px solid #eee; <-- hapus (delete)
       border-width:1px 1px 0; <-- hapus (delete)
       font-size:200%;
       line-height:1.2em;
       font-weight:normal;
       color:#666;
       text-transform:uppercase;
       letter-spacing:.2em;
       }


       #description {
       margin:0 5px 5px;
       padding:0 20px 20px;
       border:1px solid #eee; <-- hapus (delete)
       border-width:0 1px 1px; <-- hapus (delete)
       max-width:700px;
       font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
       text-transform:uppercase;
       letter-spacing:.2em;
       color:#999;
       }

   7. Klik tombol Pratinjau untuk melihat perubahan



   8. Jika sudah OK, klik tombol Simpan Perubahan Template



   9. Selesai.




Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

   1. Sign in di blogger
2. Klik menu Layout



3. Klik menu Edit HTML



4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat
   untuk backup data



5. Klik kotak kecil di samping tulisan Expand Template Widget



6. Tunggu beberapa saat sampai proses selesai




7. Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah
   kode asli dan yang merah adalah kode yang harus di tambahkan



   /* Header -----------------------------------------------
   */

   #header-wrapper {
   width:660px;
   margin:0 auto 10px;
   border:1px solid #ccc;
   background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif
   )no-repeat top center;
   }
   }

8. Klik tombol Pratinjau untuk melihat perubahan yang ada



9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
   10. Selesai.



Langkahnya diatas sama dengan yang di template klasik.


Cara kedua :

   1. Sign in di blogger



   2. Klik menu Layout



   3. Klik menu Edit HTML



   4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat
      untuk backup data



   5. Klik kotak kecil di samping tulisan Expand Template Widget



   6. Tunggu beberapa saat sampai proses selesai




   7. cari kode berikut pada template sobat :



       <b:section class='header' id='header' maxwidgets='1'>

       pada kode maxwidgets='1'. Rubah angka satu menjadi angka 2, sehingga kodenya
       menjadi seperti ini :

       <b:section class='header' id='header' maxwidgets='2'>
   8. Klik tombol SIMPAN TEMPLATE



Nah itu langkah pertama, langkah selanjutnya adalah :

   1. Klik menu Elemen Halaman



   2. KLik tulisan Edit yang ada pada elemen Header



   3. Tunggu beberapa saat



   4. Pilih radio button yang ada di samping tulisan dari komputer Anda



   5. Klik tombol Browse...



   6. Pilih banner yang telah di buat yang ada pada komputer sobat



   7. Tunggu beberapa saat sampai proses selesai.



   8. Gambar banner sobat akan di tampilkan



   9. Klik tombol SIMPAN PERUBAHAN



   10. Selesai.
Nah silahkan sobat lihat hasilnya!

jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja
langkah-langkah di atas.

Ok sobat, mungkin pembahasan tentang cara mengganti banner sudah selesai, untuk
melihat contoh blog yang sudah saya tambahkan banner silahkan klik di sini.
Pembahasan diatas adalah untuk menambahkan hanya satu banner saja, apabila sobat
tertarik membuat banner yang bisa berubah-ubah, silahkan baca di sini. Untuk melihat
contohnya silahkan klik di sini

Selamat mencoba sobat !


Tips Membuat Multi Kolom

Jumpa lagi.... jumpa lagi euy dengan kang Rohman asli dari bandung (narsis abissssss).
Yupssss... kesempatan kali ini mau sedikit mengulas tentang blog design. Pernah
mengunjungi blog yang menggunakan wordpress? saya yakin jawabannya pernah
bahkan sering. Kalau jawabanya seperti itu, tentunya sering juga dong memperhatikan
layout atau desain dari templatenya. Nah jika saya sendiri sering memperhatikan bahwa
template wordpress dibagian footer nya sering kali dibuat menjadi multi kolom, ada yang
dibuat jadi dua kolom, tiga kolom, dan ada juga yang sampai empat kolom. Mungkin
bagi yang sedikit kritis akan muncul pikiran atau bahkan pertanyaan "apakah bisa
template blogger bagian footer nya dibuat menjadi multi kolom?" Saya tegaskan
jawabanya adalah "bisa". mau tau caranya? ya udah baca dech sampai tuntas.


Untuk membuat bagian footer menjadi multi kolom tidaklah sulit seperti yang sobat
bayangkan (so pinter niye), hanya sedikt trik yang perlu dilakukan maka nanti akan
tercipta footer blog yang multi kolom. Agar lebih untuk mempermudah pemahaman
tentang trik ini, saya sarankan sobat untuk mempraktekannya secara langsung, caranya
buatlah satu buah blog untuk percobaan (jangan pada blog utama), ini untuk
menghindarkan hal-hal yang tidak diinginkan terhadap blog sobat.

Persiapan pertama yang harus di perhitungkan adalah berapa lebar kolom keseluruhan
yang mau kita pecah menjadi multi kolom. selanjutnya yaitu berapa kolom yang mau di
buat? kemudian berapa jarak antara kolom yang satu dengan kolom yang lainnya? Jika
kita melihat terhadap banyaknya template, tentu saja tidak akan menemui titik temu atau
kata yang sama dalam hal persiapan hal di atas tadi, nah agar semuanya menjadi seragam
maka saya akan mengambil contoh dengan menggunakan template minima yaitu
template asli yang di sediakan oleh blogger.com dengan pilihan warna putih. Banyaknya
kolom yang akan kita buat adalah sebanyak tiga kolom.

Setelah saya perhatikan, template minima asli mempunyai lebar kolom sebesar 660px
atau 660 pixel, karena kolom yang akan kita buat sebanyak tiga kolom, maka secara
perhitungan matematika adalah seperti ini --> 660px : 3 = 220px. akan tetapi apabila
memakai angka tersebut maka tulisan yang tersimpan antara kolom yang satu dengan
yang lainnya akan bertabrakan sehingga menjadi tidak sedap untuk di pandang mata.
Untuk mengatasi masalah ini maka perlu menambahkan jarak sela antar kolom, kode
pembuat jarak sela adalah padding, misalkan ambil contoh besar padding yang akan saya
gunakan adalah sebesar 10 pixel. hasil dari perhitungan yang kita pakai adalah kolom
yang akan di buat adalah sebesar 205px (205 pixel). Agar sedikit tampak lebih cantik,
akan saya tambahkan pula kode UL LI sehingga sebuah link yang akan tercipta melalui
kode ini akan berubah warna background yang cantik, nanti lihat contohnya dech...

Eh... sudah buat belum blog minima nya? buat donk agar lebih mudah untuk di pahami...
atau sudah siapp.... bener sudah siap?... kita mulaiiiiii...


Langkah #1 :

 Hal pertama yang harus di ingat adalah jangan mencentang kotak kecil di samping
tulisan expand widget template karena jika sobat mencontengnya maka akan keluar
kode widget yang bikin pusing kepala, jadi sekali lagi Jangan mencontengnya.

 Tambahkan kode berikut persis di atas kode ]]></b:skin> :

/* bottom
---------------------------- */

#bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;

}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom { /* yang ini nih kode kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}

#center-bottom { /* kalo yg ini kode kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}

#right-bottom { /* kalo yg ini kode kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}



 Tuju bagian body yaitu pada bagian bawah kode template, dan cari kode yang mirip
seperti ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
 Copy paste kode berikut persis di atas kode yang atas tadi :

<div id='bottom'>

<b:section class='bottom' id='left-bottom'/>

<b:section class='bottom' id='center-bottom'/>

<b:section class='bottom' id='right-bottom'/>

</div>



 Jangan lupa akhiri dengan mengklik tombol Simpan Template.

 Selesai.


Langkah #2 :

 Klik menu Elemen Halaman.

 Lihat apakah kolom yang tadi dibuat sudah tampak atau belum? jika sudah, klik link
Tambah sebuah Elemen Halaman, klik tombol TAMBAHKAN KE BLOG di bawah
tulisan Feed, untuk sekedar mencoba, silahkan isikan dengan alamat berikut :

http://template-unik.blogspot.com/atom.xml

atau

http://rubrik-elektronik.blogspot.com/atom.xml

atau juga yang ini :

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

Jangan lupa untuk klik tombol SIMPAN

 Silahkan lihat hasilnya apakah sudah sukses atau belum? jika belum sukses coba lihat
lagi lanhkah-langkah di atas, barangkali ada yang terlewatkan. Jika sudah sukses,
ucapkan terima kasih kepada kang rohman


Masih kurang percaya dengan yang saya tulis, bolehlah lihat contoh jadinya. Silahkan
klik di sini! atau jika ingin melihat aplikasi lain dari kode di atas bisa di lihat di sini!
Pembuatan kolom yang seperti di atas, kebanyakan di gunakan untuk Recent Post atau
juga Recent Comments. Untuk membuat Recent Posts atau juga Recents Comments
akan saya bahas pada postingan berikutnya.

Selamat bereksperimen !


Mengatur Tampilan Judul Posting

Jika Pada postingan yang terdahulu yaitu tentang bagaimana cara mengatur tampilan
judul sidebar, maka ada pembaca yang mempunyai keingintahuan yang lebih. Nah
pembaca ini mengajukan pertanyaan lain yaitu "bagaimana cara mengatur judul
posting?". Untuk mengatur tampilan judul posting, pada intinya sama dengan mengatur
judul sidebar, anda bisa mengatur besarnya hurup, warna hurup, warna background,
gambar background, besarnya padding, ingin bergaris atau apapunlah namanya. Masih
bingung? nih saya beri sedikit gambaran.

Jika mengacu pada template buatan blogger (minima), maka judul postingan akan di atur
pada kode css seperti ini :

.post h3 {
...........
...........
...........
}



Namun pada template baru, judul postingan merupakan sebuah link sehingga anda harus
mengatur juga kode yang ada pada kode css seperti ini :



.post h3 a, .post h3 a:visited, .post h3 strong {
............
............
............
}



.post h3 strong, .post h3 a:hover {
............
............
............
}
Anda tinggal menambahkan atau mengurangi kode yang ada di posisi titik-titik, caranya
tinggal baca postingan tentang mengatur tampilan judul sidebar. Masih bingung? jangan
dulu deh, kang rohman baru pulang dari bandung nih, masih puyeng dan males ngetiknya
kalau terlalu panjang.



See you at my next post!

Kotak Komentar Di bawah Posting

Duh rupanya banyak yang salah paham nih tentang postingan kang rohman yang
kemaren, saya tegaskan bahwa postingan itu khusus bagi anda yang sudah me modifikasi
kotak komentar dengan kotak komentar yang di buat oleh jackbook. Bagi anda yang
belum pernah memodifikasi kotak komentar sebelumnya alias masih perawan, silah baca
postingan oom yang di sini atau mungkin ingin kang rohman yang nulis :D ya udah kalau
gitu kang rohman tulis aja deh sekalian.


Sekali lagi saya tegaskan bahwa tutorial pasang kotak komentar di bawah posting ini
khusus bagi anda yang belum pernah memodifikasi kotak komentar anda sebelumnya
atau dengan kata lain masih asli dari sononya. Yukkk...kita mulai saja biar cepat kelar.

   1. Silahkan Login ke http://draft.blogger.com dengan ID blogger anda. Ingat! bukan
      login ke blogger.com tapi ke draft.blogger.com karena fasilitas ini masih dalam
      tahap uji coba.



   2. Tuju pada blog yang akan anda pasang kotak komentarnya. Klik pada
      Pengaturan



   3. Klik tab Komentar, tuju ke tulisan Penempatan Formulis Komentar, kemudian
      beri tanda pada radio button untuk Disemat di bawah entri. Biar lebih jelas, sok
      dilihat gambarnya :
   4. Klik tombol Simpan Pengaturan yang ada di bagian bawah layar monitor anda.



   5. Selesai. Silahkan lihat hasilnya, mudah-mudahan langsung sukses.




Duhhh... saya belum berhasil nih!!! gimanaaaa??????

Jika belum berhasil, bisa mencoba langkah-langkah di bawah ini (biasanya jarang ada
yang gagal kalau yang ini).

Langkah #1

   1. Masih dalam posisi yang tadi, klik Tata Letak.



   2. Klik Edit HTMl.



   3. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor.
      Silahkan di Backup dulu templatenya (sangat penting).



   4. Beri tanda centang pada kotak kecil di samping tulisan Expand Template
      Widget.
5. Tunggu beberapa saat sampai proses selesai.



6. Cari kode yang seperti di bawah ini( karena kadang kode template berbeda-beda,
   silahkan fokus ke kode yang warna hijau, dan biasanya kode ini ada dua, pilih
   kode yang posisinya di bagian bawah ya!)




   <p class='comment-footer'>

              <b:if cond='data:post.allowComments'>

           <a expr:href='data:post.addCommentUrl'
   expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/>
   </a>

          </b:if>


   </p>




7. Hapus / delete kode diatas, lalu ganti dengan kode di bawah ini :




   <p class='comment-footer'>

   <b:if cond='data:post.embedCommentForm'>

   <b:include data='post' name='comment-form'/>
      <b:else/>

      <b:if cond='data:post.allowComments'>


      <a expr:href='data:post.addCommentUrl'
      expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/>
      </a>

      </b:if>

      </b:if>

      </p>




   8. Klik tombol Simpan Template.



   9. Langkah #1 selesai, yuk    dulu biar lebih santai gitu lhohhh..



Sudah belum minum nya? kalau sudah, kita mulai lagi dech. nyok encang encing enya
babeh kita mulai lagi main bajidor nya ya.

Langkah #2

   1. Klik pada Pengaturan



   2. Klik tab Komentar, tuju ke tulisan Penempatan Formulis Komentar, kemudian
      beri tanda pada radio button untuk Disemat di bawah entri. Biar lebih jelas, sok
      dilihat gambarnya :
   3. Klik tombol Simpan Pengaturan yang ada di bagian bawah layar monitor anda.



   4. Selesai. Silahkan lihat hasilnya.



Biasanya kalau dengan cara yang kedua ini jarang gagal, jika masih gagal juga, ya udah
kang rohman ucapkan "kaciaaaaaaaaan dech loe"

				
DOCUMENT INFO
Shared By:
Stats:
views:1149
posted:2/5/2010
language:Indonesian
pages:45