$1.99/Mo. for 12 months of Economy Hosting at GoDaddy.com

Pages

Showing posts with label Subscribe box. Show all posts
Showing posts with label Subscribe box. Show all posts

Awesome subscribe box with social media

This is a subscribe box with hover effect for blogger blog. This is all in one widget subscribe box which contains feed subscription, rssfeed, social media button ( twitter, facebook, pinterest). Subscribe box is very important for blog where visitor can submit their Email ID to receive updates from your blog, and by social media button they are connected with you and recive update from  your blog or website.



                                                          Live Demo

If you want to add this widget to your blog or website just follow below instruction :

1.  first of all sign in to your blogger account and click on " layout "
2.  Then Click on " Add a Gadget " tab.
3. Copy below code :
<style type="text/css">

#mysubform { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3a-qOSn4k0Sv6iOrpUJQstL7-XQWC3V3CkhzWzt7y9tfpN-MsWI0wkSXs-DMlFoasAm5-AOFU9PBBFRa2DYKJjNn8yieNQBDjtBi05kj7LgUXAVJiWB52ajadCPQAHu6hgHr3iiG89I/s128/back4.png);
    background-color: #0FF;  width: 300px;
    background-repeat: repeat-y;
    position: relative;  padding:5px; border-color:#0f599e;
        border:2px solid; } #message {  font-family: "Cooper Std Black";
    font-weight: bolder;
    font-size: 20px;
    text-align: center;
    display: inline-block;
    height: auto;
    width: 250px;
    text-shadow: 2px 2px 2px #666;
    color: #006; } #emailinput { font-family: "Comic Sans MS", cursive;  font-size: 12px; font-weight: bold; background-color: #CCC;
    background-position:center left;
    float: left;
    height: 30px;
    width: 150px;
    border-radius: 5px;
    border: thin solid #000; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5eRcsIzhO73oBpTb4KI2DNimT5SEWTNn8zJexsLxxTIHr7ksA1iPBO55BZRpZh6oZP9NAKrFxI-WugFkfomG0pr3oCXzvubBOIjM0asQDbWLyWMR7TizAHVqzWMAuylZC7_pv_3_dQ0/s1600/mesaage3.png);  background-repeat: no-repeat;
    padding-left: 25px;
    padding-right: 5px; } #emailinput:hover { -moz-box-shadow: inset 0 0 1px 1px #fff;
-webkit-box-shadow: inset 0 0 1px 1px#fff;
box-shadow: inset 0 0 1px 1px #fff;
} #submitbtn { text-decoration: none;
    background-color:transparent;
    border:none; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjA2b3Ylc_-oqaeJ-mrXERN23GzMTQFV-0-sJRLP-mjQveyfiHCD5D2O_jyNMWPI9gAeYZ62FBXo11SJHBsALzHRjQ-SfjD0aARxXuEmUuMA2DYoXYqySoajv3zw1x1Ctt4CgSumBTGb0/s128/submit.png);
    text-align: center;
    display: inline-block;
    height: 38px;
    width: 85px; } #submitbtn:hover { transform:rotate(7deg);
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq26SUDVCJOOASIt8XBr4SfuY0Gx3dANM6MXQBLJ7tS7XFzHM5VaUkqhKmsITsyz0cRYoxUUQtKJwPmWIrsAcWkti0xlEBzd21WIlNOnA93rEKJHO5G7dWqnlayEE6hCf7yTyQD92I7xw/s128/submithover.png);  cursor:pointer; } #followUS {  font-family: "Cooper Std Black";
    color: #006;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: block;
    height: 45px;
    margin-bottom: 0px; } #feedreadercount {
