Beautiful Social Media Subscription Box Widget

0
Beautiful Social Media Subscription Box Widget
In this tutorial i'm going to explain how to add beautiful social media,Rss and email Subscription widget For your blogger/blogspot website or blog.It also have a very beautiful Hover spin effect on social media buttons which give awesome look to this gadget,Follow the steps mentioned below to grab this  beautiful social media Subscription box usin 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
<style>
#socialnbs{
width:244px;
padding:10px 10px 0px 9px;
background:#000 url(http://4.bp.blogspot.com/-QkIj_Y7ylh0/UBLdRg56bpI/AAAAAAAADfA/16sPq2FPhg0/s1600/HP-Laptop-Luster.png)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;}
p#socialnbtrixp img {
    -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;}
p#socialnbs img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);}
bloggerstandform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.bloggerstandtxt{
font-size:16px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:240px;
height:30px;
}
.bloggersstandbtn{
color:#666;
font-weight:bold;
text-decoration:none;
padding:10px 20px;
border:4px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<br />
<div id="socialnbs">
<center><p id="socialnbs">
<a href="YOUR RSS FEED URL HERE">
<img border="0" src=" http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png " /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src=" http://2.bp.blogspot.com/-88F1IMlPog0/UCM_cDdjh5I/AAAAAAAABiE/vexbC6LvSe8/s1600/TNT.png " /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src=" http://2.bp.blogspot.com/-yGQ699YjaIg/UCM_mbpqjiI/AAAAAAAABic/oXlWlYXmIoo/s1600/TNT.png " /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" http://1.bp.blogspot.com/-7H0aiZ-89Uk/UCM_Wk-hkeI/AAAAAAAABh8/IXJ9NDN6NzQ/s1600/TNT.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Get Quality Updates Into Your Inbox FREE !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID HERE&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=550&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR FEEDBURNER URL HERE'/>
<center><input name='loc' type='hidden' value='en_US'/>
<input class='bloggertrixtxt' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your Email&quot;;}' onfocus='if (this.value == &quot;Enter your Email&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your Email'/>
<input alt='' class='bloggersstandbtn' title='' type='submit' value='Submit'/>
</form><center>
</div>

  • Change Feedburner,Facebook,Twitter,Google Plus with your Username or Link. 
5. Now save your 'HTML/Javascript'.. Done !
Beautiful Social Media Subscription Box Widget for blogger blogspot,this widget have facebook,rss feed,email subscribe,twitter subscriber buttons with Spin Hover effect on it.
In this tutorial i'm going to explain how to add beautiful social media,Rss and email Subscr...
SUMMARY

Beautiful Social Media Subscription Box Widget for blogger blogspot,this widget have facebook,rss feed,email subscribe,twitter subscriber buttons with Spin Hover effect on it.

You Might Also Like:

We hope this article helped you to learn Beautiful Social Media Subscription 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 "Beautiful Social Media Subscription 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