مساحة إعلانية

الخميس، 7 فبراير، 2013

الخميس، 7 فبراير، 2013

إستبدال رسائل أقدم ورسائل أحدث بصور أو أزرار 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. شكرا لك علي الاضافة الرائعة

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

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