Eklentisiz Sosyal Paylaşım Butonu Nasıl Yapılır

Eklentisiz Sosyal Paylaşım Butonu Nasıl Yapılır

Web sitenize herhangi bir eklenti kullanmadan butonu yapmak mümkün, bu yazımızda linkleri renklendirerek sitenizi yavaşlatmayan çok dinamik bir butonu yapacağız. Resim dahi kullanmadan ilgili web sitenin renginde butonlar yaparak ziyaretçilerinizin paylaşım yapmasını sağlayabilirsiniz. Özellikle WordPress, Druphal gibi hazır scirptler de eklenti kullanarak bu tip paylaşım butonları yapılıyor. Ancak eklentiler web sitenin daha çok dosya çağırması ve sorgu sayısının artırması nedeni ile sitenin yavaşlamasına katkıda bulunuyor. Web siteleri için hız oldukça önemli bu nedenle eklentisiz bir sosyal paylaşım butonu yapmak web siteniz için avantaj sağlayacaktır.

Sosyal Paylaşım Butonu Oluşturma

Web sitenizde sosyal paylaşım butonlarının görünmesini istediğiniz yere aşağıdaki kodları ekleyiniz.

<p>Bu Yayını Paylaş:</p>
<!---->
<a href="http://www..com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank" class="button small purple">+ 'ta Paylaş</a>

<!---->
<a href="http://.com/home/?status=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank" class="button small blue">+ Tweet'le</a>

<!---->
<a href="https://plus.google.com/share?url=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank" class="button small red">Google+ Paylaş</a>

<!---->
<a href="://send?text=<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank" class="button small green">'ta Paylaş</a></center>

sytle.css dosyanıza aşağıdaki kodları ekleyerek eklemiş olduğunuz butonları renklendireceksiniz.

/*dijitalteknoloji.net sosyal butonlar*/
a.button{height:25px;line-height:25px;color:#fff;display:inline-block;margin:0 5px 20px;padding:0 10px;position:relative;font-size:12px;background:#d4d4d4;border-radius:2px}
a.button.red{background:#ed596a;color:#fff!important}
a.button.green{background:#89c03e;color:#fff!important}
a.button.blue{background:#00a2ff;color:#fff!important}
a.button.orange{background:#ffa500;color:#fff!important}
a.button.pink{background:#ff00a2;color:#fff!important}
a.button.purple{background:#d700d7;color:#fff!important}
a.button.black{background:#434343;color:#fff!important}
a.button.white{background:#fbfbfb;color:#000}
a.button.medium{height:35px;line-height:35px;font-size:16px;padding:0 15px}
a.button.big{height:55px;line-height:55px;font-size:22px;padding:0 25px}

Yapmanız gerekenler bu kadar CSS’ye eklemeniz gereken kodları uzun tuttum, buradan isterseniz butonların içerisinde bulunan class bölümünü değiştirerek diğer renkleri de deneyebilirsiniz.

Facebook'ta Paylaş
Whatsapp'ta Paylaş
Facebook'ta Paylaş
Whatsapp'ta Paylaş

Oy Vermeyi Unutmayın

1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (7 Kişi oy verdi, 5 üzerinden ortalama puan: 5,00. Bu yazıya oy vermek ister misiniz?)
Loading...

Yorumlar

Yorumunuzu Yazın

E-posta adresiniz yayınlanmayacaktır.


Son Yorumlar

  • Fatoş Çiçek:2 tane face hesabımı sildim ama açmak istiyorum LÜ...
  • admin:Merhaba, 555 entegresinin 1. Ayağının altındaki se...
  • Ferhat..:Merhaba. Bu devrenin artı kısmını gördüm fakat eks...
  • şevki:Maalesef bir şeyler ters gitti. Yüksek eğitimli...
  • admin:Yazılımı kullanmayı denediniz mi?...
  • Bulent:Merhaba chkdsk F:/r raw için işe yaramıyor....
  • ayşe kanaç:merhaba eşime sahte hesaptan gönderilen mesajların...
  • Hakan Fatih:Arkadaşlar ya bu işi bilmiyorsunuz yada biliyormuş...
  • admin:Cihazınızı yeniden başlatın. Basit görünebilir, an...

Sponsorlarımız

Minecraft Apk indir