Add Stylish Email Subscription Box With Social Icons To Blogger Blog

Monday, 23 June 2014

Add Stylish Email Subscription Box With Social Icons To Blogger Blog

Hello bloggers, Every blog should have email subscription box and social icons to redirect with your blog fanpages on social networks. So that, I introduced Subscription box with social icons. It is looking very attractive. Style of Blogger blog is little simple than wordpress blog. The main reason for this thing is widget style and template style. By adding this Stylish Email subscription box with 5 popular social buttons. Hover style social buttons looking very attractive and it placed at the top of the Subscription widget.

Let me explain how to customize this widget for your blog. Follow the below steps to add it in your blog.

Login to your Blogger account
Go to dashboard and move on Layout section
Click on Add a gadget link and select HTML/JavaScript option
Copy the below code into HTML box

<!-Yeahgotit.blogspot.com Email Subscribe Widget starts->
<div id="sidebars">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li>
<a class="social facebook" rel="nofollow" target="_blank" title="Facebook Fan Page" href="https://www.facebook.com/Yeahgotit">Facebook</a>
</li>
<li>
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/Thepcsoft">Twitter</a>
</li>
<li>
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/117626945037027621323">GooglePlus</a>
</li>
<li>
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/Yeahgotit">Rss</a>
</li>
<li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="https://www.youtube.com/user/shoaibshuja">Youtube</a>
</li>
</ul>
</li>
<li id="sidebar-social">
<p id="email-notice">
Join over 300 people who get free and fresh content delivered automatically.
<span></span>
</p>
<div id="email-form">
<h6>Get Our Regular Updates Via Email</h6>
<form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Yeahgotit', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="input-text" type="text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" value="Enter Your Email Address" />
<input type="hidden" value="Blogging Tricks" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="button" type="submit" value="Hit Me!" />
<p>
We Respect Your Privacy.
<br />
We never encourage SPAM. You can unsubscribe any time.
</p>
</form>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
">
<a style="color:#000000;" href="http://www.trickstoo.com">Get this</a> </span>
</div>
</li>
</ul>
</div>
<style>
#sidebars {
border: 0 none;
float: right;
padding: 0 15px;
width: 310px;
}
#email-notice {
background: none repeat scroll 0 0 #66CCFF;
color: #000000;
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
padding: 15px 20px;
position: relative;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#email-notice span {
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 10px solid #66CCFF;
bottom: -10px;
height: 0;
position: absolute;
right: 40px;
width: 0;
}
#email-form {
background: none repeat scroll 0 0 padding-box #313131;
border-bottom: 5px solid #202020;
border-radius: 2px 2px 2px 2px;
text-shadow: 0 -1px 0 #000000;
}
#email-form h6 {
color: #FFFFFF;
font-family: arial;
font-size: 16px;
font-weight: bold;
letter-spacing: 0;
padding: 15px 20px 0;
text-transform: none;
}
#email-form form {
color: #FFFFFF;
margin: 0;
padding: 20px 18px;
}
#email-form input.input-text {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #222222;
margin: 0 0 10px;
padding: 8px;
width: 94%;
}
#email-form .button {
background: none repeat scroll 0 0 #FFFFFF;
float: right;
margin: 0 0 0 10px;
}
#email-form p {
color: #CCCCCC;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#sidebar-social {
float: left;
font-size: 12px;
margin: 0 0 15px;
width: 100%;
}
ul.sidebar_list {
list-style: none outside none;
}
li.widget ul {
list-style: none outside none;
}
#social-profiles {
float: left;
}
#social-profiles ul {
float: left;
list-style: none outside none;
margin: 0 5px 20px;
}
#social-profiles ul li {
float: left;
}
#social-profiles ul li a {
display: block;
float: left;
height: 32px;
margin: 0 15px;
text-indent: -999em;
width: 32px;
}
#social-profiles a.social {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOD_yXciEAR6Mq3EajRcIQvfUSOCU-3VRtrJkZjYK4sfdNI6Y4XwyPFXbe8AhsNo-jElOha4p3s5V2PLQkAwcY5Eg8KhI5HX41ypGzZCTdsy9-Drfl3QR5Xl_Ng2QVpJvS6HiVRMExzRo/s1600/social.png") no-repeat scroll 0 0 transparent;
}
#social-profiles a.facebook {
background-position: -79px 0;
height: 32px;
margin: 0 15px 0 5px;
width: 32px;
}
#social-profiles a.facebook:hover {
background-position: -79px -74px;
height: 32px;
width: 32px;
}
#social-profiles a.twitter {
background-position: -5px -111px;
height: 32px;
width: 32px;
}
#social-profiles a.twitter:hover {
background-position: -42px 0;
height: 32px;
width: 32px;
}
#social-profiles a.youtube {
background-position: -42px -37px;
height: 32px;
width: 32px;
}
#social-profiles a.youtube:hover {
background-position: -5px -37px;
height: 32px;
width: 32px;
}
#social-profiles a.rss {
background-position: -42px -74px;
height: 32px;
width: 32px;
}
#social-profiles a.rss:hover {
background-position: -79px -37px;
height: 32px;
width: 32px;
}
#social-profiles a.googleplus {
background-position: -5px 0;
height: 32px;
width: 32px;
}
#social-profiles a.googleplus:hover {
background-position: -5px -74px;
height: 32px;
width: 32px;
}
* {
margin: 0;
padding: 0;
}
.custom .sidebar ul.sidebar_list {
padding: 15px 0;
}
</style>
<!-Yeahgotit Email Subscribe Widget ends->

You Have to Change Some Values For Your Own

Change Yeahgotit With Your Facebook Page Name on line 9
Change Thepcsoft With Your Twitter ID on line 13
Change 117626945037027621323 With Your Google+ ID on line 17
Change Shoaibshuja With Your Youtube Link on line 26
Change Yeahgotit With Your FeedBurner ID on line 21 & 42

Finally, Save the widget.

If you encounter any problem, feel free and comment below to the post to get a solution. Share your Experience with us by commenting below.