Wordpress Sitenize Dekoratif Mavi Renkli Abone Ol Eklentisi

Wordpress web siteniz için, Feedburner Rss Id’iniz ile kullanabileceğiniz dekoratif mavi renk ve yazı formatı ile hazırlanmış Abone Ol Eklentisi. Wordpress eklentilerinde mevcut olan Abone Ol widged’i veya alternatif olarak Dekoratif Mavi Renkli Abone Ol Eklentisini sidebar veya footer alanında kullanın. Okuyucularınızın bir çoğunun Feetburner Rss eklentisi kullandığını düşünürseniz, alıştıkları Rss Aboneliği bir tercih nedeni olabilir. Mavi renkler ile dekore edilmiş Abone olma penceresini web sitenizin sol veya sağ sidebar, alt footer alanına kurulabilir. Eklentiyi nereye eklerseniz ekleyin, bulunduğu yerin genişliğine göre kendisini adapte edebilecek özelliktedir. FeedBurner için henüz bir hesap oluşturmadı iseniz ilgili makaleler kısmından okuyabilirsiniz. İlgili makaleler ⇒ Feedburner kategorisindeki resimli anlatımlar.

Mavi renkli dekoratif Abone Ol eklenti kurulumu :

1. Wordpress kullanım paneline giriş yapın. 2. Görünüm → Bileşenler → Metin, widged’ini açarak görülmesini istediğiniz alanı seçin ve aşağıda verilen kodları metin widged'i içine yapıştırıp ve kaydedin.

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=adnanguney', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">
 <h1>HEMEN ABONE OL</h1>
<img src="https://3.bp.blogspot.com/-aMuZL4Xclmw/V3pnDXTya8I/AAAAAAAAkWE/68PKQLcM30o99dQ-qytgC6VLnEQdR5_0gCLcB/s1600/adnanguney-com-mail.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px">&nbsp;Haber kaynağına ücretsiz kayıt ol &nbsp;</span></font></center><br/>
 <input type="hidden" value="adnanguney" name="uri" />
 <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
 <input type="hidden" name="loc" value="en_US" />
 <input type="submit" value="Gönder" class="login-submit" />
</form>
</center>
<style>
a.tt{
 position:relative;
 z-index:24;
 color:#3CA3FF;
 font-weight:bold;
 text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
 display:block;
 position:absolute;
 top:0px; left:0;
 padding: 15px 0 0 0;
 width:200px;
 color: #993300;
 text-align: center;
 filter: alpha(opacity:90);
 KHTMLOpacity: 0.90;
 MozOpacity: 0.90;
 opacity: 0.90;
}
a.tt:hover span.top{
 display: block;
 padding: 30px 8px 0;
 background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
 display: block;
 padding: 0 8px;
 }
a.tt:hover span.bottom{
 display: block;
 padding:3px 8px 10px;
 color: #548912;
}

