Merhaba arkadaşlar bugün size bloggerımızda yandan açılır sosyal paylaşım sitelerini kodlarını vereceğim ve nasıl yapıldığını anlatacağım.Öncelikle konuyu birazcık anlatayım. Sitemize eklediğimiz Facebook - Twitter gibi sosyal paylaşım sitelerinin beğenme takip etme gibi kodları koyuyoruz ve sitemizde yandan açılan beğenme butonları çıkıyor. İnşallah işinize yaramıştır.
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() { $('.social_site').hover(function() { $(this).stop().animate({ left: '0px' }, 'fast') }, function() { $(this).stop().animate({ left: '-140px' }, 'fast') }) } </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: 'tr-TR'} </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 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynQdRDEhHp5OBmq74f0hX0qtmFJk008CxH43F-363_6nNRim2O4CBXf8EI0FPhTLNWVBoocXDwulG2vbFnKcf8VQWh2wbg3XNcXaNjJBiWfaBVtnpijMt5v0owXduXliO0nFMLjngyng/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/AVvXsEjynQdRDEhHp5OBmq74f0hX0qtmFJk008CxH43F-363_6nNRim2O4CBXf8EI0FPhTLNWVBoocXDwulG2vbFnKcf8VQWh2wbg3XNcXaNjJBiWfaBVtnpijMt5v0owXduXliO0nFMLjngyng/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'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&align=&button=blue&id=twitter_tweet_button_0&lang=tr&link_color=&screen_name=@Kisisel Blogcumuz&show_count=false&show_screen_name=&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'ta Beğen</a></p>
<div class='fb-like' data-href='http://www.facebook.com/Kisisel.blgcmz' 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'da Öner</a></p><p id='g_plus_box' style='margin-top: -10px;margin-left: 12px;'><g:plusone/></p></div></div>
İşlememiz bitmiştir. Kırmızı ile yazılan yerleri kendi facebook sayfanıza göre veya twitter sayfanıza göre dolduruyorsunuz.
