Menu

Blogger İçin Popup E-Posta Abonelık Eklentisi

Blogger abone olma eklentisi,bu eklenti sayfa altında sol tarafta görünecektir.Bu eklenti sayesinde sitenizi takip eden abone sayısı artacaktır,abone sayısı ne işe yarar derseniz site tıklanma oranlarının sabit okuyucu sayısının ve bedava backlink elde etme konularında sitelere fayda sağlamaktadır.

Blogger abone olma eklentisini kodlarını ister widget olarak kullana bilirsiniz veya isterseniz CSS kodlarını site kodlarınızın arasına ekleyebilir ve HTML Kodlarınıda
kodunun üstüne ekleyebilirsiniz.Bu blogger eklentisi tamamen Türkçe dilimize çevrilmiştir sadece kendir Google FeedBurner adresinizi yazmanız yeterlisir.

Blogger İçin Popup E-Posta Abonelık Eklentisi



Eğer iki kodda aynı yerde olmasını istiyorsanız CSS kodlarını kodlarının arasına alarak
kodunun üstüne ekleyebilirsiniz.

CSS Kodları

#popup-wrap .popup-button { background: #A1362A url("http://2.bp.blogspot.com/-5BeaRyWo6FQ/Vc9zn8NV2oI/AAAAAAAADU0/tGTO9XGumUs/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 80px; left: 25px; position: fixed; width: 80px; z-index: 99999; }
#popup-wrap .popup-button:hover { background-color: #70261D; }
#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; }
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }
#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 320px; background: #cc6055; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox,
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #70261D; }
#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #70261D; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }
.creadit a{color: #fff; float: right; font-size: 8px;}


HTML Kodları

<div id='popup-wrap'>
  <!-- Subscribe Trigger -->
       <label class="popup-button" for="popup-trigger"></label>
  <!-- Subscribe Content -->
  <input class="popup-trigger" id="popup-trigger" type="checkbox"/>
  <div class="popup-bg">
            <label class="popup-bg-close" for="popup-trigger" id="popup-close"></label>
            <div class="popup-form">
                <label class="popup-form-close" for="popup-trigger" id="popup-close"></label>
                <div class="popup-inner">
                    <!-- Opt-In Subscribe -->
                    <span class='popup-title'>E-posta ile Abone ol</span>
                    <span class='popup-content'>Eposta adresinizden en son yazıların gelmesi için abone olun...!</span>  <br/><br/>
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Eposta Adresiniz&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true" target="popupwindow">
<input name="uri" type="hidden" value="Eposta Adresiniz"/>
<input name="loc" type="hidden" value="Eposta Adresiniz"/>
<input id="mailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email adresinizi yazınız...&quot;;}" onfocus="if (this.value == &quot;Email adresinizi yazınız...&quot;) {this.value = &quot;&quot;}" required="" type="text" value="Email adresinizi yazınız..."/>
<input id="subbutton" title="" type="submit" value="Abone ol"/>  </form>
<br /><span class='popup-footer'>E-posta adresiniz bizimle güvendedir..! Kesinlikle paylaşılmamaktadır.</span></div></div></div></div>
<div class="creadit"><a href="http://seomektebi.com" target="_blank">SEOMektebi Widget</a></div>

Blogger abone ol eklentisini Düzenleme

Bu blogger eklentisi sayfanıza göre büyük bir görüntü oluşturursa ve ayrıca bu eklentinin renklerini değiştirmek istiyorsanız CSS kodları ile oynamanız yeterli olacaktır.

Eposta Adresiniz yazan yere kendi Google FeedBurner adresinizdeki üye adınızı yazınız,Eğer Google FeedBurner aboneliğim yok nasıl ve nasıl eposta adresi alacam diyorsanız aşağıdaki SEO Mektebi yazısı size yardımcı olacaktır.

Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger İçin Popup E-Posta Abonelık Eklentisi "

Önerilen Yazı
×