4We-eb: اضافة بلوجر

صندوق الإشتراك عن طريق البريد الإلكتروني لمدونات بلوجر (شكل احترافي)

| | Libellés : اضافة بلوجر, بلوجر, كل, blogger

السلام عليكم ورحمة الله تعالى وبركاته، هل لاحظت في تصفحك لبعظ المدونات والمنتديات العربية كانت أو الأجنبية كثرة المواضيع التي تأكد على أن القوائم البريدية هي السبيل إلى ربح زوار مهتمين وحقيقين (Tragic traffic) حيث تعد من أهم الأدوات التي يأكد عليها المتقدمين لاسيما في مجال التجارة الإلكترونة وكذا مجال التدوين . لذلك في هذا الدرس سنتطرق واياكم الى طريقة اضافة أداة الاشتراك في القوائم البريدية لمدونات البلوجر . الاضافة تعتمد على كود يتم وضعه في أداة javascript/Html .

لمشاهدة مثال مباشر لهذه الأداة عبر الرابط التالي : مثال مياشر . (يوجد المثال في الأسفل)

لإضافة هاته الأداة إلى مدونتك المرجو تتبع الخطوات التالية :

توجه الى لوحة تحكم المدونة ;
توجه الى تخطيط ;
اضغط على اضافة أداة Javascript/Html في أي مكان يحلو لك ;
ثم الصق الكود الموجود في الأسفل في صندوق الكتابة ثم اضغط حفظ .

الكود :

