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">4. Select " HTML/JavaScript " and paste above code and click save and you are all done!
#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&send=false&layout=button_count&width=100&show_faces=false&font=verdana&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe>
<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>
<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='';" />
<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&fg=444444&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>
Change Highlighted area with with your feedburner id and social profile url
No comments:
Post a Comment