Saf CSS Blogger İçin E-posta Abonelik Kutusu Eklentisi

Evet, başlıktan da anlaşılacağı gibi, yalnızca Blogger’a yönelik değil aynı zamanda feedburner’a erişiminiz olduğu sürece hemen hemen tüm platformlar için bir PURELY CSSed Pop-up e-posta aboneliği kutusu. Bu widget, önceki posta e-posta abonelik kutumun ve CSS ile oluşturulmuş basit ve harika bir açılır pencere bileşeninin birleşimidir.

Şimdi E-Posta eklentisinin anlatımına geçelim ;

Öncelikle Tema editör sayfamızın HTML düzenle'ye tıklıyoruz. Ve kod editör sayfamızda Ctrl+F yardımıyla ]]></b:skin> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki kodları ekleyelim.

CSS.enve{background:#00aa9f;color:#fff;width:50px;height:50px;display:block!important;line-height:50px!important;text-align:center;font-size:24px!important;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;margin:0 auto}.newsletter-sm{background:#fff;width:100%;margin:0;padding:20px;box-sizing: border-box;}.newsletter-sm h3,.newsletter-sm p{color:#555;font-family:"Maven Pro",sans-serif}.newsletter-sm h3{font-weight:400;text-align:center;margin-bottom:10px;font-size:24px}.newsletter-sm p{font-size:14px;line-height:20px}.newsletter-sm .newsletter-input-sm{border:0;box-sizing: border-box;padding:5px 10px;width:360px;float:left;height:40px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2PTAAq16delFnDKGipclNFoIERj73wDMgWLYdzWToEhwgbs1LGFXL__rQldX2JzJHhW59RxdqMPAj-zHIy40BRA7gSax0MUxDk5yHILUuoioQG2FA0p6FX918HomBMFIDQ5agt_Nbn0I/s1600/bg.png) no-repeat;box-sizing: border-box;padding:20px;margin:0 -20px -20px;height:80px}.newsletter-sm .newsletter-button-sm{float:right;height:40px;display:inline-block;font-size:14px;box-sizing: border-box;padding:5px 10px;position:relative;color:#fff;text-align:center;background:#00aa9f;border:1px solid #fff;cursor:pointer;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.modalDialog{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6);z-index:99999;opacity:0;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in;pointer-events:none}.modalDialog:target{opacity:1;pointer-events:auto}.modalDialog:target>div{margin:8% auto}.modalDialog>div{-webkit-transition:all 100ms ease-in;-moz-transition:all 100ms ease-in;transition:all 100ms ease-in;width:500px;position:relative;margin:5% auto;background:#fff;min-height:200px}h2.signup{background:#00aa9f;border-bottom:1px solid #008d84;font-weight:400;text-align:center;box-sizing: border-box;padding:10px;color:#fff;font-size:18px}.close{color:#888;position:absolute;top:1px;right:1px;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px}.close:hover{text-decoration:none;color:#555}.

Yukarıda ki kodu ekledikten sonra şimdi yine Ctrl+F yardımıyla kod editör sayfamız da </body> kodunu aratalım ve üzerine gelecek şekilde aşağıda ki HTML kodlarını ekleyelim.

HTML<div class='modalDialog' id='signup'>
<div><a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o enve'/>
<h3>Subscribe to Newsletter</h3>
<p style='text-align:center'>Sign up with your email address to receive news and updates straight in your inbox.</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MyBloggerAide&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/>
<button class='newsletter-button-sm' type='submit'>Subscribe</button></div>
<input name='uri' type='hidden' value='MyBloggerAide'/>
</form></div></div></div></div>

Bu widget'ın çalışması için açılır pencerenin düğmesi veya işleyicisi olarak işlev görecek bir bağlantı eklemeniz gerekir. Aşağıdaki kodu görüntülenmesini istediğiniz yere ekleyin.

HTML<a href='#signup'>Signup</a>

Yukarıda ki koduda ekledikten sonra temanızı kaydedin ve eklentisi kontrol edin.

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

Demo Buraya Tıkla