2 Cara Membuat Huruf Pertama Besar (DropCaps) di Artikel Blogger

Kali ini saya akan berbagi tutorial bagaimana caranya membuat huruf pertama besar (Dropcaps) di awal artikel Blogger.

Bagi yang bingung... Jadi, arti dari tutorial ini ialah huruf pertama di postingan blog tersebut akan berbentuk huruf kapital besar dengan font-weight: di angka 700

CSS yang kita perlukan:

.capital:first-letter { koding CSS di sini }

Kurang lebih tampilannya akan seperti ini:

2 Cara Membuat Huruf Pertama Besar (DropCaps) di Artikel Blogger

Saya akan menerangkan dalam 2 cara yang berbeda, silakan tentukan mau menggunakan yang mana; apakah otomatis atau manual (artikel tertentu).

1. Cara Membuat Huruf Pertama Besar (DropCaps) Otomatis

Simpan kode ini:

.capital:first-letter {
   color: #000000;
   float: left;
   margin:0 5px 0 0;
   font-size: 35px;
   font-family: Times, serif, Georgia;
   display: block;
   padding:0;
   color:#903;
   font-weight:700
}

Lalu temukan kode ini:

<data:post.body/>

Sisipkan kode ini <div class='capital'> di awal kode <data:post.body/> lalu dibungkus dengan tag </div>

Hasilnya seperti ini:

<div class='capital'><data:post.body/></div>

Perlu diingat, kode <data:post.body/> ada banyak di dalam Template Blogger. Ada dua, hingga 4 buah. Jadi harap disesuaikan.

Oh iya, apabila cara di atas gagal (tidak mau), masalah atau kendalanya ada di bagian tag. Gunakan tag <p> dan </p> atau <span> dan </span untuk membungkus <data:post.body/>

Cara menempatkannya seperti ini:

<p class='capital'><data:post.body/></p>

Atau seperti ini:

<span class='capital'><data:post.body/></span>

Selanjutnya klik tombol Save dan lihat hasilnya bagaimana.

2. Cara Menampilkan Huruf Pertama Besar (DropCaps) Manual

Dikatakan manual karena kita bisa menentukan mana artikel yang harus menampilkan DropCaps dan mana yang tidak. Praktisnya, manual :)

Simpan kode CSS di bawah ini:

.firstcharacter {
   float: left;
   color: #903;
   font-size: 75px;
   line-height: 60px;
   padding-top: 4px;
   padding-right: 8px;
   padding-left: 3px;
   font-family: Georgia
}

Buat artikel lalu masuk ke mode tulis HTML, silakan di setting seperti ini:

<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia.

Patokan DropCaps pada cara manual ini terletak di bagian ini:

<span class="firstcharacter">L</span>

Huruf L akan membesar, dengan kata lain akan membentuk DropCaps dengan sendirinya. Dan ingat, cara ini manual. Harus di-Edit artikel per artikel.

Itulah tutorial bagaimana caranya membuat huruf pertama besar (Dropcaps) di awal postingan blog. Semoga berguna.

Sumber: http://jelasinblog.blogspot.com/2015/04/cara-membuat-huruf-pertama-besar.html