Sunday, November 11, 2012

Social Media Widget With Rss Subscribe Box

In this post, im gonna explain how to add nice social sharing button with Rss Subscribe box. So, you can link your social notwork URL with this widget.It will helps to get some more followers.You can add it with easy steps.try it.you can  get my other social media widgets by clicking here

socialmedia-widget-with-subscribe-box-for-blogger
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<style>
#socialnbtrix{
width:244px;
padding:10px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm7og37ZsFFoNj8M7hb6FRyINL1z3UuYs6PIH0LtrlrWedM0EMGA9hML1SmwEQ1h1K88QXmg8HsczLFjdaTE1w7JSldlzZNQD-rYIPFUTw5mWHiMea4pQneKe63o6veBRZ5fdURN5Rrwk/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#socialnbtrixp img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);}
bloggertrixform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.bloggertrixtxt{
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;
}
.bloggertrixbtn{
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="socialnbtrix">
<center><p id="socialnbtrixp">
<a href="YOUR RSS FEED URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1FFRlMyr71OjCN0nnXYMPnZ5sxMPQYoO45u3YUI22M8xIF4mUW3MT_kLlUXGPcePZ1Ok6jR5Ad4gSngGyr43FgljRmHADXm2SWojW03TN7XEqkv6q2ZPsaAqY2RbEHH2Gp0DJBE5my8q/s1600/RSS-48x48.png " /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJpnW2f2HEgFoYpu7FK5o2ivPO71peKOxkYz3uSxk9zRs5-7LBFJFcG0G6vloYv2TlZ6t8239_LGdZyTG9y9Bw5Lng4YLsDVC79Vwq_dpjgp7pcdRx7zfGBveIRhYCBpofs3tB1wjcU4/s1600/TNT.png " /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5JkihNx-2lxWXr-bfgSfNdYCo1hppsPvm5V5lQ-ma0-bJ00wClKusftQ7CiFSXzq_tea91SHcUaZCtWaNRS11ZxFaHySZvJ1xCkGVJX3O5_yXr8OrFkMCLr6STYbI0vTmyMJHQ6zNaxQ/s1600/TNT.png " /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2F_Xl_LSViw-0XtoD65GJbhgSBof2ogSFtLe73QVfH8ViQTGlnCNUu2M3q5V5xGX8m6W48SLrJBtfeJN3PND2L0Zs2WVv1hMxP7eEpByiswFFSZD4a9D0l6KUj-mEFiOJZ_8vvvSeNiQ/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='bloggertrixbtn' title='' type='submit' value='Submit'/>
</form><center>
</div>





Replace with your URLs where i highligh with red color text.

7. Now save your HTML/Javascript'.

    You are done...

2 comments:

  1. This is great :) thank you so much. It made my blog look a little better, I was able to get rid of some of the clutter!

    ReplyDelete
  2. @Dawn Justice
    Thanks for the comment

    ReplyDelete