Hover Efektli Duyuru Tablosu

Çeşitli İşlevlerde kullanılabilecek güzel bir kod. Bloggerde duyuru panosu yada yayın içi mause duyarlı alan için kullanılabilir.


<style type="text/css">
blockquote {
background: #000 url(http://1.bp.blogspot.com/--Nw2HNyMEsk/UxA1RkjUlwI/AAAAAAAAAPU/z0Xvd1yv8mw/s1600/Face1.jpg) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font:Courier new;
border:1px solid #DDD;
}
blockquote:hover {
background: #000 url(http://3.bp.blogspot.com/-DbIMTFXpB6Y/UxA1RpUkIvI/AAAAAAAAAPQ/7IUAXa6GGig/s1600/Face2.jpg) no-repeat right bottom ;
color:#00ff00;
}
blockquote p {
margin: 0;
padding-top:10px;
}
</style>
<blockquote>WebSeyyahı Kâr amacı gütmeyen sanal bir kuruluştur. Bilgisayar / Web / İnternet / Bookmark / Blog / Tavsiye Bilgiler / Cevabını Bulduğumuz Aramalar / Diğer... konularında paylaşım yapan internet gezginlerinin seyir defteridir.</blockquote>

Widget (gadget) olarak eklemek için :

Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :

Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

CANLI DEMO SAYFASI

0 yorum: