Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Blogger için Sosyal Paylaşım Butonları (Responsive ve Çok Hızlı)


FacebookTwitterPinterestTumblrYazdır


Blogger için Sosyal Paylaşım Butonları (Responsive ve Çok Hızlı)Sosyal paylaşım butonlarına yönelik olarak birçok ücretsiz servis mevcut. Ancak araştırmalarımın sonucunda, bu servislerin doğal olarak çok sorgu çalıştırdığını gözlemledim. Bu bağlamda kolları sıvayarak, Blogger için tamamen Responsive ve hiçbir şekilde dışarıdan JavaScript çağırmadan, çok hızlı çalışan sosyal paylaşım butonları hazırladım. Aşağıdaki kodları temanızda, dilediğiniz bölüme ekleyerek, hemen kullanmaya başlayabilirsiniz.

İlgili kodlar otomatik olarak yazı başlığı ve görsel gibi detayları çektiği için, sosyal paylaşım sitelerine de bu bilgiler otomatik yansımaktadır. Faydalı olmasını temenni ediyorum.

AYRICA: Blogger'da JavaScript Özel Karakter Hataları ve Çözüm Yöntemi

Blogger için Sosyal Paylaşım Butonları (Responsive ve Çok Hızlı)

1) CSS kodlarımız aşağıdaki gibidir.

@media screen and (max-width:300px){a.facebookyazici{width:100%!important;margin:0!important;display:block!important}a.twitteryazici{width:100%!important;margin:0!important;display:block!important}a.pinterestyazici{width:100%!important;margin:0!important;display:block!important}a.tumblryazici{width:100%!important;margin:0!important;display:block!important}a.yazdiryazici{width:100%!important;margin:0!important;display:block!important}}.socialyazici{margin-bottom:0}a.facebookyazici{background-color:#4267B2;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.facebookyazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}a.twitteryazici{background-color:#55ACEE;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.twitteryazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}a.pinterestyazici{background-color:#CB2027;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.pinterestyazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}a.tumblryazici{background-color:#32506D;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.tumblryazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}a.yazdiryazici{background-color:#222;display:inline-block;border-radius:0;border:none;cursor:pointer;width:20%;font-size:16px;height:48px;line-height:48px;margin-right:0;padding:0 0;position:relative;text-align:center;top:0;vertical-align:top;white-space:nowrap}a.yazdiryazici>img{display:inline-block;height:24px;width:24px;position:relative;top:12px;vertical-align:top}

2) HTML kodlarımız ise aşağıdaki gibidir.

<div class='socialyazici'>
<a class='facebookyazici' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.canonicalUrl' target='_blank'><img alt='Facebook' src='http://1.bp.blogspot.com/-zivothdOPeY/XbRnbY5FGPI/AAAAAAAATyU/q8v5CJxfMSUz6WxDbMpCM1gvgYyaDOp9ACK4BGAYYCw/s1600/facebook.png' title='Facebook'/></a><a class='twitteryazici' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.canonicalUrl' target='_blank'><img alt='Twitter' src='http://1.bp.blogspot.com/-7qSvPJSRkWM/XbRnjKsKRJI/AAAAAAAATyc/XxDa5q5sN-45v9doTAuHYQ_E3P7S1uzNwCK4BGAYYCw/s1600/twitter.png' title='Twitter'/></a><a class='pinterestyazici' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank'><img alt='Pinterest' src='http://4.bp.blogspot.com/-Or68EZ9GmwA/XbRno-Fm7BI/AAAAAAAATyk/SZgtxiiVijgD1opBF-_W28t6jQ3TrMEVQCK4BGAYYCw/s1600/pinterest.png' title='Pinterest'/></a><a class='tumblryazici' expr:href='&quot;https://tumblr.com/share/link?url=&quot; + data:post.canonicalUrl + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.title' target='_blank'><img alt='Tumblr' src='http://4.bp.blogspot.com/-YiLhUl-vUj4/XbRntkGricI/AAAAAAAATyw/UAzq4VrSp0QMohapGeMUk_TkvWMRhgj0gCK4BGAYYCw/s1600/tumblr.png' title='Tumblr'/></a><a class='yazdiryazici' href='javascript:window.print()'><img alt='Yazdır' src='http://3.bp.blogspot.com/-tVemLZl-Fmo/XbRnx1upeaI/AAAAAAAATy4/VHVFsq-Wf8w1EeJcRWx6iy-RDUlp7ZvCACK4BGAYYCw/s1600/yazdir.png' title='Yazdır'/></a>
</div>

Örnek Görünüm

Blogger için Sosyal Paylaşım Butonları (Responsive ve Çok Hızlı)
  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri