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

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

تتبع هذه الخطوات
لإضافة الصندوق : 

• توجه للوحة التحكم
• توجه بعدها إلى تخطيط.
• ثم إضافة أداة HTML/JavaScript .
• قم بنسخ ثم لصق الكود التالي داخل صندوق الأداة :

<style>
/* Social &Newsletter Widget *//* Social by 7loll.blogspot.com */
.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/AVvXsEgL61RPVJY3HiD5DX0uaE9mhB5a55vActxUs_GfMD_DlS0LUWMK-eo3YwIUqTfQNgNP4xiep0_nhBfBOLVIaCIDeZwhHEVCFredo3GU8joPxrEIVtFifxPBiPontbrpxT1Ks4bRHmCCkc8/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgclO8xgty1SvzmeVb5ziMH-L8qC6YQlXT9EocY2qGOpMh2xiwdmVRZqRYesGI859TWEcKL-4IybIY168dYq66oVeAldFv7NcD96GB5OHZGbADF9pV9pLrrLOccEbtVSPaqdivGKVMYunE/s1600/ico-social-twitter.png) no-repeat;
}
.social .social-facebook {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH6XQ_Q5jHKLRgq9kshmJsm7Okkmx7hyphenhyphenkPmvcM4jmX1IwKJUrxxn9_-cImQVA4KkwdfhV_zWs9lM90J2qXqKCFZthyphenhyphenbyamWDI_TRPy3CMZUIOeAgN9Q_0BmmRnQgdrrvHUsX93mJW1AI/s1600/ico-social-facebook.png) no-repeat;
}
.social .social-youtube {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GTtHco5rmwC227Pd-nNe7peNlEbPizShyp3DY9kzN9UBz2hX1ulaxfq1606u_LJPAzm0pDCMvKdV_Xd410i3EWuEgFe0sceSwWqqiZGeF9hb4qgW55IuBvK_Y7cP3rfkNVH5cnguTzk/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/AVvXsEiJ7KCpMNlq51QHtgopHTN0CnfgCZw6yOM-Bu5AKV7yRR7_tv5fON6ePMuKm_sfxDx-Q0b_5CESKU8EXf5ibQCuMs6Lt0z9b5aAi6it63ofu-Blx8W-v2BkjnFe_E12D8hyphenhyphenDH007DHOV25A/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%);
}
</style><span style="color: #444444;">
<a href="http://www.7loll.blogger.com/"></a>
<div class="widget-content">
<div style="border: 1px solid DodgerBlue; padding: 1mm;">
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOni1v0w5YMArewYvFRWRe9rtvbg8UasM-2N_7Kuw1s_clEGvSICu1MiyW_VdLtXpsuc_z0MMXYZUxUQh1C_vAxK34en3ogdAcFlWhLnyPkSGGB5n6NjjPqQHK4FEpnIsdA5HoWdIrrnM/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="http://www.blogger.com/facebook%20page" rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="http://www.blogger.com/Twitter" rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="http://www.blogger.com/Feedburner%20Url" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href="http://www.blogger.com/Youtube%20Chaine" rel="nofollow" target="_blank">YouTube</a></li>
</ul>
</center>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=xxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="softechnogeek" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailtext" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;أدخل بريدك الإلكتروني...&quot;;}" onfocus="if (this.value == &quot;أدخل بريدك الإلكتروني...&quot;) {this.value = &quot;&quot;}" type="text" value="أدخل بريدك الإلكتروني..." />
<input alt="" class="ebutton" title="" type="submit" value="إشترك" />
</form>
<center>

<span class="Apple-style-span" style="background-color: white; color: #333333; font-family: 'trebuchet ms', Trebuchet, Arial, Verdana, sans-serif; font-size: 10px; font-style: italic;"></span>
</center>
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://www.7loll.blogger.com/" target="_blank" title="Blogger Widget"><span style="font-size: xx-small;">Blogger Widget »</span></a></div>
</div>
</div>
</span>

التعديلات على الكود :

Facebook Page ==> رابط صفحتك على الفايسبوك 
Twitter ==> رابط التويتر الخاص بك 
Feedburner Url ==> رابط التغذية Rss الخاص بمدونتك 
Youtube Chaine ==> رابط قناتك على اليوتوب 
Uri=xxxxx ==> اسم المستخدم الخاص برابط التغذية 

إلى هنا أكون قد انتهيت