السبت، 22 فبراير 2014
في هذا الدرس أحبابي في الله سوف نتعلم كيفية ترقيم صفحات مدونة بلوجر Page Navigation widget بحيث تمكنك هذه الإضافة من تسهيل تصفح الزوار لصفحات مدونتك بسهولة، خصوصا بعد أن تكون المدونة ممتلئة بالمواضيع ، ولكن الكثير من الإضافات تكون معدلة وتناسب مدونة الشخص الذي صنع أنشاء ذلك الكود ، هذا يجعل الإضافة غير متناسقة مع باقي المدونات حسب الشكل والألوان ، ولكن اليوم أحضرت هذا الكود الذي يوفر لك امكانية إختيار تنسيق المفضل ليصبح مناسب لمدونتك...المهم كي لا أطيل عليكم.
1 - عاين صور النماذج التالية و إختر المناسب لك .
1 - عاين صور النماذج التالية و إختر المناسب لك .
النمودج الأول
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
النموذج الثاني
#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}
النموذج الثالث
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}
النمودج الرابع
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
النمودج الخامس
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
النمودج السادس
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
النمودج السابع
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
كما تلاحظون كل نمودج يوجد تحته أكواد الستايل الخاصة به
الأن جاء وقت التعديل
2 - نذهب للوحة التحكم بلوجر ثم القالب نقوم بأخد نسخة إحطياطية كما تعودنا دائما.
نقوم بتحرير html ونبحث بالإستعانة بالزرين crtl+f عن الوسم: </b:skin>
ونقوم لصق كود الستايل الخاص بأحد النماذج أعلاه.
3 - نقوم بالبحث عن الوسم : </body> ثم نضع فوقه مباشرة هذا الكود:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='البداية';
var lastText ='النهاية';
var prevText ='« السابق';
var nextText ='التالي »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="https://warch.googlecode.com/svn/trunk/blog-page/blog-page.js"/>
</b:if>
</b:if>
الرقم 7 يعني عدد الصفحات الظاهرة في الترقيم
الرقم 6 يعني عدد المواضيع المشاركات في الصفحة ، يجب جعلها بنفس عدد المشاركات التي قمت بوضعها في إعدادت المشاركات.
يمكنك إضافة هذا الكود لإخفاء أزرار "البداية" و "النهاية" وذلك في أكواد css.
.firstpage, .lastpage {display: none;}
أما إن لاحظت وجود مشكلة في عدد المشاركات بصفحة التسميات في يمكنك مشاهدة هذا الموضوع حل مشكلة الترقيم و التسميات
أي إستفسار أنا في الخدمة في أمان الله.
هناك تعليق واحد:
يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r
الاشتراك في:
تعليقات الرسالة (Atom)
مميزة
تعليقات الزوار
أرشيف المدونة الإلكترونية
-
▼
2014
(100)
-
▼
فبراير
(11)
- تحميل قوالب بلوجر بمناسبة إقتراب شهر رمضان
- إضافة أزرار المشاركة الإجتماعية لمدونة بلوجر
- الطريقة الصحيحة لدمج تعليقات الفيس بوك مع تعليقات ...
- كيفية إضافة خدمة 'اتصل بنا' لمدونة بلوجر بشكل إحترافي
- قالب مدونة كمبيوتر العرب متاح للتحميل
- نصائح قيمة إن كنت تفكر في تحقيق الأرباح من مدونات ...
- إضافة ترقيم لصفحات المدونة بلوجر حسب اللون المفضل
- كيفية جعل الصفحات الثابتة بعرض المدونة بلوجر
- إضافة شاحنة الفيس بوك لزيادة المعجبين بمدونتك
- وضع صندوق إعجابات الفيسبوك في بلوجر
- كيفية حذف "سكرول بار" السفلي في بلوجر
-
▼
فبراير
(11)
العفو أخي الكريم مرحبا بك في أي وقت =s
ردحذف