Blogger Kenar Çubuğu için Göz Alıcı E-Posta Abonelik Kutusu Eklentisi

Bugü sizlere bloggerınız için Kenar Çubuğunda çok şık duracak bir E-Posta eklentisinden bahsetmek istiyorum. Hemen anlatıma geçelim ;

Öncelikle HTML şablon editör sayfamızı açalım ve Ctrl+F yardımıyla </head> kodunu aratalım. Ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.

<style type="text/css">
/* ------------------------------------------------------------
Attractive Eye Catching Email Subscription Box Widget
Designed by :: https://www.TwistBlogg.com
Platform:: Blogger.com
Keep These Credits Intact, Do Not Remove
-------------------------------------------------------------*/
@keyframes rotate{100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
@keyframes change-background {0% {background: #2ecc71;}50% {background: #e74c3c;}75% {background: #3498db;}100% {background: #2ecc71;}}
.rainbow{
 position:relative;
 z-index:0;
 overflow:hidden;
 padding:3px
}
.rainbow::before{
 content:&#39;&#39;;
 position:absolute;
 z-index:-2;
 left:-50%;
 top:-50%;
 width:200%;
 height:200%;
 background-color:#2ecc71;
 background-repeat:no-repeat;
 background-size:50% 50%,50% 50%;
 background-position:0 0,100% 0,100% 100%,0 100%;
 background-image:linear-gradient(#2ecc71,#2ecc71),linear-gradient(#fbb300,#fbb300),linear-gradient(#e74c3c,#e74c3c),linear-gradient(#3498db,#3498db);
 animation:rotate 8s linear infinite
}
.rainbow::after{
 content:&#39;&#39;;
 position:absolute;
 z-index:-1;
 left:5px;
 top:5px;
 width:calc(100% - 10px);
 height:calc(100% - 10px);
 background:#fff
}
.tb-subscribe-wrapper{
 color:#222;
 line-height:20px;
 margin:0;
 padding:20px
}
.tb-subscribe-wrapper-head{
 padding-bottom:15px;
 margin-bottom:2px;
 text-align:center;
 font-size:25px;
 color:#64707A!important;
 border-bottom:1px dashed #64707A;
}
.tb-subscribe-form{
 clear:both;
 display:block;
 margin:10px auto;
 overflow:hidden
}
.tb-subscribe-wrapper p{
 color:#64707A!important;
 margin-top:10px;
 font-size:14px
}
form.tb-subscribe-form{
 clear:both;
 display:block;
 margin:10px 0 0;
 width:auto;
 overflow:hidden
}
.tb-subscribe-css-email-field{
 background:#fff;
 color:#222;
 margin:0 0 18px;
 padding:12px;
 width:90%;
 border:1px solid rgba(0,0,0,0.1);
 outline:0;
 font-size:14px;
 text-indent:10px;
 line-height:20px;
 border-radius:3px;
 transition:all .6s
}
.tb-subscribe-css-email-field:hover,.tb-subscribe-css-email-field:focus{
 border-color:rgba(0,0,0,0.3)
}
.tb-subscribe-css-button{
 animation: change-background 8s linear infinite;
 color:#fff;
 cursor:pointer;
 font-weight:500;
 padding:7px;
 text-transform:none;
 width:100%;
 border:none;
 font-size:16px;
 border-radius:3px;
 transition:all .3s
}</style>

Yukarıda ki kodları ekledikten sonra temamızı kaydedelim. Daha sonra şablon sayfamızda "Yerleşim" bölümüne tıklayalım ve "Gadget Ekle" seçeneğine tıklayarak aşağıda ki HTML kodlarını ekleyelim.

<div class="rainbow">
<div id="tb-subscribe-css">
<div class="tb-subscribe-wrapper">
<div class="tb-subscribe-wrapper-head">
Bize Katılın</div>
Posta listemize abone olun ve ömür boyu yeni ve kaliteli güncellemeler alın.<br />
<div class="tb-subscribe-form">
<form action="https://feedburner.google.com/fb/a/mailverify?uri=XXXXX" class="tb-subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=XXXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="XXXXX" />
<input name="loc" type="hidden" value="en_US" />
<input autocomplete="off" class="tb-subscribe-css-email-field" name="email" placeholder="EMail Adresiniz" />
<input class="tb-subscribe-css-button" title="" type="submit" value="Gönder" />
</form>
</div>
</div>
</div>
</div>

Son olarak düzenlemeyi kaydet diyelim aşağıda ki Demo kısmından kontrol edebilirsiniz.

Bütün işlemler bu kadar herkese kolay gelsin.

Demo Buraya Tıkla