Cara Mempercantik Blockquote dengan Kode CSS

04.53 |

Cara Mempercantik Blockquote dengan Kode CSS. Masih ada yang belum tahu dengan Blogquote?? nah klo ada beberapa sobat masih ada yang belum tahu, nih saya kasih gambarnya seperti dibawah ini.

Nah kali ini ::Blogging Is My Life:: Cara Mempercantik Blockquote dengan Kode CSS jadi langsung ikuti cara-caranya dibawah ini aja ya sob ... hehehe (lagi males basa basi nih)

1. login Blog
2. buka Rancangan >> edit HTML (centang Expand Template Widget)
3. lalu sobat cari kode di bawah ini (gunakan Ctrl + F agar lebih mudah)

.post blockquote
......... dst
}
.post blockquote:hover
......... dst
}
.post blockquote p
......... dst
}

atau

.post blockquote
......... dst
}

atau

blockquote
......... dst
}

Kode di atas, tergantung jenis template yang sobat gunakan.
Setelah sobat menemukan kode di atas, gantilah dengan kode di bawah ini

.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) 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 url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}
.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}