Belajar Membuat Template tahap empat

Mengatur Ukuran ,Warna , Style (Face) dan Bakground Huruf Template

Artikel ini adalah seri belajar membuat template blog. Jika anda baru saja berkunjung di blog ini, silahkan anda lihat terlebih dulu seri :

- Belajar Cara Membuat Template Blog

- Belajar Membuat Template Tahap Dua

- Belajar Cara Membuat Template Tahap Tiga

Dan pada sesi ini adalah merupakan sub bagian dari tahap tiga dalam pelajaran membuat template blog. Yang kali ini kita akan mencoba mengatur ukuran dan warna huruf yang ada di template blog kita.

Mari kita mulai dari bagian Header.

Sebelumnya mari kita lihat identitas isi header sebagai berikut :

<div id="header">Panduan Belajar Membuat Template Blog</div>

Kata ahli SEO, header merupakan salah satu komponen penting, dimana disinilah letak nama atau judul blog bercokol. Untuk hal ini disarankan judul blog diberikan tag H1 . Apa itu tag H1 ? tag huruf ini adalah merupakan urutan penting yang akan memberikan sinyal kepada robot crawl, komponen huruf blog mana yang paling dipentingkan. Dan tag huruf diurut mulai dari h1-h2-h3-h4-h5-h6. Lebih jauh soal ini, yang sering juga disebut semantik template bisa lihat di sini : fanari-id : semantic-html-definisi-dan-pengaruhnya-terhadap-seo

Oleh sebab itu mari kita tambahkan dulu tag h1 pada titel blog , menjadi sebagai berikut :

<div id="header"><h1>Panduan Belajar Membuat Template Blog </h1></div>

Setelah anda tambahkan lalu SAVE, maka lihat hasilnya seperti yang ada di template-pertamaSTEP13

Judul atau title blog, biasanya merupakan sebuah link, atau bisa pula dikatakan : diposisikan menjadi sebuah link. Apa itu LINK ? lihat definisi link disini : Wiki- link URL

Untuk membuat nya menjadi link, kita perlu merubah identitas title header blog menjadi sebagai berikut :

<div id="header"><h1><a href="http://www.bahrul-ulum.com"> Panduan Belajar Membuat Template Blog </a></h1>
</h1></div>

Tulisan http://www.bahrul-ulum.com adalah sebuah link halaman web yang tidak terlihat secara langsung , dan tulisan Panduan Belajar Membuat Template Blog , adalah title atau judul blog yang juga disebut ANCHOR TEXT , yang jika di klik akan menuju ke link yang ditulis (dalam hal ini link nya adalah http://www.bahrul-ulum.com) .

Jadi ini yang perlu diingat : Untuk Cara membuat link , kode HTML nya adalah :

<a href="URLalamat web">Anchor text</a>

Jika sudah dirubah, maka hasilnya akan tampak seperti yang ada di template-pertamaSTEP14

Kemudian, kita akan coba mengatur ukuran huruf dan warna huruf Judul blog kita.Karena ini adalah pengaturan, maka kita akan fokus pada kode yang ada di bagian style.css. Buka kembali template-pertamaSTEP14

Kita tambahkan kode css sebagai berikut :


#header h1 a{
color:#00f;
font-size: 0.9em ;
font-family:arial, helvetica, sans-serif;
}

    Catatan : Di template14 ini saya telah merubah warna background header menjadi putih, agar tulisan Judul blog lebih terlihat jelas perubahannya.

