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.