<style> .subscriptionboc { border-style:solid; border-width:2px; border-color:#000; padding:20px; width:250px; background:#fff; transition: box-shadow .777s; -webkit-transition: box-shadow .777s; -moz-transition: box-shadow .777s; -o-transition: box-shadow .777s; -ms-transition: box-shadow .777s; } .paratraf { font-size:20px; font-family:"Helvetica"; text-align:center; color:#000; } .feed-links{display:none;} .enteremail { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset; color: #8B8B8B; padding: 10px 40px; border-style:solid; border-width:2px; border-color:#CACACA; } .forspace { padding:15px; } .button45 { background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 4px 4px 4px 4px; color: #000000; cursor: pointer; font-family: "Helvetica","Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); background:#29A3DB; border: 0 none; border-radius: 4px 4px 4px 4px; color: #FFFFFF; cursor: pointer; font-family: "Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); } </style> <div class="subscriptionboc"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=***', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">اشترك معنا و كن السباق في التوصل بمستجداتنا.</div><p> <div class="forspace"> <center> <input class="enteremail" type="text" style="width:140px" name="email" value="بريدك الإلكتروني..." onfocus="if (this.value == "بريدك الإلكتروني...") {this.value = ""}"/></center></div> </p> <input type="hidden" value="***" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <center> <input class="button45" type="submit" value="اشترك الآن" /></center></form> </div>

تخصيص الكود :

*** : غير هذه النجوم باسم المستخدم الخاص برابط التغذية (الخلاصات) .
250 : لتغيير حجم الأداة .
اشترك معنا و كن السباق في التوصل بمستجداتنا. غيره بما يحلوا لك

اضغط زر الاعجاب اسفل ان أعجبتك الإضافة .

الكود مأخوذ من: مدونة محمد

تابع القراءة

أداة الإشتراك في المواقع الإجتماعية والبريد الإلكتروني لمدونات بلوجر

| | Libellés : اضافة بلوجر, بلوجر, تقنيات, جوجل, دروس البلوجر, كل

السلام عليكم ورحمة الله تعالى وبركاته، اخواني أخواتي متتبعي وزوار مدونة فورويب، في هذا الموضوع اريد ان أضع بين أيدي كل من يعشق التدوين عن طريق منصة بلوجر ( Blogger ) وخصوصا منهم الذين يهتمون بجمع أكبر عدد من المشتركين والمتابعين سواء من المواقع الاجتماعية ( تويتر، فيسبوك، جوجل بلس،...) أو عن طريق القوائم البريدية ( جمع إميلات الزوار ) اضافة تعمل عمل وصل بين صفحات المواقع الاجتماعية والقوائم البريدية والموقع، حيث تجعل الزائر يشترك وبالتالي المزيد من المتابعة والمزيد من الزوار المهتمين .

بالنسبة للمعاينة المباشرة، زر الصفحة التالية : هـــنـــا

إذا أعجبتك الاضافة وتريد اضافتها المرجو منــك متابعة الطريقة التالية :

الطريقة :

اتجه الى لوحة تحكم مدونتك
اذهب الى قسم " تصميم "
اضغط على اضافة أداة في المكان الذي تريد اضافت الأداة فـــيه
اختر أداة HTML/JAVASCRIPT

ثــم الصق الكود التــالى :

الكـــود :

<style type='text/css'> .a51 a{ color: #6e6e6e; font: bold 13px Helvetica, Arial, sans-serif; text-decoration: none; padding: 7px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); border: solid 1px #dcdcdc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .a51 a:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .a51 a:active { color: #000; border-color: #444; } .a51bar{ width:280px; float: right; margin-right:3px; margin-top:5px; padding:0;} .a51bar .emailsub{border-bottom: 0px solid #e6e6e6; padding:0px 0 15px 0; float: right; width: 100%; font-family: Helvetica, Arial;} .a51bar .emailsub .emailupdatesform{width: 100%; float: left; padding:0px;} .a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: right; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 15px; width: 130px; height:30px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;} .a51bar .emailsub .emailupdatesform input.emailupdatesinput:hover{ border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .a51bar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer; } .a51bar .emailsub .emailupdatesform input.joinemailupdates{ border: solid 1px #dcdcdc; background: #F3F3F3; font-family:Helvetica, Arial; text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin:0 5px 0 0; font-weight:bold; font-size:15px; height:30px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3; float: right; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 15px; width: 145px; height:28px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;} .a51bar .emailsub .emailupdatesform input.joinemailupdates{ border: solid 1px #dcdcdc; background: #F3F3F3; font-family:Helvetica, Arial; text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin:0 5px 0 0; font-weight:bold; font-size:15px; height:30px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } </style>  <div class="a51" style="padding:0pt 5px 0pt 0pt;"> <table><tbody><tr> <td> <a href="http://4we-eb.blogspot.com/feeds/posts/default" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijA2L-V1dnCB06XColA0Uk7m-ik6FHN5mbV8654mzQeckTA8oB_NxAK1sGZmMprzoDu2DvDKbCqyJolle0UgCXYMPI_NKZy6YHmc1-PT9CHZp1UqmNmWMxNqdW5_YfIrVy79xHgeKDQyE/s1600/rss.png" border="0" /></a> </td> <td> <a style="margin-right:5px;"href="http://www.twitter.com/4weeb" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiltl0_rp2mNMmBSgOj28HE2ZIP9k9gElwnbdMaRBPh_ieOg75G2VWAKQASkxbOqJ2YKceFJHkup0wh8LyuVydqWztgb6zFjRu2UEvY3WKFGn9JVFZ6yo3RUHmylHHlWMxWxvxy9PkIjiw/s1600/twitter.png" border="0" /></a> </td> <td> <a style="margin-right:5px;"href="http://www.facebook.com/4weeb" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj88QHCceRQKs1WVjp4-v-DiHCobS2LiOwlPDw528hYOMBt85xz544ol91326xhb88NthfLBVP5smQKfUfvR-pQeEG081mkEC8VqtOm00FMEXTzt_DS-6lpbfovn9d03fjRhTGtSAhkwdY/s1600/facebook.png" border="0" /></a> </td> </tr></tbody></table> <div class="a51bar"> <div class="emailsub"> <div class="emailupdatesform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hamedblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="بريدك الإلكتروني..." onblur="if (this.value == '') {this.value = ' بريدك الإلكتروني...';}" onfocus="if (this.value == 'بريدك الإلكتروني...') {this.value = '';}" type="text" /><input value="hamedblog" name="uri" type="hidden" /><input value="اشترك معنا لآن" class="joinemailupdates" type="submit" /></form></div></div></div></div>

تعديل الكود بما يناسبك :

http://4we-eb.blogspot.com/feeds/posts/default غيره برابط التغذية (الخلاصات) الخاص بك .
4weeb غيره باسم حسابك على التويتر .
http://www.facebook.com/4weeb غيره برابط صفحتك على الفيسبوك. وبهذه المناسبة أدعوكم بالإشتراك بصفحتي

يمكنك أيضا التعديل على الكتابات الظاهرة في الإضافة عن طريق تغيير مايلي :

بريدك الإلكتروني...
اشترك معنا لآن

الكود مأخوذ من: مدونة محمد

تابع القراءة

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

| | Libellés : اضافة بلوجر, بلوجر, دروس البلوجر, كل

السلام عليكم ورحمة الله تعالى وبركاته .

تعتبر ايقونات الامواقع الاجتماعية من أهم الاضافات التي يبحث عنها الزائر من أجل ربط حساباته في المواقع الإجتماعية بمدونته .

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

معاينة الأزرار

الطريقة :

من لوحة التحكم اتجه الى تخطيط
اضغط على اضافة أداة Add Gadget
أختر أداة HTML/Javascript
ثم الصق الكود الموجود أسفل ثم اضغط على حفظ .

الكود :

<style> /* Social Icons ----------------------------------------------- */ a.social-icons { margin-right: 5px; /*Adjust This Value As Needed*/ height:45px; width:45px; } a.social-icons:hover { opacity: .7; filter:alpha(opacity=70); /* For IE8 and earlier */ } height:45px; width:45px; </style> <a class="social-icons" href="https://facebook.com/4we-eb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6GMxuQsDdtJSuUNxlxiuGe6q_tMv0L6hzshppvHN5FWg7shrKp_0uAUtevPPIzl-i5kewnYyUsugjgovIuKg4CUqRxEWxlGaUHkkjv7EgSgM7oBPcqZ6i4KcMeX6Xw5D5rL5Du8II_F4-/s1600/Bloggertrix-facebook.png" /></a> <a class="social-icons" href="https://twitter.com/4weeb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3YzN9SSXHhdXu7FWdfAEdPpulxtfJuSerfD43PTL4QI4o9PEnLGD2LrcO0bcOJi01-fLM7WvXo1GnaIeEPRgiaTvH5nwhg3Z4LYR0L8z1ne56lBZaw2GXoitw6c60GOykSK_oOO1HVayW/s1600/bloggertrix-twitter.png" /></a> <a class="social-icons" href="https://plus.google.com/4weeb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6tWMf3XhuwCfLVEHD2RonZoBkor5rq_fwTOQXY4_UMtpknl7OauUnfVeOeSm-pY7iH8ByVTbvTJN-jFB42spF1hsrPsxL94T7p6Ba3untud4PQV81fP3bqC_ek54gl41zni0EwKkNMO-p/s1600/Bloggertrix-Googleplus.png" /></a> <a class="social-icons" href="http://www.feedburner.com/4weeb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWQY3hFhANVyya_2oMfqxCz0M-k8r0qUsK6VgS4SDebyzZlBPA3vOnHkKk5Wl_zmKIZnYr0Jc75HlgGhgFi9t66lg4BSxwqAKMJf4FXnuJLnRKfSH4fmhHm10ctlhmc9aGRFiy-MJvyH54/s1600/Bloggertrix-Rss.png" /></a> <a class="social-icons" href="http://pinterest.com/4weeb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0GJVaoqmXaByHR9md9anSXkJeFU-c1RdwTlc5dyCuyxqloCSBD-iA8jBztr4i1EUdEEa0uze-d3PdU9S3pxHl_ebFK6R8TUdcUHbRQPFsnBKBQ1TSduhj8O5zpwgQQueBnD6J0oYHvmLy/s1600/Bloggertrix-pinterest.png" /></a>

تخصيص الكود :

غير 4we-eb الى اسم حسابك في facebook
غير 4we-eb الى اسم حسابك في twitter
غير 4we-eb الى اسم حسابك في Googleplus
غير 4we-eb الى اسم حسابك في feedburner
غير 4we-eb الى اسم حسابك في pinterest

طريقة حذف أيقونة لا تريد استخدامها :
اذا كنت لا تستعمل موقعا اجتماعيا موجود في الإضافة وتريد حذف أيقونته اتبع الطريقة التالية :
فمثلا أنا اريد حذف أيقونة pinterest لأنني لا استعمله ، احذف الكود الخاص به . والأكواد هي كالآتي :

الكود الخاص بموقع facebook :

<a class="social-icons" href="https://facebook.com/4we-eb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6GMxuQsDdtJSuUNxlxiuGe6q_tMv0L6hzshppvHN5FWg7shrKp_0uAUtevPPIzl-i5kewnYyUsugjgovIuKg4CUqRxEWxlGaUHkkjv7EgSgM7oBPcqZ6i4KcMeX6Xw5D5rL5Du8II_F4-/s1600/Bloggertrix-facebook.png" /></a>

الكود الخاص بموقع twitter :

<a class="social-icons" href="https://twitter.com/4weeb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3YzN9SSXHhdXu7FWdfAEdPpulxtfJuSerfD43PTL4QI4o9PEnLGD2LrcO0bcOJi01-fLM7WvXo1GnaIeEPRgiaTvH5nwhg3Z4LYR0L8z1ne56lBZaw2GXoitw6c60GOykSK_oOO1HVayW/s1600/bloggertrix-twitter.png" /></a>

الكود الخاص بموقع Googleplus :

<a class="social-icons" href="https://plus.google.com/4weeb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6tWMf3XhuwCfLVEHD2RonZoBkor5rq_fwTOQXY4_UMtpknl7OauUnfVeOeSm-pY7iH8ByVTbvTJN-jFB42spF1hsrPsxL94T7p6Ba3untud4PQV81fP3bqC_ek54gl41zni0EwKkNMO-p/s1600/Bloggertrix-Googleplus.png" /></a>

الكود الخاص بموقع feedburner :

<a class="social-icons" href="http://www.feedburner.com/4weeb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWQY3hFhANVyya_2oMfqxCz0M-k8r0qUsK6VgS4SDebyzZlBPA3vOnHkKk5Wl_zmKIZnYr0Jc75HlgGhgFi9t66lg4BSxwqAKMJf4FXnuJLnRKfSH4fmhHm10ctlhmc9aGRFiy-MJvyH54/s1600/Bloggertrix-Rss.png" /></a>

الكود الخاص بموقع pinterest :

<a class="social-icons" href="http://pinterest.com/4weeb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0GJVaoqmXaByHR9md9anSXkJeFU-c1RdwTlc5dyCuyxqloCSBD-iA8jBztr4i1EUdEEa0uze-d3PdU9S3pxHl_ebFK6R8TUdcUHbRQPFsnBKBQ1TSduhj8O5zpwgQQueBnD6J0oYHvmLy/s1600/Bloggertrix-pinterest.png" /></a>

تابع القراءة

إضافة رسالة الخطأ ( Error mesage ) لمدونات بلوجر

| | Libellés : اضافة بلوجر, بلوجر, دروس البلوجر, كل

السلام عليكم ورحمة الله تعالى وبركاته .

أمابعد ، تعتبر صفحة الخطأ من أهم الأشياء التي قامت شركة جوجل بادراجها في صفحة التحكم في حسابات بلوجر وقد قامت بتحسين أدوات التعديل عليها. لكن للأسف الشديد فالكثير من المدونين وخصوصا المبتدئين منهم لا يدرون أهميتها في تحسين صداقات محركات البحث عامة وجوجل خاصة ، وبهذا يكون المدون قد أغفل عينه عن أهم الوسائل البسيطة التي من شأنها التحسين في أرشفة المواضيع في محركات البحث وكسب المزيد من الزوار .

ولعل من أهم فوائد صفحة الخطأ ما يلي :

صفحة الخطأ توؤل دون خروج الزوار من المدونة عند اتباعهم لرابط خطأ، فمثلا عندما يقوم الزائر باتباع رابط لصفحة خطأ أو تم مسح أو تعديل ذلك الرابط فصفحة الخطأ تلك ستظهر له وستخبره بأنه في صفحة خطأ وعرض عليه خيارات مثل ( الرجوع للوراء، الذهاب للصفحة الرئيسية، البحث في المدونة ... ) .

طريقة اضافتها الى مدونات بلوجر :

من واجهة التحكم (بلوجر) اتجه صوب إعدادات Settings
ثم توجه نحو البحث التفضيلات Search preferences
الآن وبعد الدخول الى صفحة البحث، اضغط على تحرير ( Edit ) الخاصة بــ : لم يتم العثور على الصفحة المخصصة ( Custom Page Not Found )
ثم الصق الكود أسفل في صندوق الكتابة .

الكود :

<p color="#FF0066" dir="rtl" face="tahoma" style="text-align: center;">
<strong><span style="font-size:20px;"><span style="font-family: tahoma,geneva,sans-serif;"><span style="color: rgb(255, 0, 0);">أخي الزائر، أنت في الصفحة الخطأ</span></span></span></strong></p>
<p dir="rtl" face="tahoma" style="text-align: center;">
<span style="font-family: tahoma,geneva,sans-serif;">عذرا، الصفحة التي قمت بالبحث عنها غير متوفرة،ربما تمت ازالتها، غير اسمهاأو غير متوفرة مأقتا . يرجى التحقق من صحة عنوان موقع الويب .</span></p>
<p dir="rtl" style="text-align: center;">
<span style="font-family: tahoma,geneva,sans-serif;"><b face="tahoma">أمور أخرى للمحاولة:</b></span></p>
<br />
<p style="text-align: center;">
انتقل الى الصفحة الرئيسية, واستخدم القوائم والوصلات للوصول الى مبتغاك.</p>
<ul dir="rtl">
</ul>
<form action="/search" method="get">
<table height="34" width="364">
<tbody>
   <tr>
    <td dir="rtl" style="text-align: center;">
     <strong><span style="font-size:9px;"><span style="color: rgb(169, 169, 169);"><span style="font-family: tahoma,geneva,sans-serif;"><input name="q" onblur="if (this.value == "") {this.value = "ابحث في المدونة...";}" onfocus="if (this.value == "ابحث في المدونة..") {this.value = ""}" style="width: 95%; padding: 2px;" type="text" value="ابحث في المدونة.." /></span></span></span></strong></td>
    <td dir="rtl" style="text-align: left;">
     <span style="font-family: tahoma,geneva,sans-serif;"><input type="button" value="ابحث" /></span></td>
   </tr>
</tbody>
</table>
</form>
<p dir="rtl">
by:<a href="http://www.4we-eb.blogspot.com">4we-eb</a></p>

الآن بعد اضافة الكود ، للتجربة فقط ادخل للرابط التالي : http://www.your-site.com/xxTestxx

ولا تنس تغيير your-site باسم مدونتك ، وبعدها ستلاحظ رسالة الخطئ قد ظهرت .

تابع القراءة

أكــمل القــراءة

طريقة ترقيم التعليقات لمدونات بلوجر (كود Css)

| | Libellés : اضافة بلوجر, بلوجر, دروس البلوجر, كل

السلام عليكم ورحمة الله تعالى ويركاته ،

أما بعد، في هذا الشرح سأتطرق واياكم الى شرح كيفية ترقيم التعليقات، وهذه الطريقة تصلح لأصحاب المدونات العملاقة التي تتلقى مجموعة من التعليقات في موضوع واحد حيث يصعب التعقيب عليها خصوصا للأشخاص الذين لا يتوفرون على خاصية التعقيب على الرسائل (مثلي) لذلك فهذه الإضافة ستساعدك كثيرا حيث يمكنك كتابة مثلا : تعقيب على التعليق رقم 1 ، ثم ترد عليه بسهولة .

الإضافة تعتمد على كود Css يتم وضعه قبل كود ]]></b:skin> وبعدها يتم ترقيم التعليقات تلقائيا بعد اضافتها .

