Butonlarımız her zamanki gibi CSS3 ile oluşturulmuş ve hover efekti verilmiştir.Butonlarımızın güzelliğine sizin karar verebilmeniz için birde demo ekledim.
]]></b:skin>
Yukarıdaki kodumuzu şablonunuzda CTRL+F yardımı ile bulun.Daha sonra hemen üstüne aşağıdaki CSS kodlarımızı ekleyin.
#social {
margin: 15px 0 5px -15px;
width: 300px;
height: 40px;
text-align: center;
}
#social img {
margin-left: 3px;
margin-right: 3px;
}
#social img:hover {
opacity: 0.6;
}
Tasarım > Sayfa Öğeleri > Gadget Ekle diyerek aşağıdaki kodlarımızı gadgetımıza ekleyelim.
<div id="social">
<a href="http://www.twitter.com/" target="_blank"><img src="http://4.bp.blogspot.com/-CH2EJeZxXvE/T8glI8bKNAI/AAAAAAAACPY/fsmkcRrB8tU/s000/twitter.png" title="Twitter" /></a>
<a href="http://feeds.feedburner.com/" target="_blank"><img alt="Feed" src="http://1.bp.blogspot.com/-rZ_cODG_QCk/T8glJDn031I/AAAAAAAACPg/vN0IgZlOx0c/s000/rss.png" title="RSS" /></a>
<a href="http://www.facebook.com/" target="_blank"><img alt="Facebook" src="http://2.bp.blogspot.com/-iCU7Y8Du4j0/T8glJCXTJtI/AAAAAAAACPo/39McBmTnHt8/s000/facebook.png" title="Facebook" /></a>
<a href="http://plus.google.com/" target="_blank"><img alt="Google Plus" src="http://2.bp.blogspot.com/-eXigEPadqvA/T8glJXRIr0I/AAAAAAAACPw/qMVvMEflU-8/s000/google%252525252b.png" title="Google Plus" /></a>
<a href="http://www.youtube.com/" target="_blank"><img alt="Youtube" src="http://4.bp.blogspot.com/-GKl3FrmoFGg/T8glJojFJHI/AAAAAAAACP0/4EtXMSmC-nc/s000/you_tube.png" title="Youtube" /></a></div>
İkinci kodumuzda bulunan kırmızı ile işaretlenen bölüme kullanıcı adlarınızı yazmanız yeterli olacaktır.
İyi bloglamalar...
0 yorum:
Yorum Gönder