WordPress için eklentisiz yazı içinde kayan sosyal paylaşım butonları

ads

ads

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

ads