Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
<style>
#socialbox{border:2px solid black;
width:270px;padding: 5px 5px 5px 5px; }
img.beintouch:hover {
background: none repeat scroll 0 0 #ffbc99;
border-radius: 16px 16px 16px 16px;
box-shadow: 0 0 10px #ffbc12;
}
.emailtext {
background: url("http://www.matrixar.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/s1600/mailbox.png") no-repeat scroll 4px center transparent;
border: 1px solid #7E4E27;
border-radius: 4px 4px 4px 4px;
box-shadow: 1px 1px 4px #7E4E27 inset;
color: #444444;
font-weight: bold;
margin-left: 2px;
padding: 7px 15px 7px 35px;
text-decoration: none;
width: 120px;
}
.ebutton {
background: #D55959;
border: 1px solid #D3D3D3;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
margin-left: -18px;
margin-top: 5px;
padding: 6px 15px;
text-decoration: none;
text-shadow: 1px 1px 0 #000000;
}
</style>
<br />
<div id="socialbox">
<table align="" cellpadding="1px" cellspacing="0px" style="width: 290pxpx;"><tbody>
<tr><td>
<a href="http://facebook.com/YOUR-FACEBOOK-USERNAME" rel="nofollow" target="_blank"> <img class="beintouch" src="http://www.matrixar.com/-NuK5y-gO46Y/URoPuaRX36I/AAAAAAAAGvM/dXyVF3SaTHU/s1600/bloggertrix-facebook-icon.png" /></a></td><td>
<a href="http://twitter.com/YOUR-TWITTER-USERNAME" rel="nofollow" target="_blank"><img class="beintouch" src="http://www.matrixar.com/-d1_O0ki5Muk/URoPu8yXvBI/AAAAAAAAGvs/jAIKiDZ76VU/s1600/bloggertrix-twitter-icon.png" /></a></td><td>
<a href="http://pinterest.com/YOUR-PINTEREST-USER-ID" rel="nofollow" target="_blank"><img class="beintouch" src="http://www.matrixar.com/-Eiup_nW2ZKM/URoPuQtPP_I/AAAAAAAAGvQ/8YM4qXuzNRo/s1600/bloggertrix-pinterest-icon.png" /></a></td><td>
<a href="https://plus.google.com/YOUR-GOOGLEPLUS-USER-ID" rel="nofollow" target="_blank"><img class="beintouch" src="http://www.matrixar.com/-fSMn88IbMzI/URoPuTkJ71I/AAAAAAAAGvU/7EjpWnBYAP0/s1600/bloggertrix-google-icon.png" /></a></td><td>
<a href="http://feeds.feedburner.com/YOUR-FEEDBURNER-USERNAME" rel="nofollow" target="_blank"><img class="beintouch" src="http://www.matrixar.com/-kb9t36s2YMw/URoPu6ZWQ0I/AAAAAAAAGvg/7CQVi-gg3BQ/s1600/bloggertrix-rss-feed-icon.png" /></a><a href="http://marks-mbs.blogspot.com/"></a></td></tr>
</tbody></table>
<div>
<center>
<b>Get Latest Articles By EMAILS </b></center></div>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-USERNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="YOUR-FEEDBURNER-USERNAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailtext" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." />
<input alt="" class="ebutton" title="" type="submit" value="Subscribe" />
</form>
</div>
Friends, This is a special widget to your blogger, It work with CSS code with mouse hover effect. This is a stylish widget, buttons are arranged vertically. You can add this widget without effort .Keep read this post and add this widget into your blogger.
Log in to your blogger account.
<style>
#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('http://www.matrixar.com/-ideGImN96dw/UTWB6QXCL_I/AAAAAAAAHHE/6qR4e2z-QUw/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#BT_social span:hover {visibility: hidden;}
#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BT_social .icon {color: #fafafa;overflow: hidden;}
#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}
#BT_social li:hover .icon {width: 250px;}
#BT_social li:hover .icon {background-color: #d91e76;}
#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<br />
<ul id="BT_social">
<li><a class="icon fb" href="http://www.facebook.com/YOUR-FACEBOOK-USERNAME">Like us on Facebook</a>Like us on Facebook </li>
<li><a class="icon twit" href="https://twitter.com/YOUR-TWITTER-USERNAME">Follow us on Twitter</a>Follow us on Twitter </li>
<li><a class="icon google" href="https://plus.google.com/YOUR-GOOGLEPLUS-USER-ID">Follow us on Google+</a>Follow us on Google+ </li>
<li><a class="icon rss" href="http://www.feedburner.com/YOUR-FEEDBURNER-USERNAME">Subscribe via RSS</a>Subscribe via RSS </li>
</ul>
Change highlighted RED color with your social media username/ID
Leave a comment ….. if this widget is not working…………………………..
2013, By: Seo Master