Blogger Yandan Açılan Sosyal Paylasım Eklentisi

Merhaba Arkadaşlar Yandaki Resimde gördüğünüz gibi yandan açılan Sosyal Paylasım eklentisini sizde blogunuza ekleyebilirsiniz.

Blogger Panelimize Giriş Yapıyoruz. 

1) Kumanda Paneli > Şablon > HTML`yi Düzenle kısmına girip Ctrl + F ile </head> kodunu aratıyoruz.Bulduğumuz koddan önce aşağıdaki kodları 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)Yukarıdaki adımları yaptıktan sonra  ]]></b:skin> kodunu aratıyoruz.Bulduğumuz kodun öncesine aşağıdaki 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/AVvXsEiA1uLc149JWBDt3BSyPfhaDnXVxLSwfFh1CEUWjtbTIoPtZ-D5YModgT6RedHqsz3hIt5IVOBLw_sRSESBPkMft3My75lEe4fS9YXKkFRiEie9euPgjkc-i86EEDlh-INNa6ymDvFAahs/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/AVvXsEiA1uLc149JWBDt3BSyPfhaDnXVxLSwfFh1CEUWjtbTIoPtZ-D5YModgT6RedHqsz3hIt5IVOBLw_sRSESBPkMft3My75lEe4fS9YXKkFRiEie9euPgjkc-i86EEDlh-INNa6ymDvFAahs/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)Son adım olarak </body> kodunu aratıyoruz.Bulduğumuz kodun öncesine aşağıdaki 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=@DBA Software&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/DBASoftware' 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>

Not:Kırmızı renkle belirtilen yerleri kendinize göre düzenleyebilirsiniz.