Sitenizin mutlaka sosyal medya hesaplarının olması gerekmektedir.Seo hit açısından önemini anlatmıştık.Sitenizdeki paylaşımları sosyal medyadan takip etmek isteyen kullanıcılarınızı düşünerek sosyal medya hesaplarınızı sitenizde belirtmenizde fayda var.
İşte ihtiyacınız olan Sosyal Medya hesaplarınızı belirten metro tarzı eklenti
Aşağıdaki kodları Yerleşim-Gadget ekle-HTML Javascript aşamalarından sonra kaydet diyoruz.
İçinde Facebook,Twitter,Google Plus,Pinterest,Linkedin,Youtube ve Rss gibi en çok kullanılan hesaplar mevcuttur.
Demo
<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>
Kırmızı yazıyla belirtilen yerlere kendi hesap adreslerinizi yazıyorsunuz.Ayrıca width ve height değerlerini değiştirerek boyutlarını değiştirebilirsiniz.
