إضافة صندوق للأزرار الإجتماعية و الإشتراك في الخلاصات

السلام عليكم,اليوم اقدم لكم صندوق مميز خاص يحمل ازرار الشبكات الاجتماعية ''فيسبوك,تويتر,يوتيوب,الخلاصات''والاشتراك بالبريد الالكتروني كما مبين في الصورة الموجودة اعلاه الازرار تعمل بتقنية Css3 يمكنك تجربة الاضافة بنفسك على موقعك.نأتي الى تطبيق الاضافة والطريقة كالتالي :

/* Social &Newsletter Widget *//* Social */.social { background:#fcfcfc; height:70px; padding:0 10px; 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://cdn5.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/48/rss.png) no-repeat; } .social .social-twitter { display:block; background:url(http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/48/twitter.png) no-repeat; } .social .social-facebook { display:block; background:url(http://cdn5.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/48/facebook.png) no-repeat; } .social .social-youtube { display:block; background:url(http://cdn5.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/48/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/AVvXsEiXJ0EPvf0630THSC0i2kzqCVB4wdGSL5wV0pujnqRfPs7tAJEoiNjq4Dj7MeY1QoOzbcQd8FLSZ9KUXiD7QtNZWPl_VmMLUhTG6WW0ZqmRGvYsl_Hp3tfhZdMJx862xp-Wmel3QLI9IKjH/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%); }           

قم بحفظ القالب وتوجه الى تخطيط قم بالضغط على اضافة اداة واختر HTML/JavaScript والصق هذا الكود داخله                      

<div class="widget-content">
<div style="border: 1px solid DodgerBlue; padding: 1mm;">
<center><img src="http://im16.gulfup.com/2012-08-21/1345550379231.png" /></center>
<ul class="social">
<li><a class="social-facebook" href="https://www.facebook.com/xxx" rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="https://twitter.com/xxx" rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="http://hassobe.blogspot.com/feeds/posts/default" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href="http://youtube.com/user/xxx" rel="nofollow" target="_blank">YouTube</a></li>
</ul>

<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=blogspot/hassobe', '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 == &quot;&quot;) {this.value = &quot;أدخل بريدك الإلكتروني...&quot;;}" onfocus="if (this.value == &quot;أدخل بريدك الإلكتروني...&quot;) {this.value = &quot;&quot;}" />
<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">
</div>
</div></div>

مع تغيير ما باللون الأزرق بروابطك ننتظر تعليقاتكم الرائعة .