9.13.2012

Add/Ekle Blogger/Blogspot Facebook Comment/Yorum Box/Kutusu

Posted On : 7:27:00 ÖÖ  Yazan : LBT Kategori : ,

Blogger/Blogspot için Facebook' un geliştirmiş olduğu birçok eklentiden biri olan Facebook Comment bloğunuz için sosyal ağ trafiğinize yardımcı oluyor. Sitenizde yorum yapan ziyaretçilerin duvarında yayınlanan yorum aracılığı ile sitenizin Facebook üzerinde tanıtılmasına olanak tanıyor. Sosyal ağ trafiğinize katkıda bulanacak olan bu eklenti sayesinde ziyaretçileriniz Facebook yorum kutusu üzerinde birçok farklı platformu kullanarak yorum yapabilme ayrıcalığına sahip oluyor (Yahoo, AOL ve Hotmail).


Blogger/Blogspot Facebook Comment Box/Yorum Kutusu

Facebook Uygulaması Oluşturma

  • Öncelikle Facebook Developers sayfasına gidiniz.
  • Uygulamalar > +Yeni Uygulama Oluştur adımlarını izleyiniz.

  • "Create New App" sayfasında APP Name kısmına geçerli bir uygulama ismi yazarak devam ediniz. 
  • Karakter doğrulamasını onaylayın ve yeni uygulama oluşturulmuş olacaktır.

  • Son olarak APP ID kısmını kopyalayıp saklayınız.

  • Blogger' a giriş yapınız. 
  • Blogger şablonunuzun yedeğini alınız. [Yedekle/Geri Yükle + Tam Şablonu İndir] 
  • Şablon > HTML'i Düzenle > Devam Et sekmeleri ile şablon içeriğini görüntüleyiniz.
  •    "Widget şablonlarını genişlet' i onaylayınız." CTRL + F yardımı ile <html kodunu bulunuz.
Aradığınız kod şablonunuzun en başında bulunuyordur.
  • Aşağıdaki kodu bu koddan hemen sonra gelecek şekilde ekleyiniz.

xmlns:fb='http://www.facebook.com/2008/fbml'
Ekledikten sonra aşağıdaki gibi olması gerekmektedir.
<html xmlns:fb='http://www.facebook.com/2008/fbml'>

  • Devamında CTRL + F yardımı ile </body> kodunu bulunuz.
  • Bu koddan önce ya da sonra gelecek şekilde aşağıdaki Javascript kodları yapıştırınız.

Kodları kabul etmeyebilir bu yüzden HTML/Adsense Code Converter sayfasından kodları değiştirmelisiniz.
<div id='fb-root'/> <script> //<![CDATA[ (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/en_US/all.js#xfbml=1&appId=YOUR_APP_ID"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); //]]> </script>

  • YOUR_APP_ID yerini az önce oluşturmuş olduğunuz APP ID ile değiştiriniz. 
  •  CTRL + F yardımı ile </head> kodunu bulunuz. 
  •  Bu kodun öncesine ya da sonrasına aşağıdaki html kodları yapıştırınız.

<meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <meta content='Last Blogger Tricks' property='og:site_name'/> <meta content='YOUR_BLOG_LOGO_IMAGE_URL' property='og:image'/> <meta content='YOUR_APP_ID ' property='fb:app_id'/> <meta content='https://www.facebook.com/pages/Last-Blogger-Tricks/397552666965563' property='fb:admins'/> <meta content='article' property='og:type'/>

  • Yukarıdaki kod kümesi içerisinden aşağıdaki maddeleri kendinize göre değiştiriniz. 
  • Last Blogger Tricks ( Kendi site isminizi buraya yazınız. ) 
  • YOUR_BLOG_LOGO_IMAGE_URL ( Kendi sitenizin logosunun linkini buraya yapıştırın. ) 
  • YOUR_APP_ID ( Kurmuş olduğunuz uygulamanın APP ID' sini buraya yazınız. ) 
  • https://www.facebook.com/pages/Last-Blogger-Tricks/397552666965563 ( Kendi Facebook sayfanızın linkini yapıştırınız. ) 
  •  CTRL + F yardımı ile <data:post.body/> ya da bazı şablonlarda <p><data:post.body/></p> kodunu bulunuz. 
Aşağıdaki kod kümesini bu koddan hemen sonra eklerseniz, yorum kutusu yazılarınızın alt bölümünde gözükecektir. Ya da üstüne ekleyerek yazının üstündede gösterebilirsiniz.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='padding:10px 0px 5px 0px; margin:0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='97%'/></div> <div style='color:#ffffff; background-color:#3b5998;border: solid 1px #ddd; font-size:11px; padding:3px; width:97%;'>Facebook Comments Box<a href='http://lastbloggertricks.blogspot.com' target='_blank'><b>Last Blogger Tricks</b></a></div></div></b:if>

  • En son olarak şablonunuzu ön izleme yapınız, herhangi bir sorun yoksa kaydediniz. 
  • Blogger' a geri dönüş yapınız. 
  • Ayarlar > Yayınlar ve yorumlar > Yorum Konumu' nu Gizle moduna getiriniz.


Add/Ekle To Blogger/Blogspot Spinning CSS3 Sosyal Medya Butonları

Posted On : 3:59:00 ÖÖ  Yazan : LBT Kategori : ,

Bu eklentide Blogger/Blogspot' da CSS3 ile sosyal medya butonları yaratacağız.

My blogger tools sitesinde yayınlanan ve birçok blogger/blogspot eklenti sitelerinde de mevcut olan eklentinin yapımını anlatacağız.

İplik efekti yöntemi ile ve hafif bir dairesel hareketle, canladırılan butonlar bloğunuz için oldukça yaratıcı ve güzel bir görünüm sağlıyor.



Spinning CSS3 Sosyal Buton Demo/ Spinning Social Button İcon Demo

Widget oluştur butonunu tıkladığınızda açılan yeni sayfada demo versiyonlarını görebilirsiniz.

Add to Blogger/Blogspot Spinning CSS3 Social Button


  • Widget oluşturmak için Widget Generator butonuna tıklayınız. 
  • Açılan sayfada gerekli ayarları yaparak Generate butonunu tıklayınız. 
  • Son olarak Add To Blogger butonuna tıklayınız ve otomatik olarak sitenize ekleyiniz.
Widget Generator


Blogger/Blogspot Navbar İframe Hide/Kaldırma/Remove

Posted On : 3:06:00 ÖÖ  Yazan : LBT Kategori :

Blogger/blogspot' da tüm yazarların karşılaştığı ve bloglarına acemi bir görüntü veren blogger/blogspot orjinal navbar' ını kaldırarak bloğunuza profesyonel görüntü verebilirsiniz.

Basit bir CSS kod kümesi ile bu sorun ortadan kaldırılmış olacaktır.





Blogger/Blogspot Navbar İframe Remove/Hide/Kaldırma

Sırası ile aşağıdaki adımları uygulayınız.


  • Blogger' a giriş yapınız. 
  • Şablon sekmesini seçiniz. 
  • HTML'yi Düzenle seçeneği + Devam et butonuna tıklayınız.
  •   CTRL + F yardımı ile ]]></b:skin> kodunu arayınız. 
  • Bulduğunuz kodun hemen üzerine gelecek şekilde aşağıdaki CSS kodları ekleyiniz.

#navbar-iframe { height:0px; visibility:hidden; display:none; }

  • Şablonunuzu ön izleme yaptıktan sonra herhangi bir hata yoksa kaydedebilirsiniz.


Kaydol: Yorumlar (Atom)