Sayfa Gezinme

Son makaleler:

latest

YAYIN AKIŞI:

Tümünü Görüntüle

Blogger Dekoratif Abone Ol Eklentisi

Aralık 04, 2014

Blogger’un varsayılan Abone ol gadget eklentisi yerine kullanılabilen ve okuyucularınızın Feedburner Rss bağlantı ile Abone olmasını sağla...

...
Blogger’un varsayılan Abone ol gadget eklentisi yerine kullanılabilen ve okuyucularınızın Feedburner Rss bağlantı ile Abone olmasını sağlayan şık mavi dekoratif renk ve yazıdan oluşan Abone Ol gadget eklentisi. Mavi olarak dekore edilmiş abone kutusunu blog’unuzun sol veya sağ sidebar, alt footer kısmına rahatlıkla adapte edebilirsiniz. Eklentiyi nereye eklerseniz ekleyin, bulunduğu yerin genişliğine kendisi adabte olabiliyor. 

Her hangi bir ayar yapmanız gerekmiyor. FeedBurner hesap bağlantı linkinizin son ekini kodlar içine ekleyerek mavi renklerden oluşturulmuş dekoratif abone ol eklentisini hemen kullanmaya başlayabilirsiniz. 

FeedBurner için henüz bir hesap oluşturmadı iseniz aşağıda verilen ilgili linklerden başlayabilirsiniz. Yukarıda okuduğunuz eklentiyi Blogger gadget’i veya Wordpress metin widget’i olarakta kullanma şansına sahipsiniz. Gadget’in nasıl görüldüğünü aşağıdaki örneklerden inceleyin.

⇒Eklentinin Blogger Örneği : Adnan Güney

→ FeedBurner Nedir

Ayrıca okuyun ⇒ Feedbur kategorisindeki resimli anlatımlar.

Mavi renkli dekoratif 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 kopyalayıp yapıştırın ve kaydedin.
<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=adnanguney/adnan', '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/adnan" 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 :

1. Feedburner bağlantı linkinizi koyu kırmızı renkli olan kısma yapıştırın. İsminizi yapıştırıken tırnakların silinmemesine dikkat edin.

2. 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ştirebilirsiniz.

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

Related Posts

Hiç yorum yok

Fikirlerinizi bizimle yorumlarda paylaşabilirsiniz.

Kaydol: Kayıt Yorumları (Atom)
×