-->

تقنية ، إنترنت ، برامج ، إسلامية ، إقتصادية ، إجتماعية ، تعليمية ، رياضية

سُبْحَانَ اللَّهِ وَبِحَمْدِهِ ... سُبْحَانَ اللَّهِ العَظَيم

الأربعاء، 1 مارس 2017

تغير رسالة أقدم ورسالة أحدث والرئيسية ببلوجرBlogger platform


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

الطريقة الأولى : الإستبدال بالصور

 الخطوة الأولى 

1- ندخل الى لوحة تحكم المدونة .  

 2- نضغط على كلمة  قالب  من القائمة الجانبية   مثل الصورة التالية :


 بعد الضغط على كلمة قالب سوف تظهر لنا شاشة مثل الصورة التالية:

 ومن  تلك الصورة السابقة نضغط على تحرير   HTML    ، لكي يظهر لنا الصورة التالية:  






3- نبحث عن الوسم  <data:newerPageTitle/> (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

             4- بعد أن نجد الوسم السابق نستبدله بالكود التالي   : 

 <img src='رابط صورة رسائل أحدث'/>



5 - نبحث عن الوسم  <data:olderPageTitle/> (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

             6 - بعد أن نجد الوسم السابق نستبدله بالكود التالي   : 

<img src='رابط صورة رسائل أقدم'/>

          7- نبحث عن الوسم <data:homeMsg/> (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

                   8 - بعد أن نجد الوسم السابق نستبدله بالكود التالي   : 

<img src='رابط صورة الصفحة الرئيسية'/>

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

نقوم بالبحث في القالب عن الكود  #blog-pager-newer-link ،،، ثم نحدده حتى نصل لقوس الإغلاق } فكل كود ستجده يبدأ بقوس { ثم ستجد أكواد ثم ينتهي بقوس } نحن نريد تحديد الكود من بدايته حتى نهايته ثم نستبدله بالكود التالي :
#blog-pager-newer-link {
float:right;
line-height:1.8em;
}


نفس الشئ ولكن مع هذا الكود #blog-pager-older-link  ، ونستبدله بالكود التالي :


#blog-pager-older-link {
float:left;
margin-left:8px;
line-height:1.8em;
}

ونفس الشئ ولكن مع هذا الكود #blog-pager  ، ونستبدله بالكود التالي :

#blog-pager {
float:center;
height:40px;
line-height:1.8em;
text-align:center;
padding-top:15px
}

ثم نبحث عن الوسم الآتي ]]></b:skin>  ، ثم نضع فوقه مباشرة الكود التالي :


.home-link,.blog-pager-newer-link,.blog-pager-older-link {
background: #000;background: -moz-linear-gradient(top,#888886,#000);background: -webkit-linear-gradient(top,#888886,#000);
color:#fff;
font-size:17px;
font-weight:bold;
line-height:16px;
text-decoration:none;
border:1px solid #000;
padding:5px 15px;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;
}

.home-link:hover,.blog-pager-newer-link:hover,.blog-pager-older-link:hover {
background: #888886;background: -moz-linear-gradient(top,#000,#888886);background: -webkit-linear-gradient(top,#000,#888886);
color:#fff;
text-decoration:none;
border:1px solid #000;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;
}

مع ملاحظة الآتي :

اللون #000 واللون #888886 الأوائل هما لوني خلفية الزر وال#fff هو لون الخط 
وهذا الكود border:1px solid #000; يخص حجم ولون الإطار حول الزر
أما border-radius:2px فكلما زدت في الرقم 2 سيصب الزر أكثر إستدارة
اللون #888886 واللون #000 الثانيين  هما لوني خلفية الزر عند مرور الماوس
وال#fff هو لون الخط 
جزى الله خيرا كل من ساهم فيه

ليست هناك تعليقات:

إرسال تعليق