Sunday 5 February 2012

Trick Membuat Berbagai style teks & font di title posting (Judul Posting)

Trik ini dipastikan belum banyak diketahui blogger. Cara membuat atau mencampurkan berbagai style teks dan font di title posting. Anda dapat mnggunakannya terutama untuk memberi tekanan sebuah atau beberapa buah kata di judul posting. Selain itu teknik atau trick ini juga dapat dimanfaatkan untuk membuat drop caps dengan cara penulisan yang cukup simple dan bahkan dapat diterapkan disemua bagian kata title posting. Dan ini yang penting: triks ini kompatible di semua browser!

Sekalipun sebenarnya juga dapat dibuat secara langsung pada box title posting di halaman posting, namun penggunaan kode css membuat penulisannya menjadi lebih praktis. Contoh demo atau penerapan trik ini dapat anda lihat pada judul posting di atas. Tentunya anda hanya perlu memberi bentuk perubahan secukupnya saja agar beberapa kata yang perlu diberi penekanan mempunyai style berbeda. Jika anda setiap kali menuliskan post title dengan tampilan warna-warni seperti terlihat di judul posting ini dipastikan membuat pengunjung pusing, trus ... bisa...bisa mual... dan kasihan klo akhirnya harus segera bongkar celana membuang sebagian anggota "geng-nya" di sungai belakang rumah yang mungkin saja saat ini baru banjir besar! He... he...

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Design (Rancangan).
  4. Cari dan klik Edit HTMl.
  5. Backup Template dengan cara :
    • Klik Download Template Lengkap (Download Full Template).
    • Simpan file template di folder PC. Berikan nama yang berisikan waktu modifikasi untuk lebih memudahkan mengingat dan menggunakan disaat diperlukan kembali.
  6. Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode.
  7. Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>.
  8. Klik Simpan Template (Save Template).

Kode CSS
h3.post-title strong{
        font-weight:900;
        font-size:150%;
}
h3.post-title b{
        color:blue;
        font-size:125%;
}
h3.post-title em{
        color:green;
}
h3.post-title i{
        color:orange;
} 
h3.post-title span{
        color:lime;
        letter-spacing:-1px; 
}
h3.post-title span.redTimesNR{
        color:red;
        font-family:Times New Roman;
}
h3.post-title span.PTblue{
        color:blue;
} 
h3.post-title span.PTmagenta{
        color:magenta;
}
h3.post-title span.PT14italic{
        font-size:14px;
        font-style:italic;
}            

Cara menggunakan Kode di Posting

Gunakan tag sesuai kode css untuk membentuk karakter teks dan font berbeda. Anda bisa gunakan tag <strong>...</strong> , <b>...</b> , <em>...</em>, <i>...</i>, <span>...</span> atau <span class="redTimesNR">...</span> untuk setiap huruf (font) dan teks atau bagian dari teks agar terlihat berbeda baik warna, ukuran, style atau jenisnya sesuai apa yang ingin ditampilkan di title post.

Contoh bentuk penulisan pada post title

Membuat Judul Posting dengan Aneka Gaya dan Warna Font
<strong>M</strong><span>embuat</span> <strong>J</strong><i>udul</i> <strong>P</strong><span class="PTmagenta">osting</span> <span class="PT14italic">dengan Aneka Gaya dan Warna Font</span>

Catatan/Keterangan:
  1. Jika tak mau menggunakan kode CSS anda dapat menggunakan berbagai tag di atas secara langsung di halaman posting pada post title.
  2. Menggunakan kode CSS membuat penulisan title posting sekalipun dengan cara menambah kode (tag) namun menjadi lebih praktis.
  3. Anda dapat menggunakannya untuk menciptakan drop caps dengan metode, tips dan trick blogger di atas.
  4. Kembangkan kode CSS di atas agar mendapatkan karakter font yang sesuai dengan background blog anda.
  5. Gunakan perubahan style secukupnya pada teks tertentu yang dianggap penting untuk ditampilkan berbeda agar tak membuat pusing pengunjung.

0 comments:

Post a Comment

gubhugreyot: Demo & Tutorial