::-moz-focus-inner {
 padding: 0;
 border: 0;
}
:-moz-placeholder {
 color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
 color: #bcc0c8;
}
:-ms-input-placeholder {
 color: #bcc0c8 !important;
}
.input {
 font: 12px/20px "Lucida Grande", Verdana, sans-serif;
 color: #404040;
 background: #ebc9a2;
}
.input {
 font-family: inherit;
 font-size: 12px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.login {
 padding: 18px 20px;
 width: 80%;
 background: #3f65b7;
 background-clip: padding-box;
 border: 1px solid #172b4e;
 border-bottom-color: #142647;
 border-radius: 5px;
 background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
 background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
 background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
 background-image: radial-gradient(cover, #437dd6, #3960a6);
 -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
 box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
 margin-bottom: 20px;
 font-size: 24px;
 font-weight: bold;
 text-align: center;
 color: #fff;
 text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
 display: block;
 width: 90%;
 height: 37px;
 margin-bottom: 20px;
 padding: 0 9px;
 color: white;
 text-shadow: 0 1px black;
 background: #2b3e5d;
 border: 1px solid #15243b;
 border-top-color: #0d1827;
 border-radius: 4px;
 background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
 background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
 background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
 outline: 0;
 background-color: #32486d;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
 line-height: 35px;
}
.login-submit {
 display: block;
 width: 100%;
 height: 37px;
 margin-bottom: 15px;
 font-size: 14px;
 line-height: 10px;
 font-weight: bold;
 color: #294779;
 text-align: center;
 text-shadow: 0 1px rgba(255, 255, 255, 0.3);
 background: #adcbfa;
 background-clip: padding-box;
 border: 1px solid #284473;
 border-bottom-color: #223b66;
 border-radius: 4px;
 cursor: pointer;
 background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
 background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
 background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
 background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
 -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
 box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
 background: #a4c2f3;
 -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
 box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
 text-align: center;
}
.login-help > a {
 font-size: 11px;
 color: #d4deef;
 text-decoration: none;
 text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
 text-decoration: underline;
}
</style> 

Mavi renkli Abone Ol eklentisinin özelleştirilmesi :

3. Feedburner bağlantı linkinizi koyu kırmızı renkli olan, adnanguney (2 yerde bulunmaktadır) kısma yapıştırın. İsminizi yapıştırırken tırnakların silinmemesine dikkat edin. 4. Mavi renkler ile belirtilen alanlar, blog ana sayfanızda gadget üzerinde görülen metin yazılarıdır. Bu yazıları istediğiniz gibi değiştirin. Yazıyı beğendi iseniz, birbirinden güzel makaleler hakkında haberdar olmak için hemen Abonelik işlemini başlatın. Ayrıca Google Plus ile izleyip, takibe alabilir, makaleyi sevdikleriniz ile paylaşmayı da düşünebilirsiniz.

Devamını Oku

Blogger Etiket Sayfasındaki Yazı Sayısını Belirleme

Blog yazılarınız için düzenlediğiniz etiketlere tıklandığında çıkan 20 adet yazı sayısını belirleyeceğiniz bir sayı ile değiştirip blog açılış hızını düşürerek kontrolü elinizde tutabilirsiniz. Blogger şablonuna eklenen “Label” etiket kodları nedeni ile yazı etiketlerine tıklandığında yaklaşık 16 ile 20 arasında yazılarınızı göstermektedir. Birçok blog kullanıcısı etikete bağlı bu kadar fazla sayfanın açılmasına pek istemez.

Günümüz teknolojisinde, web mobil hıza bu kadar önem veriliyorsa, bana göre masa üstü hız kurallarının aynı özelliklerde olmasını istemek veya düşünmek çok doğaldır.

Blogger gadget serileri arasında bulunan Etiket gadetimiz maalesef günün koşullarına göre halen yenilenmediği için gadget içerindeki etiket yapılandırmasında görülmesi istenen sayı seçeneği yoktur.

Durum böyle olunca ister istemez blog şablon içinde mevcut olan “Label” etiket kodlarına müdahale etmekte kaçınılmaz olmaktadır.

Yapılması gereken işlemlere geçmeden önce, Blogger şablon kodlarında birden fazla bulunan etiket “Label” kodları hakkında bilgi aktararak sizleri aydınlatıp yapacağınız işlem için daha mantıklı hareket etmenizi sağlayalım.

Etiketleme çeşitleri :

1. Menü için etiketleme kodları “Sayfalar ve Harici bağlantı linkleri”

2. Sidebar etiket gadgeti için kodlar

3. Yazılara eklediğimiz etiket için oluşan kodlar

Blogger için kullandığınız şablon özelliklerine göre bu sayı değişebilir olabileceğini hatırlatmak isterim.

Ancak, blogger kullanıcıları daha ziyade tüm etiketleri kullandıklarından, belli bir düzen içinde çalışması, açılan sayfalarda eşitlik sağlanarak çok fazla yazı sayfasının görülmesini istemediğinden dolayı aşağıda verilen etiketi bulup bir sonraki etiket ile değiştirmek sureti ile Etiket sayfalarında görülmesini istediğiniz sayıyı elde edebilecekler.

Etiket sayfalarında görülmesini istediğiniz sayfa sayısını düzenlemek için :

Önemli : *** Öncelikle blogunuzun yedeğini her zamanki gibi alın.***

1. Blogger kumanda panelinize giriş yapın.

2. Sırası ile Şablon → Html’yi Düzenle, yolunu izleyerek şablon kodlarınızı açın.

3. Açılan şablon kodlarınızda iken boş bir yere tıklayarak, CTRL+F arama yardım kısa yolu ile aşağıdaki etiketi aratın.

expr:href='data:label.url 

4. Yukarıda verilen ve bulduğunuz her etiketi aşağıdaki etiket ile, başlangıç ve bitişlere dikkat ederek değiştirin.

expr:href='data:label.url + "?max-results=10" 

5. Değiştirdiğiniz etiketin sağında bulunan tırnak işaretini silmemeye özen gösterin. Değişim sonrası yeni etiket görünümünü aşağıda inceleyin.

6. Etiket sayfasında görülmesi gereken, Etiket kodlarındaki rakamı 10 olarak yazdım. Siz neyi görmek istiyorsanız verilen adeti değiştirin. Tüm etiketleri değişti iseniz blogunuzu ön izleme ile kontrol edin. Sidebardaki veya yazınızdaki herhangi bir etikete tıklayın. Açılan sayfada tarayıcınızın penceresini kontrol ederek yaptığınız işlemin doğruluğunu teyit edin.

7. Menü çubuğunuza “Gezinme çubuğu” Sayfalar gadgeti, Harici bağlantı linki oluşturmak istediğinizde ise aşağıda verilen temsili link yapısını kullanabilirsiniz.

Menü çubuğu etiket yapısı :

https://adnanguneyarsivi.blogspot.com.tr/search/label/Adsense

Menü çubuğu etiket sayfası gösterim yapısı :

https://adnanguneyarsivi.blogspot.com.tr/search/label/Adsense?max-results=10

Sonuç : Etiketinizin sonuna sadece aşağıdaki satırı ekleyeceksiniz.

?max-results=10

Yukarıda anlatılan konuyu daha önce yazdığımı düşünüyordum. Ancak yazmadığımı, blog yazarı arkaşım +Turan Agayev bey’in sormuş olduğu bir sorudan sonra fark ettim. Ayrıca kendisine böyle bir konuyu hatırlattığı için çok teşekkür ederim.

Devamını Oku

Blogger Mavi Renkli Abone Ol Gadget Eklentisi

Blog okuyucu kitlenizin Web sitenize Abone olmasını kolaylaştıran, mavi renkli Abone Ol Gaget eklentisi. Blogger’un gadget seçeneklerinde bulunan Abone Ol gadget eklenti görselinden çok daha farklı ve şık bir görselliğe sahip mavi renklerin hakim olduğu “Haber kaynağına Abone Ol” veya “Abone Ol”, gadget eklentisini aşağıdaki açıklama ve kodları ekleyerek kullanabilirsiniz.

Mavi renkli dekoratif Abone Ol eklentisini blog’unuzun sol, sağ sidebar alanına veya alt açıklama, Footer alanına ekleyebilirsiniz. Eklentiyi hangi alana eklerseniz ekleyin, gadget bulunduğu yerin genişlik ebatlarına uyum sağlayacaktır.

Abone Ol eklentisi için sizin bir ayar yapmanız gerekmiyor. Yapmanız gereken tek işlem, FeedBurner bağlantı linkinizi kodlar içine ekleyerek mavi dekoratif abone ol eklentisini hemen kullanmaya başlamaktır. FeedBurner için henüz bir hesap oluşturmadı iseniz aşağıda verilen ilgili linklerden başlayabilirsiniz.

⇒ Blogger Eklenti Örneği : Guney4 (Sidebar sütununda inceleyin)

→ FeedBurner Nedir

Ayrıca okuyun ⇒ Feedbur kategorisindeki diğer makaleler.

Mavi renkli Abone Ol eklenti kurulumu :

1. Blogger kumanda paneline giriş yapın.

2. Yerleşim → Gadget ekle → Html/JavaScript, gadgetini açın ve aşağıda verilen kodları gadget içine yapıştırıp, kaydedin.

Abone Ol Kodları :

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=guney59', 'popupwindow', 'scrollbars=yes,width=570%,height=520');return true" class="login">
 <h1>HEMEN ABONE OL</h1>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCp627nEEvbzsA4NL5ov6uAO2ozxm18xVawOsaaeO4ZVyRlNrYv34v7fm5UAWuk6XbW_01Iqa8P5RE96PTkU-HLtryPHrXi8qebSti898RYTKNortTZLXwFp6Hy01oalGG-Sc7asugOa7r/s1600/adnanguney-mail.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px">&nbsp;Haber kaynağına ücretsiz kayıt ol &nbsp;</span></font></center><br/>
 <input type="hidden" value="guney59" name="uri" />
 <input type="email" name="email" class="login-input" placeholder="Email Address"/>
 <input type="hidden" name="loc" value="en_US" />
 <input type="submit" value="Gönder" class="login-submit" />
</form>
</center>
<style>
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
 font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
 padding: 15px 0 0 0;
 width:200px;
 color: #993300;
    text-align: center;
 filter: alpha(opacity:90);
 KHTMLOpacity: 0.90;
 MozOpacity: 0.90;
 opacity: 0.90;
}
a.tt:hover span.top{
 display: block;
 padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
 display: block;
 padding: 0 8px;
 }
a.tt:hover span.bottom{
 display: block;
 padding:3px 8px 10px;
 color: #548912;
}

::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:-moz-placeholder {
  color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
  color: #bcc0c8;
}
:-ms-input-placeholder {
  color: #bcc0c8 !important;
}
.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
  background: #ebc9a2;
}
.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.login {
  padding: 18px 20px;
  width: 80%;
  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}
.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 10px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration:underline;
}
</style>

Abone Ol Gadget Eklentisinin Özelleştirilmesi :

1. Kodların eklentiği üst kısımda 2 adet “Guney59” ismi bulunmaktadır. Bunlar mavi ile renklendirilmiştir. Kendi Feedburner isminiz ile değiştirin.

2. Kodlar içinde yazılı metinleri istediğiniz bir isimle değiştirebilirsiniz.

3. Blog, yerleşiminde sidebar yani kenar alanlarına veya alt bilgi dediğimiz footer gadgetlerinizin yanına da koyabilirsiniz.

İpucu : Yukarıda verilen kodları bir metin dosyasına yapıştırıp çalışmanızı metin dosyasında düzenleyip tüm kodları alıp gadget içine ekleyin.

Devamını Oku