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

                                      السلام عليكم و رحمة الله تعالى و بركاته و هلا بكم

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

لإضافتها اتبع الخطوات التالية :

1- ادخل الى مدونتك عن طريق الرابط التالي:

http://blogger.com/

2- اضغط على "قالب" بجانب مدونتك

3- ستفتح لك صفحة التصميم ، اضغط على "تحرير html"

4- ابسط اكواد القالب عن طريق وضع علامة صح في المربع "توسيع عناصر قوالب واجهة المستخدم"

5- ابحث عن الجزء التالي (اضغط crtl+F للبحث) :

]]></b:skin>

ثم الصق الكود التالي قبله مباشرة:

----------------------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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhQ0udVz1EBIy-1aPGXHDRPA3sKH2x9t3PDAERh_-ZSppnZiP-q8cG1HlJKDCHLItBIzJJ1eK1tHwnodcteY2n_VfLB6VQkLluv7AuZgbQgySEtJQHpTfnHjUeknTVG5ZtL7wW9U7YuA/s1600/ico-social-rss.png) no-repeat; 
} 
.social .social-twitter { 
display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgygdDF8BrmvUNEoD1BS-1_4Gr-J5CvU23GLcnmr7AGlSIW_Cd2cl7v3zH-9wSMfIhHf00MKAq-oESLU6QpgXh9LMjBl_QfM0bfzLEWp-3rfLYA0jbapwjVO8fzOQxys6BTp-P80mKRPwA/s1600/ico-social-twitter.png) no-repeat; 
} 
.social .social-facebook { 
display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk8LD969CaRVghooIvFtH7eLk6Aby8-A-SH03xoZqUwdeyip5kpi4ONSThRPL5bthHssW6FdZy-K7bo13-p_AwUmUyOd4zfqu60CnhGY6xNzLat1HndgSDRsEdXR9P-ZIrND_FKxpx3Ow/s1600/ico-social-facebook.png) no-repeat; 
} 
.social .social-youtube { 
display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCLOhWXY9_IxknA1Dc0mwmzglLyVWUAYCRcV0FZmIOpRlMTbw_mF2Amy8IcBuKAYS6jNSeNXGowO5RKQS2fGT0qL08fMowaO9KPJ5mMlgg21Fz8AnrWQHYbKT8tOOggf_HU4YmcWS_6Y/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/AVvXsEjTifHyFj4Y_lVlArYSfFCRspGriT7-awJoqsb4jj2MjfqVYGeRCR811LqajNuICr8hzfiPAihX-uwadc7RRTqqqLLSj5zMk3SfkU8LMmUhyNZW64cqM9cybBK8JjS5DfApYv7vqswNt8DA/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%); 
}

6- قم بحفظ القالب

7- اذهب الى لوحة التحكم تم اضغط على تخطيط

8- تم اضغط على اضافة أداة ، HTML/JavaScript

ثم الصق الكود التالي:

<div class="widget-content"> 
<div style="border: 1px solid DodgerBlue; padding: 1mm;"> 
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCN9poFav1lvlDib7hxfZ6tQDScG2OsEzqEXb2gYPOrbO-js3r7u9CtQGWfPBDbwRabK8Ugm9CPt4l3MzEAN2J_80aME3z_OrhzTMtAz5TDAqfl1pQtwS8Y4MSsgXntqnPLHWrcTLDgB4/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=”......” rel="nofollow" target="_blank">Facebook</a></li> 
<li><a class="social-twitter" href=”.....” rel="nofollow" target="_blank">Twitter</a></li> 
<li><a class="social-feed" href="...." rel="nofollow" target="_blank">RSS</a></li> 
<li><a class="social-youtube" href=”.......” 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=........', '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"> 
<a href=....................../ target="_blank" title="Blogger Widget"><span style="font-size: xx-small;">Blogger Widget »</span></a></div> 
</div> 
</div>

9- الأن قم بتغير ما لون بالأزرق بحساباتك

و أخيرا قم بالضغط على حفظ و مبروك عليك الاضافة.

    وارجو ان اكون قد افدتكم وشكرا لكم