0 Gradient Style Social Subscription Box For Blogger’s Blog

This is a great social subscription box that can be used in your blogger sidebar. I have colored it like gradient style which looks very attractive. I was working on it for few days so finalized today and sharing with BloggerSpice audiences. I have added Facebook, Twitter, Google Plus, Pinterest, Feedburner, Email and a cute subscription box. In addition, I have added a cute animated feed count that will help you attract your visitors easily. So let’s proceed to tutorial.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.

<style>
.bssubsboxfull{
width:255px;margin-left:5px;background:#f7f7f7;
padding-top:10px;
padding-right:10px;
padding-bottom:15px;
padding-left:10px;
color:#333;
height:110px;
border:1px solid#ddd;
margin-bottom:0px;
}
.bsrss-boxicon{padding-left:10px;margin-right:1em;font-size:13px;font-weight:bold;}
.bsrss-boxicon a:hover{color:#555btext-decoration:none}
.bsemail-boxicon{padding-left:0px;font-size:13px;font-weight: bold;}
.bsemail-boxicon a:hover{color:#555; text-decoration:none}
.bstopbaricons{float:right;width:246px;margin:0 0 0px 0;padding-left:3px;margin-top:2px;margin-right:4px}
.bstopbaricons ul{margin:0;padding:0}
.bstopbaricons li{float:left;list-style:none;margin:0 10px 0 0;padding:0}
li.last{float:right;margin:5px 0 0 0;padding:0}
.bstopbaricons li:hover{opacity:0.8;filter:alpha(opacity='80');}
.bsfeedmail{float:left;margin:0 0 0px 0;padding-left:160px;margin-top:-140px}
<!--http://www.bloggerspice.com/-->
</style>
<div style='margin-top:10px; margin-left:-2px;'>
<div class='bssubsboxfull'>
<div class='bstopbaricons'>
<ul>
<li>
<a href='https://www.facebook.com/BloggerSpice' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhptJK764OjGjJHN-qdmk3d-LHJBCTqjNKYfW-6cD8l0SdEZTcWZJXmpLpsygnC7RZSY1KJMy9PuAldrk-tLWwRG_N1nEr3O8hvBz1JOXgK7u5pAdliH0dUaLapmw3tP20vY23a-jv2lZHi/s320/BS+facebook.png' title='Facebook' width='25'/></a></li>
<li><a href='https://twitter.com/BloggerSpice' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijmrX_rxvtkPwybV8BTm-ULUWZNxLZzvOmTsOGY7dTB57X4gJXCOr6utpItocmH6pq6S4aM7m_lf0Qg9Ek7X4kGwKWbGRFlpoxy5sXHY_ztZ4eDMt5_Y34Kh8D0LsRf4s_AhS2vjPTnhUC/s320/BS+twitter.png' title='Twitter' width='25'/></a></li>
<li><a href='http://plus.google.com/102331886274459115104' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEfngGWEncWUuDibPXgZXRhPSsxaWNUYBEQ8jMRVOWvd24gC06JomnRytWe83WNmMSImXcvRT6pyQ4_2ydmtpDT1xTH3wO1Ikt36Tl3Yn3xM12I-Am677OypYRoDsU1uYi-jvudpjcDvv/s320/BS+googleplus.png' title='Google Plus' width='25'/></a></li>
<li><a href='http://feeds.feedburner.com/ BloggerSpice' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaUICdS972HsRCOjaCqL1oV2clqYR181GuPkbX1Qq-biQU3O13_XOGMkEAfa9yM05PyIdfXUY8DaAqcGgyLPLT1EzQvx01UI1SJebeHNtvfoHE2Uw05BNoAB6oB49Klesq32M1Ieu5yE3/s320/BS+rss.png' title='RSS Feed' width='25'/></a></li>
<li><a href='http://www.pinterest.com/ BloggerSpice' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNJpj2lXehBJh99BW2JJ83ZFjr-gTtu_80ltEw-PH4jx92hM1jw0vE7kmc-C2_PTjiERqYWlpp1uUeI4HGqHkvc9H6m4f7IV1yzWBHJIY6jKo94yFfyFFAv6hVXRVAerGdzGx8Lfszj1-/s320/BS+pinterest.png' title='Pin it' width='25'/></a></li>
<li><a href='http://feedburner.google.com/fb/a/mailverify?uri=BloggerSpice' rel='nofollow' target='_blank'><img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6wGhw978clJJ8r6wKIflPFNCaOUeQsNR_Q6H73C3JgkSudWlT9HCQvIrMBtaJo4ttzYyKrtJQpaxaZwg9e25pCdTggeS-Uu_WzkgalInBR-1mvnR4NgKjg9AhQ7d2LM2YV1QVosNU3Q_X/s320/BS+Email+Contact.png' title='Mail' width='25'/></a></li>
</ul>
</div>
<div style='padding-top:10px;'>
</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerSpice' method='post' onsubmit='window.open(\'http://feedburner.google.com/fb/a/mailverify?uri=BloggerSpice', \'popupwindow\', \'scrollbars=yes,width=550,height=520\');return true' target='popupwindow'><p><input name="email" style="width:222px; border: 1px solid #e5e5e5;margin-left:6px; padding: 6px; font-size:13px; color: #333; font-weight: bold;" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter Email Here & Press Enter here&quot;;}" onfocus="if (this.value == &quot;Enter your email address here&quot;) {this.value = &quot;&quot;;}" type="text" value="Enter Email Here & Press Enter" /></p><input name="uri" type="hidden" value="BloggerSpice" /><input name="loc" type="hidden" value="en_US" /></form>
<div style='padding-top:10px;'></div>
<a class='bsrss-boxicon' href='http://feeds.feedburner.com/BloggerSpice' rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI0o4-5Jj9P5FkTdmg_uqfu-b0dHyC3fW78_PaFskSt7MCk22-u6DdmYzaozSGLIKz_YYaJP3TJiTModVSSiEuqmpvPZYQJ_E5KGw9n13x_dpOXn-F_92ri4uCsbjCkZFxIxxAwKvMCvgo/s320/BS+feed.png"/> Feed</a>
<a class='bsemail-boxicon' href='http://feedburner.google.com/fb/a/mailverify?uri=BloggerSpice' rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKRj5mwcbVJDH7CXIs4JAACxSFNA53uRe-yWCYSSxCHuQyjZQNL_l4IazgKA0FDU16ogIFsl-8AqEqKItLefS5kfNKOzeq9N9gKtFwflEmD1518V4y5OtSPkt2AV3Se3Uc5MAqpssiwrt/s320/BS+email.png"/>Email</a>
<div style="float:right;margin-right:5px;">
<a href="http://feeds.feedburner.com/BloggerSpice"><img src="http://feeds.feedburner.com/~fc/BloggerSpice?bg=000000&amp;fg=ffffff&amp;anim=1&amp;label=listeners" height="26" width="88" style="border:0" alt="" /></a>
</div>
</div></div>

Step 5 Now Hit on save Button

Customization

• Change BloggerSpice with your ID
• Change 102331886274459115104 with your Google Plus ID