معاينة : هــــــنـــــا ففي هذا الموضوع مثلا (مدونة تجريبية) انزل الى اسفل في مكان التعليقات ستلاحظ انها مرقمة من 1 الى 4 .

طريقة اضافة الكود :

من لوحة التحكم اضغط على القالب
اختر تحرير HTML
ضع علامة توسيع القالب
ابحث عن كود ]]></b:skin> عن طريق Ctrl+f .
الصق قبله اي فوقه الكود الموجود في الأسفل
ثم قم بالحفظ .

الكود :

.comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: right; font-size: 22px; color: #555555; padding-left: 10px; padding-top: 3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinoSR589_MEx4NS6bKpZJN8sjMSYhRzcFBb5WfimhyDxX8HRB_14e0GNEiIgMQ7U2a54BgUWn308SMZ2u3bT2WLj8uTazVkvKZ1BgeQY9khhQjfcHDLw-87_vdrpE8ea9WO0lmY4hrHCKO/s1600/comment+bubble2.png) no-repeat; margin-top: 7px; margin-left: 10px; width: 50px; /*image-width size*/ height: 48px; /*image-height size*/ } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; color: #666666; }

ملاحظة : يمكنك تغيير رابط الصورة باللون الأحمر الى رابط صورة تناسبك .

تابع القراءة

