التخطي إلى المحتوى الرئيسي

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

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

و كذلك هو الحال بالنسبة  لصفحة الفايسبوك و تويتر و قناة اليوتوب و رابط التغذية RSS. لذلك تطرقت في هذه التدوينة إلى شرح طريقة إضافة هذا الصندوق إلى المدونة و بتأثير جميل مستعينا بتقنية CSS.
تتبع هذه الخطوات لإضافة الصندوق :
  • توجه للوحة التحكم =>اختر تصميم => تحرير HTML
  • قم  بتوسيع القالب
  • وأبحث عن الكود التالي :
]]></b:skin>
  • قم بإضافة هذا الكود فوق ]]></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/AVvXsEjueYX7CxFQTlpX0wx6BBwSBkWDWsv8xgPTap6JZjqzjpczoPf6ewOVQ2bPMdfVmG2MTBv2s7061Yb3TPcE6LO3jDijwZsMgVUPeqCfgpb3-XLlo_IkJmpIaoaAHhNBRr2hASTNm-xGmqs/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxKIIt2-l2dYMK5HYhDyEHKB0CTi8I6j677nf-DXTow7ZS11PfH3kVCj4jLRkFf4WiCKrQPysiKhYFHrxk6Kj5jyVxoIjPDHzDps_yrxbgnu7O2Pg27w4yV3bYoT-5QzUIKfRhWaXoivw/s1600/ico-social-twitter.png) no-repeat;
}
.social .social-facebook {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpG7H5KFTJg6MYQoDESLmba8ZBJ5TXHtpyl-ycH_tqZZ_kLhiuWNAZt1oFUERmh-5vvWoVexvVo1t1z06Qzw29ewLsCD3KYvTo-XLg4nGd4elZ9mKIRk-mMiWNbTHZ_nG_NeNHUTQuOcA/s1600/ico-social-facebook.png) no-repeat;
}
.social .social-youtube {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNLr0SviHsKMtUxyZ81IGKFrs6gI4LgYZXtQDUNh1JRjK1yKZj1sJSgrT-ZXxcPO8mtyNZ_CBFxKe6fgeIqL8gqFIfTK8bJ9_y1N20wW87nU1sNJVKxOJ_RG-0n521Lti2spnwNDurcuI/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/AVvXsEjd3AkJNCO3TbtzWW93nirHfis4scSKoJEMrz959aGL9SYFQzlkeEk7FyqousSom8rCm84KLqk50S17d2cLXQqfUAqPRnlwMKa-NVxlgCinOc_b_1A8wifNzjFX-EKCBrzrCQPVbbuNusJm/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 .
  • قم بنسخ ثم لصق هذا الكود داخل الأداة :
<div class="widget-content">
<div style="border: 1px solid DodgerBlue; padding: 1mm;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_SlgQPN4NoZDGIsDwvmbhAIxISlgdH-92rSEkZod9nA6DgZz6g0lTNPpPuqZV6Gm7RUpbvwMnZkoqScvp00raDGgJTYXpQtcQ1mCDrKtrde1pyTZ01PW9zW4ywSIdoqzsowaBD1J1hl4/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=”facebook page” rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href=”Twitter” rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="Feedburner Url" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href=”Youtube Chaine” 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://Pro-fess-ional.blogspot.com/ target="_blank" title="Blogger Widget"><span style="font-size: xx-small;">Blogger Widget »</span></a></div>
</div>
</div>

التعديل على الكود :
  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

المشاركات الشائعة من هذه المدونة

مراجعة هاتف nokia lumia 930

السلام عليكم و رحمة الله و بركاته نظام ويندوز فون الان يتراوح عمره الى حوالى الاربع سنوات و حتى الان لم يحصل على ذلك الاهاتف المميز الذى يستطيع كافة امكانياته و الذى يجعله يستطيع المنافسه مع الايفون و الاندرويد . نوكيا لوميا 930 يبدو من مواصفاته انه سوف يكون هذا الهاتف مع امكانيات مثل شاشة super amelod و معالج خارق و التحديث الاخير و الافضل لويندوز فون حتى الان تجعل منه منافس لاكبر الهواتف فى العالم حاليا ... فى هذا المقال سوف نستعرض مميزات و عيوب هذا الهاتف الاكثر من رائع ...   ميزة clearback display    ميزة clearback display فى شاشة ال super amoled المستخدمة فى موبايل نوكيا لوميا 930 اكثر من رائعة و بالرغم من اعتقاد الكثيرين ان شاشة lcd افضل من ال amelod لكون الالوان تكون اكثر طبيعية و الاضاءة تكون افضل من ال amelod الا ان الشاشة المزود بها هذا الهاتف اكثر من رائعة و مع مميزات مثل وضوح اللون الاسود التباين العالى جدا و الالوان الاكثر من رائعة بدرجة وضوح فى الالوان اعلى بكثير من شاشة lcd تجعل من استخدامه تجربة اكثر من رائعة. هذه الميزة تجعل...

4 طرق لاضافة تويتر الى مدونة ووردبريس

جميعنا يعلم اهمية الشبكات الاجتماعية للمدونات هذه الايام و انها اصبحت من اسهل و اسرع الطرق لاشهار المدونات الجديدة و تعتمد عليها كبار المدونات كما انها مجانية تماما و لعل من اهم هذه الشبكات تويتر و الذه من شظانه ان يجلي الا موقعك الاف من المتابعين و الزوار الحقيقين ان استعطت ان تبنى جمهوراً جيداً عليه .... و اليوم اقدم لكم 4 طرق لكى تضيف تويتر الى مدونتك و تستفيد من هذه الشبكة الرائعة     1.   اضافة تويتات داخل التدوينة الان يمكنك اضافة احد تويتاتك من تويتر داخل تدوينة على الوورد بريس بالاضافة الى زر المتابعة بجوار التدوينة و تعتبر من اسهل الطرق لاضافة تويتر فما عليك سو اضافة رابط التيويتة بالكامل و دع الوورد بريس يقوم بالباقى كما فى الصورة .     2.      اضافة زر المتابعة اذا من الاشخاص الفعالين على تويتر و تنشر باستمرار جديد تدويناتك على تويتر يمكنك وضع زر المتابعة فى مدونتك ليستطيع زوار المدونة متابعتك على تويتر حتى و لم يزوروا المدونة و هذه الطريقة تؤمن زوار و متابعين جيدين بستمرار . تويتر تقدم اداة رائعة جدا ...

اضافة المواضيع الشائعة ب css اكثر من رائعة

السلام عليكم و رحمة الله و بركاته باذن الله سوف نقوم بشرح اضافة من اهم اضافات البلوجر وهى اضافة المواضيع الشائعة فهذه الاضافة تساعد الزائر على معرفة اخر المواضيع فى مدونتك و الاطلاع على كل جديد لديك و لكن غالبا يكون شكلها ليس جيدا و يخرب شكل المدونة الاضافة التى ساشرحها تمتع بشكل جمالى اكثر من رائع ..... بدون اطالة معاينـــة الاضافة     -   شرح تركيب الاضافة قم بتسجيل الدخول الى لوجة التحكم   اختار " قالب "   ثم اضغط على " تحرير html "  ابحث عن هذا الكود ]]></b:skin> الصق الكود التالى قبله .popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px; list-style-type: none;padding:5px 5px 5px 20px !important; border: 1px solid #ddd;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; height: 40px; -moz-box-shadow: 3px 2px 5px #242424; -webkit-box-shadow: 3px 2px 5px #242424; box-shadow: 3px 2px 5px #242424;margin-bot...