Metro Tarzı Sosyal Medya Widgeti

Bloglar için sosyal medya eklentilerinin önemi su götürmez bir gerçek. Bir çok eklenti ile bloglarımıza sosyal medya bağlantılarını ekleyebiliyoruz. Eklediğimiz eklentiler de kullanılan kodlama dillerinin bazıları sayfa açılış hızını yavaşlattığını biliyoruz ve bu tarz kodlarımı olabildiğince az kullanmaya çalışarak sayfa açılış hızımızı düşürmemeye çalışıyoruz.

Metro tarzı sosyal medya eklentisini ÖNİZLEMEK için tıklayınız.

Metro tarzı sosyal medya eklentisinde;

• 7 adet en popüler sosyal ağ.
• Css kullanılarak yapılandırılmış zarif tasarım ve hover efekti.
• JavaScript ve Jquery kullanılmadan sadece Css kullanılarak hazırlanmış.

Metro tarzı sosyal medya eklantisini blogumuza nasıl ekleyeceğimize gelirsek;
Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/JavaScript ekle diyerek açılan pencereye aşağıdaki kodları yapıştırmamız yeterli olacaktır.

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/facebookKullanıcıadı rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/TwitterKullanıcıadı></a></li>
<li><a class="gp" href="https://plus.google.com/GooglePlusKullanıcıadı"></a></li>
<li><a class="pi" href=http://pinterest.com/PinterestKullanıcıadı rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/LinkedinKullanıcıadı rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/YoutubeKullanıcıadı></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/FeedburnerKullanıcıadı rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Not: Kodlar arasında Kırmızı olarak gösterilen yerleri kendi sosyal medya isimleriniz ile değiştirmelisiniz.