Add Stylish Subscription Box With Social Buttons To Blogger Sidebar

Last Updated on: 2019-10-13T16:50:08Z   /   Read
A few days back, we shared a stylish horizontal subscription box widget to add in post footer but this time we are going to share a Stylish Subscription Box Widget With Social Buttons to add in sidebar of your blogger blog. This widget is very eye catchy, simple, neat and clean along with the most stylish social icons which all go round and round on mouse hover :) we mean they are having stylish mouse hover effect. Subscription box is must have widget but it is totally useless if it does not collect the visitors' emails. Your any other subscription box will collect the internet dust only if it does not sound appealing or having dull design which does not attract the reader's eye. So let us begin with the installation of our new sidebar subscription box widget.


Steps To Install Stylish Subscription Box Widget To Blogger Sidebar

Step 1) Go to Blogger → Layout then on right sidebar, click on Add Gadget → Select HTML/JavaScript from the list.
Step 2) Copy the code given below and paste in your newly added HTML widget.
<style>
/*-------------Widget by: TwistBlogg.com-------------*/
.TwistBlogg {
Color: white;
width: 194px;
margin-left: 5px;
line-height: 9px;
padding-left: 10px;
padding-right: 10px;
display: block;
border: 2px solid #000000;
background-color: #000000;
border-radius: 40px;
}
.TwistBlogg img:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
}
.TwistBlogg img {
-webkit-transition: all 1.1s ease-in-out;
-moz-transition: all 1.1s ease-in-out;
-o-transition: all 1.1s ease-in-out;
-ms-transition: all 1.1s ease-in-out;
transition: all 1.1s ease-in-out;
}
/*---------------Button---------------*/
.TwistBlogg7:hover{
background:#1805A0;
}
.TwistBlogg7 {
font-size: 20px;
font-weight: normal;
margin: 0px 0px 2px 10px !important;
color: white;
background: #FF5C00;
border: 1px solid #000000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
Padding: 4px 20px 4px 20px;
}
/*--------------Mailbox---------*/
.Enter-mail {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
margin-left: 0px !important;
border-radius: 4px;
color: #666;
font: 12px "trebuchet ms", sans-serif;
padding: 6px 10px;
margin-bottom: 7px;
width: 243px;
}
.Enter-mail:hover{
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.TBstatus {
line-height: 1.7em;
font-size: 17px;
text-align: center;
margin-top: 5px;
margin-bottom: -5px;
margin-left: 5px;
margin-right: 5px;
}
/*--------------Outer Box---------*/
#TwistBlogg9 {
border: 1px dashed #A7A7A7;
width: 290px;
height: 235px;
background: #FFFDFD;
box-shadow: inset 0px 0px 11px rgba(0, 0, 0, 0.17);
}
</style>
<center><div id='TwistBlogg9'><div class="TBstatus"><span style="text-shadow: 0px 1px 0px #F7F7F7, 0px 2px 0px #F5F3F3, 0px 3px 0px #F5F5F5, 0px 4px 0px #E9E9E9, 0px 5px 0px #E9E9E9, 0px 6px 0px rgba(218, 213, 213, 0.1), 0px 7px 0px rgba(223, 220, 220, 0.15);color: #000000;font-size: 32px; font-weight:bold;">Sign-up</span> for <span style="color:#16BE07;font-size:25px;font-weight:bold">FREE</span> Regular Updates.</div><br /><div id="email-news-TwistBlogg7"><div class="emailbox"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TwistBlogg', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input class="Enter-mail" size="35" type="text" style="font-size: 15px;" id="email" name="email" value="Enter Your Email For Free Update" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="TwistBlogg" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="TwistBlogg" name="commit" type="submit" value="Subscribe" /></p><p class="TwistBlogg"><a href="http://www.facebook.com/pages/Twistbloggercom/740638259280667" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-Tbwkk8K3NkA/UwuarrwFuDI/AAAAAAAAAck/FFsuByi5aW8/s1600/facebook.png" title="Like Us on Facebook" alt="undefined" /></a> | <a href="http://www.twitter.com/TwistBlogg" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-yyZ-OKHh1Ys/Uwuas6KDVOI/AAAAAAAAAc0/jH4lb2Z_E9Q/s1600/twitter.png" title="Follow Us On Twitter" alt="undefined" /></a> | <a href="http://www.plus.google.com/101011957743985467270" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-ElLzOZSn3IA/UwuasjPY5iI/AAAAAAAAAcs/WAIBT8D7KBQ/s1600/google+.png" title="Follow Us on Google+" alt="undefined" /></a></p></form></div></div></div></center>
Step 3) Now change the "Sign Up For Free Regular Updates" highlighted text in yellow color to your own or let it remain as it is. Then in the end, change the highlighted social profiles links of us with your own links and hit save button.

Finally visit your blog to see the changes you have made. We hope you liked this widget. If you get any kind of problem during installation of this stylish subscription box widget to blogger sidebar then leave us a comment and we will help you asap. Your comments motivate us to do more. Happy Blogging!!
Comment Policy: We love comments and appreciate the time that our readers spend to share ideas and give feedback. Thank you to everyone who comments at the TwistBlogg.com.

However, we also want our comments to be as useful as possible to all of our readers. While we keep 99% of comments, we will remove spam and irrelevant comments.

Note: We reserve the right to remove any comments from the site; please leave comments that are respectful and useful.