Kelas Online Blogging Lanjutan (Sessi Terakhir)

Review oleh Mak Nunung Nurlaela

Pertemuan Terakhir, tanggal 7 April 2013

Materi untuk pertemuan akhir, pada kelas online ngeblog bareng Mak Shinta Ries dan diikuti oleh sekitar 30 orang. Kelas dimulai kira-kira pukul 19.00 wib. Adapun materinya, yaitu masih melanjutkan kelas sebelumnya.

1. Mendapatkan background gratis atau belajar memasang/mengganti latar belakang blog. Caranya adalah adalah dengan dilihat di bagian kanan -> preview -> setelah di preview silahkan di klik kanan backgroundnya -> save as. Background bisa didapat secara gratis di link berikut: http://www.colourlovers.com/pattern/50713/pat
2. Mengenal dasar CSS untuk mengganti warna. Sebelumnya belajar mengenal warna pada web :
   Warna di web diidentifikasi dengan 6 digit kode yang disebut warna hexadecimal. Setiap warna memiliki kode yang berbeda.
   Pada web http://design-seeds.com/ terdapat kode warna di setiap warna yang ingin kita pakai dengan cara mengarahkan kursor mouse pada warna yang dimaksud. Cara lainnya (intermediate level) menggunakan colorzilla (add on browser) atau add on dengan fungsi eyedropper.
3. Membuat contoh HTML

Contoh:

Rata Tengah Gambar

Untuk membuat rata tengah gambar, tambahkan <center> tags sebelum dan sesudah kode, contoh :

 <center>KODE DISINI</center>

 Misal untuk memasang kode banner kumpulan emak blogger dan dibuat rata tengah :

 <center><a href=”http://emak2blogger.web.id” target=”_blank”><img src=”http://i1261.photobucket.com/albums/ii597/emak2blogger/logokeb2013small.png” border=”0″ alt=”KEB”></a></center>

kode ini bisa dipakai untuk banner, gambar, social media dan lain-lain. 

1. Mengedit CSS mana saja yang bisa diubah

Untuk

mendapatkan data bagian mana saja yang bisa dikustomisasi, bisa dilihat melalui

Template -> Edit HTML -> kemudian cari (ctrl F / Command F) :

}]]></b:skin>

Diatas

kode itu terdapat rangkaian css yang bisa kita rubah. Caranya ada dengan

meng-copy dan mem-paste kode yang kita mau pada CSS editing tingkat lanjut.

Dari situ dapat kita ubah dari warna, font, background dan lain-lain.

Kode

ini menggunakan bahasa inggris yang mudah dimengerti bagian mana yang di

maksud. Seperti contoh :

body

{

font:

normal normal 14px muli, Trebuchet, Verdana, sans-serif;

color:

#444;

}

body

disini artinya adalah keseluruhan blog secara umum, jadi secara umum mengunakan

font muli yang berukuran 14px. Apabila ingin lebih spesifik kita bisa

menambahkan selector (penanda lain) seperti :

h3.post-title

{

text-align:center;

font:

normal normal 30px Julius Sans One, sans-serif;

margin-top:

-10px;

}

artinya

pada judul posting, kita menggunakan font Julius dengan ukuran 30px dan rata

tengah. Tambahan margin untuk menaikkan posisi judul lebih keatas (-).

Cara

lainnya (intermediate level) untuk mengetahui fungsi selector adalah dengan

menggunakan firebug.

1. Properti dan nilai yang dipakai pada CSS dasar, sebagai berikut:

properti dan nilai ini dikombinasikan dengan penanda yang tadi kita temukan diatas kode

}]]></b:skin>

jadi di copy terlebih dahulu kode yang mau diganti (misal post title) kemudian di paste di tingkat lanjut css, baru kemudian diganti sesuai keinginan

—-

Warna background :

background-color: #FFFFFF;

garis batas :

border: 1px solid #FFFFFF;

kode diatas ini terbaca sebagai, garis batas ukuran 1px bentuknya solid (padat) dan berwarna putih

style= solid/dashed/dotted

pembagian jenis garis terdiri dari :

– lurus : solid

– putus-putus : dashed

– titik titik : dotted

Bisa juga dengan menambahkan garis batas hanya diatas/dibawah seperti contoh :

border-top: 1px solid #FFFFFF;

border-bottom: 1px solid #FFFFFF;

border-right: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;

Untuk teks, pilihannya bisa dari warna, perataan (kanan, kiri, tengah), apakah besar semua (uppercase), apakah kecil semua (lowercase), atau tidak berubah sama sekali (none), bisa juga di dekorasi (garis bawah), ukuran font,  jenis font.

text

color: #FFFFFF;

text-align: left; center;

right;

text-decoration: underline;

text-transform: uppercase; lowercase;

Seperti yang ditulis oleh mak Shinta Ries, ini butuh kreativitas bagaimana memadu padankan kode kode tersebut menjadi sesuatu yang menarik dan cantik. tinggal kita menyesuaikan sesuai keinginan. misalnya ingin  warna pink judul blognya, tinggal dicari kode warnanya, bisa melalui design-seeds.com supaya warna tetap eye cathing. Dan seterusnya.

Demikian review kelas KEB Online pertemuan kemarin. Walau tidak semua berhasil mengerjakan tahapan-tahapan pada saat kelas berlangsung, namun peserta tetap antusias mengikutinya dan juga bertanya jika ada yang masih bingung dan kurang paham. Pertemuan di akhiri oleh mak Shinta dengan kalimat penutup serta permohonan maaf selama mengajar di kelas KEB. Kemudian di tutup dengan support dan pengumuman dari mak Sumarti Saelan, sebagai pendamping.

Mohon maaf jika ada kesalahan dan kekurangan.

Wassalam