أكــمل القــراءة

منع تحديد محتوى مدونتك بالماوس عن طريق كود Css

| | Libellés : اضافة بلوجر, بلوجر, دروس البلوجر, كل

سلام عليكم ورحمة الله تعالى وبركاته .

تعتبر طريقة منع الزائر من تحديد ونسخ محتوى المدونة من الطرق التي يعتمد عليها الكثير من المدونين ومطوري المواقع، وذلك من أجل منع المتطفلين من نسخ المحتوى ولصقه في مكان آخر وخصوصا عندما لا يذكر المصدر الرئيسي .

لذالك اليوم اريد ان أضع الكود المسؤول عن منع النسخ في المدونة وهو عبارة عن كود Css كود بسيط يتم اضافته في أداة

HTML/JavaScript

معاينة : http://internettechno1.blogspot.com/

لاحظ أن عملية التحديد غير فعالة وبهذا لن يستطيع أحد ان ينسخ المحتوى .

ملاحظة : بانسبة للذين يضعون في مدوناتهم شرحات وأكواد لا يجب عليهم ادخال هذا الكود لأن الزائر لن يستطيع نسخ الأكواد الموجودة في الشرح .

طريقة اضافة كود CSS :

ادخل الى لوحة التحكم .
ادخل الى تخطيط
اضغط اضافة أداة
اختر HTML/JavaScript
الصق كود Css الموجود اسفل
احفظ الاضافة

