اضافة صندوق اشتراك رائع لبلوجر

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

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

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

• توجه للوحة التحكم =>اختر تصميم => تحرير HTML
• قم  بتوسيع القالب
• وأبحث عن الكود التالي :

]]>

• قم بإضافة هذا الكود فوق ]]>> مباشرة.

----------------------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/AVvXsEjnvDuL1gmK8eDDZntoaYhL7FdRdOGgvrsHerO7an-sk8OVIPujiOE5f7MkaU2HKZMi4gCZ2yeIvsQ072oiNozKLwXJsdUSdmvBYiniRbP6D9bm7tErTg-c70PvOtSsoZofOIXo02qNgII/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNdJ6yWkwKxG6i2V49fWjsFrY-t_rq6hlhVncd5iBgA0cOXTZhvS6x_ydk7h0JcEFTXeBkLliPQN3SaWJzPjLXDRPd81uUz91WlWjK5DWFFyoSIfdtPSo0ShsezqmZAyMU47q9HO6KSfU/s1600/ico-social-twitter.png) no-repeat;
}
.social .social-facebook {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwKiQbECLqx3o3VZhjQ5xRHz-LTMQxbFOUOMzlbHupcs1U8z27na01fto8bpmPCYnQ5Y1kdOuNov65dT5qpfSPnFRUduhcxO_leV0XsVF5cJnmgjuObR9w4WLlmFUgELjX_sOWDKOpA8/s1600/ico-social-facebook.png) no-repeat;
}
.social .social-youtube {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-244OK-UcoL4uv1FYh3Ozn9xvXcRRYAcLRr_H-rifux7k3Im0pBBPz_JgLSXCLjYB6RWT2VBnAZYxZ_eS2a1yYHahWNasN4s30rp2oYNQwZP2HoWhHpxFN7gpVjJKItcJVtCKBocdsw/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/AVvXsEg5xOsYp5WNj7O_whvrUqOOqzstE35l1rO9OYxy_b7M5qGt7rCaa6s0eAZKV-d843QA2gHF7UsSWpuzA8MXODqgN1zsmtBkTjZSw6GkricMo-xSkGwdxcIXOSgpVkdYjkN9-l1MhI-g22d_/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 .
• قم بنسخ ثم لصق هذا الكود داخل الأداة :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_eIvdQ0Yqitg_gVfTfKE3qETHAMrBwtAJUkr95bYlsriDTWgLA9E5Nh8LDP_pwAJvciq1NlR4EkkehARRe6mOmEqlwLH6-g3-Qa7AyHaEyf2w0g47gyxN7qeGgKIpOQc0pXv3lMe6qOU/s1600/email-px-png.png" />
توصل بكل المواضيع الجديدة ،كن السبّاق وقم بإدخال بريدك الإلكتروني و إنتظر الجديد

• facebook page” rel="nofollow" target="_blank">Facebook


• Twitter” rel="nofollow" target="_blank">Twitter


• Feedburner Url" rel="nofollow" target="_blank">RSS


• Youtube Chaine” rel="nofollow" target="_blank">YouTube

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">

http://Pro-fess-ional.blogspot.com/ target="_blank" title="Blogger Widget">Blogger Widget »

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

1. Facebook Page ==> رابط صفختك على الفايسبوك
2. Twitter ==> رابط التويتر الخاص بك 
3. Feedburner Url ==> رابط التغذية Rss الخاص بمدونتك
4. Youtube Chaine ==> رابط قناتك على اليوتوب
5. Uri=xxxxx ==> اسم المستخدم الخاص برابط التغذية
6. http://Pro-fess-ional.blogspot.com/ ==> غير هذا الرابط برابط مدونتك

و بهذا نكون قد ركبنا هذا الصندوق في المدونة و بالتوفيق للجميع

المصدر: http://www.mohamedblog.com/2012/07/css.html#ixzz2WtHbWW8y