Blogger için feedburner e-posta aboneliği widget'ı nasıl eklenir. E-posta abone widget'ı her blogcunun en önemli parçasıdır. E-posta abone widget'ının ne olduğunu biliyor musunuz? Evet! Bu blogunuz için büyük miktarda trafik toplamak olduğunu. Bugün blogunuz için 2 güzel blogger e-posta aboneliği widget'ı paylaşıyorum . Bu JSC Sınav Sonuç 2016'yı kontrol edin Birkaç gün önce, blogger için başka bir pop-up abone kutusu paylaştım ve bu Blogger için Pop-posta Abone Ol kutusu . Ama bugün blogger için başka bir 2 yaratıcı e-posta aboneliği widget kutusu paylaşıyorum ve bir abonelik widget'ı sosyal simgelerle ekleyeceğiz.
Blogger için E-posta Abone Olma Widget'ları
Blogger e-posta aboneliği widget'ını kenar çubuğuna yerleştirirseniz, daha iyi olur. Ancak pop-up ve her gönderinin altında blogger'a e-posta abone kutusu eklemek için de iyi bir yer. Bugün blogge r için 2 yaratıcı kenar çubuğu e-posta abone kutusu widget'ı paylaşıyorum.
- Sosyal simgeleri ile koyu arka plan
- İsim kutusu ile renkli widget
E-Posta Aboneliği Nasıl Eklenir?
Herkes google'ın feedburner'ını biliyor. Kısacası, google feedburner en popüler RSS web hizmeti beslemesidir . Blogunuza e-posta ile abone olan herkes, abone olduğunuz tüm e-postalarda en son yayınlarınızı göndermek için feedburner. Bu eğitimde ben blogger için 2 abone kutusu widget'ı paylaştı. Bu widget'ı kullanarak blogunuzun ziyaretçilerini de büyütebilirsiniz.
Feedburner'a nasıl kayıt yapılır? Blog adresiniz ve e-postanızla şu bağlantıya ve kayda gidin feedburner.google.com . Yapılmışsa, feedburner kullanıcı adınızı toplayın ve not edin.
Feedburner'a nasıl kayıt yapılır? Blog adresiniz ve e-postanızla şu bağlantıya ve kayda gidin feedburner.google.com . Yapılmışsa, feedburner kullanıcı adınızı toplayın ve not edin.
E-Posta Aboneliği ve Sosyal Simgeleri ile Koyu Arka Plan
Onun harika ve sevimli e-posta bülteni fontawesome simgeleri ile saf css ile oluşturulan blogger için abone kutusu widget'ı . Bu e-posta bülten formlarını kullanarak Facebook, twitter, Linkedin, google plus, pinterest, vine ve instagram sosyal simgeleri gibi sosyal medya bağlantılarınızı da kullanabilirsiniz. Cazip abonelik widget'ı kutusu her blog için daha iyidir. İlk widget'ımız blogcu için daha çekici.
Öncelikle Blogger'a giriş yapıyoruz. Daha sonra Tema > Html'yi düzenle'ye tıklayarak şablon editör sayfamızı açıyoruz.
Daha sonra klavye kısayollarını kullanarak Ctrl+f yardımıyla <head> kodunu aratıyoruz son olarak bulduğumuz kodun altına gelecek şekilde aşağıda ki kodları ekliyoruz.
<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'/>
Şimdi yine şablon editör sayfamızda yine Ctrl+f yardımıyla ]]></b:skin> kodunu veya </style> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.
#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:#F35D5C;-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:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}
Şimdi şablonumuzu kaydet diyoruz veya tema kaydet tuşuna basıyoruz. Ve daha sonra sol tarafta bulunan seçeneklerden Yerleşim sekmesine tıklıyoruz. Açılan seçeneklerden HTML/JavaScipt tıklıyoruz ve aşağıda ki Html kodlarını 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-linkedin"></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-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div>
NOT:
Tüm # etiketini tüm sosyal medya bağlantınızla değiştirin.
KULLANICI ADINIZIN tamamını feedburner kullanıcı adınızla değiştirin.
Tüm # etiketini tüm sosyal medya bağlantınızla değiştirin.
KULLANICI ADINIZIN tamamını feedburner kullanıcı adınızla değiştirin.
E-Posta Aboneliği Renkli ve Sadece İsimli Olarak
Öncelikle bu widget'ın CSS kodunu eklemeniz gerekiyor. Bunun için şablon editör sayfamızda Ctr+f yardımıyla ]]></b:skin> veya </style> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.
#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6; float: right; font-size: 8px
Kodları ekledikten sonra Temamızı kaydet diyoruz.
Daha sonra Sol panel tarafında bulunan seçeneklerden Yerleşim'e tıklıyoruz. Açılan sekmede HTML/JavaScript tıklıyoruz ve aşağıda ki HTML kodlarını Gadget'e ekliyoruz.
Daha sonra Sol panel tarafında bulunan seçeneklerden Yerleşim'e tıklıyoruz. Açılan sekmede HTML/JavaScript tıklıyoruz ve aşağıda ki HTML kodlarını Gadget'e ekliyoruz.
<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />
</form>
</div>
</div>
<div class="creadit">
<a href="http://msdesignbd.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>
Bütün işlemler bu kadar kodları ekledikten sonra sayfalarda ki özel alanları kendi bloğunuza göre değiştirmeyi unutmayın lütfen.