Sayfayı Takip Eden Sosyal Medya Butonları

Sayfayı Takip Eden Sosyal Medya Butonları

Yeni bir Blogger Eklentileri yazımızla sizinleyiz ..

Hayatımızın önemli bir parçası haline gelen sosyal medyayı, bloglarımıza da çeşitli şekillerde entegre etmemiz gerekiyor. Gerek ziyaretçi getirmesi, gerek de Google’a sinyaller göndererek yazıların hızlı indexlenmesini ve SERP performansını arttırması açısından, sosyal medya butonları blogların olmazsa olmaz eklentilerinden.

Bu butonları bloglarınıza  entegre ederek blogunuz sosyal medya hesaplarınızı artırabilir ve sosyal medya hesaplarınıza son yazılarınızı paylaşarak sosyal medyadan hem sadık bir okuyucu kitlesi hem de index sağlayabilirsiniz.

Eklentiyi blogunuzda kullanmak için Şablon > HTML’yi Düzenle > Devam Et yolunu izleyin ve Ctrl + F tuş kombinasyonunun yardımıyla]]></b:skin> kodunu bulun. Hemen altına şu kodları ekleyin.

 ul.social-FlipButtons {  
  position: fixed;  
  padding: 0 0 3px 0;  
  bottom: 30%;  
  margin-left: 0px;  
  float: left;  
  list-style: none;  
  -webkit-perspective: 10000px;  
  /* larger the value, the less pronounced the 3D effect */  
  -moz-perspective: 10000px;  
  perspective: 10000px;  
 }  
 ul.social-FlipButtons li {  
  margin: 5px 0;  
  display: block;  
  width: 25px;  
  height: 25px;  
  margin-bottom: 42px;  
  background: transparent;  
  text-transform: uppercase;  
  text-align: center;  
 }  
 ul.social-FlipButtons li a {  
  display: table;  
  width: 100%;  
  height: 100%;  
  color: black;  
  background: transparent;  
  text-decoration: none;  
  outline: none;  
  -webkit-transition: all 300ms ease-out;  
  /* CSS3 transition. */  
  -moz-transition: all 300ms ease-out;  
  transition: all 300ms ease-out;  
 }  
 ul.social-FlipButtons li a span {  
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box;  
  box-sizing: border-box;  
  display: table-cell;  
  vertical-align: middle;  
  width: 100%;  
  height: 100%;  
  -webkit-transition: all 300ms ease-out;  
  /* CSS3 transition. */  
  -moz-transition: all 300ms ease-out;  
  transition: all 300ms ease-out;  
 }  
 ul.social-FlipButtons li a img {  
  /* CSS for image if defined inside button */  
  border-width: 0;  
  vertical-align: middle;  
 }  
 ul.social-FlipButtons li:hover a {  
  -webkit-transform: rotateY(180deg);  
  /* flip horizontally 180deg*/  
  -moz-transform: rotateY(180deg);  
  transform: rotateY(180deg);  
  background: transparent;  
  /* bgcolor of button onMouseover*/  
  -webkit-transition-delay: 0.2s;  
  -moz-transition-delay: 0.2s;  
  transition-delay: 0.2s;  
 }  
 ul.social-FlipButtons li:hover a span {  
  -webkit-transform: rotateY(180deg);  
  -moz-transform: rotateY(180deg);  
  /* flip horizontally 180deg*/  
  transform: rotateY(180deg);  
  -webkit-transition-delay: 0.2s;  
  -moz-transition-delay: 0.2s;  
  transition-delay: 0.2s;  
 }  

İkinci olarak </head> kodunu bulun ve bunun hemen üzerine aşağıdaki kodları ekleyin
 <ul class='social-FlipButtons second'>   
 <li>  
 <a href='https://www.facebook.com/#Kullanıcıadı' target='_blank'>  
 <span><img src='http://1.bp.blogspot.com/-QNjU7EuYWSY/U3zimEKVtFI/AAAAAAAAERM/LVXokaVW_Eg/s1600/facebook.png'/></span>  
 </a>  
 </li>   
 <li>  
 <a href='http://twitter.com/#Kullanıcıadı' target='_blank'>  
 <span><img src='http://3.bp.blogspot.com/-8Vffl9w_qBA/U3zioQ0tjHI/AAAAAAAAERo/rmE_WFsLssM/s1600/twitter.png'/></span>  
 </a>  
 </li>   
 <li>  
 <a href='https://plus.google.com/#Kullanıcıadı' target='_blank'>  
 <span><img src='http://4.bp.blogspot.com/-ZMIdv_IxQlw/U3zimfqx9GI/AAAAAAAAERQ/xzB1yFyp0jE/s1600/googleplus.png'/></span>  
 </a>  
 </li>   
 <li>  
 <a href='http://feeds.feedburner.com/#Kullanıcıadı' target='_blank'>  
 <span><img src='http://4.bp.blogspot.com/-ZVuhm2wRtnY/U3zioPrWl4I/AAAAAAAAERk/1njD2YSEzA8/s1600/rss.png'/></span>  
 </a>  
 </li>   
 </ul>  

Daha Fazlası: RSS Feed | Email Aboneliği Yayın Sayısı :