Membuat Blockquote dengan berbagai variasi pada blogger

Home » Tips trik blogger » Membuat Blockquote dengan berbagai variasi pada blogger

Membuat Blockquote dengan berbagai variasi pada blogger

Posted by Unknown Monday, 21 June 2010 0 comments

Mempercantik tulisan pada posting merupakan cara yang paling baik untuk menambah traffick, karena pada prinsipnya sebagus apapun blog yang kita design yang menjadi penentu adakah ISI POSTING

Mempergunakan fasilitas blockquote adalah salah satu alternatif yang bisa dipakai untuk melakukan penekanan atau menunjukan kutipan pada artikel yang kita tulis.
Blockquote sebenarnnya sudah ada pada blogger ( lihat tanda kutip " pada menu posting baru ) sesuai dengan standart template masing masing blog.

Untuk melakukan perubahan pada blockquote standart bisa dilakukan dengan cara :

Modifikasi blockquote standart template yang ada

Untuk lebih jelasnya silakan lihat uraian berikut ini :

CARA PERTAMA, Modifikasi blockquote standart template yang ada

Login Blogger.com
Masuk ke Setting - Design - Edit HTML
Cari kode

.post blockquote
......... dst
}
.post blockquote:hover
......... dst
}
.post blockquote p
......... dst
}

( ini adalah kode standart blockquote bisa dilakukan perubahan sesuai kebutuhan )

Ganti dengan kode diatas dengan kode berikut :

.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) 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://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}

.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}