Sekarang saya mau ngeshare bagaimana cara membuat blockquote dengan efek hover.langsung saja tanpa basa-basi,
ikuti langkah-langkah nya yah:
1.login terlebih dahulu mestinya di blogger anda.
2.pilih tab Desain ==> Edit HTML
3.beri tanda cek pada expand widget.
4.cari kode ]]></b:skin> ,biar lebih cepet gunakan tombol CTRL+F.
5.Copy kode dibawah ini,dan letakkan tepat diata kode ]]></b:skin>
6.setelah itu,klik simpan..
ikuti langkah-langkah nya yah:
1.login terlebih dahulu mestinya di blogger anda.
2.pilih tab Desain ==> Edit HTML
3.beri tanda cek pada expand widget.
4.cari kode ]]></b:skin> ,biar lebih cepet gunakan tombol CTRL+F.
5.Copy kode dibawah ini,dan letakkan tepat diata kode ]]></b:skin>
.post-body{margin:10px 5px;padding:0px}perhatikan yah,kode yang berwarna hijau itu bisa anda ganti sesuai dengan selera anda.
.post-body blockquote {overflow:auto; height:220px; background-position:-10px -7px; border: 1px dashed #fff; margin: 10px; padding: 10px; background:#666; text-align: justify; line-height:1.4em;
opacity:0.9; filter:alpha(opacity=95); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F}
.post-body blockquote:hover{color:#fff; font-size:15px; background:#000;
opacity:0.9; filter:alpha(opacity=95); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000;}
.post blockquote{ margin:1em 15px}
.post blockquote p{ margin:.75em 0}
6.setelah itu,klik simpan..
0 comments:
Posting Komentar