Download Now Download Themes Gratis WordPress Responsive!

Membuat Drop Cap di WordPress Otomatis (no plugin)

Tutorial WordPress kali ini adalah bagaimana membuat Drop Cap pada artikel wordpress secara otomatis, sebelum masuk ke tutorial saya akan memberi tahu bawha Drop cap adalah Huruf pertama pada paragraf yangmempunyai nilai ukuran besar dan diikuti huruf biasa setelahnya. Ukuran huruf pertama ini lebih dari 1 baris tulisan biasa.

Anda bisa membuat Drop Cap di wordpress anda dengan cara yang simple dan otomatis tanpa selalu memberikan Class terlebih dahulu setiap mau menampilkan Dropcap. Berikut Cara membuat Drop Cap di wordpress anda.

Copykan Script CSS Drop Cap berikut ini di Style.css Theme wordpress anda.

div.entry-content p:first-child:first-letter {
	background:#B11C42;
	padding:6px;
	margin-top :8px;
	float:left;
	font-size:2.2em;
	font-weight:bold;
	color: #fff;
	margin-right:0.10em;
	line-height:90%;
}

Setelah itu anda buka file single.php dan cari file <?php the_content(); ?> . Lalu tambahkan class css yang sudah di buat tadi menjadi seperti dibawah ini.

<div class="entry-content">
<?php the_content(); ?>
</div>

Dan hasil dari Drop Cap yang sudah di buat nanti akan seperti dibawah ini.

membuat dropcap wordpress

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • trik nya bagus gan. jelas dan mudah di mengerti. thanks 🙂

    • Sama sama gan. Semoga tutorialnya membantu agan. 🙂

Must Read...!
Cara Menambah Logo Avatar Baru Di WordPress

Pada Tutorial Wordpress kali ini , Saya akan menunjukkan cara untuk mengganti atau menambahkan...

5 Web Desain WordPress Inspirasi Terbaik Hari ini #1

Inilah website dengan desain terbaik pilihan centerklik hari ini yang di bangun dengan CMS...

Close