Monday, December 17, 2012

Tutorial Dasar Bagian 2 (Edit HTML) Blogspot

Lanjutan dari bagian 1 Cara Menambhakan Widget di Blogspot, untuk bagian ke 2 ini saya akan memberikan tutorial dasar untuk pengeditan template Blogspot yaitu Tutorial Dasa Bagian 2 (Edit HTML) Blogspot, untuk area Edit HTML mungkin bagi anda yang pemula sedikit rumit karen bayak kode atau script yang aneh-aneh dan jika dilihat terus menerus akan menimbulkan pusing. hehe.. Tapi disnilah para Designer website menunjukan keahlianya dalam memebuat atau memodifikasi tampilan suatu website atau blog menjadi lebih menarik dan stylish. Di area Edit HTML ini kita bisa berkreasi sesuka hati kita unutk merubah tampilan blog kita seperti mengganti warna background, warna, ukuran dan jenis huruf, warna link, warna garis border, mengatur ukuran lebar template dan lain-lain. Untuk dapat memasuki area Edit HTML langkah awalnya sama seperti Cara Menambhakan Widget di Blogspot, Berikut caranya:

1. Login akuin Blogger anda
2. Lihat gambar dibawah ini, Pilih Template

3. Anda akan menemukan tampilan seperti ini:

- Candangkan/pulihkan = unutk membackup atau mengupload template yg kita punya

- Sesuaikan = untuk menyesuaikan warna background, warna, ukuran dan jenis font. disarankan bagi anda yang memakai template asli bawaan blogger.

- Edit HTML = inilah yang akan kita tuju. Klik Edit HTML

4. Muncul tampilan seperti ini:, disinilah kita mulai berkreasi. tapi sebelumnya juka muncul tampilan sebelum ini klik saja Lanjutkan.

5. Gambar pada nomor 4 itu gambar dari template saya, mungkin sedikit berbeda dengan template anda pada bagian kode atasanya,, seperti tampilan pada gambar nomor 4. jika penasaran dengan kodenya silakan anda scroll kebawah.
- Lihat tulisan Expand Temmplate Widget, fungsinya untuk menampilkan kode secara keseluruhan. coba saja klik/centang kotak kecil itu.

6. Untuk menemukan kode yang anda cari dengan mudah sebaiknya gunakan Ctrl+F lalu ketik kode yang anda cari, misalnya background, font atau font-family.
- Contoh untuk mengganti background:

background:#000000;

#000000 adalah kode untuk warna hitam, anda bisa ganti dengan yg lainya misalkan #FFFFFF untuk warna putih. atau anda juga bisa mengganti kode tersebut dengan text seperti white, blue, gree, yellow, red, dan lain-lain. menjadi seperti ini:

background:red;

- Untuk mengganti font atau jenis huruf :
Biasanya kodenya seperti ini:

font-family:Georgia,Times,"Segoe UI";

Segoe UI merupakan jenis huruf yang dipakai, anda bisa menggantinya dengan jenis huruf lainya, lihat saja nama-nama font yang ada di Microsoft Word.
-Untuk ukuran font anda bisa mencari kode font-size
Contoh: