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.

Css3 ile tasarlanmış güzel bir sosyal paylaşım buton seti fare ile üzerine gelindiğinde hareket verilerek çekici bir hale getirilmiş.

Blogumuza nasıl ekleyeceğiz konusuda gelirsek;
Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu takip ederek. aşağıdaki kodları yapıştırıyoruz.

<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/Xtrealblog">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaCni_rZFJJ7us-4a83XBqqm6h0rc4_NcmZ1ZVRAzWbs1OQI3KmkvyMlu1sDYOqv0LVnLe47cA_pq91-FRBacH_gc_nyck8-4enFJLS3Ouuyr22LaFuk4HIExGdY14iJ1cSupMmi7VhrY/s1600/helperblogger.com-facebook.png" /></a>

<a href="http://www.twitter.com/Xtrealblog">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNL7yccLb367NxeNJe83BTvsM0NMeaLI5doKVj3bq1CV7mx-HYqGgrC2k6woHsmPSP7vN577az2Nqg9OUdoGFCpiFm2j879Jhadxor_bDnc10HYzSFxPBPe4-70GHtuaaXylbBFp0nCAc/s1600/helperblogger.com-twitter.png" /></a>

<a href="https://plus.google.com/u/0/106527290580119996124">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimrEVw7smNFdeyz7FCGTBCAj6J31vbc5palJwerBQot2x9HAZ79KuM2d-cuykNSkNYu_wcOprk01gujO4fxMgjG-cbLO3A35vYbjldwILu-yfLRDnr7IMhyphenhyphenpfRdLeNx2RC5f8fDo8Zb44/s1600/helperblogger.com-google_plus.png" /></a>

<a href="http://feeds.feedburner.com/xtrealblog">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfK1eFAJWZ-TgHk1fACCN9vFI1KvAwLdzXIR9ZGoeu64DAoOoxqw8H81eN0Xd7aKQtq6olACp791CguV7meZ0dFQrLF8k81vjsLpl-6iJPpVTKz9zte7inrS87Q8WcSujlMRKNdEe3lg/s1600/helperblogger.com-rss.png" /></a>

<a href="http://www.youtube.com/xtrealblog">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmltQkdZXVbw2-qebje8YmVUD8wMyzLIoIQK4KQVZzdsaV6ZylPpGKNtIzfrgwJKmPoOQ2CrD0ZzSoO3XwsvF8ceEH0-k4ls5ECzW8arrunXSyXrALOYr6v6k-g-7HIdLNri4fcd3q3OY/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.