شرح اضافة صندوق الفيس + تويتر + rss + email الاحترافى فى مدونات بلوجر

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
   font-family: 'Oswald', sans-serif;
   margin: 15px 0;
   overflow: hidden;
}
.w2bOldSocial ul li {
   float: left;
   width: 90px;
   padding: 0 0 0 55px !important;
   margin: 0 0 0 5px !important;
   line-height: 48px !important;
}
.w2bOldSocial ul li a {
   font-size: 20px !important;
   text-decoration:none;
   padding:0 !important;
   margin:0 !important;
   text-decoration:none;
}
.w2bOldSocial ul li a:hover {
   text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
   background: url("http://2.bp.blogspot.com/-HzL4OJ6FzmE/TeTFVVR1A4I/AAAAAAAAA4g/Eiju-1UObXU/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
   background: url("http://2.bp.blogspot.com/-YcW06xYPTM4/TeTFU1cvqbI/AAAAAAAAA4c/1fyAl6q9QRw/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
   background: url("http://3.bp.blogspot.com/-d8fPV2jD2p0/TeTFVkAMFOI/AAAAAAAAA4k/0jYlyJGVmXM/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
   background: url("http://1.bp.blogspot.com/-SfiMNXFU9TE/TeTFUbgc_SI/AAAAAAAAA4Y/THAqJLoo_vg/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
   display: block;
   clear: both;
   margin: 10px 0;
}
form.w2bEmailform {
   margin: 20px 0 0;
   display: block;
   clear: both;
}
.emailText {
   background: url("http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
   padding: 7px 15px 7px 35px;
   color: #444;
   font-weight: bold;
   text-decoration: none;
   border: 1px solid #D3D3D3;

   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;

   -webkit-box-shadow: 1px 1px 2px #CCC inset;
   -moz-box-shadow: 1px 1px 2px #CCC inset;
   box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
   color: #444;
   font-weight: bold;
   text-decoration: none;
   padding: 6px 15px;
   border: 1px solid #D3D3D3;
   cursor: pointer;

   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;

   background: #fbfbfb;
   background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
   background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
   background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
   background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
   background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

<div class="w2bOldSocial">
   <ul>
      <li class="w2brss"><a href="http://feeds.feedburner.com/way2blogging">RSS</a></li>
      <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=way2blogging" >Email</a></li>
      <li class="w2btwitter"><a href="http://twitter.com/way2blogging">Twitter</a></li>
      <li class="w2bfacebook"><a href="http://facebook.com/way2blogging">Facebook</a></li>
   </ul>
</div>
<div id="w2bEmailsub">
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Way2blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
      <input type="hidden" value="Way2blogging" name="uri" />
      <input type="hidden" name="loc" value="en_US" />
      <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailText" />
      <input type="submit" class="emailButton" value="SignUp" title='' />
   </form>
</div>