Blogger CSS Efektli Sosyal Paylaşım Butonları

     Okuyucularımızın bizi sosyal medyadan bulmaları çok önemli bir konudur.Okuyucularımıza sadece blogumuz üzerinden değil tüm sosyal medyadan ulaşabilmek bize her zaman rakiplerimiz karşısında bir adım daha önde olma imkanı sağlar.Böylece site hitiniz artmış olur ve yazılarınız daha fazla okunur.Eğer sitenizden para kazanıyorsanız bu tam işinize yarayacaktır.

Css3 ile tasarlanmış güzel bir sosyal paylaşım buton seti fare ile üzerine gelindiğinde hareket verilerek çekici bir hale getirilmiş.Dönme efektli bu sosyal paylaşım butonlarının dönme derecelerini istediğiniz hıza göre ayarlayabilirsiniz.

Blogger CSS Efektli Sosyal Paylaşım Butonları Ekleme:

Blogger Kumanda Paneli / Yerleşim / Gadget Ekle / HTML/Javascript yolunu izleyin.

Açılan Gadget içerisine aşağıda ki kodları ekleyin.
Daha sonra kodlar içerinde belirttiğim kısımlara kendi hesap linklerinizi ekleyin.
Yine kod içerisinde belirttiğim kısımdan butonların dönme acılarını değiştirebilirsiniz.Yalnız hepsinin dönme acıları eşit olması gerekir.

<style>p#hb_socialicons img {
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
</style>
<center><p id="hb_socialicons">
<a href="http://www.facebook.com/Bilgicafem61">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrz3A4ykxYuB2V1Huy-TWHAzqv80oaDZsi2Ys84hw3DBhNg3KoR1Ua98BMLlJEIR4PeK5qM9ZU336XmYsG_VUzek3l_-LJT8eNPWlbfxxhYN_3cNA5gAop254rIvHKyCEtvluw9FtQZ6U/s1600/helperblogger.com-facebook.png" /></a>
<a href="http://www.twitter.com/Bilgicafem61">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPRvGv4Om39tyzbkRjveM50IRZbT4o7zgFpIO9XJUMyavmaUdZmsD_KkLTQzKiAZnXxn-rYHqlvh3USsmfXDcK8LYFgQuT-YXVeJOFAuRq6b8EkC0EJ9NyzNyRlvjaV2dLq5kQuEFr1AY/s1600/helperblogger.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/Bilgicafem">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieI-DanU4dj7wvvKUlV-uCt6vx_GG4APnm1BRA15r3flUt7qpYr9GPEIMwMXneWG8KHA6wL9G5bp5Yq1xdyIfMGzj36C67dcLvF1sEskWUbJxHGuls01hUT1VcBpgjlwl8bvi85rT5VWM/s1600/helperblogger.com-google_plus.png" /></a>
<a href="http://feeds.feedburner.com/Bilgicafem61">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4-u6gVj7PaYsLO6YCTecjVaeYuNUIq4KiAA_lTwvt1yeIQAT5eekFjoSDRelAlv2cO9b6tdNk_VPzRs623Tj8qowT7X4l6mccwv8j_bdxRMMAGqQt_eQM_l2MyvId25LFfl39xpS8Un4/s1600/helperblogger.com-rss.png" /></a>
<a href="http://www.youtube.com/TheAlper61">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYytZDnAR-ndwLdXg7sswWTDzluEWEFmFsODmBEKVjoZGXwlTAlBOs25VLlJf6o1Kv0kNbere0NR8qmH3R8sPBRCMbr60IcFtw52EVYDty-nNacdHmiDyQZRDBohXPIQh5336BswtLKtQ/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Kırmızı ile yazılı yerlere sosyal medya adreslerinizi yazıyorsunuz. İconların hareketlerini değiştirmek için mavi ile yazılı yerleri; Faremiz ikonumuzun üzerine geldiğinde kaç derece döneceğini belirleyerek değiştirebilirsiniz.(Aynı değeri Tüm mavi alanlara yazmalısınız.)
 Hatırlatma: İkonlarımızın sağa doğru değilde sola doğru dönmesini istiyorsak mavi alana gireceğimiz değerin önüne "-" koymalıyız.


Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
© by bilgicafem61
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!