Hover Efektli Sosyal Takip Butonları

Ağustos 24, 2015
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.


blogger sosyal butonlar

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(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/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 :)

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

1 Yorum
avatar

Profesyonelce hazırlanmış sosyal takip düğmeleri harika

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