Mouse Hover Effect Email subscription widget for blogger

This post is written by our guest author.Check how to become a guest author in True Blogger Tricks

Hello Friends I Am Rajat A Co- Author At TrueBloggertricks. Today  I am sharing how to add an stylish mouse hover effect subscribe us widget which is used by lordhtml. It is A cool and simple widget that you can easily add in your blogger sidebar.  Please Continue..

How To Add An Subscribe Us Widget Like Lord Html

• Go TO Your Blogger Dashboard
• From The Drop Down Menu Choose Layouts
• Then CLick On Add A Gadget
• From The Pop Out Menu And Choose Html/Javascript
• THen Paste The Below COding 

<style>

.subscriptionboc

{

 border-style:solid;

 border-width:2px;

 border-color:#000;

 padding:20px;

 width:250px;

    background:#fff;

transition: box-shadow .777s;

-webkit-transition: box-shadow .777s;

-moz-transition: box-shadow .777s;

-o-transition: box-shadow .777s;

-ms-transition: box-shadow .777s;

}

.subscriptionboc:hover

{

 -moz-box-shadow:    inset 0 0 10px #000000;

   -webkit-box-shadow: inset 0 0 10px #000000;

   box-shadow:         inset 0 0 10px #000000;

}

.paratraf

{

     font-size:20px;

    font-family:&#39;georgia&#39;;

    text-align:center;

color:#000;

}

.feed-links{display:none;}

.enteremail

{

   background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;

    border-radius: 4px 4px 4px 4px;

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;

    color: #8B8B8B;

    padding: 10px 40px;

border-style:solid;

 border-width:2px;

 border-color:#CACACA;

}

.forspace

{

    padding:15px;

}

.button45

{

     background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;

    border: 0 none;

    border-radius: 4px 4px 4px 4px;

    color: #FFFFFF;

    cursor: pointer;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-weight: bold;

    padding: 10px 40px;

    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

    background:#249334;

    border: 0 none;

    border-radius: 4px 4px 4px 4px;

    color: #FFFFFF;

    cursor: pointer;

    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;

    font-weight: bold;

    padding: 10px 40px;

    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

}

</style>
<div class="subscriptionboc">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=truebloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">For Latest news And Updates Sign Up</div><p>         <div class="forspace">
            <center>
                <input class="enteremail" type="text" style="width:140px" name="email" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}"/></center></div>
        </p>
   
        <input type="hidden" value="truebloggertricks" name="uri"/>
   
        <input type="hidden" name="loc" value="en_US"/>
                    <center>
        <input class="button45" type="submit" value="Sign Up" /></center></form>
</div>

• In The above coding replace truebloggertricks with your feedburner username

• Thats All Save The Widget

Posted by Guest Author,Rajat Garg
Hello This is Rajat ,from India, I like to explore the ways of blogging, smart earning methods,Likes to clone templates.
Visit My Blog My Premium Lab | Follow Me On Twitter Or Facebook