نشاهد المثال هنا
https://sfehthayef.blogspot.com/p/blog-page_25.html
وهذا الكود
<style type="text/css">
.wg-roumash{
padding:10px;
margin:auto;
width: 100%;
height:60px;
}
.wg-roubbb{
background: #000;
}
.wg-roubbb{
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}
.wg-roubbb:hover{
background:#ddd;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.wg-roubbb img{
padding-top:5px;padding-left:5px;
}
#wg-mashmini {
width:100%;
margin:auto;
padding:0px;
}
.wg-mashmnbx {
background-color:#000;
border:1px solid #fff;
border-top:1px solid #fff;
overflow:hidden;
padding:12px 16px;
}
.wg-mashmnbx form {
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
}
.wg-mashmnbx input.emailu {
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
color:#999;
width:100%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font-size:13px;
padding:7px 10px 8px;
}
.wg-mashmnbx input.submitu {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#000;
font-weight:700;
font-size:12px;
float:right;
cursor:pointer;
padding:7px 14px;
}
.wg-mashmnbx input.submitu:hover {
text-decoration:none;
}
.wg-bttnwht {
border:1px solid #fff;
text-shadow:1px 1px 0 #fff;
background-color:#fff;
}
.wg-bttnwht:hover {
background-color:#DCDCDC;
}
</style>
<div class='wg-roumash'>
<div class='wg-roubbb'><a href='http://www.facebook.com/#' target='_blank'><img border='0' src='https://icons.iconarchive.com/icons/lunartemplates/modern-social-media-circles/48/Facebook-icon.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.twitter.com/#' target='_blank'><img border='0' src='https://icons.iconarchive.com/icons/ampeross/smooth/72/Twitter-icon.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='https://icons.iconarchive.com/icons/sicons/basic-round-social/48/google-plus-icon.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='https://icons.iconarchive.com/icons/sicons/basic-round-social/72/youtube-icon.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='ص rss'/></a></div>
</div>
<div id="wg-mashmini">
<div class="wg-mashmnbx">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=#', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="أدخل بريدك الإلكتروني" type="text"/>
</td>
<td width="64px">
<input class="submitu wg-bttnwht" type="submit" value="الإشتراك"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="#"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
</div>
0 التعليقات :
إرسال تعليق