• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

Sitenin solunda çıkan hareketli sosyal medya düğmeleri

Konuyu Okuyan Kişiler (0)

Katılım
6 Mar 2013
Mesajlar
169
Beğeniler
0
#1


Herşey fazlasıyla varken neden bu ve buna benzer kodlar internette bulunmuyor anlamış değilim, var olanlar ya sorunlu yada arama yaparken yanlış aratıyoruz veya bulamıyoruz. Yukarıdaki vermiş olduğum resimdede görmüş olduğunuz gibi bahsetmiş olduğum sosyal medya düğmeleri bu tarz olan düğmeler.

Ben bundan önceki tasarımımda kullanıyordum beni takip edenler bilir, şimdi o kodları sizlerle paylaşıyorum, uygulamayı anlatmaya gerek yok zaten çok basit, Css yazan kodu temanızın style.css’sine ekliyorsunuz, onun hemen altındaki kodu’da gözükmesini istediğiniz bir alana ekleyin.

Şimdi sizlere kodlarını paylaşacağım,

CSS

Kod:
.buttonsWrap{webkit-border-top-right-radius:12px; -webkit-border-bottom-left-radius:12px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:12px; border-top-left-radius:12px; border-bottom-left-radius:12px; display:block;float:left;margin:-25px 0 0 -95px;position:fixed;background-color:#fff; width:70px;padding-top:15px;padding-left:8px;padding-right:10px;padding-bottom:0px;border:1px solid #ccc}
.tweetBtn,.facebookBtn,.stumbleUponBtn .googleplusBtn{display:block;float:center}
.facebookBtn{margin:5px 0 5px 7px}
.googleplusBtn{margin:-5px 0 0 9px}
(WordPress) Aşağıdaki Kodu Tekil Yazı yada Başka Bölümde İstediğiniz Yere Ekleyin

Kod:
<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>
<br />
<div class=”facebookBtn”><div id=”fb-root”></div>
<script type=”text/javascript”>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/tr_TR/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script><div class=”fb-like” data-href=”<?php the_permalink()?>” data-send=”false” data-layout=”box_count” data-width=”450″ data-show-faces=”false”></div></div>
<br />
<div style=”margin-left:2px;” class=”googleplusBtn”>
<div class=”g-plus” data-action=”share” data-annotation=”vertical-bubble” data-height=”60″></div>
<script type=”text/javascript”>
window.___gcfg = {lang: ‘tr’};

(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<br />
<a title=”Facebook’da Paylaşmak İçin Tıklayın” href=”pop_up” onclick=”window.name=’share’; window.open(‘http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>’,'pop_up’, ‘toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,width=500,height=300′); return false;”><img src=”/fpaylas.gif” alt=”<?php the_title(); ?> Facebook’da Paylaş”/></a>
</div>
Umarım işinize yarar.