CSS3 İle Oluşturulmuş, Hover Efektli Sosyal Takip Eklentisi

Sosyal medya hesaplarınızdaki takipçi sayınızı arttırmak istiyorsanız, ziyaretçilerinizin dikkatini çeken sosyal widgetlar kullanmanız gerekir.Ancak dikkat çekici ve görsel açıdan zengin widgetlar genellikle script kullanarak yapıldığından blog hızını olumsuz yönde etkiliyor.
Bu yazıda paylaşacağım sosyal takip eklentisi, Jquery ve Java Script kullanılmamasına rağmen görsellik katan hover efekti ile ziyaretçilerin ilgisini çekecek bir widget.
Eklentiyi blogunuza ekemek için Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyerek aşağıdaki kodları yapıştırın.

    <style>
    #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
    #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
    #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
    #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYnYotuL5fSHGatvFbsyxm43h1tmMddNvUT-8CmstTZEixikvxGPrd540Zsu2OX0v1HlmsTYenIiZ_ry16O_Ppz6R4qHzIxNVHcsw1MbnQPY7iUqB98D4TIPvfyQqEvpFMX1HsAp6R3bo/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
    #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
    #tbisose .icon{overflow:hidden; color:#fafafa;}
    #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
    #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
    #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
    #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
    #tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
    #tbisose li:hover .icon,
    .touch #tbisose li .icon{width:210px;}
    .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
    .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
    .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
    .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
    .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
    </style>

    <ul id="tbisose">
    <li data-alt="Fcebook'ta takip et"><a class="icon facebook" href="http://facebook.com/gokhaninguncesi">Facebook'ta Takip Et</a></li>
    <li data-alt="Twitter'da takip et"><a class="icon twitter" href="http://twitter.com/gokhaninguncesi">Twitter'da Takip Et</a></li>
    <li data-alt="Google+'da takip et"><a class="icon googleplus" href="https://plus.google.com/111548963868002856665/posts">Google+'da Takip Et</a></li>
    <li data-alt="Pinterest'te takip et"><a class="icon pinterest" href="http://pnterest.com/kullanici-adi">Pinterest'te Takip Et</a></li>
    <li data-alt="RSS İle Takip Et"><a class="icon rss" href="http://feeds.feedburner.com/gokhaninguncesi">RSS İle Takip Et</a></li>
    </ul>

Arkadaşlar ben örnek olarak kendi bilgilerimi yazdım sizin değiştirmeniz gereken yerleri mavi ile yazdım , mavi olan yerlere kendi bilgilerinizi yazarsınız 
NOT : Yapamayan arkadaşlar konu altına yorum yapıp,yapamadıklarını bildirirlerse yardımcı olurum umarım Fatdalı olur 

Facebook'a tartışmalı yenilik

Facebook'da yakında hizmete açılacak bu özellik, gizliliğe önem verenlerin pek de hoşuna gitmeyecek!Sosyal ağ sitesi Facebook, yakın bir zamanda dolaştığınız web sitelerine göre reklam gösterecek.
Facebook Exchange adındaki reklam özelliği, tarayıcınızdaki çerezlere göre reklamcıların reklam verebilmesine izin verecek. Örneğin bir seyahat şirketinin web sitesini ziyaret ettiğinizde ancak herhangi bir satın alma yapmadığınızda, Facebook'u bir dahaki ziyaretinizde arattığınız uçuş ve otellerle ilgili reklamları görebileceksiniz.

Reklamcılar, gerçek zamanlı başvuru yapabileceklerinden reklamlar oldukça spesifik ve zamana duyarlı olabilecek. Facebook, yeni işlev kapsamında reklamcılarla herhangi bir kullanıcı verisini paylaşmayacağını ve istendiğinde işlevin kapatılabileceğini söylüyor. Facebook Exchange, önümüzdeki haftalarda kullanıma açılmaya başlanacak.