Bu dersimizde WordPress için sosyal paylaşım butonlarının yazı ile hareket eden kayan butonları eklemeyi öğreneceğiz
İlk olarak temanızın CSS dosyasına, aşağıdaki CSS kodlarını ekleyiniz:
.buttonsWrap{display:block;float:left;margin:10px 0 0 -110px;position:fixed;background-color: #f9f9f9;width:70px;padding-top:15px;padding-left:10px;padding-right:10px;padding-bottom:5px;border:1px solid #ccc}
.tweetBtn,.facebookBtn,.stumbleUponBtn .googleplusBtn{display:block;margin-left:1px;float:center}
.facebookBtn{margin:5px 0 5px 7px}
.googleplusBtn{margin:-5px 0 0 9px}
Daha sonra ise temanıza ait “single” adlı dosyanızda yer alan aşağıdaki kodu bulun:
<?php if(have_posts()):while(have_posts()):the_post();?>
Aşağıdaki kodları da, yukarıda bulduğunuz koddan hemen sonra ekleyin:
<div class="buttonsWrap">
<div class="tweetBtn">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical"></a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div>
<div class="facebookBtn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink()?>&layout=box_count&show_faces=true&width=450&action=like&font&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:0;float:center;overflow:hidden;width:70px;height:65px" allowTransparency="true"></iframe></div>
<div class="googleplusBtn"><g:plusone size="tall"><script type="text/javascript">window.___gcfg={lang:"tr"};(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();</script></g:plusone>
</div>
</div>
Not: Kayan sosyal paylaşım butonlarına ait alanı, yazınızın yanına yakınlaştırmak için CSS kodlarında yer alan buttonsWrap’taki margin’de yer alan adlı kısımdaki -110px’lik kısımı kendi temanıza göre düzenleyebilirsiniz.....
Kolay Gelsinn
Comments