27 Mei 2013

Cara membuat Drop Cap pada Postingan Blog

Cara membuat Drop Cap/Huruf Besar pada Postingan Blog
Drop Caps / Huruf Besar diletakkan di awal paragraf awal dan biasanya terletak pada paragraf pembuka sebuah artikel entah itu di majalah, koran ataupun newsletter seperti Gambar disamping ini:

Nah Bagaimanakah cara membuat Drop Caps tersebut pada Postingan Blog kita??


Sebenarnya banyak cara yang bisa anda pilih untuk membuat Drop Caps ini,bisa denganCSS,maupun yang lain.

Drop caps-drop caps..,kaya apa sich?
Misal saya akan menuliskan sebuah kalimat seperti ini:

Saya sekarang sedang belajar membuat Drop Caps di Pelajaran Blog,saya nanti bisa membuat Drop Caps pada setiap artikel saya pada blog,jangan lupa,belajar membuat Drop Caps di Pelajaran Blog.

Jika saya ingin membuat Drop Caps dan memperbesar huruf "S" di atas,saya hanya menuliskan kode berikut :


<span style="float: left; color: green; font-size: 50px; line-height: 30px; padding-top: 5px; padding-right: 5px; font-family: arial;"&gt;S</span>aya sekarang sedang belajar membuat Drop Caps di Pelajaran Blog,saya nanti bisa membuat Drop Caps pada setiap artikel saya pada blog,jangan lupa,belajar membuat Drop Caps di Pelajaran Blog.

Maka hasinya nanti akan menjadi seperti ini :
S
aya sekarang sedang belajar membuat Drop Caps di Pelajaran Blog,saya nanti bisa membuat Drop Caps pada setiap artikel saya pada blog,jangan lupa,belajar membuat Drop Caps di Pelajaran Blog.

atau bisa juga dengan cara dibawah ini....

Silahkan ikuti Tutorialnya dibawah ini:


  • Login ke Blogger : Dasbor  anda!
  • Masuk ke Rancangan -> Edit HTML
  • Paste kan Kode dibawah ini tepat di atas   ]]></b:skin> 
.drop_cap {float:left;color:#003399;line-height:60px;padding-right:5px;font-family:trebuchet ms,verdana;font-size:60px;background-color:#e69138;}



  •  Kemudian klik tombol Simpan Template dan Tutup
Pada saat membuat Postingan, jangan lupa menambahkan sebuah kode berikut pada huruf yang akan di perbesar ukurannya.

<span class="drop_cap">D</span>

Sebagai contoh seperti berikut :
<span class="drop_cap">D</span>rop Cap adalah sebuah text yang mempunyai ukuran lebih besar dari pada huruf lainnya, dan biasanya digunakan untuk memulai sebuah paragraf. Pada postingan ini kita akan membahas tutorial cara menampilkan huruf besar / drop cap dengan menggunakan CSS sederhana.


Hasilnya akan menjadi seperti ini:


Selamat mencoba

Tidak ada komentar:

Posting Komentar