AddThis paylaşım butonlarını Blogger'a nasıl ekleriz?

Blogumuzda yayınladığımız içeriğin, okuyucularımız tarafından sosyal paylaşım ortamlarından herhangi birinde kolay bir şekilde paylaşılmasına olanak sağlayan en güzel eklentilerden biri AddThis eklentisidir.

Bu yazıda, AddThis eklentisini, blogumuzdaki her yazının altında konumlanacak şekilde temamıza nasıl entegre edeceğimizi göreceğiz.

Kurulum

Eklentiyi temamıza uygulamak için yapmamız gerekenler aşağıdaki şekildedir.

• Blogger Kumanda Paneli > Şablon > HTML’yi Düzenle > Devam Et > Widget Şablonlarını Genişlet komutlarını uyguluyoruz.
• CTRL+F tuş kombinasyonu yardımıyla <div class='post-footer-line post-footer-line-1'> kodunu buluyoruz.
• Bu koddan hemen sonraya aşağıda yer alan kodları ekliyoruz.

  <!-- addthis buttons START -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class="addthis_toolbox addthis_default_style">
   <div class="social-f"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a></div>
   <div class="social-t"><a class="addthis_button_tweet"></a></div>
   <div class="social-g"><a class="addthis_button_google_plusone"></a></div>
   <div class="social-l"><a class="addthis_button_linkedin_counter"></a></div>
   <div class="social-a"><a class="addthis_counter addthis_pill_style"></a></div>
  </div>
  <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=USER-ID"></script>
  </b:if>
  <!-- addthis buttons END -->
  

• CTRL+F tuş kombinasyonu yardımıyla bu sefer ]]></b:skin> kodunu buluyoruz.
• Aşağıdaki CSS kodlarını, bu kodun hemen üzerine gelecek şekilde ekliyoruz.

  .post-footer-line.post-footer-line-1 { margin-left: 30px; }
  .social-f { float: left; width: 120px; }
  .social-t { float: left; width: 115px; }
  .social-g { float: left; width: 85px; }
  .social-l { float: left; width: 135px; }
  .social-a { float: left; }
  

Ayarlar

Yukarıdaki kodlarda, USER-ID yazan yere, AddThis kaydı esnasında oluşturulan kullanıcı kimliğimizi yazıyoruz.

Ayrıca, farklı paylaşım butonları kullanmak isterseniz, AddThis Service Directory bölümünden istediğiniz paylaşım butonunun adını bulup, kodların içindekilerden biri ile değiştirebilirsiniz.

Kodların yerleşimi kendi temama göre optimize edilmiştir. Eğer sizin temanızda problem olursa, yukarıdaki CSS kodlarında yer alan width: değerlerini değiştirerek ayarlama yapabilirsiniz.

Son olarak; eklenti ile ilgili sorun yaşayacak olursanız, probleminizi yorum bölümüne yazarak bana iletebilirsiniz.