طريقة اضافة ترقيم الصفحات فى البلوجر وبأكثر من شكل احتراف

بسم الله الرحمن الرحيم

:: أفضل ترقيم لصفحات بلوجر وبأكثر من شكل احتراف::

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

شرح التركيب

اذهب للوحة التحكم >> القالب >> تحرير HTML >> ابحث عن

<b:includable id='mobile-index-post' var='post'>

ثم اضف اسفله هذا الكود

<b:includable id='page-navi'><div class='pagenavi'><script type='text/javascript'>var pageNaviConf = {perPage: 7,numPages: 5,firstText: "الأولى",lastText: "الأخيرة",nextText: "»",prevText: "«"}</script><script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/><div class='clear'/></div></b:includable>

ملاحظات
perPage: 7 >> عدد المواضيع التى ستظهر فى كل صفحة
numPages: 5 >> عدد الصفحات التى ستظهر ثم ابحث عن

<b:include name='nextprev'/>

ثم استبدله بهذا الكود

<b:if cond='data:blog.pageType == "index"'><b:include name='page-navi'/><b:else/><b:if cond='data:blog.pageType == "archive"'><b:include name='page-navi'/></b:if><b:else/><b:if cond='data:blog.pageType == "item"'><b:include name='nextprev'/></b:if></b:if>

ثم ابحث عن وسم ]]></b:skin>

وضع قبلـــــــــــــــه كود الترقيم الذى سينال اعجابك

:: الشكل الأول ::

الكـــــــــــــــــــــــــود

#blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 10px;}#blog-pager a, .pagenavi span, .pagenavi a {background-color: #3BB3E0;padding: 5px 10px;position: relative;margin: 2px;font-size: 12px;text-decoration: none;color: white;border: solid 1px #186F8F;background-image: linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -o-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -moz-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -ms-linear-gradient(bottom, #2CA0CA 0%, #3EB8E5 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #2CA0CA), color-stop(1, #3EB8E5) );-webkit-box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;box-shadow: inset 0px 1px 0px #7FD2F1, 0px 1px 0px white;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}#blog-pager a:hover, .pagenavi a:hover {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}#blog-pager-older-link, #blog-pager-newer-link { float: none;}.pagenavi .current {background-image: linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -o-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -moz-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -ms-linear-gradient(bottom, #3EB8E5 0%, #2CA0CA 100%);background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3EB8E5), color-stop(1, #2CA0CA) );}

:: الشكل الثانى ::

الكــــــــــــــــــــــود

#blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 15px;}.pagenavi .pages {display: none;}#blog-pager a, .pagenavi span, .pagenavi a {padding: 5px 10px;text-decoration: none;font-family: arial;color: white;margin: 2px;background: black;background-position: bottom;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;border-radius: 30px;font-size: 20px;}#blog-pager a:hover, .pagenavi a:hover {background: orange;}#blog-pager-older-link, #blog-pager-newer-link { float: none;}.pagenavi .current {background: orange;}

:: الشكل الثالث ::

الكـــــــــــــــــــــود

#blog-pager, .pagenavi { clear: both; text-align: center; margin: 30px auto 10px;}#blog-pager a, .pagenavi span, .pagenavi a {text-decoration: none;color: #333;text-shadow: 0 1px 0 rgba(255, 255, 255, .5);background-color: #F8F8F8;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCFCFC),color-stop(100%,#F8F8F8));background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);padding: 5px 10px;border: 1px solid lightGrey;font-weight: bold;font-size: 12px;vertical-align: middle;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;margin: 2px 2px;-webkit-transition: .0s ease-in!important;-moz-transition: .0s ease-in!important;-ms-transition: .0s ease-in!important;-o-transition: .0s ease-in!important;transition: .0s ease-in!important;}#blog-pager a:hover, .pagenavi a:hover {border-color: #C6C6C6;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);}#blog-pager-older-link, #blog-pager-newer-link { float: none;}.pagenavi .current {border-color: #C6C6C6;background-color: #E9E9E9;background-image: none;-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);}.pagenavi a:active {border-color: #C6C6C6;background-color: #E9E9E9;background-image: none;-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);}

ثم قم بحفظ القالب ومبروك عليك ترقيم صفحات مميز لايوجد مجال لشرح كل كود على حدة فلاحظ الجزء المحدد بكل كود وغيره بما يناسبك ولأى استفسار عن أى جزء فى الأكواد اترك تعليقك ◄ كلمة شكر على المجهود المبذول تكفى ►

طريقة اضافة ترقيم الصفحات فى البلوجر وبأكثر من شكل احتراف

شرح التركيب

:: الشكل الأول ::

:: الشكل الثانى ::

:: الشكل الثالث ::

آخر المشاركات

تعليقات: 0

إرسال تعليق