شرح إضافة ترقيم الصفحات لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

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

أول خطوة هي البحث عن الوسم التالي

<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>

تاني خطوة هي البحث عن الوسم التالي

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

اتمنى ان تكونو قد استفدتم من الاضافة و بالتوفيق .