17-04-2013, Saat:17:42
Merhaba arkadaşlar, WMTR ( webmasterimiz.com ) için yaptığım sosyal paylaş ikonlarını sizlerle paylaşmak istedim.
Sosyal paylaş ikonlarımız CSS Sprite tekniği ile kodlanmış, tamamen sorunsuzdur.
Sosyal paylaş ikonlarımızın ekran görüntüsü;
[attachment=1008]
Resme dikkatli bakarsanız facebook ikonunun belirgin olduğunu ve diğerlerinin facebook ikonuna göre soluk olduğunu görebilirsiniz. Bunun nedeni kodlamada opacity kullanılmasıdır. Yani hangi ikonun üstüne gelirsek ikonumuz belirginleşecektir.
Aşağıdaki kodları ikonlarımızın gözükmesini istediğimiz alana/bölgeye ekleyip kaydedin. [ HTML ]
Daha sonra style.css ( stil ) dosyanıza aşağıdaki css kodlarını ekleyip kaydedin.
Son olarak aşağıda ekte bulunan dosyayı uygun bölgeye atınız.
Not: kodun içerinde resim yolu svmedet-sosyal.png olarak belirtilmiştir. Resmi attığınız bölgeye göre resim yolunu ayarlayınız.
[attachment=1007]
Güle güle kullanın, iyi forumlar.
Kaynak: ( diğer adım svmedet'tir )
Sosyal paylaş ikonlarımız CSS Sprite tekniği ile kodlanmış, tamamen sorunsuzdur.
Sosyal paylaş ikonlarımızın ekran görüntüsü;
[attachment=1008]
Resme dikkatli bakarsanız facebook ikonunun belirgin olduğunu ve diğerlerinin facebook ikonuna göre soluk olduğunu görebilirsiniz. Bunun nedeni kodlamada opacity kullanılmasıdır. Yani hangi ikonun üstüne gelirsek ikonumuz belirginleşecektir.
Aşağıdaki kodları ikonlarımızın gözükmesini istediğimiz alana/bölgeye ekleyip kaydedin. [ HTML ]
Kod:
<!-- SvMedeT Sosyal -->
<div class="svmedet-sosyal">
<a class="svmedet-sosyal-ikon svmedet-facebook" title="Facebook" href="#">Facebook</a>
<a class="svmedet-sosyal-ikon svmedet-twitter" title="Twitter" href="#">Twitter</a>
<a class="svmedet-sosyal-ikon svmedet-google" title="Google +" href="#">Google +</a>
<a class="svmedet-sosyal-ikon svmedet-youtube" title="Youtube" href="#">Youtube</a>
<a class="svmedet-sosyal-ikon svmedet-tel" title="Telefon" href="#">Telefon</a>
<a class="svmedet-sosyal-ikon svmedet-rss" title="Rss" href="#">Rss</a>
</div>
<!-- #SvMedeT Sosyal -->Daha sonra style.css ( stil ) dosyanıza aşağıdaki css kodlarını ekleyip kaydedin.
Kod:
/* SvMedeT Sosyal Css */
.svmedet-sosyal {
float: left
}
/* SvMedeT Sosyal İkon Css */
.svmedet-sosyal-ikon {
background: url("svmedet-sosyal.png") no-repeat top left;
display: inline-block;
text-indent: -99999px;
opacity: .5
}
.svmedet-sosyal-ikon:hover {
opacity: 1
}
.svmedet-facebook {
background-position: 0 0;
width: 40px;
height: 40px;
}
.svmedet-google {
background-position: 0 -45px;
width: 40px;
height: 40px;
}
.svmedet-rss {
background-position: 0 -90px;
width: 40px;
height: 40px;
}
.svmedet-tel {
background-position: 0 -135px;
width: 40px;
height: 40px;
}
.svmedet-twitter {
background-position: 0 -180px;
width: 40px;
height: 40px;
}
.svmedet-youtube {
background-position: 0 -225px;
width: 40px;
height: 40px;
}Son olarak aşağıda ekte bulunan dosyayı uygun bölgeye atınız.
Not: kodun içerinde resim yolu svmedet-sosyal.png olarak belirtilmiştir. Resmi attığınız bölgeye göre resim yolunu ayarlayınız.
[attachment=1007]
Güle güle kullanın, iyi forumlar.
Kaynak: ( diğer adım svmedet'tir )
Kod:
http://webmasterimiz.com/forum/konu-wmtr-soayal-paylas-ikonlari-css-sprite.html