Sosyal Medya Butonları

Sosyal medya  butonları biz web sitesi sahipleri için vazgeçilmezlerimizdendir.Gün geçtikçe yenisi çıkan artık hızına yetişemediğimiz sosyal medya butonlarına bende bir yenisini eklemek için kollarımı sıvadım.

  

Size hem kullanışlı ve hemde tasarım olarak çok güzel bir eklenti buldum.Üstelik bu ekleti de responsive özelliği de mevcut.Yani telefonda,tablette,bilgisayarda sorunsuz bir şekilde çalışmaktadır.

Hiç uzatmadan kodlara ve anlatıma geçelim.

• İlk önce Şablon > Html'yi düzenle yolunu takip ederek kodlarınmızın olduğu alana ulaşıyoruz.
• Daha sonra CTRL+F butonları yardımı ile aşağıdaki kodu arıyoruz.

                                      <data:post.body/>

• Bulduğunuz kodun altına aşağıda vereceğim kodu kopyalayıp yapıştırıyoruz.
• Vermiş olduğum koddan birkaç tane olabilir tek tek deneyerek doğru olanı bulabilirsiniz.

                      <b:if cond='data:blog.pageType == "item"'> <link href='https://googledrive.com/host/0B3omcK7jIprqRm95VVpQZDJHRzQ' rel='stylesheet'/> <div class="wpr"> <a class="social" id="twitter" href="your-twitter-account-link" title=""> <div class="icon"> </div> <div class="shutter_frame"> <div class="shutter"> <div class="number"> 1189</div> <div class="bar"> </div> <div class="text"> followers</div> </div> </div> </a> <a class="social" id="google" href="your-google-plus-account-link" title=""> <div class="icon"> </div> <div class="shutter_frame"> <div class="shutter"> <div class="number"> 421</div> <div class="bar"> </div> <div class="text"> +1</div> </div> </div> </a> <a class="social" id="facebook" href="your-facebook-account-link" title=""> <div class="icon"> </div> <div class="shutter_frame"> <div class="shutter"> <div class="number"> 973</div> <div class="bar"> </div> <div class="text"> Like</div> </div> </div> <!-- / .shutter_frame --> </a> </div> <!-- / .wpr --> <div style="text-align: right;"> <a href="http://gg.gg/ikz3" rel="nofollow" target="_blank" title="Get This Widget"><span style="font-size: x-small;">get</span></a></div> <br /> </b:if>

Kod içerisinde değiştirilmesi gereken yerler:

Kodları kopyalayıp yapıştırdıktan sonra aşağıdaki işlemleri yapınız.

• your-twitter-account-link yazan yere twitter profil linkiniz gelecek.
• your-google-plus-account-link yazan yere google+ profil linkiniz gelecek.
• your-facebook-account-link yazan yere facebook profil linkiniz gelecek.

Son olarak ise aşağıdaki kodu kopyalayıp </body> kodunun hemen üzerine yapıştırıp kaydediyoruz.

                       <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'/> <script> $(document).ready(function() { $('.social').hover( function() { $(this).find('.shutter').stop(true, true).animate({ bottom: '-36px' }, { duration: 300, easing: 'easeOutBounce' }); }, function () { $(this).find('.shutter').stop(true, true).animate({ bottom: 0 }, { duration: 300, easing: 'easeOutBounce' }); } ); }); </script>

Yapamadığınız noktaları yorum bölümünden yada iletişim bölümünden sorabilirsiniz.