Contoh Blockquote

OK langsung saja kita mulai tutor kali ini.

Cara membuat Blockquote keren di blog.

Sebelumnya disini saya memiliki bermacam-macam Blockquote. Semua terserah IT Loverz ingin mengambil yang mana :)

• Pertama login terlebih dahulu ke blog IT Loverz masing-masing
• Lalu masuk ke menu Template => Edit HTML => Lanjutkan
• Jangan lupa klik "Expand Template Widget"
• Jika IT Loverz sudah pernah memasang Blockquote sendiri silahkan cari kode ini .post blockquote { Jika belum Kode tersebut tidak ketemu silahkan cari kode ini ]]></b:skin> ( Gunakan ctrl+F untuk mempercepat pencaharian )
• Sekarang IT Loverz bisa memilih mau blocquote yang seperti apa di bawah ini dengan cara COPAST Script Blockquote di bawah ini tepat di atas kode ]]></b:skin> atau mengganti kode .post blockquote {  dengan kode di bawah ini :
  

Kode Quote 1

.post blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Kode Quote 2
.post blockquote { margin: 10px 10px 10px 20px; padding: 10px 15px 10px 15px; line-height: 1.6em; color: #000000; background: #e0ffff; border: 2px solid #4aa02c; border-left: 20px solid #4aa02c }


Kode Quote 3
.post blockquote { background:#c5c5c5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNG525FmNgmZtZyPVORzILHUuXS9M5LiOJKc8K8ShJRdUYkrmLPatQCR6fr69mwQYJAg97F7O-A2MFZkQxPJQU_4tZyUv6XQM00jK58ZxQIiOk9J_bRlnEZbmRjvBRXORB6DDgVv7nntt9/s320/blockquote.png) no-repeat top left; padding:10px 20px 10px 45px; font-style:italic; border:1px solid #000000;}

Kode Quote 4
.post blockquote { margin: 10px 10px 10px 20px; padding: 10px 15px 10px 15px; line-height: 1.6em; color: #000000; 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; }

Kode Quote 5
.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO64H2ko3IgdRNmxXUbDy9mPVVf_Ravj3RJ5RcMopYSfU6GfI00O2t_PUSq5V6-k6wVdhaHxj1DkMCCJHKBExE_Z38il0jdpgZ7y4w2cjdXwga-QKR9lsy7XiT97QlNAR_MLt41QGsf-s/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; }

Kode Quote 6
blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

Kode Quote 7
blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

Kode Quote 8
blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipgFwfDlZGB_yQ5waA5hVMEn6WxYkXaz1Vib2LxVYmNnXyBc9d0huVl7ItY4-dL0UtOWqveI7zKrFvVi22sTp9ohgexPL0g10XcEcwQEXDCWGAehm9-gTgx8k1MB8qgD7yOHe78T-VOx8/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; }

• Jika sudah anda COPAST Script CSS Blockquote di atas, SAVE TEMPLATE dan lihat hasilnya. :)

CATATAN :

Sebaiknya BackUp terlebih dahulu Blog IT Loverz untuk menghindari hal hal yang tidak di inginkan.

Semoga tutor kali ini bermanfaat untuk IT Loverz semua.
Sukses untuk IT Loverz Semua \(^0^)/