طريقة وضع ايقونة إشتراك رائعة على مدونة Blogger شرح بالفيديو

بسم الله الرحمان الرحيم

كلنا اليوم يسعى لإضهار مدونته بأحلى مضهر ولدالك جأتكم اليوم بطريقة سهلة لوضع صندوق الإشتراك بشكل رائع مدمج بأيقونات أخرى

سأترككم مع الفيديو:

    ]]></b:skin>

الكود الاول


   ----------------------Social Newsletter Widget By www.ma3lo-1ma.blogspot.com-----------------------------
/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWuEZ4dpdWyYJ4IKGMY5mDavBN6ZeRNIBSc9aH5AWmV9eDcZdpqe35-JFK7EdpDm9JWU01mNttwAQZqjzSz13UUNY-NcvkQdxLdq8Fijt1s5FKrsxXY8d8XSKewwZQTnpaD6MvGUUGf8/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ1Bi29JcfEnVDhxhsH28twPuuyYmoZc77UDrMXjhyphenhyphenEa8gH9ZYPtDcot5W0YYv3Hq5flj_N-QWZ7WDJdmYiEIhMItVZlYudzpQSL5diY70mxQFhyHfpu0hdJSmB8uWO-xsY4wqyxQG28w/s1600/ico-social-twitter.png) no-repeat;
}
.social .social-facebook {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgF5bwroyrL4iirla5lPLICOYh-qQI3DKl_42DoR0qSedUKSXPc7FDQgIGnHrgbHDW_g73tvmxshfItym52Av_CxiNWHfd2ynYTnusP8_aTH_qzvnOfUQqpaKXWypL8kwuIRgZmEmdHiA/s1600/ico-social-facebook.png) no-repeat;
}
.social .social-youtube {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZdfGKP9873ZNPoehKeChwIoSxB__AqoDEO39j9NSzhYsT5l-cz7hey08x_ISTrB5fGsib3_b1c_Og7-kJmoNHtmBXOcbpXQ9T_8CMWOJHQQuSa_5tOYmAVkePQbSa30KL6A3mVdwrHJI/s1600/ico-social-youtube.png) no-repeat;
margin-right:0;
}
form.emailform {
margin:20px 0 0;
display:block;
clear:both;
}
.emailtext {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bABfiXHgjNtw3D8ZU7MRAO7BJE_Y5rKwSHbuBXfcTUFajm-UO2wuCexWbCELSK6xqz3ArytmKE8Rl-8YgzPiih8DYvxv88zh34y6c_m_YPFQKtFOY6cgRmurhE0aK0-zBp5TX8-clhZe/s28/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;
cursor:pointer;
-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%);
filter:progid: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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYNLtCthtqjK9zKjDKbFMOUwj_sVB-pNmK3XAVQwxatGc5KWqFDJsE7oA8l1hLscdkdjDQHreRcvdTPA-6cQ8H2_Ec7td6jT1rTHv7iLKoClhvcVgD8v4kpRVYzkn1Wu7VyzXrJcui9QU/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="https://www.facebook.com/xxxxxxx" rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="http://twitter.com/xxxxxxx" rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="http://feeds2.feedburner.com/xxxxxx" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href="http://www.youtube.com/user/xxxxxxxx" rel="nofollow" target="_blank">YouTube</a></li>
</ul>
</center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" class="emailform" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=xxxxx', '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://ma3lo-1ma.blogspot.com/" target="_blank" title="Blogger Widget"><span style="font-size: xx-small;">Blogger Widget »</span></a></div>
</div>
</div>