Membuat Blockquote Cantik

 

Berikut tutorial tentang bagaimana mempercantik blockquote yang cantik. Untuk membuatnya sebenarnya cukup mudah, hanya menambahkan beberapa kalimat kode pada HTML template Anda.

Lankah2nya sebagai berikut:

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Edit HTML
• Centang Expand Widget
• Copas kode berikut diatas kode  ]]></b:skin>

blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}

• Selanjutnya Save Template

Note:

• Kode warna merah adalah kode warna untuk teks, ganti warnanya sesuai keinginan Anda
• Kode warnah biru adalah kode warna untuk latar belakang (background) kotak blockquote
• Kode warna kuning tua adalah kode warna untuk garis tepi (border) kotak blockquote.
• Untuk melihat kode2 warna klik disini 

Tambahan:
Ada salah satu sahabat yang bertanya:

Wah... sangat bermanfaat, tp ada opsi lainnya ga?, kalo cuma 1 kurang pas kayaknya..

Oleh karena itu saya beri tambahan trik untuk mempercantik blockquote kurang lebih seperti pada blog ini. Langkah2nya sebagai berikut:

• Ikuti langkah2 diatas, pada bagian Edit HTML cari kode .post blockquote {
• Copas kode berikut setelah kode .post blockquote {

background:#f5f8fa urlundefinedhttp://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF urlundefinedhttp://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}

Sehingga menjadi seperti ini:

.post blockquote {

background:#f5f8fa urlundefinedhttp://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
dan seterusnya...
}

Jangan lupa tanda } di akhir kode...
Untuk trik blockquote lebih banyak lagi bisa nanya sama mbah google :j:



 

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.