Cara membuat blockquote efek hover sederhana tapi keren di blog

Saya di sini hanya ingin berbagi akan sepengetahuan saya tentang cara atau Tutorial pemasangan "blockquote" . Jika para Sahabat ingin lebih jelas lagi mari kita simak dan ikuti cara saya seperti yang ada di bawah ini:


Cara membuat blockquote efek hover sederhana tapi keren:

• Dasbor > template > edit HTML

• Tick expand template widget > tekan F3/CTRL + F dan cari kode:

    ]]></b:skin>

• Jika Sahabat telah menemukan  ]]></b:skin>,  maka langkah selanjutnya adalah 
  Copy paste kode blockquote efek hover sederhana di bawah ini, tepat di atas kode ]]></b:skin> :

blockquote {border: 3px groove #ffaad5;
background:FFCC33 fixed; -moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;}

blockquote {border: 1px dashed #eeeeee; border-left: 10px solid #fecdc9; border-right: 10px solid #fecdc9; box-shadow: inset 0px 0 10px 0 #fecdc9; padding: 2px; -webkit-transition-duration: 1.5s; border-radius: 10px;}

blockquote:hover { border: 1px dashed #eeeeee; border-left: 10px solid #CC66FF; border-right: 10px solid #CC66FF; box-shadow: inset 0px 0 800px 0 #FFD9EC; padding: 2px; -webkit-transition-duration: 1.5s; border-radius: 10px;}

Untuk yang belum jelas tentang tata cara penerapannya, silahkan lihat gambar di bawah ini:

Note:
Semoga berhasil yach, Sahabat.
Jika masih belum berhasil, silahkan letakan komentar Sahabat.

Sumber

Ditulis Oleh : Ricky *** Musik, Software, Blogging, Information ***

Sobat sedang membaca artikel tentang Cara membuat blockquote efek hover sederhana tapi keren di blog. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Saling menghargai kreatifitas sobat Blogger. <a href="http://glabadia.blogspot.com/2013/07/cara-membuat-blockquote-efek-hover.html" target="_blank">Cara membuat blockquote efek hover sederhana tapi keren di blog</a>

:: Get this widget ! ::

Ditulis oleh: Ricky - Juli 07, 2013

Artikel Terkait: