Add Stylish All In 1 Social/Email Subscription Box For Blogger
Friends,In This Article I Will Tell You How To Add Stylish All In 1 Social/Email Subscription Box For Blogger.This is a simple and effective widget for your blogger. This Social media sharing widget make with a simple and advanced search box. It make a good feeling to your blogger when peoples visit your blog. It can add into your blog simply. Follow this post.
☻ HOW ADD SOCIAL/EMAIL SUBSCRIPTION BOX FOR BLOGGER
Written explanation
1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
<style>
#socialwidget {
border: 1px solid #ebebeb;
width: 300px;
}
.TZ-social{
padding: 10px 10px 10px 10px;
border-bottom: 1px solid #ebebeb;
}
.TZ-social img:hover{opacity:0.8}
.googleplus {
background: #ffffff;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
ine-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
margin: 9px 70px;
width: 310px;
}
.g-plusone {
float: left;
}
.twitter {
background: #ffffff;
border-bottom: 1px solid #ebebeb;
padding: 10px;
}
.TZ {
background: #ffffff;
border-top: 1px solid white;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.TZ span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 310px;
}
#widgetbox .author-credit a {
font-size: 10px;
font-size: 10px;letter-spacing: 1px;
color: #1E598E;
text-decoration: none;
}
.email-subscribe-emailbox {
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-image: initial;
height: 42px;
background: #EFF8FB;
width: 280px;
}
.email-subscribe-emailbox form {width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.email-subscribe-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.email-subscribe-emailbox input.emailu:focus {color: #333;}
.email-subscribe-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
.TZDefault {border: 1px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id="socialwidget">
<!-- Begin Widget -->
<div class="TZ-social">
<!-- social ico -->
<center>
<a style="margin-right: 10px;" href="http://facebook.com/TH3NEWS" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZEah-1igvRkN97gUAdb6YqCC4xrYyZB61M2W_lJHMzmRwlZQkpny24jlMJNlgCpsD5sJyeJN6-BweeF2gbpw0uANPm-yhbilPp6YI-PELxeXVA13HLHv_ndPTg39KQlWmS2Y0ClU6DI/s1600/facebook.png" title='Facebook'/></a>
<a style="margin-right: 10px;" href="http://twitter.com/USERNAME4" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rOgr-xla5xtnvLU_4RRY_wKpsUNnk1idKj6I8EOJO9qC31rAyTi_n7I11_bID-n2OFULKxqxryVT9jT7Vp_Aou6DH8HWt-glIHU8H8eZx-r-1XdyTFNFsc6myXwI5Ye_SNgNUF-g04Q/s1600/twitter.png" title='Twitter'/></a>
<a style="margin-right: 10px;" rel="me" href="https://plus.google.com/USERNAME2" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95kZXv7T6VDHhUKJ-VBLDbIyoYoPBRrFg7sq0QNLH_1qcCInM0i2_ezfGEvyx3wsIQKSPwcjzMogHTsXzSmk-0B6dh9p8UM2-erDiTo4cI3ibxURHKGc-PnssEg6dESPgOOKzh1OIK84/s1600/gplus.png" title='Google Plus'/></a>
<a style="margin-right: 10px;" href="http://pinterest.com/telouma/boards/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUf1o-PWppOt1h1tsSel3Wn4z26bYs8PebD1BeG5vR-fCtiOYRU5DhshdzXHbIX6tE2MmnQnh-UQDpUgwPQjHRmTWRTz2UJfhZAzEgSCCaPyCBvidATwbN1-K_VfkpyrsSfuhr1R51CY/s1600/pinterest.png" title='Pinterest'/></a>
<a style="margin-right: 10px;" href="http://feeds.feedburner.com/USERNAME3" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4GcDBP4Eu1kg-VllHuID92d5sBlKjz2PwRykT-un1WHmsP1SEzl-SobUJGQhPlmoOVoo26VzasgXDaKvQ9oLMxg19_tS7pH1188iSE-iTvdA5R35Hm7CLVrjg63QIYFe7XR77Z9EP9NU/s1600/rss.png" title='RSS Feed'/></a>
</center>
</div>
<div class="googleplus">
<span><font><font>Recommend Us On Google </font></font></span>
<!-- GooglePlus -->
<!-- Place this tag where you want the 1 button to render -->
<g:plusone size="medium" href="http://newth3.blogspot.com/"></g:plusone>
<!-- Place this render call where appropriate -->
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(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>
<div class="TZ">
<!-- facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2USERNAME1&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
</iframe>
<span>Like Us On Facebook</span>
</div>
<div class="twitter">
<!-- Twitter -->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&id=twitter-widget-0&lang=en&screen_name=USERNAME4 &show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
</iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="email-subscribe-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="70px">
<input class="submitu TZDefault" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="The-Area51"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
<div id="widgetbox" style="background: #EBEBEB;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;">
<!-- End Widget -->
</div></div>
#socialwidget {
border: 1px solid #ebebeb;
width: 300px;
}
.TZ-social{
padding: 10px 10px 10px 10px;
border-bottom: 1px solid #ebebeb;
}
.TZ-social img:hover{opacity:0.8}
.googleplus {
background: #ffffff;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
ine-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
margin: 9px 70px;
width: 310px;
}
.g-plusone {
float: left;
}
.twitter {
background: #ffffff;
border-bottom: 1px solid #ebebeb;
padding: 10px;
}
.TZ {
background: #ffffff;
border-top: 1px solid white;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.TZ span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 310px;
}
#widgetbox .author-credit a {
font-size: 10px;
font-size: 10px;letter-spacing: 1px;
color: #1E598E;
text-decoration: none;
}
.email-subscribe-emailbox {
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-image: initial;
height: 42px;
background: #EFF8FB;
width: 280px;
}
.email-subscribe-emailbox form {width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.email-subscribe-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.email-subscribe-emailbox input.emailu:focus {color: #333;}
.email-subscribe-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
.TZDefault {border: 1px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id="socialwidget">
<!-- Begin Widget -->
<div class="TZ-social">
<!-- social ico -->
<center>
<a style="margin-right: 10px;" href="http://facebook.com/TH3NEWS" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZEah-1igvRkN97gUAdb6YqCC4xrYyZB61M2W_lJHMzmRwlZQkpny24jlMJNlgCpsD5sJyeJN6-BweeF2gbpw0uANPm-yhbilPp6YI-PELxeXVA13HLHv_ndPTg39KQlWmS2Y0ClU6DI/s1600/facebook.png" title='Facebook'/></a>
<a style="margin-right: 10px;" href="http://twitter.com/USERNAME4" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rOgr-xla5xtnvLU_4RRY_wKpsUNnk1idKj6I8EOJO9qC31rAyTi_n7I11_bID-n2OFULKxqxryVT9jT7Vp_Aou6DH8HWt-glIHU8H8eZx-r-1XdyTFNFsc6myXwI5Ye_SNgNUF-g04Q/s1600/twitter.png" title='Twitter'/></a>
<a style="margin-right: 10px;" rel="me" href="https://plus.google.com/USERNAME2" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95kZXv7T6VDHhUKJ-VBLDbIyoYoPBRrFg7sq0QNLH_1qcCInM0i2_ezfGEvyx3wsIQKSPwcjzMogHTsXzSmk-0B6dh9p8UM2-erDiTo4cI3ibxURHKGc-PnssEg6dESPgOOKzh1OIK84/s1600/gplus.png" title='Google Plus'/></a>
<a style="margin-right: 10px;" href="http://pinterest.com/telouma/boards/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUf1o-PWppOt1h1tsSel3Wn4z26bYs8PebD1BeG5vR-fCtiOYRU5DhshdzXHbIX6tE2MmnQnh-UQDpUgwPQjHRmTWRTz2UJfhZAzEgSCCaPyCBvidATwbN1-K_VfkpyrsSfuhr1R51CY/s1600/pinterest.png" title='Pinterest'/></a>
<a style="margin-right: 10px;" href="http://feeds.feedburner.com/USERNAME3" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4GcDBP4Eu1kg-VllHuID92d5sBlKjz2PwRykT-un1WHmsP1SEzl-SobUJGQhPlmoOVoo26VzasgXDaKvQ9oLMxg19_tS7pH1188iSE-iTvdA5R35Hm7CLVrjg63QIYFe7XR77Z9EP9NU/s1600/rss.png" title='RSS Feed'/></a>
</center>
</div>
<div class="googleplus">
<span><font><font>Recommend Us On Google </font></font></span>
<!-- GooglePlus -->
<!-- Place this tag where you want the 1 button to render -->
<g:plusone size="medium" href="http://newth3.blogspot.com/"></g:plusone>
<!-- Place this render call where appropriate -->
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(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>
<div class="TZ">
<!-- facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2USERNAME1&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
</iframe>
<span>Like Us On Facebook</span>
</div>
<div class="twitter">
<!-- Twitter -->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&id=twitter-widget-0&lang=en&screen_name=USERNAME4 &show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
</iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="email-subscribe-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="70px">
<input class="submitu TZDefault" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="The-Area51"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
<div id="widgetbox" style="background: #EBEBEB;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;">
<!-- End Widget -->
</div></div>
4) Customize your setting.Find any word click F3 or Ctrl+F.
♥ Replace it USERNAME1 with your Facebook Fan Page URL.
♥ Replace it USERNAME2 with your plus.google.
♥ Replace it USERNAME3 with your Feedburner Username.
♥ Replace it USERNAME4 with your Twitter Username.
5) Save your Widget.
Comments