Yanda Açılan Sosyal Paylaş Eklentisi

bugun sizlere yandan açılan sosyal paylaş eklentisi paylaşcamcam. bir başka yazımda daha degişik bir sosyal paylaş eklentisi paylaşmışdım isterseniz burdan bakabilirsiniz.
sosyal paylaş eyer uygulamayı beğendiyseniz uygulamamıza başlayalım.

1 Adım blogger sitemize giriş yapıyoruz. konturol panelinde şablon kısmına tıklıyoruz html düzenle diyip.
Ctrl F yardımı ile </head> kodunu aratıyoruz. buldugumuz 2 Adım açık olan kod penceresine ]]></b:skin> kodunu aratıyoruz. buldugumuz ]]></b:skin> kodu öncesine sizlere aşagıda verdigim kodu ekliyoruz.

<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'/>

3 Adım son ollarak </body> kodunu aratıyoruz. buldugumuz </body> kodu öncesi sizlere aşagıda verdigim kodları ekliyoruz.

 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;}

<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=@BloggerYazari&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/Blogger.yazari' 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>

işlemimiz bitmişdir yurkarda kodlar icersinde kırmızı ile işaretledigim yerleri kendinize göre düzenleyiniz iyi çalışmalar.