text-align:center; } #flike {
padding:10px; }#mysubform #socialbtncontain { text-decoration: none;
    text-align: center; } #mysubform #socialbtncontain #facebtn { text-decoration: none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIHuEzFSWX5xlvkUazAjrF-0P3qlWRSTn7_FEA479MEWCctJCUI2wYh4i09gZQECjXAOMq4yb10zWNjwT-F0UB8Hz1A6e2tW5jZxUO3OOVZePqa8YYL8h-Ez2WGi-PXJJUsXC1PAWGK6I/s45/faceebook60.png);
    background-repeat: no-repeat;
    text-align: center;
    display: inline-block;
    height: 45px;
    width: 45px; } #mysubform #socialbtncontain #facebtn:hover { transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfM-f-71URYTa-y-I2lYb7llZXM3SO5KRGRykLchKyhA6uzLeiWHXtb1E0Drt4xrTQQ88Z7G-muKDk7aJAa8YaCH8xfgSb-E4O7Q1C9RuOChGlqp2GdQHXtSqCxMEpLhsFAxTbb158vGw/s45/facebook%2520haver.png); } #mysubform #socialbtncontain #twittbtn {  text-decoration: none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj52fF7WTlNHDrfPJlsR0zvbHsVozNtie2v4D2GFf_jK_g8UZ07WyvKpjUhhD6MvB6t8N7BrgcAPFlu9BOcgqQ957ionsxT2YBujsIxFHIDvRXAFGHCQgwyY31NaSy-q37Nyh-jIAogSSQ/s128/twitter.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 45px;
    width: 45px; } #mysubform #socialbtncontain #twittbtn:hover {  transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2BAbD7PpIMxEhWW2uprT3kFsL9oHcxWXVqqFHqxFXFFtvSCU8B6QR9yxFComr_5GJErGaPhFEOb8xSlsSRMQDUWyZlcgnVGJQ4aIcos5aMc7z-RqeODwXUJv5_sYQbSwTsa0jWikGig/s128/twitterhover.png); } #mysubform #socialbtncontain #gplusbtn { text-decoration: none;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3yLvthjU7I7FckDF9-OkILv0ADmO1NLc0hPdKwHO1n2tpfamVQtReaW8R9_GBVDqiaOGaAVKQREMwHDtfLGM45pvfg7MFFt3pQ6F9_1J05lsvS6oanWgiUyplG2eA8IwXEAxhZDOyvGE/s128/gplus.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 45px;
    width: 45px; } #mysubform #socialbtncontain #gplusbtn:hover { transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0yEysUpqAn8Iq_XEkqJVyAbD-DX-IH-yTdxOntYo9qm6yCZ8TpS7UgPj_dgZtisv7_KZRwW3idmPFzNoMD1uTLRCI94ErEIefuLowgZVNGq5tU4zTQc8khIaPKppnv1y3h8DZHBC8Ngs/s128/gplushover.png); } #mysubform #socialbtncontain #pintbtn {  text-decoration: none;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirUk85Lax38GrqkE4hYyua7z932YMu2KL1MPnQYUCPlK8jBAXq78tfsYHaI5VHZGeqUBwjiALfyAOv2qLz6aevGwQ0jPA2-VYIAw2AsBsA0YUZXrLykkMKNXghC2NQqQ1xIbuC8GVapkg/s128/pinterest.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 45px;
    width: 45px;} #mysubform #socialbtncontain #pintbtn:hover { transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiZ739vrZC0hyphenhyphenLSwLASC7pa9HBJaht7btpnMP6vZA4DLJqE0XRlkDeLokrOgsNK9V9w_bz3QhW2RbgHsDY7PrN1f2BAQGUlhQ7dsr22tEQRMRl0mvo4tjkhh0d6A_gtEChyPquJ13SUuM/s128/pinteresthover.png);
    } #mysubform #socialbtncontain #rssbtn { text-decoration: none;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgenHQDefZYL0Tu960Bsz1NzK4QVyNB6yyd9Etsdo9ux8IZ3zZGJ5fOCV5BgNojGmwmqigCSdpHHGUHcktFQKen9wBAYF9c7gtDP90rNBkDuiL0LUQXJnoysCZzmcqvuQdYE_3YXwn4ABg/s128/rss.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 45px;
    width: 45px;
}#mysubform #socialbtncontain #rssbtn:hover { transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMljF2HaD4BvydKIv8gwwDOKCP8EWzgbNUi5WTqoKtpT7-5LjIeh9pekpWdXINnzLJqPUgBggi3vv20IqTrIALZItCsgfuoap4GtiKFgVg4zlHQ7n0y1bPSjIkW1qxekpHvfarYykejvY/s128/rsshover.png);
    } #mysubform #mycreditlink {
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    display: block;
    color: #D6D6D6;
    margin-top: -10px;
    float:right;
    height: 10px;
    width: 70px;
    text-decoration: none; } #mysubform #mycreditlink a {
text-decoration:none;
    margin-bottom: 4px;
} </style>
<div id="mysubform">
<div id="flike">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Furduhindiblog&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font=verdana&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe>
&nbsp;

<div class="g-plusone" data-annotation="inline" data-width="150"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>


</div>
<hr/>
<a href="http://pinterest.com/USERNAME/"><img src="https://s-passets-ec.pinimg.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a>
&nbsp;
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.urduhindiblog.com%2F&media=http%3A%2F%2Fwww.urduhindiblog.com%2F" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
<hr/>
<p id="message">Get Free Update via E-mail</p>


<form action="http://feedburner.google.com/fb/a/mailverify" style="padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Feedburnur ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<p><input id="emailinput" name="email" type="text" value="Enter your email address:" onclick="this.value=&#39;&#39;;" />

&nbsp;
<input value="Feedburner ID" name="uri" type="hidden" />

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

<input id="submitbtn" value="" type="submit" /></p></form>
<div id="feedreadercount">
  <p><a href="http://feeds.feedburner.com/Feedburner Name"><img src="http://feeds.feedburner.com/~fc/Urdu-HindiBlogger?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
</div>

<div id="socialbtncontain">

    <a id="facebtn" href="your facebook url"></a>
    <a id="twittbtn" href="your twitter url "></a>
    <a id="gplusbtn" href="your gplus url"></a>
    <a id="pintbtn" href="your pinterest url"></a>
    <a id="rssbtn" href="your rss feed url"></a>
   
</div>
<hr/>
<div id="mycreditlink">
<a href="http://www.urduhindiblog.com">Get this >></a></div>

</div>
4. Select " HTML/JavaScript " and paste above code and click save and you are all done!

Change Highlighted area with with your feedburner id and social profile url
Read More