23 Kasım 2011 Çarşamba

“Bu Yazıyı Beğendiniz Mi?” Eklentisi

13 yorum

Blogunuzda yayınladığınız yazıların altında o yazıyı okuyanların blogunuzu çeşitli kanallardan takip etmelerini sağlayacak eklentiler göstermek, blogunuzun abone ve takipçi sayısını arttırmak için çok etkili bir yöntemdir.Bu sebeple daha önce Yazının Altına E-Posta Abonelik Formu Ekleme başlıklı yazımda blog yazılarının altına insanların  blogunuzu e-mail ile takip etmelerini sağlayacak bir form eklemeyi anlatmıştım.Ancak bu form çok basit olduğundan geçtiğimiz günlerde daha dikkat çekici bir eklentiyi Yazının Sonuna E-Posta Abonelik Kutusu Ekleme başlıklı yazımda paylaşmıştım.Bu eklentideki eksik ise e-posta aboneliğinin yanında diğer takip kanallarının olmamasıydı.Sonunda hem e-mail aboneliği hem de diğer sosyal medya kanallarının ikonlarının bulunduğu şık bir eklentiyi paylaşıyorum.

 

Bu Yazıyı Beğendiniz Mi? Eklentisi

Resimde györdüğünüz “Bu Yazıyı Beğendiniz Mi?” eklentisibni blogunuza eklemek istiyorsanız blogunuzun şablonundan <data:post.body/> kodunu bulun ve hemen altına aşağıdaki kodları ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana; color:#FF683F;'>Bu yazıyı beğendiniz mi?</span>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Yeni yazılar e-mail adresinize gelsin!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloghocam&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bloghocam'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-mail adresiniz...&quot;;}' onfocus='if (this.value == &quot;E-mail adresiniz...&quot;) {this.value = &quot;&quot;}' type='text' value='E-mail adresiniz...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Takip Edin!</p>
<a href='http://feeds.feedburner.com/bloghocam' rel='nofollow' target='_blank' title='RSS ile takip edin'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaXDrh48I/AAAAAAAAAVM/zLmcNtCgi9Y/s40/w2bRSS+.png'/></a>
<a href='http://twitter.com/bloghocam' rel='nofollow' target='_blank' title='Twitterda takip edin'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaUf7v0CI/AAAAAAAAAU8/7vfe8Iw3ohc/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/bloghocam' rel='nofollow' target='_blank' title='Facebookta takip edin'><img src='http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaWNBkZnI/AAAAAAAAAVE/nZ0byXaqur8/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>


Değiştirmeniz gereken yerler



http://feedburner.google.com/fb/a/mailverify?uri=bloghocam&apos  yazan yerde bloghocam yerine kendi feedburner ID’nizi yazın.



input name='uri' type='hidden' value='bloghocam yazan yerde bloghocam yerine kendi feedburner ID’nizi yazın.



http://feeds.feedburner.com/bloghocam yazan yerde bloghocam yerine kendi feedburner ID’nizi yazın.



http://twitter.com/bloghocam yazan yere kendi twitter adresinizi ve http://www.facebook.com/bloghocam yazan yere kendi facebook adreswinizi yazın.

13 yorum:

  1. peki bunu ekledik ama diğer yorum kutusu yani blogun kendine has olan face twitter yorum yap kutu ve butonları nasıl kaldrabiliriz?

    YanıtlaSil
  2. Blogger kumanda panelinde tasarım bölümünde sayfa öğelerinde blog kayıtlarını düzenle deyin ve paylaş düğmelerini göster seçeneğini kaldırın.

    YanıtlaSil
  3. hocam blogunuz o kadar kaliteli ki aylar geçiyor fark etmediğimiz ve lazım olan bir şeyi yine sizde buluyoruz.

    Teşekkürler.

    YanıtlaSil
  4. beyefendi biraz büyük oldu,nasıl boyutlarını ayarlayabilirim?
    sağolun.

    YanıtlaSil
  5. tekrar rahatsız ediyorum cevap alamadım serdar bey soruma,boyutları hakkında bilgi verirseniz sevinirim.teşekkürler.

    YanıtlaSil
  6. <span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana; color:#FF683F;'>Bu yaz%u0131y%u0131 be%u011Fendiniz mi?</span>

    Kodların bu bölümündeki 30px değerini düşürün.

    YanıtlaSil
  7. saygılarımı sunarım çok teşekkürler.

    YanıtlaSil
  8. Merhaba tekrar rahatsız ediyorum kusura bakmayın,etiket girdiğim yazılarımda bu yazıyı beğendiniz mi eklentisi maalesef görünmüyor,etiket girmediğim yazılarda görünüyor sadece .Bunu nasıl düzeltebilirim?
    Saygılarımla.

    YanıtlaSil
  9. Hocam,
    Ben oldukca yeniyim buralarda. vesilenizle bloguma bircok sey ekledim ancak bir turlu paylasim butonu ekleyemiyorum. benim kendi sablonumun var zaten ama dikkat cekmedigi icin degistirmek istiyorum sanirim onlar oldugu icin kodu dediginiz gibi eklesem de olmadi bir turlu. yukarda cevabinizi goruyorum tasarim bolumu nerde bulamadim bir turlu. sablonun icinde olmali diye dusundum ama yok.. ben amerikada yasiyorum ve blogger im ingilizce. design falan olmali sanirim ama bulamadim. oldukca basit bir soru oldugunu tahmin ediyorum ama yardimci olabilirseniz sevinirim.
    Simdiden tesekkurler...

    YanıtlaSil
  10. Kendi sablonumda bulunan butonlari kaldirsam da kaldirmasam da bir turlu degisiklik olmuyor
    ayrica bahsettiginiz koddan 4 tane var ve ben ilkinin altina ekliyorum.
    dogru mu kopyaliyorum diye defalarca kopyalayip ekledim ama ne yaptiysam olmadi bir turlu....
    sanirim artik vazgecmeliyim

    YanıtlaSil
  11. Blogspot, html düzenlemeye izin vermiyor,ne kadar ugrastıysamda yazı kac kez okundu, bu yazıyı begendiniz mi gibi eklentileri ekleyemedim...

    YanıtlaSil
  12. @Hanife Dikbıyık
    Kodu eklediğiniz yerde sorun olabilir. <data:post.body/> bu koddan birden fazla olması gerekiyor, üstten ikinci kodu bulun ve eklentinin kodlarının onun altına ekleyin.

    YanıtlaSil
  13. Serdar hocam kodlar çok işime yaradı. Emeğinize sağlık.

    YanıtlaSil

Picardes

LİNKLER