ترقيم الصفحات في مدونات بلوجر

ترقيم الصفحات لمدونات بلوجر

how-to-add-numbered-page-navigation-widget-for-blogger

إن ترقيم صفحات بلوجر ، بدلا من (أحدث المشاركات) ،(وأقدم المشاركات ) يمكن أن تساعد زوار مدونتك في التنقل بسرعة بين صفحات مدونتك،(كالقفز من صفحة إلى أخرى، أو النقر على صفحة معينة ) وهناك عدة طرق لإضافة تلك الميزة.هناك عدة طرق لترقيم صفحات مــدونات بلوجر، لتســــــــريع الإنتقال بين مواضــــيع المـــــدونة

. ولعـــــل أبرز تلك الطـــرق وأنجــــــزها ، الطريقة الأولى ،لإن غالبيتنا لا يحبذون التطرق إلى التعديل على القالب عن طريق HTML .

1- إضافة أداة HTML/JavaScript

من لوحة التحكم نضغط على التخطيط ثم إضافة أداة HTML/JavaScript وندخل الكود التالي:

<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.uniegy.blogspot.com */
.showpageArea a {text-decoration:underline;color: #333333;}/* www.uniegy.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px  solid #ffffff;-webkit-border-radius:6px;-moz-border-radius:6px;margin:0  3px;padding:3px 5px; background: #ffa200; background:  -moz-linear-gradient(top, #ff9600 0%, #fd780d 50%, #2c2c2c 51%, #1b1b1b  100%); background: -webkit-gradient(linear, left top, left bottom,  color-stop(0%,#ff9600), color-stop(50%,#ff631e),  color-stop(51%,#fea700), color-stop(100%,#fe7200)); filter:  progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7e00',  endColorstr='#6d6d6d',GradientType=0 ); }/* www.uniegy.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #dddddd;  background: #c26900; background: -moz-linear-gradient(top, #d76000 0%,  #f48e56 50%, #9d4323 51%, #8a3413 100%); background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcb802),  color-stop(50%,#f7a257), color-stop(51%,#fc7939),  color-stop(100%,#d8641d)); filter:  progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa740',  endColorstr='#ff9f22',GradientType=0 ); } /* www.uniegy.blogspot.com */
.showpagePoint {color: #808080;text-decoration:none;border:1px solid  #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0  3px;padding:3px 5px; background: #e2e2e2; background:  -moz-linear-gradient(top, #e2e2e2 0%, #ff7200 50%, #d1d1d1 51%, #fefefe  100%); background: -webkit-gradient(linear, left top, left bottom,  color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb),  color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter:  progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  endColorstr='#fefefe',GradientType=0 ); }/* www.uniegy.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.uniegy.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.uniegy.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=10;
var upPageWord ='السابق';
var downPageWord ='التالي';
</script>
<script src='http://uinegy.googlecode.com/svn/wiki/uniegy_bloggerpagenavi.js' type='text/javascript'></script>

2- الطريقة الثانية عن طريق إضافة CSS بالتعديل على القالب HTML

نتوجه لوحة التحكمم > قالب > تحرير ونبحث( CTRL+F) عن ]]></b:skin> ونضع قبله الكود التالي على حسب النمط الذي تريد استخدامه.

النمط 1

كنز المعرفة،عالم بلا حدود ، ترقيم الصفحات لمدونات بلوجر

#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);}

النمط 3

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

النمط 4

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

ملاحظة: إذا كنت ترغب في إخفاء (First و Last) عليك إضافة هذا الكود أسفل كود النمط الذي أخترته.firstpage, .lastpage {display: none;}

2 - الأن نبحث على </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 ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

بعد تثبيت الإضافة قد ترغب في تغيير بعض من هذه الإعدادات الإفتراضية
كم عدد المشاركات التي ستظهر في كل صفحة من صفحات المدونة وغيرها من الإعدات التي بإمكانك استبدالها على حسب رغبتك.

مواضيع مميزة

ترقيم الصفحات في مدونات بلوجر







ترقيم الصفحات لمدونات بلوجر

التعليقات