Cara Membuat Drop Caps Otomatis di Posting Blog

Jika anda membuka sebuah blog dan "huruf pertama" pada posting atau di bagian yang lain selalu berupa huruf dengan ukuran yang berbeda (jauh lebih besar) dengan semua huruf di teks berikutnya, maka itulah yang kita sebut sebagai drop caps. Jadi intinya, dengan menggunakan fungsi drop caps ini maka di semua posting yang diterbitkan, huruf pertamanya akan kita buat dalam ukuran yang jauh lebih besar dari huruf selanjutnya. Cara membuatnya sangat praktis karena kita hanya perlu menambahkan kode CSS dan memanfaatkan tag DIV di pembuka posting. Jika anda ingin melihat seperti apa, sih, sebenarnya drop caps dan apakah drop caps ini akan membuat blog terlihat lebih bagus, silahkan klik link di bawah ini.
D E M O
Untuk membuat drop caps seperti yang telah anda ketahui atau lihat, sebenarnya ada dua cara yang dapat kita gunakan. yang pertama kita gunakan tag span dan yang ke dua kita gunakan tag DIV (sekalipun juga bisa kita gunakan tag p). Jika yang akan kita buat ini kita sebut sebagai Drop cpas otomatis, itu karena selain berfungsi menciptakan efek drop caps, tag DIV ini sekaligus kita manfaatkan sebagai pengatur posting dalam bentuk rata kiri atau rata kanan-kiri (text-align:left; atau text-align:justify;). Dengan kode baru yang kita gunakan, maka anda tidak perlu lagi menambahkan kode <div style="text-align:justify;"> untuk membuat posting rata kanan-kiri.

Kode CSS Drop Caps Otomatis

.post .opening:first-child:first-letter {
       font:50px/18px Georgia, Times New Roman, Times, serif;
       float:left;
       text-align:justify;    
       padding:2px 5px 0 0;
       margin-bottom:-5px;
       color:#0099FF;
       text-shadow:2px 1px 1px #FF9900;
}

]]&lgt;</b:skin>

Copy-paste dan simpan kode tersebut di atas kode ]]></b:skin> dengan cara:

• Login ke blogger.
• Setelah halaman dasbor terbuka, klik Design/Rancangan.
• Lanjutkan dengan KLIK Edit HTML.
• Back-up Templates dengan cara klik Download Full Templates/Download Template Lengkap.
• SAVE/Simpan file template di folder PC.
• Cari kode ]]></b:skin> (gunakan Ctrl+F untuk mempermudah dan mempercepat pencarian kode).
• Copy dan letakkan kode CSS Drop Caps Otomatis di atas ]]></b:skin>.
• KLIK SAVE Templates/Simpan Templates.
• Coba hasilnya dengan membuat posting menggunakan kode HTML (tag DIV) yang baru kemudian buka blog untuk mengetahu berfungsi tidaknya drop caps otomatis yang sudah terpasang.

xHTML untuk Posting

Saat anda membuat posting, gunakan xHTML berikut sebagai tag pembuka posting dan tag penutup posting

<div class="opening">Tuliskan artikel di sini!</div>

Contoh:

<div class="opening">Jika anda membuka sebuah blog dan "huruf pertama" pada posting atau di bagian yang lain selalu berupa huruf dengan ukuran yang berbeda (jauh lebih besar) dengan semua huruf di teks berikutnya, maka itulah yang kita sebut sebagai drop caps. Jadi intinya, dengan menggunakan fungsi drop caps ini maka di semua posting yang diterbitkan, huruf pertamanya akan kita buat dalam ukuran yang jauh lebih besar dari huruf selanjutnya. Cara membuatnya sangat praktis karena kita hanya perlu menambahkan kode CSS dan memanfaatkan tag DIV di pembuka posting. Jika anda .... dst</div>

Catatan & Keterangan

• Untuk merubah ukuran font drop caps, silahkan rubah nilai pada
  font:50px/18px Georgia, Times New Roman, Times, serif;
• Jika pengaturan posisi drop caps diperlukan, lakukan perubahan nilai pada :
  padding:2px 5px 0 0;
  nilai 2px untuk pengaturan naik turunnya font, 5px untuk mengatur jarak dengan huruf selanjutnya.
• text-align:justify; untuk bentuk posting rata kanan-kiri. Untuk merubah ke bentuk rata kiri ganti justify dengan left.
• Sesuaikan warna font drop caps dengan merubah warna yang terdapat di code color:#0099FF;. Anda bisa mengganti kode yang berwarna merah dengan kode warna dalam bentuk angka dan huruf atau dalam bentuk teks seperti red, blue, orange dan yang lainnya.
• Jika ingin menghilangkan text-shadow, buang kode text-shadow:2px 1px 1px #FF9900;

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• gubhug reyot
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin