Trick Membuat Drop Caps di Post Title (Judul Posting)

Drop Caps Post Title Blogger Template Designer.
Silahkan klik untuk memperbesar gambar!

Drop Caps tak hanya bisa digunakan di alinea posting saja. Anda bisa menggunakannya juga pada post title (judul posting). Membuat drop caps bertujuan untuk membuat huruf awal(pertama) pada sebuah kalimat agar terlihat berbeda dan terlihat lebih menonjol. Ini bisa anda lakukan agar blog terlihat berbeda dengan blog pada umumnya. menampilkan drop caps pada title posts juga bisa dimanfaatkan untuk membuat blog lebih cantik. Aturlah ukuran dan warna font drop caps agar memberi manfaat secara maksimal.

Drop caps post title di Blogger Template Designer dibuat dengan cara menambah kode css baru (pseudo class) pada syntax h3.post-title. Tambahkan kode css drop caps di atas kode ]]></b:skin> atau melalui box penambahan kode CSS yang telah disediakan blogger yang dapat dakses melalui Dasbor | Rancangan | Perancang Template (Dasboard | Design | Template Designer).

Cara Membuat Drop Caps Post Title di Blogger

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML
5. Backup Template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke konsisi sebelum modifikasi lakukan klik Browse kemudian Upload.
6. Cari kode:
   ]]></b:skin>
7. Copy dan paste-kan kode css drop caps di atas kode ]]></b:skin>
8. Klik Simpan Template *(Save Template).

Kode CSS Drop Caps Post Title:

h3.post-title:first-letter{
 font-size:125%;
 font-family:Times New Roman;
 font-weight:900;
 color:#FC0;
 text-shadow:1px 1px 1px #000;
}

Catatan/Keterangan:

1. Kode CSS yang berwarna merah adalah kode yang dapat dirubah agar mendapatkan drop caps terbaik.
   
   • 125% merupakan ukuran drop caps yang dapat diperkecil atau diperbesar.
   • Times New Roman adalah font-family. Silahkan pilih yang paling tepat bagi anda.
   • #FC0 adalah warna drop caps. Jika ingin menggunakan warna sama dengan teks post title bagian ini bisa dihilangkan.
   • 1px 1px 1px #000 hanya sebuah tambahan text shadow. Anda bisa merubah ukuran dan warna text shadow atau jika tak dikehendaki bisa dibuang.
2. Selain melalui Edit HTML kode CSS dapat disimpan lewat Dasbor | Rancangan | Perancang Template. Menggunakan cara ini akan menghasilkan penyimpanan pada tempat yang sama seperti halnya jika anda langsung meletakkan dan menyimpan kode css tersebut di atas kode ]]></b:skin>.
3. Untuk memperoleh hasil yang lebih maksimal silahkan kembangkan kode dan padukan dengan syntax h3.post-title a. Di bawah ini salah satu contoh pengembangan kode yang dimaksud.

Pengembangan kode CSS Post Title

h3.post-title a{
       color:blue;
}
h3.post-title a:hover{
       color:orange;
}
h3.post-title a:visited{
       color:gray;
}
h3.post-title:first-letter{
       font-size:125%;
       font-family:Times New Roman;
       position:absolute;
       font-weight: 900;
       color:green;
       text-shadow:1px 1px 1px #000;
}
h3.post-title:hover:first-letter{
       color:red;
}
h3.post-title a, h3.post-title:hover:first-letter{
       transition:0.8s;
       -o-transition:0.8s;
       -moz-transition:0.8s;
       -webkit-transition:0.8s;
       -ms-transition:0.8s;
}