Dari hasil perubahan , kita melihat :
- warna Huruf telah berubah menjadi biru.
Kode pengaturan warna huruf ada di : color:#00f;
perhatikan pada kode warna HTML yang diawali dengan tanda pagar ( # ) dikuti dengan kombinasi angka dan huruf lalu diakhiri tanda titik koma ( ; ) . Kode warna HTML sebenarnya ada beberapa macam, tapi yang paling sering digunakan untuk CSS adalah type hex seperti diatas, Untuk Kode warna HTML lainnya bisa dilihat disini : Kode Warna HTML

- ukuran huruf judul blog telah berubah
Kode pengaturan Ukuran huruf ada di : font-size: 0.9em;
tanda ukuran huruf ditandai dengan besaran angka dikuti dengan kode satuan em. Di dunia CSS ada beberapa satuan yang dipakai yaitu besaran cm , em , % dan px .
Contoh penggunaanya :

font-size: 130%;
font-size: 0.9em;
font-size: 20px;

Silahkan dicoba mengubah besaran angka dan satuan nya ya…

- Jenis Huruf Berubah
Kode pengaturan jenis atau tampilan(face) huruf ada di :
font-family:arial, helvetica, sans-serif;
Font family digunakan untuk mempengaruhi tampilan jenis huruf. Ini seperti kalau kita menulis di MS word, lalu memberikan style jenis huruf pada tulisan yang misalnya hendak di utamakan. Properti font-family menentukan font untuk suatu elemen.Properti font-family dapat memegang beberapa nama font sebagai sistem “fallback” yg maksudnya Jika browser tidak mendukung font pertama,maka ia mencoba font berikutnya.
Ada dua jenis nama font-family :
* family-name- adalah Nama font-family, seperti “times”, “courier”, “arial”, dll
* generic-family – adalah Nama generic-family, seperti “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace”.
Mulailah dengan font yang Anda inginkan, dan selalu akhiri dengan sebuah font generic-family, agar browser memilih font yang sama dalam generic-family , jika tidak ada font lain yang tersedia.
Catatan: Jika nama font mengandung white-space (Spasi), maka harus diberikan tanda kutip dua. Dan tanda kutip tunggal digunakan ketika menggunakan atribut “style” dalam HTML.

Nah jenis font-family lainnya yang sempat saya kumpulkan bisa dilihat di template-pertamaSTEP15 .

Kode pengaturan huruf yang lain yaitu :

font-weight: normal;
text-transform: normal;
letter-spacing: normal;

font-weight: Mengatur tebal tipis Huruf
Kode font-weight lain yang bisa digunakan :

font-weight:normal --> menampilkan karakter normal. Ini adalah default
font-weight:bold --> menampilkan karakter tebal
font-weight:bolder  --> menampilkan karakter lebih tebal lagi
font-weight: lighter --> menampilkan karakter tipis
font-weight:900 --> menampilkan karakter lebih tebal lagi ( sama dengan bolder)
angka yang bisa digunakan :  100 ,200 ,300 ,400 ,500 ,600 ,700 ,800 ,900
angka  400 adalah sama seperti normal , dan 700 adalah sama dengan bold

text-transform : Mengatur Kapitalisasi huruf
Kode text-transform: yang bisa digunakan :

text-transform:uppercase --> karakter pertama dari setiap kata menjadi huruf besar
text-transform:capitalize --> Mentransformasi semua huruf pertama menjadi huruf besar
text-transform:lowercase   --> Mentransformasi semua karakter menjadi huruf kecil

letter-spacing : Mengatur jarak antar huruf

Kode letter-spacing : yang bisa digunakan :

letter-spacing: 2px;
letter-spacing: 0.1em;

Jika sudah ditambahkan , maka hasilnya akan tampak seperti yang ada di template-pertamaSTEP16

Setelah kita mengatur ukuran,warna,kapitalisasi,tebal dan jarak huruf, selanjutnya kita akan mencoba memberikan latar belakang atau background pada Header dan Huruf judul blog kita,

Ada beberapa cara dalam memberikan background, yaitu dengan kode CSS dan dengan image .
Dengan cara background kode css :

Tambahkan kode css sebagai berikut : :

#header h1 a{
color:#00f;
font-size: 0.9em ;
font-family:arial, helvetica, sans-serif;
font-weight:bolder;
text-transform:uppercase;
letter-spacing: 2px;
background: #0f0;
}

Jika sudah ditambahkan , maka hasilnya akan tampak seperti yang ada di template-pertamaSTEP17
Dengan cara background Image :

Dengan cara menampilkan background image garis yang diulang (repeat)
Dengan cara merubah semua huruf dengan image
Dengan cara menampilkan image disebelah tulisan
Dengan cara menampilkan background image full

Tapiiii.. Karena halaman ini sudah terlalu panjang, maka  akan saya lanjutkan pada artikel berikutnya :  Cara Menampilkan image Sebagai background Template