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