Yandan Acı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  </head> kodu öncesi 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'/>

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.

 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5NglMsCkWvyinwMN6l5u7QZfIVB6rylmHGaORDP12x3bP988E6oU8RYJwO0z5murDm2IBQrimkdmyFAfVw9UutGV-YPRqEP7wvVm3_u1BFqVu9GrQ_gKWVASSeOG0pm-v0E4pENDpH5g/s1600/social-sprite.png") repeat scroll 0 0 transparent;float: right;height: 64px;width: 60px;} 
body .social_site .tray {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5NglMsCkWvyinwMN6l5u7QZfIVB6rylmHGaORDP12x3bP988E6oU8RYJwO0z5murDm2IBQrimkdmyFAfVw9UutGV-YPRqEP7wvVm3_u1BFqVu9GrQ_gKWVASSeOG0pm-v0E4pENDpH5g/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;}

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

<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/SayfaAdresiniz' 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. - See more at: http://blogger-yazari.blogspot.com/2013/05/yandan-aclan-sosyal-paylas-eklentisi.html#sthash.LH25bQzG.dpuf