Cara Mudah Membuat Blockquote di Blog

Sudahkah anda pernah mendengar istilah blockquote....Blockquote adalah penekanan sebuah kalimat/pernyataan yang kita ingin buat sehingga terkesan "penting" kepada pembaca. Blockquote juga dapat berisi kutipan dari sebuah sumber yang ingin ditampilkan lebih jelas. Jika sobat memiliki blog yang berisi tentang tutorial blogging maka sudah sewajibnya sobat membuat blockquote untuk menghighlight kode atau script sehingga terlihat lebih menarik dan mudah untuk dibaca. Untuk itu saya akan memberikan trik kepada sobat bagaimana memodifikasi blockquote pada blog sobat serta cara menerapkan blockquote pada posting sobat.

1. Login ke blogger.
2. Pilih Rancangan -- edit HTML
3. Cari kode ini ]]></b:skin>
4. Letakkan salah satu kode dibawah ini sebelum kode diatas

Blockquote 1.

.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}

Hasilnya seperti dibawah ini:

Contoh Blockquote 1.

Blockquote 2.

.post blockquote {
background-color: #FFFFFF;
border-left: 10px solid #8A2908;
border-right: 10px solid #8A2908;
margin: 1em 3em;
padding: .5em 1em;
font-size: 12px;

Hasilnya seperti dibawah ini:

Contoh Blockquote 2.

Blockquote 3.

.post blockquote {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-family : Courier, Arial, Verdana;
line-height:1.6;
background: url('http://3.bp.blogspot.com/-XHc6bsXTMvw/T47faFP2o_I/AAAAAAAADEk/k-icLJmzFz4/s400/w2b_codeicon.gif') no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.post blockquote li {
line-height : 24px;
color : #333333;
margin : 0;
padding : 0;
}

Hasilnya seperti dibawah ini:

Contoh Blockquote 3.

5. Simpan template sobat

Untuk membuat blockquote pada posting sobat jangan lupa untuk menyertakan kode seperti dibawah ini pada tulisan atau script yang ingin dihighlight:

<blockquote>
Masukkan tulisan atau script disini
</blockquote>

Selamat mencoba, dan good luck!

Posted in: Teks,Tips dan Triks