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/AVvXsEhKXHvioBWnZGysJn76ZPUJhnvXR62LiBq05ps0DVq939YkUubUM1zGGh8jvzuksrghq2wMrRnc8WveY7RW-9qp9SIUQPVsMlQEBMDl5RqidOGOsI8uUaVq5gdKLv0ivnRpqp2EKM7YCyA/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/AVvXsEjjVS3vSFlUSzrLEjniXIB49ygoTpdhNJRtnzVV-KPQgc3Juu1W2r3GLZcSSzUKf7nc0wrQel30MaAshojpWZdSb2AeDng5wTFTYLW9Wr8JWJ-Zi45OAavy-G22zs3-MdfMEjyxwez9g3c/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/AVvXsEivSx3eJdTcUAd4R16IBsxiPwHv7nyUzjZ5P63fa-UeMUF_kuw9MARItiHGcKHgH2vmN0nYBDukrxeTAmBavjwUBdW-ptxw8V0nCrI2LdoJl_v6uQv9DBPK6KppUnszAB_DD2h6SQInfnw/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/AVvXsEhOSA5KQB6mLvit4Uj5k3EBmNGym4sSOkFBnR4WIgqc7-HkygU4wgHBprvAWOvWL-i5g8L2-I6R5HUNAHVqsii6vMLFVtlijc7-ZGlz1dcPZsCJzLN2PU2e2G-mqwVd4uh5_G0CIsrPSjU/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