ثم اذهب الى مدونتك وعاين الأمر بنفسك ستجد أن التحديد لا يعمل .

تابع القراءة

أكــمل القــراءة

اضافة تعريف الكاتب لمدونات بلوجر

| | Libellés : اضافة بلوجر, دروس البلوجر, كل

السلام عليكم ورحمة الله تعالى وبركاته .

في هذا الشرح سنتعلم كيف نضع تعريف أو سيرة ذاتية صغيرة أسفل المواضيع لمدونات بلوجر.

الاضافة هذه تمكن الزائر من معرفة معلومات حول الكاتب ، وتعتمد على اضافة على أكواد Css الى قالب مدونتك .

ولمعرفة الطريقة الفعالة المرجو اتباع الطريقة التالية .

معاينة الاضافة :

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

وقبل القيام باي تغيير قم بحفظ نسخة احتياطية للقالب

من لوحة التحكم اتجه الى تصميم ثم تحرير HTML
- ضع علامة في خانة توسيع القوالب

ابحث عن الكود التالي : ]]></b:skin>

ثم ضع قبله كود CSS التالي :

/* Author Bio */ .postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 0.7em; } .postauthor img { border: 5px solid #e2dede; float: right; margin-left: 1em; } .postauthor h3 { color: #666; font-size: 1.2em; margin-bottom: 5px; margin-top: 0; } .postauthor p { color: #515151; font-size: 12px; margin-bottom: 10px; margin-top: 0; } /* Author Bio End */

الآن ابحث عن <data:post.body/> (إن وجدت اثنتين فالثانية هي المقصودة) ثم مباشرة بعدها ضع الكود الآتي :

<b:if cond='data:blog.pageType == "item"'> <div class='postauthor'> <img alt='' height='80' src='رابط الصورة الشخصية' width='80'/> <h3>بقلم <a href='Blog Link'> اسم الكاتب </a></h3> <p> فقرة تضم نبذة عن الكاتب </p> </div> </b:if>

غير التالي بما يناسبك :

- رابط الصورة الشخصية
- اسم الكاتب

- فقرة تضم نبذة عن الكاتب

تابع القراءة

أكــمل القــراءة

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

| | Libellés : اضافة بلوجر, بلوجر, دروس البلوجر, كل

اضافات بلوجر

قوالب بلوجر

دروس بلوجر

اكواد بلوجر

دروس السيو

الربح من مدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته.

تعتبر النوافذ المنبثقة من أهم الوسائل التي يلجأ اليها المدون (صاحب المواقع) للفت انتباه الزائر بشيء معين، سواء كان اعلان (لا أقصد إعلانات ادسنس لأنهذه الطريقة تعتبر مخالفة لقوانين وشروط جوجل) أو صندوق الفيسبوك او التويتر او صندوق الاشتراك عن طريق البريد الالكتروني وهلم جرا .

How To Add POP UP Facebook Like Box For Blog & Website?

لذلك في هذه التدوينة سنتعلم سويا طريقة انشاء هذه النافذة المنبثقة بتقنية jQuery وسنخصصها في هذا الشرح لصندوق اعجابات الفيسبوك (Facebook) لأن أغلب المستخدمين يتوفرون على صفحات فيسبوك لمدوناتهم، ويريدون الكثير من المشتركين عن طريق حث الزائر على الضغط على زر الاعجاب (J'aime/Like) .

مميزات الإضافة :

كود بسيط . بتقنية ( jQuery )
اضافة انيقة وجذابة.
الأهم من المميزات السابقة هو أن النافذة تظهر مرة واحدة للزائر، أي أنها لن تسبب له الازعاج والقلق .

سلبيات الإضافة :

للاضافة شئ سلبي واحد وهو : أنك عندما تريد التعديل على الإضافة بما يناسب مدونتك ستظهر لك مرة واحدة فقط ، مما ستضطر الى مسح ملفات الكوكيز (Kookies) لأنها تعتمد على حفظ إيبي Ip الزائر لكي لا تظهر له مرة ثانية. لكن لاتنس انك ستعدل عليها مدة واحدة فقط .

طريقة تركيب الإضافة :

اذهب الى لوحة التحكم
توجه الى تخطيط
اختر اضافة أداة
اختر اداة HTML/JAVASCRIPT
الصق الكود اسفله
ثم حفظ

الكود :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
*/
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqqaxJz5DF1_Kc5mnkkrdaj-smeVqrObOLUjykuSeNcoWObugiwCtUaTBRLy_UdDOosXOoCBV_v9gd58YFDcVhJxlM-_ug7xFUnLetaswXh9MbhSasj6jcW_gYZXDkHk4nlSmJqNcVIg/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqqaxJz5DF1_Kc5mnkkrdaj-smeVqrObOLUjykuSeNcoWObugiwCtUaTBRLy_UdDOosXOoCBV_v9gd58YFDcVhJxlM-_ug7xFUnLetaswXh9MbhSasj6jcW_gYZXDkHk4nlSmJqNcVIg/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHj3NpFInd5V3Io1KpfdC-99U9LQqahQ27VedzEFrxCx3Ld5SO5hFx3XzBq6dInTK_xhXkdP1Xm0lKIsR78uY1Vy0ULd54XOSwfyKYqDwq4RxWFqWNOEZ6n6-cT1JX89tONFcm2MpV52o/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFP4Mj4K98Jqb-F23ks613zPw8mxfRepOvWQTOiBxeYRigB_TlPV_WOshxasrnSyhBTVMhj_9vequtcTK_uYr3dt0pAfKQJYw7Jsq1tIW35m1OL0aidAFn_iEkJ9DT3AXD88brFKSK2qE/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOcdGkT02-MRuMCNszSFy84r4VdEYu0K7d0jtIBdZEed3QWNh7hFmWOroKdWcrDCFm0TKxhhGoNuW5x6NC7Ipgqah1vaG4_B3is6xys2snYcoLlBgkY8kT75LeQA0sU7MJzz-XXgCLYyk/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F4weeb&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.4we-eb.blogspot.com">4we-eb</a></p>
</div></div>

لا تنس تغيير :

4weeb بـ : اسم صفحتك على الفيسبوك مثال : www.facebook.com/4weeb ..

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

تابع القراءة

أكــمل القــراءة

6 صناديق البحث بألوان مختلفة لمدونات بلوجر

| | Libellés : اضافة بلوجر, بلوجر, دروس البلوجر, كل

السلام عليكم ورحمة الله تعالى وبركاته .

تعد محركات البحث الخاصة بمدونات بلوجر من أهم الوسائل التي يحثاج اليها المدون ويبحث عنها، لما لها من دور مهم في راحت الزائر وهو يتصفح المدونة وبتالي لن يرحل منها، بحيث أنها تسهل عليه مأمورية البحث عن المواضيع والتدوينات التي يحتاج اليها ، وبتالى فهذه الأداة تسهل عليه المأمورية وتجعله في راحة وهو يتصفح مدونتك.

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

لذالك في هذه التدوينة سأتطرق واياكم الى مجموعة من الأشكال والألوان لترضي ذوق كل شخص، وسنتطرق الى كيفية اضافتها الى المدونات ( مدونات بلوجر فقط ).

الشكل الأول :

صورة توضيحية :

كود الشكل الأول :

    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2ABPVpVQfvaIffs4DzbSoUfrZnKPV8JSe5XQk9w2v6-wBPajNtXh2miO4veRWdeFpmTjICItjDL_ocGuJ6D0QpnMaJpuY-Nad_6Slbx2B6RahzmppZrBzrN0O4-IoxNGjWRqpmDQQ74s/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>

الشكل الثاني :

صورة توضيحية :

كود الشكل الثاني :

    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_buQjBE5kxMDfPHDPITE-7q_aiwGVUJ78F_mywZ-RGeByEIFXRhk51rXwDaHDg1noxfcaT6PXoeyxtbE8o_T3eZFa9FNIoUbc4Syv0ICekBddc9q6cvheMFeUmgvlCpY13YLE4oMqxhI/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>

الشكل الثالث :

صورة توضيحية :

كود الشكل الثاني :

    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSFThIpQU4hGrNChjtHhlc-BpkGm5vCYn2LSvIfjxoMpnOaAFOhJ2a3URfJSDq8mCo7IDlL8xtz7xOnJ2uTQt9CoM8e_aENxIGd-rr-0pFiWudBL3GLbjC51uHs0tX1WAAAo7l7Kf36iLd/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>

الشكل الرابع :

صورة توضيحية :

كود الشكل الرابع :

    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwCI3meQ3Y3_OQK6iKFlQpzNQ4AztGmMAt9k0LphroCZyDwTzK0nnQyxtEWt3j6RlMKwZwtu7XwIeo-KuXLOnvBpUDZZtf5YPlv9gg1TEm_Q7ISZW_ALkVq9d81Yo28VbwgWeaCzkIURq/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>

الشكل الخامس :

صورة توضيحية :

كود الشكل الخامس :

    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEL5lLclQu9U2SXbhYkrSshJXkVKc2FibQVTe3wrGZl0ONnj7NSb3BZ6j5PfnUMSThaZubjwqzN0HAusbpgQrtpJB1DvvAcIJwC5YNtUeZXwC6T8uFS0ZkaWt_IAS_XUhsWbMrYcHUzuxs/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>

الشكل السادس ( الأخير )

صورة توضيحية :

كود الشكل السادس :

    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-Q96sM0GleQu2ch_FwwKNAV9JtTA0MyN9akWMEf80KmrQELzNtY1YICjeBtOo89qixgUXPVvWZ3_hqZFkfB5UW7v5RngpyZSGWRYbMkwIJCAPm-dHwzcJi5G_PX1GDM5NvOPL5Ohg0ST/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>
    <div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
    </div>

إلى هنا نقوم قد أنهينا الشرح أتمنى أن ينال اعجاب الجميع .

أتمنى أن تدعم المدونة بالضغط على زر الاعجاب في الأسفل والى اللقاء في درس آخر ان شاء الله .

تابع القراءة

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

وقبل القيام باي تغيير قم بحفظ نسخة احتياطية للقالب

من لوحة التحكم اتجه الى تصميم ثم تحرير HTML

ضع علامة في خانة توسيع القوالب

ابحث عن الكود التالي : ]]></b:skin>

ثم ضع قبله كود CSS التالي :