Style font ringkas/praktis untuk posting

Saat melakukan posting, pembuatan style font atau huruf dan angka biasanya selalu menggunakan toolbars/fitur yang tersedia di box posting, baik untuk membuat font berwarna, font tebal, ataupun merubah besar . Ada trik spesial yang sebenarnya jarang sekali diungkap untuk membuat style-style font tertentu yang dapat kita gunakan untuk melakukan posting dimana ruang posting menjadi lebih ringkas/praktis dan tidak "nggedabyah" (bahasa Indonesia : tidak terlalu memenuhi ruang posting).

Dengan menyimpan beberapa KODE CSS di bagian head yang berkaitan dengan style font, maka kita dapat membuat berbagai macam style font/teks yang bahkan dalam beberapa hal tak mungkin dilakukan jika hanya mengandalkan toolbars yang tersedia, seperti misalnya membuat font dengan ukuran tertentu. Dengan metode ini maka dalam beberapa hal menjadi lebih simple dan sangat memudahkan blogger saat harus melakukan update ulang atau revisi beberapa kesalahan tulis di posting mode "Edit HTML" (catatan : teknik ini hanya berlaku di posting mode "Edit HTML").

Kode CSS :

.fs10{font-size:10px;}
.fs11{font-size:11px;}
.fs12{font-size:12px;}
.fs13{font-size:13px;}
.fs14{font-size:14px;}
.fs16{font-size:16px;}
.fs18{font-size:18px;}
.fs22{font-size:22px;}
.rn,.rb{color:red;}
.gn,.gb{color:green;}
.lgn,.lgb{color:lightgreen;}
.bn,.bb{color:blue;}
.lbn,.lbb{color:lightblue;}
.yn,.yb{color:yellow;}
.lyn,.lyb{color:lightyellow;}
.wn,.wb{color:white;}
.blackn,.blackb{color:black;}
.grayn,.grayb{color:gray;}
.ln,.lb{color:lime;}
.mn,.mb{color:magenta;}
.on,.ob{color:orange;}
.rn,.gn,.lgn,.bn,.lbn,.yn,.lyn,.wn,.blackn,.grayn,.ln,.mn,.on{font-weight:normal;}
.rb,.gb,.lgb,.bb,.lbb,.yb,.lyb,.wb,.blackb,.grayb,.lb,.mb,.ob{font-weight:bold;}

Catatan/Keterangan :

1. Untuk membuat teks/font dengan ukuran tertentu gunakan:
   class="fs.."
   contoh » class="fs14" (ukuran font 14px)
2. Untuk membuat warna font:
   class="on" » warna orange dengan tampilan font = normal
   class="ob" » warna orange dengan tampilan font = tebal (bold)
3. Penggabungan ukuran font, warna font dan ketebalan font:
   class="fs16 lgb" » ukuran font = 16px dengan warna = orange tampilan = tebal (bold)
   classs="ln fs10" » warna = lime, ketebalan = normal dengan ukuran font = 10px

Contoh penggunaan dalam sebuah kalimat :
Membuat perbedaan antara warna orange, warna kuning dan warna biru pada beberapa teks dapat membuat pengunjung menjadi cepat memahami tutorial. Di luar hal tersebut, sebaiknya setiap paragraf ditandai dengan teks dengan ukuran lebih besar dari teks lainnya.

Kode untuk teks di atas :

Membuat perbedaan antara <span class="on">warna orange</span>, <span class="yb">warna kuning</span> dan <span class="bn">warna biru</span> pada beberapa teks dapat membuat pengunjung menjadi cepat memahami tutorial. Di luar hal tersebut, sebaiknya <span class="ln">setiap paragraf</span> ditandai dengan teks dengan <span class="fs16 mb">ukuran lebih besar</span> dari teks lainnya.

Cara membuat :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS kemudian letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML di box posting. Gunakan "posting mode Edit HTML".

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «