MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
SvMedeT avatar
Konuyu Oyla:
  • Derecelendirme: 5/5 - 2 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 2 oy

WMTR Soayal Paylaş İkonları - ( CSS Sprite )


Sponsor Reklam
media venus

Çevrimdışı SvMedeT
 Tarih: 17-04-2013, Saat:17:42
(Son Düzenleme: 17-04-2013, Saat:18:41, Düzenleyen: SvMedeT.)
#1
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ü;

   

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.


.zip   svmedet-sosyal.zip (Dosya Boyutu: 10.23 KB / İndirme Sayısı: 9)
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
Cevapla
Bunu Beğenenler: xpserkan , S.G
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı akvaryumalemi
 Tarih: 17-04-2013, Saat:18:15
#2
peki bunu kullanabilmek için bu kodları nereye ekleyeceğiz...
Cevapla
Bunu Beğenenler:

Çevrimdışı SvMedeT
 Tarih: 17-04-2013, Saat:18:40
#3
(17-04-2013, Saat:18:15)akvaryumalemi Adlı Kullanıcıdan Alıntı: peki bunu kullanabilmek için bu kodları nereye ekleyeceğiz...

Html kodlarını gözükmesi istediğiniz bir şablona ekleyebilirsiniz. Bu şablon önerim header ve footer olabilir.

Css kodlarını da temanzın global.css kısmına ekleyebilirsiniz.

Son olarak resmi eklemeyi unutmayın, resmi ise temanızın klasörüne atınız ve css kodları içerinde resim yolunu güncelleyiniz.
Cevapla
Bunu Beğenenler: akvaryumalemi

Çevrimdışı dellyorhan
 Tarih: 17-04-2013, Saat:21:40
#4
Teşekkurler....
Cevapla
Bunu Beğenenler:

 




Konuyu Okuyanlar: 1 Ziyaretçi