إضافة صندوق إشتراك جميل بتقنية 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/AVvXsEgFT6mWAeywK0TG5QMUSV70mhNVREgLQ3FB7AIh_LoyEXdPn10C_BQ4EhZ_C8zZQXoX5edNhgUhfERYFmUJaehZv-UTNCOAJZuvmi0B95rj3ZcR_nFC1J0fRe3LCKBOdijoHXEJ6WNSFao/s1600/ico-social-rss.png) no-repeat; 
} 
.social .social-twitter { 
display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFwz590jRDjlFNFaI2Euvgig3D_4F8zLNGHtuYcm0rnp-FeI6bIRW6FzZho-FtR_OymSMuKY3jh9m-eaIUAzOKg6zVPG0M63AA1C1fnfqFUhIQ1fOfwpE47ub_Yk839GkARExE69vb2TA/s1600/ico-social-twitter.png) no-repeat; 
} 
.social .social-facebook { 
display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioImWl-WierfsTrYvbLD_HVrIJsPVYcvtwPOAk9-oOSh7PkPyLn8TKiJNL03hn3upnM6q6-wemwSLZ2r_xLII8aOjFwYWKDRiVlHXn1sy8xpOwJPE0aVcYrxJwo7xi5G47sbkNmafkKBQ/s1600/ico-social-facebook.png) no-repeat; 
} 
.social .social-youtube { 
display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBpinfgu8fLvJgWRpGgoSOsRRpqGpdkaF7ZYCPs5-bMbU65IPB8rM8bxezfvkDhxfq6jNXs5w7LHtV52TpiiOpcjfLEiXpgkAkn6ayOpvxOrse1Z7O_ndWn51pB2G_bDpi3AlbJ-O4js/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/AVvXsEgAjmzQB-Dnsc1fOLfPgCniviC-LD_UGF6VwL5c1SeDzDZiu6tKVYA63QqCfcERYNWhX7gBgeMgvL9Kt3NJE4HfcGqwOpGYgAMYbZBkaRbESfkrF65Embi-regCd5wsHQRPlhF__ZLvyM5P/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/AVvXsEjwsC5MxUKIZrcg481bDMvatrcZArp_e0B16zPUEVgDAMNuZm1wlJM8IwfdhdxDKYFRcqiLU3wsTFafV35xDgz5mMDbzm2VRP8cGSFQGkFY1ggzeRQiZq2383cGLKfldG7NBCZocpXuw7Y/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- الأن قم بتغير ما لون بالأزرق بحساباتك

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

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