Cara Menambahkan Blockquote Pada Artikel – 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 kerententu saja sangat penting artinya untuk mempercantik tampilan dari kutipan artikel yang kita buat . Biasanya dalam tiap template bawaan blogger sudah disertakan kode blockquote ini, namun jika tidak tersedia anda pun dapat membuat atau menambahkan blockquote secara manual. Saya pun sudah memodifikasi blockquote yang ada pada template Thesis ini, dan contoh tampilannya dapat sobat lihat pada postingan saya sebelum ini Kamus Istilah Blogger Yang Wajib Dibaca.
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 { background:#c5c5c5
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkRoC3HdbAuzqPECS-bL-fvNhMjnzG4_4HxriahIZN5UDn5KHRX7KHpUTvCi_IpaEOZbq_MBvv9IQ9os6VEW1_vaLzRmvUmuD9WwyY-T0q0DlYfHxVvCMeLb4d09gdb-zgjYK0zDXRsoWx/s320/blockquote.png) no-repeat top left;
padding:10px 20px 10px 45px;
font-style:italic;
border:1px solid #000000;}
Kode blockquote 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 blockquote 5 :
.post blockquote { background: #F3F3F1
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dDoFj9fiGvXVnbAC1qs4vcL-yypmi3kEbcL0iGS_XZuG5eHs0IaXyEAhLvc_gsjxB9E124LEJIKJvLvgPzRmGk-kCqLc-TLA5KXammkO7D5qSgzOZtmWNNp6n5BSwKwTiWkG-oS4bm0/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 menambahkan 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.
Nah dari beberapa contoh blockquote tadi, sobat pun dapat mencoba berkreasi dengan merubah warna background, jenis huruf atau mungkin sobat ingin membuat background gambar sendiri ? Boleh saja, karena dengan mencoba-coba sendiri akan membuat pemahaman kita jadi lebih mantap lagi. Semoga tips cara membuat blockquote ini bermanfaat dan selamat mencoba.
0 Komentar untuk "Cara Menambahkan Blockquote Pada Artikel"