cara membuat blockquote keren untuk blog

blockquote biasanya digunakan\ untuk mengblock sesuatu yang penting atau mengspesialkan suatu kata atau kalimat. Beberapa blogger termasuk saya memanfaatkan blockquote untuk menaruh beberapa kode html,css,maupun script.

Dalam perkebangannya blockquote memiliki banyak desain dengan rupa yang unik dan menarik. Kali ini saya akan share salah satu blockquote yang sedang saya pakai. Cara pemasangannya cukup mudah lihat di bawah ini

1.buka blogger
2.buka template lalu html
3. cari kode ]]></b:skin> menggunakan CTRL + F
4.copy kode dibawah ini taruh diatas kode ]]></b:skin>

.post blockquote

{

font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;

background-color: #FFFFFF;

color: #000;

margin: 5px 10px;

padding: 20px 20px 20px 20px;

border: 2px dotted lightgrey;

border-radius: 10px;

box-shadow: -1px -1px 12px 2px gainsboro;

transition: background-color .777s;

-webkit-transition: background-color .777s;

-moz-transition: background-color .777s;

-o-transition: background-color .777s;

-ms-transition: background-color .777s;

}

.post blockquote:hover

{

background-color: darkgreen ;

color: #fff;

}

.post blockquote:active

{

background-color: CornflowerBlue ;

color: #000;

}

.post blockquote { background: #F3F3F1 url(http://2.bp.blogspot.com/-5sq2QpY_PGo/UPutcidKHEI/AAAAAAAABfc/Vz-ezNXidh0/s400/QUOTEBS.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

5.pertama ubah kode #FFFFFF dengan kode warna kesukaan anda

6.ubah juga kode background-color: CornflowerBlue ; dengan warna kesukaan anda(gunakan bahasa inggris seperti green,blue,white,black,etc)

7.ubah kode http://2.bp.blogspot.com/-5sq2QpY_PGo/UPutcidKHEI/AAAAAAAABfc/Vz-ezNXidh0/s400/QUOTEBS.gif dengan kode gambar yang anda inginkan

8.simpan


untuk penggunaannya anda tinggal menambahkan kode
<blockquote> teks anda </blockquote>
jika ada yang ingin agan tanyakan  silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.