إضافة صندوق إشتراك جميل بتقنية css لمدونة بلوجر

 

----------------------Social Newsletter Widget  -----------------------------

/* Social &Newsletter Widget *//* Social */.social {

background:#fcfcfc;

height:80px;

padding:0 15px;

border-bottom:1px solid #f0f0f0;

}

.social li {

float:right;

width:52px;

margin-left:15px;

text-align:center;

}

.social li.last {

margin-right:0;

}

.social li a {

opacity:0.6;

filter:alpha(opacity=60);

font-size:11px;

color:#666;

padding-top:42px;

line-height:34px;

}

.social li a:hover {

opacity:1.0;

filter:alpha(opacity=100);

color:#666;

text-decoration:none;

}

.social .social-feed {

display:block;

background:url(http://2.bp.blogspot.com/-rmq41pgw07...social-rss.png) no-repeat;

}

.social .social-twitter {

display:block;

background:url(http://4.bp.blogspot.com/-Sl_ER6EMfg...al-twitter.png) no-repeat;

}

.social .social-facebook {

display:block;

background:url(http://2.bp.blogspot.com/-uGVQ0Uj3rZ...l-facebook.png) no-repeat;

}

.social .social-youtube {

display:block;

background:url(http://3.bp.blogspot.com/-qfHvHZZSPG...al-youtube.png) no-repeat;

margin-right:0;

}

form.emailform {

margin:20px 0 0;

display:block;

clear:both;

}

.emailtext {

background:url(http://3.bp.blogspot.com/-SoB4RN7Bch...8/w2b-mail.png) no-repeat scroll 4px center transparent;

padding:7px 15px 7px 33px;

color:#444;

font-weight:bold;

text-decoration:none;

border:1px solid #D3D3D3;

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;

-moz-box-shadow:1px 1px 2px #CCC inset;

-webkit-box-shadow:1px 1px 2px #CCC inset;

box-shadow:1px 1px 2px #CCC inset;

}

.ebutton {

color:#444;

font-weight:bold;

text-decoration:none;

padding:6px 15px;

border:1px solid #D3D3D3;

cursorointer;

-moz-border-radius:4px;

-webkit-border-radius:4px;

-goog-ms-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%);

filterrogid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4', GradientType=0 );

background:linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

}

<div class="widget-content">

<div style="border: 1px solid DodgerBlue; padding: 1mm;">

<center><img
src="http://1.bp.blogspot.com/-05nCa_r6BsI/TwhrRwYTvhI/AAAAAAAAA74/t3j83HBdPVQ/s1600/email-px-png.png"
 /></center>

<center><span style="font-size:16px;font-weight:
bold;;">توصل بكل المواضيع الجديدة ،كن السبّاق وقم بإدخال بريدك
الإلكتروني و إنتظر الجديد</span>

<ul class="social">

<li><a class="social-facebook" href=”th3xd” rel="nofollow"
rel="nofollow" target="_blank">Facebook</a></li>

<li><a class="social-twitter" href=”anasnokri” rel="nofollow"
rel="nofollow" target="_blank">Twitter</a></li>

<li><a class="social-feed" href="th3xd" rel="nofollow" rel="nofollow" target="_blank">RSS</a></li>

<li><a class="social-youtube" href=”anasnokri” rel="nofollow"
rel="nofollow" target="_blank">YouTube</a></li>

</ul>

</center>

<form action="http://feedburner.google.com/fb/a/mailverify"
method="post" rel="nofollow" target="popupwindow" class="emailform"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=th3xd',
 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input type="hidden" value="softechnogeek" name="uri" />

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

<input type="text" value="أدخل بريدك الإلكتروني..." name="email"
class="emailtext" onblur="if (this.value == "")
{this.value = "أدخل بريدك الإلكتروني...";}"
onfocus="if (this.value == "أدخل بريدك الإلكتروني...")
 {this.value = ""}" />

<input type="submit" class="ebutton" value="إشترك" title="" alt="" />

</form>

<center>

<span class="Apple-style-span" style="color: rgb(51, 51, 51);
font-family: 'trebuchet ms', Trebuchet, Arial, Verdana, sans-serif;
font-size: 10px; font-style: italic; background-color: rgb(255, 255,
255); "></span>

</center>

<div dir="ltr" style="text-align: left;" trbidi="on">

<a href=http://th3xd.blogspot.com/ rel="nofollow" target="_blank"
title="Blogger Widget"><span style="font-size:
xx-small;">Blogger Widget »</span></a></div>

</div>

</div>