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/AVvXsEhgHP2K2E2CL6hMuEje2KMVEc82N5S_xH4uRwnLddgEJ8idMivoSlwnXKhbrmgLHwXC-xBgJIut5bPx1suu-LbGN6ymXScs3RPeFA-6ROE0iHrM95shsyV6q9tSLZ_JjT_szXU-38VswdA/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/AVvXsEioac0ZfCuDXj9D9yqK1v5vGfS_N8l_1lSpaNCrnzKaIAtzqcZwDOqoHg91QWFkqFgat5FnUgqIirgetqQ-lDmcb3TVZEJy5Gmvth4IhYgOZEqt0Jb8Mt1yLkOZLsqCwyYoATIBxFmMEZg/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/AVvXsEieUmTWeceVTZHjBjS8RRe7sVQ5C0Y7o51r2rBkjIGPPKhtB0uy5QvaMeAiXhcOHp-9Y4awOT5Qhcd16hsNQuMIkRpB6V6TeY6Ws4Xhlg1tVG9b9JB84sPpGFxcUtY5F51vXPFWszJa96E/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/AVvXsEgW-kUyD2M_Zj7f7II-woXazjnvkqr2vMzvsCGXmSD3-W6c-Z7UlX-Xl9Lj93UutRkBu0PhEx_vHGhXayKAMZsdUbSONTtk3koSHchw9JxL7cmA9mI8vc8-ZN2b4dkOPKdvH7hsHfuewBM/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