Blogger kayan abonelik kutusu yapımı için size verilen bir kaç kodu sitenize eklemeniz halinde sitenizi ziyaret edenlerin abone olmasını sağlayarak içeriklerinizin daha fazla okunması sağlayabilirsiniz. Blogger abonelik eklentisi görünüm olarak şık bir tasarıma sahiptir.
Blogger abonelik kutusu eklentisi yeni içeriklerinizin eklenmesi ile abonelere içeriğinizi e-mail ile bildiriminin sağlanmaktadır. Bu sayede trafik elde edebilir ve reklam gelirlerinizi artırabilirsiniz.
Blogger Kayan Abonelik Kutusu Eklentisi Nasıl Yapılır?
Blogger eklentisi ile kayan abonelik kutusu yapımı sitenize ekleyeceğiniz kodlar ile yapabilirsiniz. Tüm adımları sizler için belirtildi. Blogger kayan abonelik kutusu üç farklı tasarımdan istediğinizi blogunuza uygun bulduğunuzu seçebilirsiniz.
Kayan abonelik kutusu eklentisini eklenmek istediğiniz bloğunuza giriş yapın temalar bölümünde HTML'yi düzenle diyerek. Aşağıdaki kodları </body> alanınız üstüne veya yerleşim (Düzen) bölümünde HTML/Javascript gadget aracılığı ile ilgili alanına ekleyerek yapılabilir.
Aşağıda İşaretlenmiş dört alanı blogunuza göre değiştirin.
<div class='subscribebar'>
<div class='container text-center'>
Bu siteden en son makale güncellemelerini ücretsiz olarak e-posta ile alın!
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=Evip Blog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<div class='arlina-form-fields'>
<p>
<input name='email' onblur='if (this.value == "") {this.value = "Email address...";}' onfocus='if (this.value == "Email address...") {this.value = "";}' placeholder='Email address...' required='' type='email'/>
</p>
<p><input type='submit' value='Submit'/></p>
<input name='uri' type='hidden' value='bilevip'/>
<input name='loc' type='hidden' value='en_US'/>
</div>
</form>
</div>
<button class='closeme' title='Mesajı Kapat'>✕</button>
</div>
<script type='text/javascript'>
//<![CDATA[
// Floating Subscribe Box
$(document).scroll(function(){$(this).scrollTop()>380?$(".subscribebar").slideDown('fast'):$(".subscribebar").slideUp('fast')});$(document).ready(function(c){$(".closeme").on("click",function(c){$(".subscribebar").fadeOut("slow",function(c){$(".subscribebar").remove()})})});
//]]>
</script>Blogger eklenti kodlarını ekledikten sonra aşağıdaki kodlardan blogunuza uygun kayan abonelik kutusunun kodlarını sitenize ekleyerek işlemi tamamlayabilirsiniz. Aşağıdaki kodları </head> tagının hemen üstüne ekleyeceğiniz kodların örnek görünümleri aşağıdadır.
1- Beyaz Kayan Abonelik Kutusu
Beyaz renge sahip beyaz kayan abonelik kutusu kodları ile blogunuza basit bir şekilde uygulayın.
<style type='text/css'>
/* Floating Subscribe Box Light */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.98);padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type="email"]{outline:none;color:#999;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:1px solid rgba(0,0,0,0.1);border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type="email"]:hover{background:rgba(0,0,0,0.01);color:#333}
.subscribebar input[type="submit"]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type="submit"]:hover,.subscribebar input[type="submit"]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.closeme{background:#fff;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:#ccc;border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:#aaa}
@media (max-width:767px){
.closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#34495e;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,0.3)}
.subscribebar .closeme:hover{background:#2c3e50;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>2- Siyah Kayan Abonelik Kutusu
Koyu renge sahip siyah kayan abonelik kutusu kodları ile blogunuza basit bir şekilde uygulayın.
<style type='text/css'>
/* Floating Subscribe Box Night */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(57,67,77,.98);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type="email"]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type="email"]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type="submit"]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type="submit"]:hover,.subscribebar input[type="submit"]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type="email"]::placeholder{color:#fff;opacity:1}
.subscribebar input[type="email"]:-ms-input-placeholder{color:#fff}
.subscribebar input[type="email"]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.15);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.3)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>3- Renkli Kayan Abonelik Kutusu
Blogunuz renkli bir tasarıma sahip ise renkli kayan abonelik kutusu tam size göre olacaktır.
<style type='text/css'>
/* Floating Subscribe Box Gradient */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:#FF5722;background-image:linear-gradient(50deg,#ff4169,#8b41f6);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:inline-block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type="email"]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type="email"]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type="submit"]{cursor:pointer;background-color:#f9a93c;border:1px solid #f9a93c;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type="submit"]:hover,.subscribebar input[type="submit"]:active{background-color:#e49b36;border:1px solid #e49b36;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type="email"]::placeholder{color:#fff;opacity:1}
.subscribebar input[type="email"]:-ms-input-placeholder{color:#fff}
.subscribebar input[type="email"]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.25);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.4)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>Blogger kayan abonelik kutusu kodları sitenize ekledikten sonra temayı kaydedin ve sonuçları sitenizde test edebilirsiniz. Blogger eklentisi umarım faydalı bir paylaşım olmuştur. Blogger siteleri için blogger önerilen yazı alanı oluşturma ile diğer site içi kalma sürelerini artıamanıza yarayacaktır.