إستبدال رسائل أقدم ورسائل أحدث بصور أو أزرار CSS

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

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

قم بالدخول لتحرير القالب  ولا تنسى أخذ نسخة إحتياطية 
ثم إبحث عنـــ <data:newerPageTitle/> وإستبدله بالتالي 

<img src='رابط صورة رسائل أحدث'/>
وإبحث عنــ <data:olderPageTitle/> وإستبدله بالتالي 

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

ثم إبحث عنــ <data:homeMsg/> وإستبدله بالتالي 

<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
}


ثم سنضع أكواد الــ CSS التالية فوق الوسم ]]></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 هو لون الخط 
قم بتغيير ما يعجبك وموفقين بإذن الله


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

  1. شكراا لك على الموضوع الجميل والمفيد ،،،

    ردحذف
  2. أسعدني مرورك أخي الكريم
    دمت بكل ود

    ردحذف
  3. السلام عليكم ورحمة الله تعالى وبركاته
    ماشاء الله عليك اخي الكريم
    شرح مميز وشامل
    لم تترك لي ما اقول في انتظار جديدك
    حياك الله

    ردحذف
  4. ساعدنى فى ان احصل على نفس الشكل الاقسام فى مدونتك مع العلم انه نفس القالب

    ردحذف
    الردود
    1. تفضل يا طيب راجع هذا الموضوع
      http://cnmu.blogspot.com/2013/05/Customize-Labels-Widget.html

      حذف
  5. سلام عليكم أخي موضوع جميل واعجبني كثير ودائما مواضيع جميلة ومفهومه بس انا عايزك تساعدني في تغير شكل مواضيع المدونة ليكون مثل مدوننتك واسف كتير على الأزعاج للمعاينة
    http://abdu-mohtarif.blogspot.com/

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

      حذف
  6. السلام عليكم
    بحثت في مدونتي عن هذه الاكواد لتبديلها ، فلم اجدها
    #blog-pager-newer-link
    #blog-pager-older-link
    #blog-pager

    http://al3mrya.blogspot.com/

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

      حذف
  7. شكرا لك علي الاضافة الرائعة

    ردحذف

نسعد بتعليقاتكم ومروركم
يرجى أن يكون التعليق في اطار الموضوع اى اسئلة أو تعليق يخص موضوع آخر او سؤال خارجي نعتذر عن عدم القدرة للرد عليه

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

جميع الحقوق محفوظة لــ كن مدون 2018 ©