Membuat Pullquote Pada Postingan

Dalam istilah postingan kita sebagai blogger pasti tidak asing lagi mendengar kata "blockquote". Blockquote biasanya digunakan pada dasarnya untuk memblock tulisan yang kita kutip dari sumber lain. Namun tak jarang, blockquote juga di gunakan oleh sebagian besar blogger hanya untuk menonjolkan penekanan atau menarik fokus sang pembaca pada tulisan yang dianggap penting oleh penulisnya. Biasanya blockquote menggunakan sintak seperti ini: <blockquote>tulisan yang di-blockquote disini</blockquote>. Nah sekarang saya ingin mengajak sobat untuk membahas pullquote saudaranya blockquote.

Apa itu pullquote? Singkatnya pullquote hampir mirip dengan blockquote hanya terdapat perbedaan kalau pullquote biasanya di gunakan untuk menarik fokus pembaca dengan memberikan sebuah frame pada tulisan, biasanya dalam media cetak sangat jelas dan sering kita temukan. Untuk lengkapnya sobat bisa baca di Wiki. Bagaimana sobat tertarik memasang pullquote di blog sobat? Ini dia caranya:

1. Sign In ke blog anda.

2. Tuju tab Layout ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

]]</b:skin>

6. Setelah ketemu, pasang kode dibawah ini persis di ATAS kode tadi:

.pullquote_right{ 
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 0 0.4em 15px !important;
padding: 0.6em 5px !important;
background: none !important;
border: 2px solid #ddd;
border-width: 3px 0;
text-align: center;
float: right;
}

.pullquote_left { 
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif; 
margin: 0 15px 0.4em 0 !important; 
padding: 0.6em 5px !important; 
background: none !important; 
border: 2px solid #ddd; 
border-width: 3px 0; 
text-align: center; 
float: left; }

7. Kemudian Simpan template.

8. Langkah selanjutnya adalah memosting tulisan. Sobat harus menambahkan kode tag div jika memosting, kodenya seperti ini:

Untuk pullquote sebelah kanan:

<div class="pullquote_right">teks yang di pullquote sebelah kanan</div>

Untuk pullquote sebelah kiri:

<div class="pullquote_left">teks yang di pullquote sebelah kiri</div>

contoh formatnya seperti ini:
<div class="pullquote_right">teks yang di pullquote</div>lanjutkan isi teks atau tulisan sampai akhir


SELESAI.

Moga manfaat...!

Baca juga disini