Menghias Huruf Pertama pada Post Nampak Besar

Rasanya belum lengkap jika blogger atau siapapun pemilik website jika website ataupun blognya itu tidak memiliki ciri khas tertentu baik dari segi konten, desain tampilan, ataupun properti unik yang tidak dimiliki oleh website/ blog lain. Termasuk blogku ini, dari segi konten saya yakin banyak yang mengusung tema yang sama. Maka dari itu sebisa mungkin saya mencoba menyajikan sesuatu yang beda atau bahkan baru yang mungkin bisa memberi inspirasi buat semua. Tak perlu muluk-muluk atau tak perlu juga membuat sesuatu yang “luar biasa” untuk menjadi beda. Contoh sederhananya mungkin sobat bisa membuat icon atau loggo sendiri atau membuat aplikasi interaktif flash seperti yang nampak floating di sebelah kanan blog ini (udah dipindah deng).

Adapun untuk post kali ini, saya yakin sobat pasti sudah mengerti maksud dari title postingan di atas. Ya, seperti nampak pada blog ini, setiap huruf awal pada post nampak besar (PC optimized) dengan ukuran huruf 40 px dan menggunakan jenis huruf Monotype Corsiva. Ternyata gampang saja untuk membuatnya seperti itu. Saya sendiri menemukan dua cara menghias huruf, yaitu pertama dengan menambahkan script php dan css dan kedua murni menggunakan css saja. OK then, let’s get started:

Menghias Huruf dengan Menambahkan Script PHP dan CSS

• Buka file functions.php pada tema yang sobat gunakan baik dari cpanel hostingan ataupun dari dashboard. Jika dari dashboard, pilih appearance – theme editor – dan buka theme functions. Tambahkan kode di bawah ini dan save.
  

  <?php
       function FirstCapital ($content = '') {
       return '<p class="caps">' . $content;}
       add_filter('the_content', 'FirstCapital', 5);
  ?>

• Masih pada directory yang sama, buka file style.css, tambahkan style berikut dan save.
  

  .caps:first-letter {
       font-size: 40px;
       font-weight: bold;
       float: left;
       margin: 5px 6px 0 0;}

Sampai tahap ini sudah selesai dan tampilan huruf pertama post-pun sudah nampak besar. Silahkan buka hasilnya pada single post. Namun pada beberapa tema yang menggunakan excerpt ataupun post teaser cenderung tak berjalan. Namun cara menyiasatinyapun mudah saja yaitu dengan memanggil “ID” dari css (caps) dan ditambahkan pada excerpt.

Menghias Huruf Murni Menggunakan CSS saja

Yang hanya menggunakan CSS caranya hanya perlu merubah sedikit kode pada script css di atas dengan menambahkan parameter “Class ID” styling css, misalnya pada blockquote. Maka kode pada CSS menjadi seperti ini:

blockquote p :first-letter {
     font-size: 40px;
     font-weight: bold;
     float: left;
     margin: 5px 6px 0 0;}

Demikian dan seterusnya, kode di atas dapat diterapkan pada css sesuai kebutuhannya. Atau cara lain yang paling mudah adalah dengan membuat kode di atas sebagai class terpisah khusus untuk awal paragraf (lihat kode class caps di atas). Maka untuk menggunakanya dalam tulisan hanya tinggal memanggil class-nya saja. Contoh: <p class="caps">“Mulai artikelmu di sini”</p> dan seterusnya. Untuk pemakaian jenis huruf-pun bisa di customize sendiri, tinggal menambahkan font-family dan pilih jenis hurufnya.

Bagaimana, mudah bukan? Silahkan deh dicoba, lumayan buat sedikit mempercantik tampilan blog / websitemu. Selain itu diantara beberapa cara lain mempercantik tampilan blog silahkan baca pula menambahkan Effect shadow pada blockquote seperti blockquote di atas, membuat Effect shadow pada links ataupun contoh dan Cara Membuat Image/ CSS Sprite untuk mengurangi http request dan mempercepat loading blog sobat. Semoga bermanfaat dan selamat mencoba.