Mempercantik Blockquote

Blockquote adalah kutipan dari artikel yang dianggap penting atau memiliki arti khusus. Namun pada prakteknya, ada juga yang menggunakan blockquote untuk menuliskan tag HTML, kode CSS atau script pada artikel-artikel tips blogging. Membuat blockquote yang bagus dan keren tentu saja sangat penting artinya untuk mempercantik tampilan dari kutipan artikel yang kita buat.

Letak kode blockquote dalam template biasanya ditandai dengan kode .post blockquote { atau kode .post-body blockquote {. Dibawah ini ada beberapa contoh blockquote berikut kode css-nya yang dapat sobat tempatkan pada template blog anda.

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

Kode blockquote 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 blockquote 3 :
.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 blockquote 4 :
.post blockquote { background:#c5c5c5
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvf7O_exE0Fs9A270qj35EwIwTI9ZsPBG7lN2KtiYJSWI4G2gWqgcDgo8fTMRmYdsV29QwBq6F6h-JjbaQlFljBVWzvPJaTRIJAmzjYVd98-mI4Ml1Qq3fUvwyCKiELQitJA9CWFuQos3X/s320/blockquote.png) no-repeat top left;
padding:10px 20px 10px 45px;
font-style:italic;
border:1px solid #000000;}

Kode blockquote 5 :
.post blockquote { background: #F3F3F1
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-k_waCfqao8tbxUAs2ZRAjXKl2G7XFZVZ5ORQVUk6UkHsUtn3CjsCjav7Ct_F87xYcMnATLmYFJOdPACgboxHz68u2-gI0Q2iEH-KofTxtQfUvm_OzDImKBqKnDUwmyiSLoy-Bf_j82I/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; }


Cara mempercantik blockquote pada template adalah sebagai berikut :
1. Login pada dashboard blogger anda.
2. Pilih Rancangan > Edit HTML, centang Expand widget template.
3. Carilah kode ]]></b:skin> pada template anda.
4. Copy kode css blockquote diatas dan paste tepat diatas kode ]]></b:skin>.
5. Save template anda.

Untuk cara membuat blockquote pada postingan sangat mudah, cara manualnya adalah teks yang dikutip harus diapit dengan kode blockquote pembuka <blockquote> dan kode blockquote penutup <blockquote>. Trus kalo mau yang otomatis, pada saat berada dalam panel postingan blogger tinggal diblok saja teks yang mau dijadikan blockquote kemudian klik simbol quotation atau tanda petik, maka teks yang dijadikan blockquote akan di-indentasi (menjorok kedalam) secara otomatis.

Original Post