3 Aralık 2012 Pazartesi

Sabit, Açılır Sosyal Butonlar

15 yorum

Daha önce paylaştığım Sabit Açılır Sosyal Kutular, blogcular tarafından çok kullanılan bir eklenti. Sosyal medya platformlarında görünürlüğünüzü arttırması ve şık görünümü sayesinde bu kadar çok kişi tarafından kullanıldı.

Paylaşacağım sabit açılır sosyal butonlar eklentisi de aynı mantıkla çalışıyor. Tek fark isminden de anlayacağınız üzere kutu yerine buton içeriyor olması.

Sabit Açılır Sosyal Butonlar

 

 

Eklentiyi blogunuzda kullanmak için Şablon > HTML’yi Düzenle > Devam Et yolunu izleyin ve Ctrl + F tuş kombinasyonunun yardımıyla  </head> kodunu bulun. Hemen üzerine şu kodları ekleyin.

 

<script type='text/javascript'>
window.onload = function socialButtons() {
       $(&#39;.social_site&#39;).hover(function() {
           $(this).stop().animate({
               left: &#39;0px&#39;
           },
           &#39;fast&#39;)
       },
       function() {
           $(this).stop().animate({
               left: &#39;-140px&#39;
           },
           &#39;fast&#39;)
       })
   }
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;tr-TR&#39;}
</script>
<script src='http://connect.facebook.net/tr_TR/all.js#xfbml=1' type='text/javascript'/>
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>

 

İkinci olarak ]]></b:skin> kodunu bulun ve bunun hemen üzerine aşağıdaki kodları ekleyin.

 

body .social_site {cursor: pointer;height: 64px;left: -140px;overflow: hidden;position: fixed;width: 200px;z-index: 10000;}
body .social_closed {left: -170px;}
body .social_open {left: 0;}
body .social_site .icon {background: url("http://1.bp.blogspot.com/-QIW-4hAHYTY/TrXcGkorELI/AAAAAAAAAJI/WanYkOi_-1c/s1600/social-sprite.png") repeat scroll 0 0 transparent;float: right;height: 64px;width: 60px;}
body .social_site .tray {background: url("http://1.bp.blogspot.com/-QIW-4hAHYTY/TrXcGkorELI/AAAAAAAAAJI/WanYkOi_-1c/s1600/social-sprite.png") repeat-x scroll 0 0 transparent;float: right;height: 64px;width: 140px;}
body .social_facebook {top: 205px;}
body .social_facebook .icon {background-position: 60px -74px;}
body .social_facebook .tray {background-position: -15px -74px;}
body .social_facebook .tray p {
display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_facebook .tray p a, body .social_facebook .tray p a:active, body .social_facebook .tray p a:visited {
color: #FFF;text-shadow: 1px 1px 0px #077EAB; -webkit-text-shadow: 1px 1px 0px #1F366B; -moz-text-shadow: 1px 1px 0px #1F366B;display: block;font-size: 10px;width: 100%;text-decoration:none;}
body .social_users {top: 340px;}
body .social_users .icon {background-position: 60px -6px;}
body .social_users .tray {background-position: -15px -6px;}
body .social_users .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_users .tray p a, body .social_users .tray p a:active, body .social_users .tray p a:visited {
color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;}
body .social_gplus {top: 273px;}
body .social_gplus .icon {background-position: 60px 71px;}
body .social_gplus .tray {background-position: -15px -141px;}
body .social_gplus .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_gplus .tray p a, body .social_gplus .tray p a:active, body .social_gplus .tray p a:visited {color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;}

 

Son olarak </body> kodunu bulun ve hemen üzerine şu kodları ekleyin.

 

<div class='social_site social_users' id='social_link_users'><a><div class='icon'/></a>
<div class='tray bg_denovo'><p><a>Twitter&#39;da Takip Et</a></p>
<p id='users_online_box'><iframe allowtransparency='true' class='twitter-follow-button' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.html#_=1320542107073&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=tr&amp;link_color=&amp;screen_name=BlogHocam&amp;show_count=false&amp;show_screen_name=&amp;text_color=' style='width: 100px; height: 20px;margin-top: -15px;margin-left: 15px;' title=''/></p></div></div><div class='social_site social_facebook' id='social_link_facebook'><a><div class='icon'/></a>
<div class='tray bg_denovo'>
<p><a>Facebook&#39;ta Beğen</a></p>
<div class='fb-like' data-href='http://www.facebook.com/bloghocam' data-layout='button_count' data-send='false' data-show-faces='false' data-width='450' style='margin-left: 30px; margin-top: -20px;'/></div></div>
<div class='social_site social_gplus' id='social_link_gplus'>
<a href='#' target='_blank' title='Google+'><div class='icon'/> </a>
<div class='tray bg_denovo'>
<p><a>Google&#39;da Öner</a></p><p id='g_plus_box' style='margin-top: -10px;margin-left: 12px;'><g:plusone/></p></div></div>

 

Değiştirmeniz gereken yerleri kırmızı renkle gösterdim. BlogHocam yazan yere kendi Twitter kullanıcı adınızı, http://www.facebook.com/bloghocam yazan yere ise kendi Facebook sayfanızın adresini yazın.

15 yorum:

  1. Eline sağlık abi yine güzel bir paylaşım.

    YanıtlaSil
  2. Teşekkür ederim ben uyguladım :) Çok da güzel oldu!

    YanıtlaSil
  3. Güzel bir paylaşım olmuş teşekkürler...

    YanıtlaSil
  4. hocammmm harika bir yazı bu.ben de başardım ama google butonu da dahil 3 buton çıktı sayfada.
    google sayfa kodunu nereye eklemeliydim:)))

    YanıtlaSil
  5. @annelikokulum
    Google butonu için bir ekleme yapmanıza gerek yok. Google +1 butonu çıkacaktır ve butona tıklandığında ana sayfanız +1lenecektir.

    YanıtlaSil
  6. harika bir paylaşım emeğinize sağlık. Yalnız ekranın biraz üst kısmında çıkartıyor butonları ortalamak için kod var mıdır?

    YanıtlaSil
  7. aabi paylaşımlrını demosunu koyabilirmisin paylaşımlarında rica etsem

    YanıtlaSil
  8. @Cihan Türkyılmaz
    Genelde video koyuyorum ama bu resimden nasıl çalıştığı açıkça belli olduğu için video koyma gereği duymadım.

    YanıtlaSil
  9. bir yerde hata yapıyorum galba olmuyor kabule tmiyor bi bana bakamrısınız :( teamdan bi yapalım :(

    YanıtlaSil
  10. hocam sayfanın sağ tarafınfa çıkmasını istiyorum ne yapmam lazım?

    YanıtlaSil
  11. hocam javascript kodları şuanda koddaki adreslerde yok ve kod bozuk

    YanıtlaSil
  12. teşekkur ederım siteme basarıyla uyguladım.

    doctorsilent.blogspot.com

    YanıtlaSil

Picardes

LİNKLER