12 Haziran 2018 Salı

Bloggerda E-mail Abone Ol Eklentisi Düzenleme

Blogger için "Email ile abone ol" eklentisini eklemek ister misiniz? Peki email ile abone ol eklentisi Blogger'a nasıl eklenir? İşte cevabı..

Feedburner sistemi ile blogunuzu takip eden ziyaretçilerinize bildiri gönderebilir ve blogunuza yeni eklediğiniz içerikleri okumaları için onları blogunuza davet edebilirsiniz. Bu yüzden email ile abone olma eklentisi blogumuz için çok önemlidir. Ben de takip ettiğim önemli blogların yeni içeriklerinden haberdar olmak için email ile abone oluyorum. Her zaman blogları ziyaret etme şansım olmuyor ama gelen email ile kimin ne paylaştığını biliyorum.

Blogger'ın hazır eklentileri arasında email ile takip et widgeti var ama görüntüsü hoşunuza gitmiyorsa bu widgeti denemelisiniz.

Bloggerda Kullanılan WidGet






Bizim kullanacağımız WidGet Görüntüsü:

















Bu widgeti kullanabilmeniz için Feedburner'ın sitesine gidip ayarlarınızı yapmanızda fayda var. Özellikle Feedburner kullanıcı isminizi bilmeniz gerekiyor. 



Feedburnerda web sitesi kayıt işlemi yapamadınız ve nasıl yapılacağını öğrenmek isterseniz Feedburner Kayıt İşlemi Nasıl Yapılır? yazımı okuyabilirsiniz.

Şimdi blogumuza bu email ile abone olma eklentisini ekleyelim


1.Adım:Öncelikle Blogger kullanıcı panelinde sol tarafta yer alan "Şablon" sekmesine tıklayın. Açılan sayfada "HTML düzenle" ye tıklayarak kodların yer aldığı sayfaya ulaşın. Kodlar arasında Ctrl F yardımıyla aşağıdaki kodu bulun.


<head>


2.Adım: Bulduğunuz bu kodun hemen altına aşağıdaki kodu ekleyin.


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>


3.Adım: Daha sonra CSS kodları için Ctrl F yardımıyla aşağıdaki kodu buluyoruz.


</style> 
 yoksa 
</b:skin>


4.Adım: Bulduğunuz bu kodun hemen üstüne aşağıdaki kodu ekleyin.


#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#e06666;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#29aae1}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}


Şablonu kaydedin.


5.Adım: Son bir işlemimiz kaldı. Sol tarafta yer alan "Yerleşim" sekmesine tıklıyoruz ve açılan yerleşim bölümünde email ile abone ol eklentisini eklemek için istediğimiz bir alanda "Gadget Ekle" butonuna tıklıyoruz. Açılan gadget listesinde "HTML/Javascript" i seçiyoruz. Ve aşağıda yer alan kodları gadget olarak ekliyoruz.


<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Yeni yazılarımdan haberdar olun!</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=bilgisayarsinifim' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bilgisayarsinifim, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='bilgisayarsinifim'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email adresiniz...&quot;;}' onfocus='if (this.value == &quot;Email adresiniz...&quot;) {this.value = &quot;&quot;;}' value='Email adresiniz...'/>
<input class="subscribe-button" type="submit" value="ABONE OL!" />
</form>
</div>


Gadgeti kaydedin ve blogunuzu kontrol edin. Tüm yapılması gerkenler bunlardı. Ayrıca kırmızı renkle yazılan # 'nın yerine sosyal medya hesaplarınızın linkini, mavi renkle yazılan bilgisayarsinifm'ın yerine de kendi Feedburner kullanıcı adınızı yazmanız gerekiyor.


Hiç yorum yok:

Yorum Gönder