Dropcaps on Comments for Blogger

Berawal dari melihat-lihat, ya ngebloglang gitooo lihat tampilan web para master² ;)) Kalau ada yg unik, gaya, lain dan nyentrik pasti Beben si bloglang ganteng kalem tea ini bakal anteng tuh satroni web/blog :-" Sobat pasti sudah pada tahu dong dengan istilah dropcaps! Huruf besar pada awal paragraf itu loh yg kayak diblog aku ini :"> Bagaimana kalau trik tersebut kita pakai juga pada awal paragraf tapi di kolom komentar!!! Berawal dari BW gak sangka dapet yg beginian ;)) Okelah kalau yg belom tau bagaimana cara bikin dan menerapkannya dipostingan blog sobat. Secara singkat dan padat saja diulas sebelum masuk pada sesi inti dari artikel ini b-)

Kode CSS

Letakan seperti biasa kode CSS berikut sebelum kode ]]></b:skin> Kalau mau letakan didekat kode .post atau .post-body tergantung pada ID bawaan template sobat masing² aja deh :P bebas...:D

.dropcaps {
color:#999;
float: left;
font-size:80px;
line-height:47px;
padding-top:10px;
padding-right:5px;
font-family: Times, serif, Georgia;
}

Default kode seperti itu, tinggal diatur saja size (ukuran) sesuai dengan kebutuhan ;)) Contoh penulisan ketika waktu memostingnya nih (perhatikan)...
Lorem ipsum dolor sit amet, consetetur sadipscing elitr!
<span class="dropcaps">L</span>orem ipsum dolor sit amet, consetetur sadipscing elitr
Tinggal kasih kode yg berwarna biru itu dalam memsotingnya.
Bagaimana kita menerapkan ini pada kotak/kolom komentar :-?

Kode CSS

Seperti biasa kan sudah tauk diletakan dimana kode ini :D

.comment-content p:first-child:first-letter {
font:3.1em/1em Georgia, Gentium, "Times New Roman", Times, serif;
float: left;
padding:5px 1px 0 0;
color:#f0c;
}

Centang pada bagian:
Expand Widget Templates
Tekan pada keyboard secara bersamaan CTRL + F lalu ketikan pada kotak yg tersedia, cari kode berikut
<div id='div-comment'>
Lalu scroll kebawah dikit, dan cari kode seperti berikut ini
<b:if cond='data:comment.author == data:post.author'>
Kalau beda rumusnya pokoknya cari yg mirip seperti itulah sob :D Setelah itu letakan kode berikut ini tepat diatas kode tersebut...
<div class="comment-content">
Cari tag penutup paling akhir (jika ada 2) </b:if> dan letakan tag penutup ini </div> Masih disekitaran kode² disana cari kode
<data:comment.body/>
dan tambahkan menjadi sedemikian rupa
<p><data:comment.body/></p>
SAVE.
Kalau berhasil tanpa embel² penulisan seperti dropcaps pada postingan, ini akan secara otomatis huruf awal dari paragraf akan menjadi besar :-"
Source by http://kilianvalkhof.com
Good luck and happy blogging \m/