Cara utak-atik tampilan font pada widget sidebar.
Kenapa harus diutak-atik? Jujur saja saya pernah kesal setiap memasang sebuah widget pada sidebar. Beberapa widget juga disertai tulisan di dalamnya. Yang masalah bukan pada tulisannya tetapi adalah pada tampilan tulisan tersebut, misalnya ukuran fontnya terlalu besar, terlalu kecil, atau jenis font dan warnanya tidak serasi dengan warna template blog kita. Sebagian widget memang menyediakan fasilitas untuk mengutak atik tampilan font secara instan, sehingga kita tidak perlu bergulat dengan kode HTML. Tapi sebagian widget sama sekali tidak menyediakan fasilitas ini. Nah, jika ini yang terjadi apa yang bisa kita lakukan?
Sebenarnya prinsip utak atik tampilan font ini sama pada setiap halaman web atau blog, baik pada entri posting, header, footer, maupun pada kolom komentar. Karena rumusnya sudah standar. Tinggal soal penempatan saja. Beberapa kode HTML untuk utak-atik tampilan font yang lazim digunakan adalah:
<span style="font-size: 12px;"></span> (untuk ukuran font)
<b> </b> (untuk huruf tebal)
<i> </i> (untuk huruf miring)
<strike> </strike> (untuk huruf yang dicoret)
<div style="color:#dddddd;"></div> (untuk warna huruf)
<div style="background-color:#dddddd;"></div> (untuk warna background huruf)
Sebagai catatan, kode yang berwarna hitam tebal adalah tag pembuka. Sedangkan kode yang berwarna biru adalah sebagai tag penutup. Kedua kode ini harus ditulis berpasangan. Kata yang akan diberi variasi harus berada diantara kedua tag tersebut. Jika pasangan tag ini tidak lengkap maka tidak akan terjadi perubahan apa-apa pada fontnya. Biasanya akan muncul peringatan eror. Sebagai contoh maka penulisannya akan menjadi seperti ini:
<b>huruf tebal</b>
<i>huruf miring<i>
<strike>huruf dicoret </strike>
<span style="font-size: 12px;">huruf ukuran 12 pixels</span>
<div style="color: #dddddd;">huruf berwarna abu-abu</div>
<div style="background-color: #dddddd;">huruf dengan background abu-abu</div>
Sebagai tambahan, yang berwarna hijau adalah ukuran fontnya. Sedangkan yang berwarna merah adalah kode untuk warnanya. Kedua ini bisa anda ganti sesuai keinginan anda. Jika kesulitan dengan kode warna anda bisa lihat Daftar Kode Warna.
.sidebar { (sidebar)
color:#000000; (warna tulisan di sidebar hitam)
font-size:11px; (ukuran font di sidebar 11 pixels)
line-height:1.3em; (jarak antar font secara vertikal 1.3em)
Nah, yang jadi pertanyaan mungkin: Bagaimana cara menyisipkan kode-kode tersebut pada widget sidebar? Sebagai contoh misalnya ada tampilan widget seperti ini:
Kenapa harus diutak-atik? Jujur saja saya pernah kesal setiap memasang sebuah widget pada sidebar. Beberapa widget juga disertai tulisan di dalamnya. Yang masalah bukan pada tulisannya tetapi adalah pada tampilan tulisan tersebut, misalnya ukuran fontnya terlalu besar, terlalu kecil, atau jenis font dan warnanya tidak serasi dengan warna template blog kita. Sebagian widget memang menyediakan fasilitas untuk mengutak atik tampilan font secara instan, sehingga kita tidak perlu bergulat dengan kode HTML. Tapi sebagian widget sama sekali tidak menyediakan fasilitas ini. Nah, jika ini yang terjadi apa yang bisa kita lakukan?
Sebenarnya prinsip utak atik tampilan font ini sama pada setiap halaman web atau blog, baik pada entri posting, header, footer, maupun pada kolom komentar. Karena rumusnya sudah standar. Tinggal soal penempatan saja. Beberapa kode HTML untuk utak-atik tampilan font yang lazim digunakan adalah:
<span style="font-size: 12px;"></span> (untuk ukuran font)
<b> </b> (untuk huruf tebal)
<i> </i> (untuk huruf miring)
<strike> </strike> (untuk huruf yang dicoret)
<div style="color:#dddddd;"></div> (untuk warna huruf)
<div style="background-color:#dddddd;"></div> (untuk warna background huruf)
Sebagai catatan, kode yang berwarna hitam tebal adalah tag pembuka. Sedangkan kode yang berwarna biru adalah sebagai tag penutup. Kedua kode ini harus ditulis berpasangan. Kata yang akan diberi variasi harus berada diantara kedua tag tersebut. Jika pasangan tag ini tidak lengkap maka tidak akan terjadi perubahan apa-apa pada fontnya. Biasanya akan muncul peringatan eror. Sebagai contoh maka penulisannya akan menjadi seperti ini:
<b>huruf tebal</b>
<i>huruf miring<i>
<strike>huruf dicoret </strike>
<span style="font-size: 12px;">huruf ukuran 12 pixels</span>
<div style="color: #dddddd;">huruf berwarna abu-abu</div>
<div style="background-color: #dddddd;">huruf dengan background abu-abu</div>
Sebagai tambahan, yang berwarna hijau adalah ukuran fontnya. Sedangkan yang berwarna merah adalah kode untuk warnanya. Kedua ini bisa anda ganti sesuai keinginan anda. Jika kesulitan dengan kode warna anda bisa lihat Daftar Kode Warna.
.sidebar { (sidebar)
color:#000000; (warna tulisan di sidebar hitam)
font-size:11px; (ukuran font di sidebar 11 pixels)
line-height:1.3em; (jarak antar font secara vertikal 1.3em)
Nah, yang jadi pertanyaan mungkin: Bagaimana cara menyisipkan kode-kode tersebut pada widget sidebar? Sebagai contoh misalnya ada tampilan widget seperti ini:
Posting Komentar - Back to Content