Mengubah Default Blockquote Menjadi Lebih Keren

Sebuah kutipan blok atau banyak orang menyebut tanda petik dan dalam dunia blogging disebut Blockquote. Ini merupakan ekstrak dalam dokumen tertulis blogging. Pada kesempatan yang berbahagia ini, Saya akan membagikan cara membuat blockquote yang berbeda dengan default blockqoute blogger.

Hasil ini hampir sama dengan cara mengganti background postingan yang pernah saya tuliskan sebelumnya. blockquote ini akan memberi anda ide tentang bagaimana untuk membuat blockquote yang menarik untuk blog anda dan halaman web.

Pada gambar diatas merupakan hail dari costumasi blockquote. Berikut langkahnya,

Masuk ke akun Blogger Anda;
Klik tombol Rancangan dan pilih Edit HTML;
Backup Template dulu jika anda ketakutan salah memasang kodenya;
Cari kode :

.post-body blockquote { line-height:1.3em; }
Atau
.post blockquote{ ...............................}

Jika sudah ketemu hapus kode diatas dan ganti dengan salah satu kode - kode berikut :

Code 1 :

.post blockquote {
margin : 0 20px; padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbtyP2fDqewZL1dCEd8a5O-0mIipbInlHLbDcjWHcFLNkkh1w4d9BvY45AafKRHFYi8V9F1GYkXjally0ghar0MsaPscTBh0yUfNO0LFUcHuOetI_cDTQYEtEgKugQDeTKMeCzr4F7cbU/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;
}

Code 2 :

.post blockquote {
margin : 0 20px; padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh09x6XsdUvm7TvHV42mfdFKWsi5GbGkIRLDzGBUfRK1qQISr4hQnw_LWnIu07dymHGDjkGEzoxiJ7sNhnAz6CJUH75ruP9OG9_ERcSFlQSIX-9Be5DcVWjyiBS4edL1_8-2Vb6reC5Mbs/s400/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000; border-bottom : 5px solid #435388;
}

.post blockquote p {
margin: 0; padding-top:10px;
}

Code 3:

.post blockquote {
margin : 0 20px; padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtvQ-hY13EjRLUmKqQoGLpZUfaMfzdvexqdU9vC3QgT8KHbPDy24JoNqhHEqm4FU3U99TOifaUNDBOpCO5HaroFSdcjSWiIfV8bgtdaEfmvtmWyRqql5s-zpGS1zD2etaQLq9c3Y3XZCU/s1600/block22.gif) 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;
}

Code 4:

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMBwcqHdB4gUOCMzarzJhtj0RdT24xj7qrVNkgRWiy0ArttTh6AHyEtM-QxVgexd-5ibELi3AI4hLzaWA6Wr9RUgiiCfo8o7bKkwlkYOiZ0GLboZy1_cMnAZ_IgR28pr_fXKLX21s8cRE/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;
}

Code 5:

.post blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy3ZtqhTeGJAO1gYpfBe85MOeCm1zY_YJafFJUC-YXFJvXyguW_JEij8ZavIP7HrIgSPcppmPuXPpNIxv1dLwl8ZIlWxJ5XQFnGm6tPyiYYhRNBy5onaeOrEmszsJG2pLhSUm6OHhYeUg/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px; color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}

.post blockquote p {
margin: 0; padding-top: 10px;
}

Code 6:

.post blockquote {
margin : 0 20px; padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibwFsCouwAp4UNOKW-0Yrx6q1qTY0JJS5_30paBJIFDFEmSfzDF8cNjuZTgutEnA7z0OahiEIkX48Zobcgsq_YeSs_f4GIBezBSFJ96j-hVEIsF2GrT8VV0BvryTlpCGDkePuO12LbHwM/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif;
color : #000; border: 1px solid #DDD;
}

.post blockquote p {
margin: 0; padding-top:10px;
}

Code 7:

.post blockquote {
margin : 0 20px; padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVUgrGUNN_AcLf-BgFsfGG7ASbc9Yc1nWyQ0o_yElBeCgUKE1ewqF9JOIN75fZeG7rk7UZENEHXtRL-QmoKzXaWLl8Q2eAoHe8zhLLUaLFPrDYDw4szTQW-8gFnxyXoCSWZIgQN1j-iZ0/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}

.post blockquote p {
margin: 0; padding-top:10px;
}

Code 8:

.post blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10; padding: 0 20px 0 50px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiIB1v0OCNLlr9DkFzvNyK5BbWCBYjifmsO6cxQ0uApoJhq2LH1ZTfZJktkHxnJywGkqNQJI8E9ESAD-Mvr1mLi7wHkbavswMyD5nzHpyWVAYZ8l_rBvMOhWh-UEFuUPKLA97e_FC725O/s1600/quote.png") 5% no-repeat #FFF8DD;
}

Code 9:

.post blockquote {
padding-left:30px;
padding-right:5px;
background:url(http://www.darkfalltournament.com/images/blockquote.png) no-repeat 0 .0em;
color:#444;
font-style:italic;
text-align:left;
margin:1em 20px;

}

Code 10:

.post blockquote {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Code 11:

blockquote{width: 90%;background:#FFF; padding:5px 15px; margin:5px; color:#555; border:1px solid #C1C1AE; line-height:150%; font-size:12px;border: 1px solid #eee;
-webkit-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}

Jika Ingin Menambahkan Efek Scroll pada blockquote tambahkan code berikut

overflow:auto;
max-height:300px;

Sehingga menjadi seperti ini

    .post blockquote {
    overflow:auto;
    max-height:300px;
    background-color: #666;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

Warna Merah Kode Scroll