Mempercantik Blockquote blogspot (CSS)

Mempercantik Blockquote blogspot (CSS) - Assalamualaikum.. Sobat blogger. Pada postingan kali ini kita akan Ngobrolin Cara mempercantik tampilan blockquote blogspot.
Bisa dibilang Inilah salah satu metode dari ribuan hingga jutaan cara untuk memperindah/mempercantik tampilan blog yang sobat miliki. hehe lebay

Sebenarnya Ada banyak variasi untuk mempercantik Blockquote, tapi untuk kali ini. Saya akan memberi tahu sobat blogger bagaimana cara membuat tampilan blockquote .


OK sobat, Langsung saja disimak Cara Mempercantik Blockquote Blogspot :

Langkah-langkah : Cara mempercantik blockquote blogspot

Langkah 1

Login ke Dasbor sobat.

Langkah 2
Pilih Rancangan & Edit HTML jangan lupa centang Expand Widget Template.

(Download Template Sobat terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan)

Langkah 3
Temukan Salah satu dari kode dibawah ini :

.post blockquote
. . . . . . dst
}

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

blockquote
. . . . . . dst
}

Setiap template memiliki kode yang berbeda, jadi silahkan sobat mencarinya. Gunakan CTRL + F untuk memudahkan mencari.

Langkah 4
Ganti kode diatas dengan kode dibawah 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;
}

Warnanya bisa disesuaikan dengan keinginan sobat blogger.

SIMPAN dan Lihat Hasilnya

Cukup mudah bukan ? buruan dicoba. untuk cara mempercantik blockquote lainnya tunggu postingan selanjutnya saja.