Bagaimana cara mengubahsuaikan Blockquote secara elegan di blog

Pada postingan hari ini saya akan share ke anad tentan Bagaimana cara mengubahsuaikan Blockquote dengan elegan di blog. Ini adalah salah blockquote yang sempurna bagi seseorang yang ingin menyorot teks (naskahnya) atau memberikan beberapa kode khusus untuk para pembacanya. Hasil akhir dari Blockquote ini sungguh bagus sekali dan saya juga menerapkannya di blog. Efek yang diberikan Blockquote elegan ini cukup membuat kita merasa puas dan kagum. Mari kita mulai dengan pengkodean...

View Demo

Cara menambahkan Blockquote elegan di blog. 

• Masuk ke akun Blogger anda -> Klik Template -> Edit HTML
• Seperti biasa backup template anda terlebih dahulu 
• Kemudian cari kode / tag ]]></b:skin> (CTRL + F untuk memudahkan pencarian)
• Setelah ketemu letakan kode berikut di bawah ini tepat di atas kode ]]></b:skin>

blockquote{
border:5px solid #007FFF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
font-family:courier;
color:#000000 ;
width: 360px;
    position: relative;
    margin: 0 auto 20px auto;
 padding: 12px 80px 15px;
    text-align: left;
    border-radius: 5px;
     box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
    cursor: default;
 background: #ffe691;
    border: 1px solid #f6db7b;
background: #ffe691 url(http://png.findicons.com/files/icons/2448/wpzoom_developer/47/quote.png) no-repeat 5% 9%;
}
blockquote:hover {
border:5px solid #008000;
border-radius: 15px;
}

Cara menggunakannya di Blog.

Ada 2 cara untuk menggunakan Blockquote Elegan ini di postingan blog anda :

• Dengan cara manual ( di postingan HTML bukan Compose)

<blockquote>
KODE ANDA / TEXT DISINI
</blockquote>

• Menggunakan Tombol Blockquote Blog yang telah disediakan pada format Bar di bagian Edit pos (klik gambar untuk memperbesar)

Semoga bermanfa'at....

Salam Blogger..!

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 20.26