Hover Efektli Sosyal Takip Butonları

Hover Efektli Animasyonlu Sosyal Takip Butonları Yapımı. Ziyaretçilerinizin blogger bloğunuzdan sosyal medya sayfalarınıza ulaşımını kolaylaştırmak için bu eklentiyi kurmak isteyebilirsiniz.

Birçok blogger arkadaşımın blog sayfaları için oluşturduğu bazı sosyal medya hesapları var. Blogu üzerinden bu hesaplarına bağlantı vermek istediklerinde bu eklentiyi işe koşmalarının sebebi en güzeli ve profesyoneli olması diyebilirim.

Sizde blogger bloğunuza animasyonlu ve hover efektli sosyal takip butonlarını eklemek istiyorsanız aşağıdaki adımları izleyin.

Hover Efektli Sosyal Takip Butonları Yapımı

1. Blogger

2. Şablon

3. HTML'yi Düzenle

4. Kodların üzerinde herhangi bir yere tıklayıp CTRL+F tuşlarına aynı anda basın ve arama kutusunu açın.

5. ]]></b:skin> kodunu bulun

6. Bu kodun üst satırına aşağıdaki kodları yapıştırın.

ul.cbttopshare { float: right; margin: -4px 0; } ul.cbttopshare li {float:left;list-style: none outside none;border:none;} ul.cbttopshare li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisL_y6Wai6lfMPH8I01RBUZOReZ5UomQaCmK-uuTQZvvtA9U5hn2kllr8DrC1jnyAg1qkndF8CyCAbrgOrnWXeNko8qKBvaVl3V4U-luXEOWlvCDhOpUPMjRASDw3NviugycTE-bIs2clK/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px} .ie7 ul.cbttopshare li a, .ie8 ul.cbttopshare li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisL_y6Wai6lfMPH8I01RBUZOReZ5UomQaCmK-uuTQZvvtA9U5hn2kllr8DrC1jnyAg1qkndF8CyCAbrgOrnWXeNko8qKBvaVl3V4U-luXEOWlvCDhOpUPMjRASDw3NviugycTE-bIs2clK/s1600/spice-social-gadget-sprite.png)} ul.cbttopshare li.facebook a{ background-position:0 0} ul.cbttopshare li.flickr a{ background-position:-32px 0} ul.cbttopshare li.dribbble a{ background-position:-64px 0} ul.cbttopshare li.googleplus a{ background-position:-96px 0} ul.cbttopshare li.linkedin a{ background-position:-128px 0} ul.cbttopshare li.pinterest a{ background-position:-160px 0} ul.cbttopshare li.rss a{ background-position:-192px 0} ul.cbttopshare li.skype a{ background-position:-224px 0} ul.cbttopshare li.twitter a{ background-position:-256px 0} ul.cbttopshare li.vimeo a{ background-position:-288px 0} ul.cbttopshare li.youtube a{ background-position:-320px 0} ul.cbttopshare li.facebook a:hover, #sidebar ul.cbttopshare li.facebook a:hover{ background-position:0 -32px} ul.cbttopshare li.flickr a:hover, #sidebar ul.cbttopshare li.flickr a:hover{ background-position:-32px -32px} ul.cbttopshare li.dribbble a:hover, #sidebar ul.cbttopshare li.dribbble a:hover{ background-position:-64px -32px} ul.cbttopshare li.googleplus a:hover, #sidebar ul.cbttopshare li.googleplus a:hover{ background-position:-96px -32px} ul.cbttopshare li.linkedin a:hover, #sidebar ul.cbttopshare li.linkedin a:hover{ background-position:-128px -32px} ul.cbttopshare li.pinterest a:hover, #sidebar ul.cbttopshare li.pinterest a:hover{ background-position:-160px -32px} ul.cbttopshare li.rss a:hover, #sidebar ul.cbttopshare li.rss a:hover{ background-position:-192px -32px} ul.cbttopshare li.skype a:hover, #sidebar ul.cbttopshare li.skype a:hover{ background-position:-224px -32px} ul.cbttopshare li.twitter a:hover, #sidebar ul.cbttopshare li.twitter a:hover{ background-position:-256px -32px} ul.cbttopshare li.vimeo a:hover, #sidebar ul.cbttopshare li.vimeo a:hover{ background-position:-288px -32px} ul.cbttopshare li.youtube a:hover, #sidebar ul.cbttopshare li.youtube a:hover{ background-position:-320px -32px} blockquote { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #FBFBFB; border-color: #DDDDDD #DDDDDD -moz-use-text-color; border-image: none; border-style: solid; border-width: 1px 1px 2px; padding: 5px; clear: both; }

7. Şablonu kaydedin.
8. Yerleşim>Gadget Ekle>HTML/JawaScript yolunu takip ederek aşağıdaki kodları açılan pencereye yapıştırın ve kaydedin.

<!--Social Icons Started --> <ul class='cbttopshare'> <li class='facebook'> <a href='http://www.facebook.com/' rel='nofollow' target='_blank' title='facebook'> </a></li> <li class='googleplus'> <a href='https://plus.google.com/' rel='nofollow' target='_blank' title='googleplus'> </a></li> <li class='pinterest'> <a href='http://pinterest.com/' rel='nofollow' target='_blank' title='pinterest'> </a></li> <li class='twitter'> <a href='http://twitter.com/' rel='nofollow' target='_blank' title='twitter'> </a></li> <li class='rss'> <a href='http://feedburner.com/' rel='nofollow' target='_blank' title='rss'> </a></li> <li class='skype'> <a href='http://www.skype.com/' rel='nofollow' target='_blank' title='Skype'> </a></li> <li class='vimeo'> <a href='http://www.vimeo.com/' rel='nofollow' target='_blank' title='vimeo'> </a></li> <li class='flickr'> <a href='http://www.flickr.com/' rel='nofollow' target='_blank' title='flickr'> </a></li> <li class='linkedin'> <a href='http://www.linkedin.com/' rel='nofollow' target='_blank' title='linkedin'> </a></li> <li class='youtube'> <a href='http://www.youtube.com/' rel='nofollow' target='_blank' title='youtube'> </a></li> </ul> <!--Social Icons End-->

Kırmızıyla belirttiğim adresleri ve diğerlerini kendi hesaplarınızın adresleriyle değiştirmeyi unutmayın.

9. İşlemler bu kadar. Tebrikler :)

Blogger için hover efektli animasyonlu sosyal takip butonlarının yapımını anlattım. Anlatamamış da olabilirim. Siz aklınıza takılan yerleri yorum yaparak sorabilirsiniz. İyi bloglamalar. Bloğumu izlemeyi unutmayın :)