Stylish Rss Feed Subscription Box Widget

0
Stylish Rss Feed Subscription Box Widget
In this tutorial i'm going to explain how to add stylish rss subscription box with social media buttons/icons widget for blogger/blogspot.it is very unique and elegant look,to grab this gadget for your blog or website just follow the steps mentioned below.



DEMO


1.Log in to blogger account
2.Now select "Template"
3.Now Click EDIT HTML Button"
4.Find this tag by using Ctrl+F</head>
5.Paste below code Before</head>
<style type='text/css'>
.sub-box{
width: 600px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border:2px solid #511111;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;}
.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;}
.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;}
.followlinks ul li.otrss{
background:url(http://3.bp.blogspot.com/-CMD8tTcyanA/UGEoXF32zpI/AAAAAAAAEQM/E1OgMW6SZvc/s1600/bloggertrix-rss-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(http://2.bp.blogspot.com/-lhm8DqIzDpI/UGEoWe4xv9I/AAAAAAAAEQA/a850kufuzxw/s1600/bloggertrix-google-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(http://1.bp.blogspot.com/-cDAZzZi29P0/UGEoYMJQYrI/AAAAAAAAEQQ/otQiWtPk-mc/s1600/bloggertrix-twitter-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(http://1.bp.blogspot.com/-8FUcdaI0SwQ/UGEoVTiWRWI/AAAAAAAAEP8/NN3_sprT6Xo/s1600/bloggertrix-facebook-icon.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(http://4.bp.blogspot.com/-DMrSxx8BJqo/TteQx1ijO2I/AAAAAAAABF0/Qd1ROb_8oeA/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
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: 550px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
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%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#e7e7e7&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
    background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
}</style>
<script type='text/javascript'>
  WebFontConfig = {
    google: { families: [ &#39;Cabin+Condensed::latin&#39; ] }
  };
  (function() {
    var wf = document.createElement(&#39;script&#39;);
    wf.src = (&#39;https:&#39; == document.location.protocol ? &#39;https&#39; : &#39;http&#39;) +
      &#39;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&#39;;
    wf.type = &#39;text/javascript&#39;;
    wf.async = &#39;true&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
6.Now Find this tag by using Ctrl+F<data:post.body/>
7.Paste below code after <data:post.body/>

<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Updates and Like us on your Social networking site</h1>
<ul>
<li class='otrss'><a href='http://feeds.feedburner.com/bloggersstand' target='_blank'>RSS</a></li>
<li class='otgoogleplus'><a href='http://plus.google.com/115587840274121878323' target='_blank'>Google+</a></li>
<li class='ottwitter'><a href='http://twitter.com/bloggersstand' target='_blank'>Twitter</a></li>
<li class='otfacebook'><a href='https://www.facebook.com/bloggersstand' target='_blank'>Facebook</a></li>
</ul>
</div>
<br/>
<div style='text-align: left; display: inline-block;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech&apos;,
 &apos;popupwindow&apos;,
&apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogggersstand'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailtext' 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='sub-button' title='' type='submit' value='SignUp'/>
</form></div></div>

  • Change bloggersstand with your Facebook username.
  • Change bloggersstand with your twitter username.
  • Change bloggersstand with your Rss Feed username.
  • Change 115587840274121878323 with your  google plus username.
8.Now Save Your Template...Done !
Stylish Rss Feed Subscription Box Widget with social media buttons icons for blogger blogspot,rss feed email subscription below blogger post title or bottom to share content box with social media buttons gadget
In this tutorial i'm going to explain how to add stylish rss subscription box with social me...
SUMMARY

Stylish Rss Feed Subscription Box Widget with social media buttons icons for blogger blogspot,rss feed email subscription below blogger post title or bottom to share content box with social media buttons gadget

You Might Also Like:

We hope this article helped you to learn Stylish Rss Feed 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 "Stylish Rss Feed 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