Membuat Blockquote dengan berbagai variasi pada blogger


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;
    }

    Simpan dan lihat hasilnya. ( hasilnya sama dengan di artikel ini )
    • Silakan dirubah sesuai dengan template yang ada ( kode warna, background image, border, margin, padding ) sesuai kebutuhan.

    terima kasih..
    semoga bermanfaat...!
    Labels: