Desain Blockquote

Ok kalian ini saya ingin berbagi sedikit tips yaitu mendesain sendiri tampilan blockquote agar sedikit lebih menarik.. Langsung saja ke tkp..

• Login blog
• Rancangan --> Edit HTML --> Expand Templated Widgets
• Backup terlebih dahulu template anda
• Cari kode ]]></b:skin>
• Masukkan kode dibawah ini diatas kode ]]></b:skin>

.post-body blockquote {margin: 10px 10px 10px 20px;padding: 10px 15px 10px 15px;line-height: 1.6em; color: #1100FF; 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; }

Contoh 1

 Atau

.post blockquote { font:bold italic .9em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFHQO0IWSTc9M2C8SvATE6YnZ8HShGi4pxB3YtmqeLwXijUOs2TLQHjnShRDoOIHDdapTyZ8q7k5bpP8eGO5cQtlBw1B-UsASlvVdHKrJ7O4MRxtK_mTszl8I2eS5Av9RA00jc0_oCDM/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdlQmjtexgTEmvgTQsncMH1-2-a6L6ky6Xw48dDSXx_XgD5Mwt2aO23b-aP6sqI1Haz_2v6Wz0102E6KSrWKKff64IFt8CIyS4D_hWYeuOJkgiQslP2AXxlMzmhUzXPzbQ-rtbgCXiDVE/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh 2

 Atau

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZgQgAh78xcZHuHIyRp2KYozodPXt8ucAMyuPO96mZwwnSXshPaSLjDO5CNTBGvsm5GKV3-2xEnl690l7qzE2Bdy6yH5j4jxPER0d6rgvpZb_JD0PhVykXoykSyw3EBm4p71P6DXhQudE/s1600/comma-side-orange1.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; }

Contoh 3

Atau

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh 4

Atau

.post blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9MM5oP-CXCMNCuUMB77tcC6-v9C4EfKb3yaSzAY_0wyBI9oPfXuUChPUROV73zSJyU9W3PidoSrvpeCW7pfV2ttAo3URU2dwk3AgeEx1YoQArZlXDlJsziFpB3wMn8Rfd-3_TjXHRQY/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Contoh 5

• Simpan