Membuat Blockquote Keren

Kalau ada sumur di ladang, boleh kita menumpang mandi...
Alhamdulillah ada umur panjang, masih bisa posting lagi...

Bila anda perhatikan tulisan di atas, maka akan terlihat jelas bahwa tulisan itu seperti berada ditengah-tengah gambar bergaris dan mempunyai warna yang berbeda. Itulah yang disebut "blockquote".

Sebenarnya Blogger sudah mempunyai blockquote default, namun jika telah dimodifikasi maka hasilnya seperti yang anda lihat pada tulisan tadi.

Andaa tertarik untuk membuatnya, berikut adalah langka-langkah yang harus kita tempuh:

1. Login ke Blogger
2. Edit HTML dan ceklis Expand Template Widget
3. Download Template lengkap, untuk menghindari kesalahan
4. Cari kode yang mirip dengan kode berikut:
.post blockquote {
    font: italic 13px georgia;
    margin: 1em 20px;
}
 5. Jika sudah ketemu, ganti dengan dengan salah satu kode di bawah ini:

.post blockquote{padding-left:10px;padding-right:10px;font-style:bold;color:#444;background-color:#fff;background-image:url(http://lh4.ggpht.com/_mWNaJ9OwpbA/TIFzdVqFZBI/AAAAAAAAAsk/B6SBf_hzJTU/source.jpg);background-repeat:repeat-y;background-attachment:scroll;background-position:margin:10px 0 15px 20px;border-left:15px solid #ccc;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;-moz-border-radius-bottomright:10px;}
.post blockquote{overflow:auto;max-height:200px;padding-left:10px;padding-right:10px;font-style:bold;color:#444;background-color:#fff;background-image:url(http://lh4.ggpht.com/_mWNaJ9OwpbA/TIFzdVqFZBI/AAAAAAAAAsk/B6SBf_hzJTU/source.jpg);background-repeat:repeat-y;background-attachment:scroll;background-position:margin:10px 0 15px 20px;border-left:15px solid #ccc;border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;-moz-border-radius-bottomright:10px;}
6. Simpan Template
Untuk mencobanya silahkan buka kotak posting. Klik tanda blockquote '"' pada setiap tulisan yang akan dijadikan blockquote.
Di irian koq banyak cendrawasih?
Oya, cukup sekian, terima kasih ;D
Untuk berlangganan artikel, masukan email anda disini:



8 Comment :

DeeJayHan-Blog mengatakan...

Trik yang bagus . comment back yah ^^.

Jon Milan's mengatakan...

Trima kasih gan. Siap ke TKP...

Vicahya mengatakan...

Wow akhirnya ada solusi juga buat ini ...

kunjungi balik ea sob koment ...

Jon Milans mengatakan...

meluncur...

blogger solution mengatakan...

Contohnya gk ada kh?

Jon Milans mengatakan...

Contohnya spt blockquote yg sy pake di blog ini. Hanya background-imagenya sj yg sy hilangkan

gopar-it mengatakan...

wah..nice

Husada Tekpen mengatakan...

mantap ne, makasih.. mampir yaaa :)

Posting Komentar

Bahasa dapat mencerminkan kepribadian seseorang.
Bagi yang ingin promosi web, blog dan atau mendapatkan backlink dari blog ini, telah disediakan tempat khusus. Klik DISINI

 

Info Olahraga

Info Komputer

Info Blackberry