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
Ş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>
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:'PT
Sans',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('http://feedburner.google.com/fb/a/mailverify?uri=bilgisayarsinifim, 'popupwindow',
'scrollbars=yes,width=550,height=520');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 == "")
{this.value = "Email adresiniz...";}' onfocus='if (this.value
== "Email adresiniz...") {this.value =
"";}' 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