4We-eb: دروس البلوجر

شرح تعديلات واجهة تحرير قوالب بلوجر الجديدة

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

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

بالنسبة للبحث عن الأكواد داخل القالب يجب ان تضغط داخل إطار التحرير ضغطة بحيث يتم تنشيطة ثم تضغط زري Ctrl+F لكي يظهر شريط البحث المخصص للنموذج الجديد تكتب ما تريد البحث عنه ثم تضغط Enter
أيضا بالنسبة لاكواد الستايل وهي الاكواد التي تقع بين الوسمين <b:skin> و </b:skin>
يجب أن يتم توسيع العناصر الخاصة بها إن اردنا أن نضيف كود مثلا فوق <b:skin>

إمكانية الإستبدال

ومن المميزات الإضافية أيضا في الواجهة الجديدة إمكانية الإستبدال ويمكنك إستبدال أى جزء بالضغط على أزرار

Ctrl+Shift+F شاهد الصورة التالية للتوضيح

أيضا إمكانية إستبدال الكل إن أردت أن تستبدل كلمة او كود متكررة في القالب يمكنك إستبدالها مرة واحده بنفس الطريقة السابقة لكن بالضغط على أزرار Ctrl+Shift+R ولن تظهر Yes , No بل سيتم الإستبدال مباشرة

أزرار إضافية

تحتوي التحسينات الجديدة على زر

الرجوع الى الإعدادات الإفتراضية لقوالب عناصر واجهة المستخدم

وهذا الزر يمكنك من الرجوع الى الإعدادات الإفتراضية للأدوات مثلا لديك آداة قمت بعمل تعديلات بها عن طريق القالب وتريدها أن تعود الى التنسيق الإفتراضي فهذا الزر سيساعدك

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

حتى الآن هذه هي المميزات التي وضحت من تجربتي الاولى مع الواجهة الجديدة وأترك لك إكتشاف الباقي تحياتي

منقول من مدونة : كن مدون (للإفادة)

تابع القراءة

أداة Firebug السحرية للتعديل على قوالب البلوجر

| | Libellés : بلوجر, دروس البلوجر, كل, Firebug

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

نبذة عن الأداة :

هى عبارة عن اضافة سحرية يتم تركيبها على المتصفـح (Google Chrome, Firefox) تسهل لك عملية التعديل فى القوالب او صفحات الويب .

معلومات عن الأداة :

حجم الآداة : 2 ميجابايت .

تتوافق مع :

متصفح Google Chrom .

متصفح Firefox .

مميزات الاداة :

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

تحميل الاداة :

لتحميل اداة فاير بيج للفايرفوكس : من هنا
لتحميل اداة فاير لايت لجوجل كرومى : من هنا

تابع القراءة

صندوق اعجابات الفيسبوك بشكل جميل لمدونات بلوجر (كــود Css)

| | Libellés : بلوجر, دروس البلوجر, كل, CSS

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

وللمعاينة المباشرة المرجو التوجه الى المدونة التجريبية التالية : هــــــنـــا أو يمكنك مشاهدتها عن طريق الصورة التالية :-

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

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

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

الكـــود :

<center><style>.helperbloggerFB { width: 300px; height: 150px; border-radius: 3px; position: relative; background-color:#f4f4f4; padding:5px 10px 15px 0; } .helperbloggerFB, .helperbloggerFB:before, .helperbloggerFB:after { background: #f4f4f4; border: 1px solid #ccc; } .helperbloggerFB:before, .helperbloggerFB:after { content: ""; position: absolute; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .helperbloggerFB:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #ccc; } </style> <div class="helperbloggerFB"> <div style="height:155px;overflow:hidden"> <fb:like-box href="https://www.facebook.com/4weeb" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&header=false&height=179&href=https%3A%2F%2Fwww.facebook.com%2F4weeb&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box> </div> </div> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script></center>

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

غير 4weeb بإسم صفحتك على الفيسبوك ( يوجد اثنان )

تابع القراءة

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

| | 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 باسم مدونتك ، وبعدها ستلاحظ رسالة الخطئ قد ظهرت .

تابع القراءة

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