Shop Style Social Media Subscribe Box Widget

0
Shop Style Social Media Subscribe Box Widget
In this tutorial i'm going to explain how to add beautiful shop style social media,Rss and email Subscription widget For your blogger/blogspot website or blog,Follow the steps mentioned below to grab this  beautiful social media Subscription box using CSS and HTML for this.








DEMO


1. Log in to blogger account
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript'
4. Paste below code
<a href="http://feeds.feedburner.com/bloggersstand" imageanchor="1" style="margin-left: .5em; margin-right: 1em; float: center;" rel="nofollow" target="blank"><img border="0" height="40" src="http://3.bp.blogspot.com/-sK94EIzryeg/TiGSrGeLOFI/AAAAAAAAAB4/PPMKclGxbGU/s400/Untitled-5.png" width="290" /></a>
<style>
.mbtips-email{
background:Fff no-repeat 0px 12px ;
width:270px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:2px 20px 0px 35px;
color:#686B6C;
}
.mbtips-emailsubmit{
background:#0084CE;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
margin:0 0 0px 0;
text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
font:12px sans-serif;
}
.mbtips-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:0px 2px 0px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<style class="text/css">
.center
{
text-align:center;
font-weight:bold;
margin:10px;
}
</style>
<div class="center">
Submit your Email Address to Get Free Blogger Tips Directly to your Inbox
</div>
<div class="mbtips-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=bloggersstand', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" />
<input type="hidden" value="bloggersstand" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbtips-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<style class="text/css">
table
{
border-bottom: 0px solid #E6E6E6;
float: center;
width: 300px;
margin:10px 0 0 15px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alphaundefinedopacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alphaundefinedopacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/bloggersstand" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="http://4.bp.blogspot.com/-6j39---6ijA/UBk8saCpwtI/AAAAAAAABC4/Lo2gOTv8TdU/s1600/bloggertrix.com-Facebook.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/bloggersstand" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="http://3.bp.blogspot.com/-7fDCZ_0D-r0/UBk8t9SbWKI/AAAAAAAABDI/vYB6Phmi6KU/s1600/bloggertrix.com-twitter.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/bloggersstand" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="http://3.bp.blogspot.com/-CfxYPVDVyi0/UBk8tLVMG5I/AAAAAAAABDA/Lv595wWhu4Y/s1600/bloggertrix.com-rss.png" /></a></div></td>
<td><a class="Fadeout" href="https://youtube.com/username" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="http://3.bp.blogspot.com/-UlYHi6TM8_k/UBk8u2Gof-I/AAAAAAAABDQ/uplI_Tk_uwY/s1600/bloggertrix.com-youtube.png" /></a></td>
</tr></table>
</div>

  • Change bloggersstand with your Facebook username.
  • Change bloggersstand with your twitter username.
  • Change bloggersstand with your Rss Feed username.
  • Change Username with your  Youtube username.

5.Now Save Your Template...Done !
Shop Style Social Media Subscribe Box Widget for blogger blogspot,social media networking subscription box with rss fedd ,email subscriber subscribe button sing up for blogspot blogger website gadget
In this tutorial i'm going to explain how to add beautiful shop style social media ,Rss and ...
SUMMARY

Shop Style Social Media Subscribe Box Widget for blogger blogspot,social media networking subscription box with rss fedd ,email subscriber subscribe button sing up for blogspot blogger website gadget

You Might Also Like:

We hope this article helped you to learn Shop Style Social Media Subscribe Box Widget. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Shop Style Social Media Subscribe Box Widget" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand