Subscribe Us Widget For Blogger

Today I have a cool subscribe us widget to share with blogger users. This widget has cool social follow us buttons which rotate on mouse hover. You can also make further adjustments in this cool widget according to your template requirement.

First let’s have a demo of my subscribe us widget for blogger. To have a live demo of this widget, please click demo button:

DEMO

To install this widget, first go to Blogger> Your Blog> Layout and now click on Add a Gadget button and choose HTML/Javascript as shown below:

Now copy and paste the below given code in the empty content area:

<style>

.swh {

background: #FFFFFF;

float: left;

margin: 0 10px 0 0;

padding: 4px;

border: 1px solid #E6E6E6;

-moz-border-radius: 130px;

-webkit-border-radius: 130px;

border-radius: 130px;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

padding:4px;

border:1px solid #fff !important;

width:40px;

height:40px;

}

.swh:hover {

border-radius: 0 0 0 0;

-moz-transform: scale(1.2) rotate(-711deg) ;

-webkit-transform: scale(1.2) rotate(-711deg) ;

-o-transform: scale(1.2) rotate(-711deg) ;

-ms-transform: scale(1.2) rotate(-711deg) ;

transform: scale(1.2) rotate(-711deg) ;

}

.mic {

text-align:center;

}

.overall {

background-color: #2CB7FF;

border: 5px dashed rgb(125, 9, 250);

}

.overall h4 {

color:black;

transition: color 1s;

}

.overall h4:hover {

color: purple;

}

</style>

<div class="overall">

<h4 style='text-align:center;'> Subscribe to our Newsletter and get free updates</h4>

<div class='mic'>

<a href="http://facebook.com/ArticlesTeller" imageanchor="1"><img class='swh' border="0" src="http://articlesteller.com/wp-content/uploads/2015/06/facebook-icon-circle2.png"/>

<a href="http://twitter.com/HusnainMz" imageanchor="1"><img class='swh' border="0" src="http://articlesteller.com/wp-content/uploads/2015/06/twitter2.png"/>

<a href="https://plus.google.com/u/0/b/110850958606334699850/+Articlesteller/" imageanchor="1"><img class='swh' border="0" src="http://articlesteller.com/wp-content/uploads/2015/06/google-plus-icon2.png"/>

<a href="https://www.pinterest.com/hmeerzadeh/" imageanchor="1"><img class='swh' border="0" src="http://articlesteller.com/wp-content/uploads/2015/06/pinterest-icon12.png"/><div>

<br /><br /><br /><br />

<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>

    <b:includable id='main'>

  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></data:title></h2></b:if>

  <div class='widget-content'>

    <div class='follow-by-email-inner'>

      <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true&quot;' method='post' target='popupwindow'>

        <table width='100%'>

          <tr>

            <td>

              <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>

            </td>

            <td width='64px'>

              <input class='follow-by-email-submit' type='submit' value='Submit'/>

            </td>

          </tr>

        </table>

        <input expr:value='data:feedPath' name='uri' type='hidden'/>

        <input name='loc' type='hidden' value='en_US'/>

      </form>

    </div>

  </div>

  <span class='item-control blog-admin'>

    <b:include name='quickedit'/>

  </b:include></span>

</b:includable>

  </b:widget></div></a></a></a></a></div></div>

Do not forget to replace my social media pages URL with your social pages URL, For example replace facebook.com/ArticlesTeller with your original facebook fan page URL.

To change background color, Please replace background: #FFFFFF; with your desired color. If you want to change the border color, please replace rgb(125, 9, 250) with your desired color.

If you want to change the border style, then please find this line “border: 5px dashed rgb(125, 9, 250);” and replace dashed with your css style.

Here are some cool border styles for css.

Now click on save button, Your Subscribe us widget should now work on your blog however if you have any further queries then please let me know in comments.