صندوق إشتراك جذاب بتقنية CSS3 إلى بلوجر

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

مثال للصندوق :

http://bluegrey-hb.blogspot.com/

طريقة الإضافة :

1 - قم بتسجيل الدخول إلى مدونتك بلوجر.

2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.

3 - قم بالبحث عن :

]]></b:skin>

أضف قبله هذا الكود :

----------------------Social Newsletter Widget By www.homeblooger.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/AVvXsEjj0dZkmIJJ6eHUvuu5caBY1_iUnDWnI1c8UDsWFY26D6zfeaB3xs2_SFknmHxYE3Jw9ctHrGTUQWGdPWdffqkuB8wpMFZRmV5tS26sbZ_6tUMIzbA77GDvjpvc_tTv2QVJUxJTH0BadAg/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCki75dGl-bZlUeOasL2nRnDbqjswJQY4pTiud9eRTMqIE9jA9YcTfg94F36gxZJASLFYbW4SfeCn_3T2hJRAcp-BtHx_l4IBOxVyslmFWgRErBBMGKgSxVrSAOn9KHzRPUBermRaQLI/s1600/ico-social-twitter.png) no-repeat;
}
.social .social-facebook {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ZjoxViWsJwGgn0zZKxH5nI1sMK5EjWNJcW9PxXbteYrAjSu5idw_0cPfQMTTq5kJaSHZWjGPyB3lNJTyQG1_W5kezpzrRzkK_w0MLrqjoayMc1vZMGl_vm3zJ-8zM7VzUlVZOWP-B2w/s1600/ico-social-facebook.png) no-repeat;
}
.social .social-youtube {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhULpZEVk8MiMcbXb3hTmBa50cXWjSuPTzra5Zugu_HJjp5Bv9DC72o5EZFzmO-dYG4lqschoqIavzz2v34_KTbh9s0fdwssCucSpPUaa844uIBpS-NwgnDheKtBX4AHZs0P-0yoe2TWV0/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/AVvXsEiR3DxuTlJ-W7YM1ygNyYD3nPKx22K2Mp-uYCzZ4Pqs9NfSe4bvWYJMTcZDO2mdsBVR6OTpwviEsG91fc0YGirKMMgrIC7ThS7cW4i80WUur3DwaqetPkrOqkMgr4xy7zPvmEPUqdqah0bs/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%);
}

4 - الأن قم بحفظ القالب وتوجه بعدها إلى تصميم أو تخطيط.

5 - ثم إضافة أدة.

6 - إختر HTML/JavaScript .

5 - بعدها في الحقل الأول ضع إسم الأداة مثلا إشترك في الموقع أو إنضم إلينا..... ثم ضع في الحقل الكبير هذا الكود :

<div class="widget-content">
<div style="border: 1px solid DodgerBlue; padding: 1mm;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilMT1XgfqBqrpY9-WCYnA5w6yyM-jZnvuxM3tmt48SKFqY0J7ibtkDxgWjcgVvLTrQrZU7SWfRjX6g_iQAMyIQ0W2pBMr8MhxuCIcUjJtIFxyDVm7R2kgm9S8IR5Z8Jt1jbY1BNDVZwUE/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/Homeblooger" rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="http://twitter.com/Homeblooger" rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="http://feeds2.feedburner.com/Homeblooger" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href="http://www.youtube.com/user/Homeblooger" 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://homeblooger.blogspot.com/" target="_blank" title="Blogger Widget"><span style="font-size: xx-small;">Blogger Widget »</span></a></div>
</div>
</div>

قم بتغيير ما هو بالأحمر بما يناسب موقعك

08 فبراير 2013