Mengatur Ukuran Huruf Template Blog

Seri Belajar Cara Membuat Template Blogspot : Mengatur Ukuran ,Warna , Style (Face) dan Bakground Huruf Template

Artikel ini adalah seri belajar cara membuat template blog. Jika anda baru saja berkunjung di blog bahrul-ulum dot com, silahkan anda lihat terlebih dulu seri :

• Belajar membuat template blog
• Belajar Membuat Template Tahap Dua
• Tutorial Membuat Template Blog Tahap Tiga
• Panduan Membuat Template 3B

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="https://bahrululumdotcom.blogspot.com"> Panduan Belajar Membuat Template Blog </a></h1> </h1></div>

Tulisan https://bahrululumdotcom.blogspot.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 https://bahrululumdotcom.blogspot.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.contoh : Saya Mau Belajar Cara Membuat Template Blog
text-transform:capitalize --> Mentransformasi semua huruf pertama menjadi huruf besar contoh: SAYA MAU BELAJAR CARA MEMBUAT TEMPLATE BLOG
text-transform:lowercase --> Mentransformasi semua karakter menjadi huruf kecil.contoh : saya mau belajar cara membuat template blog
 

letter-spacing : Mengatur jarak antar huruf

Kode letter-spacing : yang bisa digunakan :

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

contoh tulisan normal tanpa letter spacing : belajar cara membuat template blog
contoh tulisan dengan letter spacing 2px :  belajar cara membuat template blog

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 Cara membuat Template Tahap 3b ini sudah terlalu panjang, maka  akan saya lanjutkan pada artikel berikutnya :  Cara Menampilkan image Sebagai background Template

Update : 13 Agustus 2010
Alhamdulillah silahkan lihat lanjutannya disini ya.. :
memasukkan-gambar-atau-image-sebagai-background

Tagline :

• ukuran huruf
• ukuran huruf php
• tulisan bahrul ulum
• mengatur spasi pada wordpress
• atur ukuran html page link
• mengatur jarak antar baris text pada halaman web php
• mengubah ukuran text link php
• mengurangi jarak spasi pada postingan sidebar
• mengubah ukuran huruf header blogspot
• mengubah ukuran font pada h1 pada wordpress
• mengubah ukuran font html template
• mengubah ukuran font dengan php
• mengubah jarak spasi postingan
• mengganti jenis huruf judul blog
• mengetahui ukuran huruf title di wordpress
• mengatus spasi di css
• mengatur weight teks
• mengatur ukuran tulisan web
• mengatur ukuran teks blog
• mengatur ukuran teks
• merubah huruf dan spasi isi posting blogger
• merubah kode HTML spasi huruf
• ukuran huruf skck
• ukuran huruf rugos
• ukuran gambar untuk background judul blog
• ukuran format tulisan blog wordpress berubah?
• ukuran angka
• tulisan tidak ada jarak di template wp
• merubah ukuran huruf ada judul blog
• templates blog yang tulisannya macam2
• template huruf
• setting ukuran huruf di blogger
• pengaturan warna teks link pada php
• pengaturan ukuran huruf html
• Pengaturan ukuran huruf di FB
• PENGATURAN JARAK HURUF KE HHURUF
• merubah ukuran jarak antar widget blog
• ukuran hurup <h1> pada blog
• mengatur ukuran huruf php size
• mengatur ukuran background
• mengatur tulisan pada gadget blog
• css mengatur jarak spasi dan enter
• code HTML untuk pengaturan baris image pada widget
• cara ubah ukuran font judul posting wp
• cara mengubah ukuran image post blogspot
• Cara mengatur jarak text dengan header pada html
• cara mengatur jarak spacing antar baris huruf
• cara mengatur jarak baris menggunakan html
• Cara mengatur jarak baris hurup
• cara mengatur besar judul blog
• cara mengatur besar huruf Header di blog
• cara membuat ukuran huruf di blog
• cara membuat mengatur spasi pada blogger
• cara bikin posting blog dengan ukuran tulisan yang sama
• buat ukuran huruf di blog
• buat ukuran huruf atau tulisan di blog
• bahasa php membuat jarak di atas header
• definisi ukuran HURUF
• jarak antara judul dan text postingan pada blogspot
• mengatur tebal font
• mengatur spasi tulisan di post blog wordpress
• mengatur size image dengan css
• mengatur size huruf dengan css
• mengatur jarak tulisan antar widget
• mengatur jarak spasi wordpress
• mengatur jarak spasi judul blog
• mengatur jarak huruf pada corel
• mengatur h2 di wordpress
• mengatur besar font di wordpress
• menentukan ukuran background gambar dalam blog
• membuat ukuran huruf
• kode template karakter huruf
• kode php untuk ukuran huruf
• kode html ukuran teks 0 9em
• judul tulisan jadi huruf besar dan berwarna pada wordpress
• apa itu h1 tags?