12+ Koleksi Widget Email Feedburner Subscription Blogger
Widget Berlangganan Email adalah salah satu fitur yang membantu pengunjung webiste Anda mendapatkan pemberitahuan update posting terbaru dari website Anda secara otomatis melalui pesan email. Hal ini juga dapat membantu Anda untuk mendapatkan kunjungan kembali visitor ke website Anda yang merasa tertarik dengan judul postingan terbaru yang baru saja dipublikasikan. Membangun dan menumbuhkan komunitas pembaca setia untuk website Anda.
Berikut ini Saya bagikan source code koleksi 13 tampilan widget subcribe via email Feedburner yang dapat anda pilih salah satu diantaranya untuk diterapkan pada website anda.
Source Widget Email Feedburner Subscription Blogger 1
CSS Code
#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzDXUHs6N3RocAa_92juzUh9-Ly7LRziJCJOC61py8ofQnl2nvU7wF-2PVWDhhOGSTLjps4v-3k8ezRvAMGfXK-Jq2MX3Ph_c498seSjVyVl6tDguVaM_7zUWU6fAhO3kfm9s3cGwGgxnN/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHoXfRtsrcrrzvDZ2PoDNAZh3G6kxNKg2bRSNS3SitxxzWhxEcZsRXckWutYa4KVx9KqMgj7G_heIhqbYTeHS4-tPQ0_dZYPrsou-jpR74uIsiCDgf53htrgm0TfmXVpdmpkFU5IOcPsCd/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_s5LeX-O27Dx6XmY_p3fJnV0FLQF8iegKb-L9epB1xbIn-Y8kAg7TFW17I7e-gfzUQSGUJ-Dkachi_mAhrKdP0Mw_2FfcGAXjoYOxWWFUh3h400KCTK0wN3rzhbLp-WOoCuYxL2NOp0Jg/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}
HTML Code
<center>
<div align="center" id="truebloggertricks-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;">
<h3 id="truebloggertricks-title-text" style="color: white; font-size: 20px;">
GET FREE EMAIL UPDATES</h3>
<div id="truebloggertricks-sub-title-txt" style="color: white; font-size: 14px;">
Join us for free and get valuable content delivered right through your inbox.</div>
<br />
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=hanyalah-blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="truebloggertricks_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br />
<input class="email" id="truebloggertricks_Subscriber_email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="hanyalah-blogger" /><input name="loc" type="hidden" value="en_US" /> <input id="truebloggertricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
</center>
</div>
Source Widget Email Feedburner Subscription Blogger 2
CSS Code
body {
background: #e6ed3;
margin: 0 auto 0;
color: #444;
font-family: 'PT Sans', arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-align: center;
}
#subscribebox {
background:#576269;
padding:20px;
font-family: 'PT Sans', sans-serif;
width:450px;}
.widget_follow_subscribe .widget-detail {
padding: 36px 30px 40px 30px;}
#subscribebox p {
color: white;
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 25px 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 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.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-family:Poppins;
font-size: 0.928571em;
background-color: rgba(255,255,255,0.8);
text-align: center;
color:#666666;
}
.subscribe-email:focus {
outline: 0;
}
/* ===== Placeholder color ===== */
form.subscribe .placeholder { /* Internet Explorer 9 */
color: #cacaca;
}
form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #cacaca;
}
form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */
color: #cacaca;
}
form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fafafa;
}
form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fafafa;
}
.subscribe-button {
height: 45px;
font-weight: 700;
font-family:'Poppins;
font-size:16px;
color: #fff;
text-transform: uppercase;
border: none;
background-color:#0CC388;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.subscribe-button:hover {
background-color: #f1d640;
}
.subscribe-button:focus {
outline: 0;
}
.post-subscribe{text-align:center;font-family:Dancing Script;font-size:33px;color:#fff;margin: 5px;}
HTML Code
<center>
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="http://hanyalah.com" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<div class='post-subscribe'>Subscribe to my Newsletter</div>
<form class="subscribe" action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=hanyalah-blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name='uri' type='hidden' value='hanyalah-blogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email Address" />
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
</center>
<br/><br/><br/>
Source Widget Email Feedburner Subscription Blogger 3
CSS Code
/* CSS Subscribe Box By MS Design */
body {
background: #e6ed3;
margin: 0 auto 0;
color: #444;
font-family: 'PT Sans', arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-align: center;
}
#subscribe-box {
width:450px;
background-color:#0CC388;
font-family: 'PT Sans', sans-serif;
margin-top:20px
}
#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:95%;
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:#ff0000;
color:#fff;
}
.post-subscribe{
text-align:center;
font-family:Dancing Script;
font-size:27px;
color:#fff;
margin: 5px;
}
.sub-post{
text-align:center;
font-family:Poppins;
font-size:12px;
color:#fff;
margin: 5px;
}
.name-email {
border: none;
font-family:Poppins;
background-color: rgba(255,255,255,0.8);
color:#666666;
}
.name-email:focus {
outline: 0;
}
HTML Code
<center>
<div id='subscribe-box'>
<center><br /><div class='post-subscribe'>Subscribe</div><div class='sub-post'>for our all latest news and updates</div></center>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=hanyalah-blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'>
<input class="name-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Name'/>
<input class="name-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Email Address'/>
<input name='uri' type='hidden' value='hanyalah-blogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe Now'/>
</form><br />
</div></div> <br /><br />
Source Widget Email Feedburner Subscription Blogger 4 CSS Code
#wp-subscribe { width:300px;
padding: 26px; background: #f47555; }
#wp-subscribe h4.title {font-family:Handlee; font-size: 22px; color: #FFFFFF; line-height: 1; text-align: center; text-transform: uppercase; margin-bottom: 0; }
#wp-subscribe h4.title span { display: inline-block; font-weight: bold; font-size: 38px; margin-top: 15px; }
#wp-subscribe p { color: #FFFFFF; margin: 0; text-align: center; }
#wp-subscribe p.text { font-family:Poppins;font-size:13px;margin: 5px 0; opacity: 0.8; }
#wp-subscribe input { border: none; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 0; margin: 0; box-shadow: none; border-radius: 0; height: 45px; }
#wp-subscribe .email-field { margin-top: 10px }
#wp-subscribe input.email-field, #wp-subscribe input.name-field { color: #FFFFFF; background: #d56144; }
#wp-subscribe input::-webkit-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-ms-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:focus::-webkit-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus:-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::input-placeholder { color: transparent !important }
#wp-subscribe input.submit { background: #FFFFFF; color: #f47555; margin-top: 20px; font-size: 18px; text-transform: uppercase; font-weight: 500; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); cursor: pointer; }
#wp-subscribe p.footer-text { margin-top: 10px; font-family:Poppins;font-size: 9px; }
.your-email {
border: none;
font-family:Poppins;
background-color: rgba(255,255,255,0.4);
color:#aca9a8;
}
.submitbutton {
background:#fff;
color:#f47555;
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;
}
.submitbutton:active {
outline:none;
border:none;
background:#fff;
color:#e25734;
}
.submitbutton:hover{
background:#d23f1a;
color:#fff;
}
HTML Code
<center><br />
<div class="wp-subscribe" id="wp-subscribe">
<h4 class="title">Get more stuff like this<br/> <span>in your inbox</span></h4><br />
<p class="text">Subscribe to our mailing list and get interesting stuff and updates to your email inbox.</p><br />
<div class='emailfield'><form action='https://feedburner.google.com/fb/a/mailverify' action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=hanyalah-blogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'>
<input class="your-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Email Address'/><br /><br />
<input name='uri' type='hidden' value='hanyalah-blogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Sign Up Now'/>
</form>
<div class="clear"></div>
<p class="footer-text">we respect your privacy and take protecting it seriously</p></div></center>
Source Widget Email Feedburner Subscription Blogger 5
Source Widget Code
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700);
.wk_subs_box_wrapper{
background:url('Your Backgroud Image') repeat scroll 0 0 #FFF;
color:#427FED;
border-radius: 5px;
border: 2px solid #0AC4FC;
font-family: "Roboto";
font-size:14px;
line-height:20px;
padding:1px 20px 10px;
text-align:center;
text-transform:uppercase
}
.sidebar-subscribe-box-form{
clear:both;
display:block;
margin:10px 0
}
form.sidebar-subscribe-box-form{
clear:both;
display:block;
margin:10px 0 0;
width:auto
}
.sidebar-subscribe-box-email-field{
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#fff;
border:1px solid #ccc;
border-radius:4px;
color:#444;margin:0 0 15px;
padding:10px 30px;
width:75%
}
.sidebar-subscribe-button{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: "Roboto";
color: #ffffff;
font-size: 29px;
background: #3cb0fd;
padding: 10px 30px 10px 30px;
width:100%;
border: solid #ffffff 0px;
text-decoration: none;
}
.sidebar-subscribe-button:hover,.sidebar-subscribe-box-email-button:focus{
background: #3498db;
text-decoration: none;
}
</style>
<div class="wk_subs_box_wrapper">
<p>Subscribe for free</p>
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Cybup" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Cybup', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="Cybup" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address"/>
<input class="sidebar-subscribe-button" title="" type="submit" value="Subscribe Now !" />
</form>
</div>
</div>
Source Widget Email Feedburner Subscription Blogger 6
Source Widget Code
<style>
#wk_bar {
background-color: #f9f9f9; box-shadow: 0 0 3px #b0b0b0;
border:1px solid #ccc;
padding:6px;
width: 270px;
}
#subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#f7f7f7;}
#subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding: 9px 11px;}
#subscribe-box .email-box {
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2; background: #d3e0ed;
border: 1px solid #ccdaed; padding:11px; margin-bottom: -4px;}
#subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
#subscribe-box .email-box .txt,#subscribe-box .email-box .txt:focus{
border: 1px solid #d2d2d2;
color: #a19999; font-size: 12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 18px;
padding: 6px 28px 8px; width: 100px;
}
#subscribe-box .email-box .btn,#subscribe-box .email-box .btn:focus{ float:right;
margin-top: 0px;
background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); text-shadow: 1px 1px 0 rgba(0, 0, 0, .4); font-weight:bold; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #248334 ;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:8.5px 10px;
margin-left:3px;
font-weight:bold;
font-size:12.2px;
cursor:pointer;
border-image: initial;}
#subscribe-box .email-box .btn:hover{
opacity: .8;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #248334 ;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
</style>
<div id="wk_bar">
<div id="subscribe-box">
<div class="email-box">
<h4><center>Subscribe Our Posts For Free</center></h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=latestbloggingtips4u', 'popupwindow', 'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow">
<input class="txt" style="background: #FFF url('http://i.imgur.com/2BCD0.png') no-repeat 6px !important;" onfocus="if (this.value == 'Your email ID ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your email ID ';}" type="text" name="email" value="Your email ID " />
<input type="hidden" name="uri" value="latestbloggingtips4u" />
<input type="hidden" name="loc" value="en_US" />
<input class="btn" style="margin-left: 4px;" type="submit" value="Subscribe" />
<div style="clear: both;"></div>
</form></div>
<div class="fb-like-box"><iframe style="border: none; overflow: hidden; width: 80px; height: 21px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fallbloggingtips&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" frameborder="0" scrolling="no" width="320" height="240"></iframe><a style="color: #3b5998; font-family: ubuntu; font-size: 18px; font-weight: bold; line-height: 20px;" href="http://www.facebook.com/wonderkrish" rel="nofollow" target="_blank"> Like Us On Facebook </a>
<div class="clear"></div>
</div>
<script type="text/javascript">// <![CDATA[
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
// ]]></script></div>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
<div id="mashable" style="height: 12px; background: #f9f9f9; border: 0px solid #CCC; border-top: 1px solid white; text-align: right; border-image: initial; font-size: 10px;"><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.wonderkrish.com" target="_blank">Widget »</a></span></div>
</div>
</div>
Source Widget Email Feedburner Subscription Blogger 7
Source Widget Code
<style>
//@media(max-width:400px) {.sbox{width:109%!important;}}
//@media(max-width:1024px) and (min-width:400px) {.sbox{width:106.5%!important;}}
.sbox {background:#009abe;text-align:center;width:100%;}
.sbox span {color:#fff;font-family:roboto;font-size:27px;}
.sbox .small {font-size:18px;}
input.boxinput::placeholder {color:#fff;}
.sbox .hatespam {font-size:15px;}
.sbox .boxinput::placeholder {color:#fff;}
.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:roboto;margin-bottom:10px;outline:none;transition:.3s;width:86%;text-align:center;border-radius:4px;}
.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:roboto;cursor:pointer;border-radius:4px;}
.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}
.sbox {border-radius:8px!important;padding:0!important;border:none!important;}
.sbox .widget-content {margin:0!important;}
#sidebar-wrap .widget {overflow-x:hidden;}
.sbox {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;width:100%;}
.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}
.sbox .boxinput {border-radius:2px!important;}
</style>
<div class='sbox wow rubberBand'>
<center>
<br /><span class='icon'><img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrTXFudIOFPCgJu6Rr9YmPDudkjPLzG0Hn1pYzYw2LjzL2XkuOXW15RgTZDVgBjmvd9qRMS5kPABIn0uD8RwGjbC6cbwEQAcdwnrjk_dei4vsTjsRYJ405rQhrOlht3lPjPD5R5d9ich4/s1600/email.png' width='150px'/></span><br/>
</center>
<span>Newsletter</span><br /><br />
<span class='small'>Join Our newsletter</span><br /><br />
<center>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=shoutersplanet', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='Your Email Address' type='email' required/>
<input class='boxsubmit' type='submit' value='Submit'/><input name='uri' type='hidden' value='shoutersplanet'/>
<input name='loc' type='hidden' value='en_US'/></form><br />
<span class='hatespam'>*We Hate Spam!</span><br /><br />
</center></div>
Source Widget Email Feedburner Subscription Blogger 8
Source Widget Code
<style type="text/css">
.wk_subs {
background-color: rgb(255, 255, 255);
width: 100%;
height: 100%;
border: 1px dashed #ddd;
}
.wk_sub {
color: rgb(255, 255, 255);
background-color: rgb(11, 172, 227);
padding: 10px 0;
text-align: center;
font: bold 15px "trebuchet MS", "Tahoma";
width: 100%;
}
.wk_email_form {
width: 235px;
margin: 10px auto;
}
#wk_email_box {
background-color: #FFF;
color: #747474;
width: 130px;
border: 1px solid #D8D8D8;
padding: 7px;
height: 18px;
display: inline-block;
vertical-align: top;
box-shadow: inset 0px 0px 5px #c2c2c2;
box-sizing: content-box;
font-size: 13px;
}
#wk_email_button {
background-color: rgb(243, 93, 92);
border: 1px solid rgb(215, 84, 83);
color: rgb(255, 255, 255);
width: 85px;
font: bold 13px "trebuchet MS", "Tahoma";
padding: 7px;
text-align: center;
cursor: pointer;
display: inline-block;
height: 34px;
}
#wk_email_button:hover {
background-color: #E64C4B;
border: 1px solid #BF4A49;
}
.wk_signup_form {
margin-top: 15px;
}
.wk_social_icons {
overflow: hidden;
text-align: center;
display: block;
margin: 20px auto;
}
.wk_social_icons ul {
margin: 0px auto !important;
text-align: center;
padding: 0px !important;
display: inline-block;
}
.wk_social_icons ul li {
background: transparent none repeat scroll 0% 0% !important;
border: medium none !important;
float: left;
list-style-type: none !important;
padding: 0px !important;
margin: 0px 5px !important;
}
.wk_social_icons ul li::before,
.wk_social_icons ul li::after {
display: none !important;
}
.wk_social_icons ul li a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0X8ZzWamCJSBSb4Qqsidxit6bb2rGl1OEJsrjA8An-kuswaJ4pZhdj8bhXJKqWd5xDZyeMDf5Zw_ptxScKKIibHZmErkF2RaAa92m97WKIBdMwiRTNVqoUknzAAXNZkKUHVd1vDEkxZff/s1600/sprite_32x32.png") no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
display: block;
height: 34px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s;
width: 34px;
}
.wk_social_icons ul li a:hover {
background-color: #aeaeae !important;
}
.wk_social_icons ul li.social-facebook a {
background-position: -62px 1px;
background-color: #3b5998;
}
.wk_social_icons ul li.social-twitter a {
background-position: -254px 1px;
background-color: #00aced;
}
.wk_social_icons ul li.social-gplus a {
background-position: -95px 0px;
background-color: #dd4b39;
}
.wk_social_icons ul li.social-pinterest a {
background-position: -159px 1px;
background-color: #cb2027;
}
</style>
<div class="wk_subs">
<div class="wk_sub">Join Our Newsletter For Free</div>
<div class='wk_signup_form'>
<div class='wk_email_form'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]' /> <input name='loc' type='hidden' value='en_US' /> <input id='wk_email_box' name='email' required='' type='text' placeholder='Your Email Address' /> <input id='wk_email_button' title='' type='submit' value='Subscribe' /> </form>
</div>
<div class="wk_sub">Sociliaze with Us</div>
<div class="wk_social_icons">
<ul>
<li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
</ul>
</div>
<div style="width: 230px; margin: 0px auto;">
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-page" data-href="[https://www.facebook.com/wonderkrish/]" data-width="230" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-hide-cover="true" data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="[Fb url]"><a href="[Fb url]">[Fb Page Name]</a></blockquote>
</div>
</div>
</div>
</div>
</div>
Source Widget Email Feedburner Subscription Blogger 9
Source Widget Code
<style type="text/css">
.wk_sub {
background-color: rgb(87, 98, 105);
width: 100%;
height: 100%;
padding: 5px;
box-shadow: 0px 0px 5px rgb(87, 98, 105);
}
.wk_inner_form {
text-align: center;
color: rgb(255, 255, 255);
font: bold 16px "trebuchet MS","Tahoma";
}
.wk_mail_form {
width: 240px;
margin: 10px auto;
}
#wk_email_box {
background-color: #ece6e6eb;
color: #FFF;
width: 208px;
border: 1px solid #697780;
padding: 15px;
text-align: center;
height: 18px;
box-sizing: content-box;
border-radius: 10px;
}
#wk_email_button {
background-color: rgb(243, 93, 92);
border: 1px solid rgb(215, 84, 83);
color: rgb(255, 255, 255);
width: 240px;
font: bold 16px "trebuchet MS","Tahoma";
padding: 15px;
text-align: center;
height: 50px;
margin: 10px auto;
cursor: pointer;
border-radius: 10px;
}
}
#wk_email_button:hover {
background-color: #E64C4B;
border: 1px solid #BF4A49;
}
.wk_signup_form {
margin-top: 15px;
}
.wk_social_icons {
overflow: hidden;
text-align: center;
border-bottom: 1px solid rgb(133, 133, 133);
width: 230px;
display: block;
margin: 20px auto;
}
.wk_social_icons ul {
margin: 0px auto !important;
text-align: center;
padding: 0px !important;
display: inline-block;
}
.wk_social_icons ul li {
background: transparent none repeat scroll 0% 0% !important;
border: medium none !important;
float: left;
list-style-type: none !important;
padding: 0px !important;
margin: 0px 2px !important;
}
.wk_social_icons ul li::before,
.wk_social_icons ul li::after {
display: none !important;
}
.wk_social_icons ul li a, .wk_social_icons ul li a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0X8ZzWamCJSBSb4Qqsidxit6bb2rGl1OEJsrjA8An-kuswaJ4pZhdj8bhXJKqWd5xDZyeMDf5Zw_ptxScKKIibHZmErkF2RaAa92m97WKIBdMwiRTNVqoUknzAAXNZkKUHVd1vDEkxZff/s1600/sprite_32x32.png") no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
height: 34px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s;
width: 34px;
}
.wk_social_icons ul li.social-facebook a {
background-position: -62px 1px;
}
.wk_social_icons ul li.social-facebook a:hover {
background-color: #3b5998;
}
.wk_social_icons ul li.social-twitter a {
background-position: -254px 1px;
}
.wk_social_icons ul li.social-twitter a:hover {
background-color: #00aced;
}
.wk_social_icons ul li.social-gplus a {
background-position: -95px 0px;
}
.wk_social_icons ul li.social-gplus a:hover {
background-color: #dd4b39;
}
.wk_social_icons ul li.social-pinterest a {
background-position: -159px 1px;
}
.wk_social_icons ul li.social-pinterest a:hover {
background-color: #cb2027;
}
.wk_social_icons ul li.social-rss a {
background-position: -190px 0px;
}
.wk_social_icons ul li.social-rss a:hover {
background-color: #F87E12;
}
</style>
<div class="wk_sub">
<div class="wk_social_icons">
<ul>
<li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
</ul>
</div>
<div class='wk_signup_form'>
<div class='wk_inner_form'>
<h4>Subscribe to Newsletter</h4>
</div>
<div class='wk_mail_form'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='[Your Blog uri]'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='wk_email_box' name='email' required='' type='text' placeholder='Enter Your Email'/>
<input id='wk_email_button' title='' type='submit' value='Subscribe'/>
</form>
</div>
</div>
</div>
Source Widget Email Feedburner Subscription Blogger 10
Source Widget Code
<style type="text/css">
.wk_sub {
background-color: #1E293B;
width: 100%;
height: 100%;
box-shadow: 0px 0px 10px rgb(30, 41, 59);
}
.wk_mailform {
width: auto;
margin: 10px auto;
margin-left: 20px;
}
.wk_inner_form h4 {
color: rgb(255, 255, 255);
text-align: center;
padding: 10px;
font: bold 18px/40px "trebuchet MS","Tahoma";
}
#wk_mail_box {
background-color: #FFF;
border: 1px solid #FFF;
border-radius: 7px 0px 0px 7px;
height: 20px;
padding: 6px;
box-sizing: content-box;
}
#wk_mail_button {
background-color: #F0553B;
border: 1px solid #F0553B;
color: #FFF;
height: 34px;
border-radius: 0px 7px 7px 0px;
margin-left: -4px;
font-weight: 600;
cursor: pointer;
}
#wk_mail_button:hover {
background-color: #1E293B;
border: 1px solid #FFF;
box-shadow: 0 0 5px #ddd;
}
.wk_social_likes {
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0FnX4afpclwELtl0LKdPxMjuWPDZgAZZmDxeorbZvnpsp5RSPWkYX1JsY6LeYM_Uan8A4j4Dh5pa7kk8A1FxRfWVONstOKoVrK_Rr4mrXQg1i59QXIHWEXUQGeeUEMMYK-IK4rhTanq7R/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px;
width: 250px;
height: 120px;
margin: 10px auto;
}
.wk_fb_likes {
margin-top: 90px;
margin-left: 20px;
position: absolute;
display: block;
box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
}
.wk-follow {
display: block;
margin-left: 152px;
position: absolute;
margin-top: 89px;
box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);
height: 20px;
}
</style>
<div class="wk_sub">
<div class='wk_signup_form'>
<div class='wk_inner_form'>
<h4>Subscribe And Get The Latest Posts</h4>
</div>
<div class='wk_mailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='[Your Blog uri]'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='wk_mail_box' name='email' required='' type='text' placeholder='Enter Your Email Here...'/>
<input id='wk_mail_button' title='' type='submit' value='Subscribe'/>
</form>
</div>
</div>
<table class='wk_social_likes'>
<tbody>
<tr>
<td class='wk_fb_likes'>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
</div>
</td>
</tr>
</tbody>
</table>
</div>
Source Widget Email Feedburner Subscription Blogger 11
Source Widget Code
<style type="text/css">
.wk_signup-form {
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_kpQ8U82hfZPLQzbuSQs6owzb7jUC2QGf0xJVZuqdntWnvmqkZTZ7BKLh2oQTZ0P7fce__63LwHnI-x40Efiu7ylqnXH5ctTA7y164HFc1bK2iv6erX40LHIPvxM93PQKbideL6DnqcH/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
height: 150px;
width: 250px;
margin: 10px auto 60px auto;
}
.wk_form p {
text-align: center;
color: #fff;
padding: 10px;
font: bold 18px "trebuchet MS","Tahoma";
}
.wk_mail {
margin: 120px auto 5px;
width: auto;
}
#wk_mailbox {
background: #FEFEFE none repeat scroll 0% 0%;
border: medium none;
font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;
margin-right: 5px;
box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
padding: 7px;
box-sizing: content-box;
height: 12px;
vertical-align: top;
display: inline-block;
}
#wk_mailbutton {
background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
border: medium none;
color: #FFF;
cursor: pointer;
font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;
padding: 6px;
border-radius: 5px;
height: 27px;
display: inline-block;
}
#wk_mailbutton:hover {
background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}
.wk_social_icons {
margin: 20px 0 0;
overflow: hidden;
display: block;
text-align: center;
}
.wk_social_icons ul {
display: inline-block;
margin: 0 auto !important;
text-align: center;
padding: 0px
}
.wk_social_icons ul li {
background: transparent !important;
border: none !important;
float: left;
list-style-type: none !important;
margin: 0 4px 10px !important;
padding: 0 !important;
}
.wk_social_icons ul li::before,
.wk_social_icons ul li::after {
display: none !important;
}
.wk_social_icons ul li a, .wk_social_icons ul li a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0X8ZzWamCJSBSb4Qqsidxit6bb2rGl1OEJsrjA8An-kuswaJ4pZhdj8bhXJKqWd5xDZyeMDf5Zw_ptxScKKIibHZmErkF2RaAa92m97WKIBdMwiRTNVqoUknzAAXNZkKUHVd1vDEkxZff/s1600/sprite_32x32.png") no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
height: 38px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s; width: 38px;
}
.wk_social_icons ul li.social-facebook a {
background-color: #3b5998;
background-position: -60px 3px;
}
.wk_social_icons ul li.social-twitter a {
background-color: #00aced;
background-position: -253px 3px;
}
.wk_social_icons ul li.social-gplus a {
background-color: #dd4b39;
background-position: -93px 3px;
}
.wk_social_icons ul li.social-pinterest a {
background-color: #cb2027;
background-position: -157px 3px;
}
.wk_social_icons ul li.social-rss a {
background-color: #F87E12;
background-position: -189px 3px;
}
.wk_social_icons ul li a:hover {
background-color: #333;
}
.wk_social_like {
display: block;
text-align: center;
}
.wk_social_like tbody, .wk_social_like tbody tr {
display: block;
}
.wk_fb_likes {
display: inline-block;
padding-bottom: 15px;
margin-right: 5px;
}
.pb_wk {
display: inline
}
</style>
<div>
<div class='wk_signup-form'>
<div class='wk_form'>
<p>Sign Up for Email Updates</p>
</div>
<div class='wk_mail'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='[Your Blog uri]'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='wk_mailbox' name='email' required='' type='text' placeholder='Enter your email...'/>
<input id='wk_mailbutton' title='' type='submit' value='Sign up'/>
</form>
</div>
</div>
<div class="wk_social_icons">
<ul>
<li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
</ul>
</div>
<table class='wk_social_like'>
<tbody>
<tr>
<td class='wk_fb_likes'>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
</div>
</td>
</tr>
<tbody>
</table>
</div>
Source Widget Email Feedburner Subscription Blogger 12
CSS Code
#ignielSubscribe {width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}
#ignielSubscribe .email__ {padding:15px 15px 5px;}
#ignielSubscribe .email {margin:auto; color:#555; text-align:center;}
#ignielSubscribe .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#ignielSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}
#ignielSubscribe form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;}
#ignielSubscribe form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';}
#ignielSubscribe input {width: calc(100% - 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
#ignielSubscribe button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}
#ignielSubscribe button:hover, #ignielSubscribe button:focus {background-color:var(--color-hover);}
#ignielSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;}
#ignielSubscribe .medsos {width:100%; text-align:center;}
#ignielSubscribe .medsos svg {width:20px;height:20px;margin-top:7px}
#ignielSubscribe .medsos svg path {fill:#fff}
#ignielSubscribe .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;}
#ignielSubscribe .medsos a:last-child {margin-right:0px;}
#ignielSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}
#ignielSubscribe .medsos .facebook{background:#3a579a}
#ignielSubscribe .medsos .twitter {background:#00abf0}
#ignielSubscribe .medsos .googleplus {background:#df4a32}
#ignielSubscribe .medsos .youtube {background:#cc181e}
#ignielSubscribe .medsos .instagram {background:#992ebc}
#ignielSubscribe .medsos .pinterest {background:#e60023}
@-webkit-keyframes ignielRing{
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ignielRing{
0% { -moz-transform: rotate(0); }
1% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
9% { -moz-transform: rotate(30deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}
@keyframes ignielRing{
0% { transform: rotate(0); }
1% { transform: rotate(30deg); }
3% { transform: rotate(-28deg); }
5% { transform: rotate(34deg); }
7% { transform: rotate(-32deg); }
9% { transform: rotate(30deg); }
11% { transform: rotate(-28deg); }
13% { transform: rotate(26deg); }
15% { transform: rotate(-24deg); }
17% { transform: rotate(22deg); }
19% { transform: rotate(-20deg); }
21% { transform: rotate(18deg); }
23% { transform: rotate(-16deg); }
25% { transform: rotate(14deg); }
27% { transform: rotate(-12deg); }
29% { transform: rotate(10deg); }
31% { transform: rotate(-8deg); }
33% { transform: rotate(6deg); }
35% { transform: rotate(-4deg); }
37% { transform: rotate(2deg); }
39% { transform: rotate(-1deg); }
41% { transform: rotate(1deg); }
43% { transform: rotate(0); }
100% { transform: rotate(0); }
}
HTML Code
<div id="ignielSubscribe">
<div class="email__">
<div class="email">
Dapatkan artikel terbaru setiap hari
<form action="https://feedburner.google.com/fb/a/mailverify?uri=igniel" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=igniel', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" class="email" placeholder="Contoh: nama@mail.com"/>
<input name="uri" type="hidden" value="igniel" /> <input name="loc" type="hidden" value="en_US" />
<button type="submit"></button>
</form>
</div>
</div>
<div class="medsos__">
<div class="medsos">
<a class="facebook" title="Facebook" href="https://www.facebook.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>
<a class="twitter" title="Twitter" href="https://twitter.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
<a class="youtube" title="Youtube" href="https://www.youtube.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>
<a class="instagram" title="Instagram" href="https://www.instagram.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
<a class="pinterest" title="Pinterest" href="https://pinterest/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path></svg></a>
</div>
</div>
</div>
Source Widget Email Feedburner Subscription Blogger 13
Source Code Widget
<b:widget id='FollowByEmail1' locked='false' title='Subscribe Our Newsletter' type='FollowByEmail' version='1'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"' method='post' target='popupwindow'>
<table>
<tr>
<td>
<input aria-label='Email' class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
</td>
<td>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
</b:includable>
</b:widget>
Pemasangan Widget Nomor 1 - 4 dan 11 silahkan tempatkan kode CSS di atas kode </style> atau ]]></b:skin> Kemudian kode HTML silahkan pasang melalui Add Widget HTML/JavaScript.
Pemasangan Widget Nomor 5 - 11 silahkan tempelkan source kode dibawah </article> atau <data:post/>
Pemasangan Widget Nomor 13 silahkan tempelkan kode pada area footer di bawah kode </head> (antara kode </head> dan </body>) lakukan uji coba penampatan kode sampai sesuai dengan yang anda inginkan.
Jangan lupa untuk mengganti ID Feedburner pada source kode yang anda pilih dengan ID Burner Website milik Anda. Selamat Mencoba dan Semoga Sukses.
Post a Comment