إشترك في القائمة البريدية.

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


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

مثال للصندوق :


طريقة الإضافة :


1 - قم بتسجيل الدخول إلى مدونتك بلوجر.
2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.
3 - قم بالبحث عن :
]]></b:skin>
أضف قبله هذا الكود :



----------------------Social Newsletter Widget By www.homeblooger.blogspot.com-----------------------------
/* 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(http://2.bp.blogspot.com/-rmq41pgw07w/Tsiw4-mWbkI/AAAAAAAAAiM/mPfgtkxQejo/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(http://4.bp.blogspot.com/-Sl_ER6EMfgI/Tsiw52f6_VI/AAAAAAAAAiQ/cM_KfAww8kg/s1600/ico-social-twitter.png) no-repeat;
}
.social .social-facebook {
display:block;
background:url(http://2.bp.blogspot.com/-uGVQ0Uj3rZg/Tsiw4Yz2NDI/AAAAAAAAAiE/YKIOK3M_zwY/s1600/ico-social-facebook.png) no-repeat;
}
.social .social-youtube {
display:block;
background:url(http://3.bp.blogspot.com/-qfHvHZZSPGg/Tsiw6NTml8I/AAAAAAAAAic/e4WtojhyZfk/s1600/ico-social-youtube.png) no-repeat;
margin-right:0;
}
form.emailform {
margin:20px 0 0;
display:block;
clear:both;
}
.emailtext {
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/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%);
}

4 - الأن قم بحفظ القالب وتوجه بعدها إلى تصميم أو تخطيط.
5 - ثم إضافة أدة.
6 - إختر HTML/JavaScript .
5 - بعدها في الحقل الأول ضع إسم الأداة مثلا إشترك في الموقع أو إنضم إلينا..... ثم ضع في الحقل الكبير هذا الكود :

<div class="widget-content">
<div style="border: 1px solid DodgerBlue; padding: 1mm;">
<center><img src="http://1.bp.blogspot.com/-05nCa_r6BsI/TwhrRwYTvhI/AAAAAAAAA74/t3j83HBdPVQ/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="https://www.facebook.com/Homeblooger" rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="http://twitter.com/Homeblooger" rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="http://feeds2.feedburner.com/Homeblooger" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href="http://www.youtube.com/user/Homeblooger" 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=xxxxx', '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="http://homeblooger.blogspot.com/" target="_blank" title="Blogger Widget"><span style="font-size: xx-small;">Blogger Widget »</span></a></div>
</div>
</div>

قم بتغيير ما هو بالأحمر بما يناسب موقعك




أي مشكلة أنا في الخدمة فلا تردد في طرح إستفسارك

إشترك في مدونتنا وتوصل بأخر المواضيع.

إشترك في القائمة البريدية

9 تعليق

18 مايو 2012 3:50 م

راائع للغاية و مدونة ماشاء الله رائعة

22 مايو 2012 5:29 م

@Mohamed Ameero

يا أخي أهلا وسهلا بك في مدونتنا وإن شاء الله تكون قد إستفدت

9 يونيو 2012 2:00 م

كيف احصل على XXXX ، اي الخاص بالايميل

10 يونيو 2012 5:31 ص

@Azedine Benaini
يا اخي عن طريق الموقع الخاص بجوجل
http://feedburner.google.com/fb/a/myfeeds

وإن شاء الله سوف نقوم بشرحه في القريب العاجل

22 أغسطس 2012 6:36 م

راائع للغاية

www.baramij-ucom.blogspot.com



9 سبتمبر 2012 9:05 ص

الله يسلم اديك يا بطل نجحت العملية والاضافة رائعة جداااااااااااا

2 أكتوبر 2012 5:22 ص

شكرا لك اخى الكريم واتمنى زيارده مدونتى
http://doprograms.blogspot.com/

6 ديسمبر 2012 11:20 ص

السلام عليكم، اضافة جميلة ولكن هل ممكن احصل على صندوق اشتراك كالموجود فى هذه المدونة ؟ وشكرا

15 أبريل 2013 10:47 م

السلام عليكم، انا عاوز اضيف صندوق تعليقات الفيس بوك كل مرة يطلع غلت

إرسال تعليق

يتم التشغيل بواسطة Blogger.
 

أضف موقعك أو مدونتك إلى جوجل شرح بالصور

أرسل موقعك أو مدونتك إلى محرك البحث الشهير شرح كامل وبالصور ...

إقرأ الموضوع

أضف مدونتك إلى 40 دليل لكسب المزيد من الترافيك

نقدم لكم في هذا الموضوع مجموعة من المواقع ذات الترافيك العالي لإضافة مدونتك فيها وتحسين تقييمك...

إقرأ المزيد

شرح كامل لإضافة تعليقات الفايسبوك إلى البلوجر

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

إقرأ المزيد

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

نتطرق في هذا الموضوع إلى شرح لطريقة إضافة ترقيم الصفحات لدى مدونات البلوجر ...

إقرأ المزيد

تحميل سكربت ووردبريس 3.3.1

حمل أحدث وأخر نسخة من السكربت الرائع ووردبريس مجانا...

إقرأ المزيد

شرح عمل مدونة بلوجر بالفيديو

شرح كامل وبالفيديو لطريقة عمل مدونة بلوجر رفقة الواجهة الجديدة للبلوجر...

Read More

إضافات