8 Haziran 2011 Çarşamba

Blogunuz için Şık Bir Abonelik Widget'ı

12 yorum

Blogunuzun RSS abonesini ve Twitter takipçisini arttırmanın yollarınndan biri de sidebar’ınızda ziyaretçilerinizin dikkatini çekecek şık bir abonelik widget’ı bulundurmaktır.

Bu yazımda sizlere çok şık ve dikkat çekici bir abonelik widget’ı anlatacağım.

Abonelik widget'ı

Öncelikle Şablon > HTML’yi Düzenle > Widget Şablonlarını Genişlet yolunu takip ederek ]]></b:skin> kodunu bulun ve bunun üstüne aşağıdaki kodları ekleyin.

#subscribebox{list-style:none; margin:0px}
#subscribebox li{padding:10px 5px;
position:relative;
margin-top:0; margin-right:0;
margin-bottom:5px; margin-left:0;
height:64px; opacity:0.75; -moz-opacity:0.75}
#subscribebox li:hover{ background-color:#f4f4f4;
-moz-border-radius:5px; -webkit-border-radius:5px;
border-radius:5px; -khtml-border-radius:5px; opacity:1;
-moz-opacity:1; -webkit-transition:opacity 1s ease-out}
#subscribebox li img{float:left;
position:relative; padding:0px;
margin:0px 10px 0px 0px}
#subscribebox li h4{margin:-6px 0 3px 83px;
font-size:15px; line-height:26px; color:#8B3E2F;
text-shadow:1px 1px 0px #fff;
font-family:Helvetica,Arial,Verdana;
font-weight:bold; clear:none}
#subscribebox li p{margin:0 0 0 0;
font-family:Trebuchet MS,sans-serif;
font-size:13px; letter-spacing:-0.02em;
clear:none; text-indent:0px}
#subscribebox li a.link{background:none;
border:none; top:0; left:0; right:0;
bottom:0; width:100%; height:100%;
position:absolute; z-index:50}


Şimdi sayfa öğelerinden widget’ı eklemek istediğiniz yerdeki gadget ekleme penceresinden HTML/JavaScript seçeneğini seçin ve buraya aşağıdaki kodları ekleyin.

<ul id="subscribebox">

<li>

<a class="link" href="http://feeds.feedburner.com/BlogHocam" target="_blank">

</
a>

<img src="http://i54.tinypic.com/2z5vt4w.png" alt="RSS Beslemeleri" />

<h4>RSS Aboneliği</h4>

<p>Yeni yazılarımızı kaçırmayın</p>

</li>

<li>

<a class="link"

href=http://feedburner.google.com/fb/a/mailverify?uri=BlogHocam&loc=en_US

target
="_blank"></a>

<img src="http://i52.tinypic.com/23u79rs.png" alt="E-Mail Aboneliği" />

<h4>E-Mail Aboneliği</h4>

<p>Yeni yazılar mail adresinize gelsin</p>

</li>

<li>

<a class="link" href="http://twitter.com/Bloghocam" target="_blank"></a>

<img src="http://i51.tinypic.com/jgk5te.png" alt="Twitterda Takip Edin" />

<h4>Twitter Takip</h4>

<p>Follow Twitter takipçimiz olun</p>

</li>

</ul>

12 yorum:

  1. Harikaymış elinize sağlık.Peki arttırmak için ne yapmamız gerekiyor hocam ? Yani eposta,twitter,rss in altına bir iki satır daha eklemek istesem ne yapmam gerekiyor ? Mesela twitter gibi siteleri de eklemek istiyorum :9 teşekkürler

    YanıtlaSil
  2. Gerçekten çok hoş hemen ekledim,teşekkürler..

    YanıtlaSil
  3. Gök-Türk yeni satır eklemek için tekrar bir li tiketi eklemelisin.

    YanıtlaSil
  4. Teşekkürler oldu :) Bir yapılabilirse eğer mesela üçten fazla eklediğimizde fazlası gizlense ve ok işaretine tıklayınca aşağı doğrı açılan bir şekilde olsa harika olurdu ...

    YanıtlaSil
  5. Eline sağlık hocam kullanmaya başladım :)

    YanıtlaSil
  6. herşeyden önce çok şık bir eklenti oldu, benim için görsel önemli:) twitterı kaldırıp yerine facebooku ilave edebilirim sanırım. daha sonra bununla ilgili yardımınızı isteyebilirim hocam.
    teşekkürler

    YanıtlaSil
  7. @asortik

    elbette istediğiniz buton linkini, ismini ve resmini değiştirebilirsiniz.

    Yardıma ihtiyacınız olursa irtibata geçebilirsiniz.

    YanıtlaSil
  8. HARİKA OLDU ÇOK TEŞEKKÜRLERRRR !!!

    YanıtlaSil
  9. Merhaba Serdar Bey
    Dediklerinizi aynen yapmaya çalıştım.HTML/JavaScript seçeneğininde bahsettiğiniz kodlarıda yapıştırdım.BlogHocam yerine feedburnerdeki adresim olan erkocblogspot u yapıştırdım.
    Fakat her üç uygulmada gayet güzel görünmesine karşın aktif olmuyor yani üzerine tıklanamıyor.
    Sizce neyi eksik yapıyorum acaba.
    ( Bu olmayınca bende sizin http://bloghocam.blogspot.com/2011/05/feedburner-e-posta-ile-abonelik-formu.html linkinde bahsettiğiniz uygulamayı yaptım.O gayet güzel çalışıyor)
    İlk bahsettiğim uygulamanın neden çalışmadı konusunda yardımcı olabilirmisiniz?
    Saygılar

    YanıtlaSil
  10. @ERKOÇ

    Kodları kontrol ettim, test blogumda denedim her hangi bir sorun yok.Değiştirmeniz gereken yerleri belirteyim tekrar deneyin.

    1. http://feeds.feedburner.com/BlogHocam bunun yerine kendi feedburner adresinizi yazın.

    2. http://feedburner.google.com/fb/a/mailverify?uri=BlogHocam&loc=en_US buradaki bloghocam yerine feedburner ID'nizi yazın.

    3. http://twitter.com/Bloghocam bunun yerine kendi twitter adresinizi yazın.

    YanıtlaSil
  11. çok da güzel oluyor ama birşey sormak istiyorum , bunların yan yana gelmesini istiyorsam ne yapmalıyım? mesela yazıların altına widget olarak ekleyeceğim diyelim yan yana olsun istiyorum ufak oynamayla değiştirebilirmiyiz ?

    YanıtlaSil
  12. çok bilgilendirici ve etkileyici yazılar giriyorsunuz teşekkür ederim :) bu makale oldukça eski ama dikkat çekmeyi başarabiliyor :) bu hazırladığınız widget çok hoşuma gitti ama blogger de değil de hazır şablon bir e-ticaret sitesinin bloğunda kullanabilmek mümkün müdür acaba? eğer oluyorsa normal bir blog sitesi olmadığı için blog yazıları alt alta devam ediyor. bu durumda her blog içeriğimde bu kodları girmem mi gerekir? tekrar teşekkürler :)

    YanıtlaSil

Picardes

LİNKLER