اضافة خيارات التنقل مع أسماء المواضيع

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

معاينــة

والآن مع طريقة التركيب

أول شئ أضف الكود التالي فوق الوسم

والكود عبارة عن سطرين الأول يخص مكتبة jquery  فإن كنت اضفت المكتبة فلا تضيف السطر الأول

والثاني يخص خط  droid arabic kufi فإن كان لديك الخط لا تضيف السطر الثاني

         

يمكنك تغيير الكلمات العربية بالكود بما يتناسب معك

والان مرحلة التنسيق

أضف الكود التالي فوق الوسم ]]>

/*Cnmu.blogspot.com-pager*/
.cnmu-pager {
  font: bold 14px droid arabic kufi;
  border-bottom: 2px dashed #777;
  border-top: 2px dashed #777;
  float: right;
  margin-bottom: 20px;
  padding: 0;
  width: 500px;
}
.cnmu-pager li {
  float: right;
  list-style: none outside none;
  text-align: center;
  transition: all 0.7s ease 0s;
  width: 33%;
}
.cnmu-pager li:hover {
  background:#5A5A5A;
}
.cnmu-pager li a {
  display: block;
  min-height: 90px;
  padding: 5px 0;
  position: relative;
  width: 100%;
 text-decoration: none;
}
.cnmu-pager li a:hover {
  color:#fff;
}
.cnmu-pager li.next {
  border-left:1px solid #777 !important;
  width:49%;
}
.cnmu-pager li.previous {
  width:49%;
}
.cnmu-pager strong {
  color: #ccc;
  display: block;
  font-size: 20px;
  margin-bottom: 8px;
}
.cnmu-pager span {
  font: bold 15px serif;
}

.cnmu-pager li.next i,.cnmu-pager li.previous i{
  color: #CCCCCC;
  font: 45px tahoma;
  margin-top: 25px;
  }
.cnmu-pager li.next i {float: right;}
.cnmu-pager li.previous i {float: left;}
.fa-chevron-right:before {content:"\2039";}
.fa-chevron-left:before {content: "\203A";}

هذا #777  هو لون الإطارات عدله باللون المناسب

قم بزيادة او انقاص الرقم 500 بحسب عرض الموضوع في قالبك

هذا #5A5A5A هو اللون عند تمرير الماوس

هذا #ccc هو لون كلمة السابق والتالي

وهذه هي الجزئية الأخيرة

 وهي ما تحدثنا عنه في البداية وهي اخفاء خيارات التنقل الأساسية في بلوجر من داخل المواضيع
ابحث عن هذا الكود