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

بسم الله الرحمن الرحيم 
والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم 
السلآم عليكم ورحمة الله وبركاته 

إضافة صندوق اشتراك في مواقع التواصل الاجتماعي والبريد بتقنية 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/AVvXsEhCG9YvWz0K8UxAZ71Cod5o_DCxRAqM5lqze6weldr8rjOPgPm-jPx9duZbZ8ef6DfL-dlXroR4DBKubn0YXLal4gzyPpY1jMrIOpodPjOz6FzD3nUmcO4ykABRmOgdR1GVZOcwNedFwH8/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPKUVHTuKmllGkXY7Y4OCeNK2ZnwypkqmuRQTfJUiT3VKrbFHcrLtFZpFtAr4qygLfdTwXbTGSX1Dhd-LW9RaTOs-CZmDSj7DAfpYM8FZ5oO4hkXsRLf4tYjPXc3-EqkgTpR7Tuczfgjs/s1600/ico-social-twitter.png) no-repeat;
}
.social .social-facebook {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMjZfbr9OloeP0AYMaKzO9zdIRKn42wx5PB2e6OJFcS3gKTyD1n8DLp4R0WbLfXtlc2lKitqocf0dC5n2TaJwphBGd_e27ROdrb6IrkeVl2Mqgoy9lyrc61_L-KBDx5tOPf34Fm9Ee4q8/s1600/ico-social-facebook.png) no-repeat;
}
.social .social-youtube {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9qwz9zN09_13L9pAIqH0_phKiAFPksWuKNoFSWvxaW1y0Z6ev2Diox8KREVXedFgX06oAexJDBxVdoZsVxUMuu9UmJL-b0df0gT9cKXR0NlW0Vi_aRqmPEEbfegdQnmxa1PTMwbbNtI/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/AVvXsEikqQQeIq4GsbbxnQ4J262QOJyM-yAOEm_NRiWCKBRw0Fd0tdwNgkVqYO8BWdK6oIZ8XZZSU_YCLxXBLR_R0gM_dmX4ywMF1mrsHZJGUtZ6JqU6hmrRXOIT6XreBgBWBzQKkLqBxdABgwGa/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/AVvXsEj8Gq_52tw9WusKQ8gWa1xxfC1YuA1L9eJdGpgVj00S1XkFcLHhWEUrwcwRHn9l2iFWkrRbAjMLdctUO4JdOf7RZKQP5rZkpLQFOQe3Bua1wy0p-DycaXnzgFKbhUH6IW_CL7IvS_aX6EE/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 ==> اسم المستخدم الخاص برابط التغذية

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

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

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

ملخص التدوينة:

بسم الله الرحمن الرحيم  والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم  السلآم عليكم ورحمة...

goust

الساعه : 2013-04-30T09:28:00+03:00

تاريخ : 30‏/04‏/2013

من : المملكة العربيه السعوديه

التعليقات : 4

انشرها :

تاق :