Cara Membuat Drop Cap Otomatis

Jika sobat blogger mania 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. untuk membuatnya pun sangat mudah dan pasti sobat blogger mania bisa membuatnya sekalipun sobat seorang begginer seperti EFA.

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

untuk membuat posting rata kanan-kiri.

Script CSS Drop Cap 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;
}

 
]]></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 artikel

Apabila sobat blogger mania ingin memposting artikel, pakailah xHTML dibawah ini sebagai tag pembuka dan penutup posting
 <div class="opening">Tuliskan Artikel Sobat Disini..</div>

Selamat Mencoba Semoga Berhasil...........................Yeahhhhhhhhhhh

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «