Cara Membuat Blockquote CSS berbeda tampilan di Blog

Jika Anda belum tahu, apa itu 'blockquote dan apa gunanya' silakan Anda baca dulu postingan 'Cara Menggunakan Blockquote pada Postingan Blog'. (jika sudah dan bila Anda tertarik, maka Anda bisa melanjutkan dengan bagaimana cara membuat kode HTML blockquote dan pengaturan CSS sehingga tampilannya sesuai dengan yang Anda suka.

'Blockquote' memiliki kode tag HTML <blockquote>Teks</blockquote>. Dengan tag seperti itu akan memberikan hasil yang kurang menarik. Oleh karena itu, untuk membuat blockquote lebih menarik, kita akan mengubah penampilannya dengan pengaturan script CSS.

Ctt. Sebelum Anda menambahan script di bawah secara utuh, periksa dahulu kode template Anda, apakah sudah ada pengaturan (tinggal ditambahkan) atau belum sama sekali. Cara memeriksanya dengan masuk ke 'Pengaturan Rancangan' lalu 'edit HTML' dan cari kata 'blockquote' (Ctrl+F / F3).

Contoh 1
Kode script CSS

/* Tampilan blockquote --*/
.post blockquote {
background:#f5f8fa url(http://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: 14px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

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

Hasilnya seperti yang punya saya.

Contoh 2
Kode script CSS

.post-body blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: url(http://2.bp.blogspot.com/_n7xseT2-HDU/TTfSVR6DdyI/AAAAAAAAArQ/ZtQUl-i6dhU/s1600/blockquote%2Bpelajaran%2Bblog.png) no-repeat left top;
border-left: 10px solid #666666;
}

Hasilnya seperti Lihat di Pelajaran Blog.

Contoh 3
Kode script CSS

blockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Hasilnya seperti dapat dilihat dan dipelajari style yang lain di Better Blockquote
Contoh 4
Kode script CSS

blockquote {
margin: 1em 2em;
border-left: 1px dashed #999;
padding-left: 1em; }
blockquote p:first-letter {
float: left;
margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
font-size: 220%;
font-weight: bold; }
blockquote p:first-line {
font-variant: small-caps; }

Hasilnya seperti Lihat dan dipelajari di CSS Newbie

Adapun penempatan script CSS di atas adalah 'sebelum kode ]]></b:skin> Catatan:jika css blog sobat sudah ada kode .post-body blockquote {,maka tinggal ganti dengan kode diatas.

---Sucses for Us---