اضافة ترقيم الصفحات لتسهيل التصفح في مدونات بلوجر بتصميم خاص

بما أن سهولة التنقل في الموقع او المدونة يعتبر من المعايير الهامة توافرها في اي موقع ، فأحظرت لكم اضافة ترقيم الصفحات .

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

]]></b:skin>

ثم قم بلصق اكواد CSS التالية قبلة :

#blog-pager{
padding:15px;
min-height:40px;
font-size:14px;
clear:both;
background:#f1f7ff; 
}
.blog-pager {
background:none;
}
.displaypageNum a,.showpage a,.pagecurrent{
line-height:23px;
outline:1px solid #1e1b06; 
border:1px solid #fee302;
height:23px;
font-family:Arial,sans-serif;
float:right;
padding:5px 10px;margin-right:5px;
color:#fee302;
background-color:#1e1b06;
cursor:pointer;
}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{
background:#fee302;
text-decoration:none;
outline:1px solid #fee302;
border:1px solid #1e1b06;
color: #1e1b06;
transition:all .8s ease;
-moz-transition:all .8s ease;
-webkit-transition:all .8s ease;
-o-transition:all .8s ease;
}
#blog-pager .showpage, #blog-pager,.pagecurrent{
font-weight:bold;
color: #1e1b06;
}
.showpageOf{
line-height:23px;
outline:1px solid #1e1b06;
border:1px solid #fee302;
height:23px;
font-family:Arial,sans-serif;float:right;
padding:5px 10px;margin-right:5px;
color:#fee302;
background-color:#1e1b06;
cursor:pointer;
}
#blog-pager .pages{
border:none;
}

لتعديل الألوان يوجد ثلاثة الوان فقط ابحث في الكود عن f1f7ff (لون الخلفية) واستبدله باللون الذي تريد .
ابحث عن 1e1b06 لتبديل اللون الأسود المصفر واستبدله.
ابحث عن fee302 لتبديل اللون الاصفر واستبدله باللون الذي تريد .
بالنسبة للخطوط ابحث عن Arial واستبدله بإسم الخط الذي تريد.

ثانيا : ضع الكود التالي قبل اغلاق الوسم body :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type="text/javascript">
/*<![CDATA[*/
var perPage=10;
var numPages=10;
var firstText ='الصفحة الأولى';
var lastText ='الصفحة الأخيرة';
var prevText ='السابق';
var nextText ='التالي';
var urlactivepage=location.href;
var home_page="/";

    if (typeof firstText == "undefined") firstText = "First"; 
    if (typeof lastText == "undefined") lastText = "Last";
    var noPage;
    var currentPage;
    var currentPageNo;
    var postLabel;
    pagecurrentg();

    function looppagecurrentg(pageInfo) {
        var html = '';
        pageNumber = parseInt(numPages / 2);
        if (pageNumber == numPages - pageNumber) {
            numPages = pageNumber * 2 + 1
        }
        pageStart = currentPageNo - pageNumber;
        if (pageStart < 1) pageStart = 1;
        lastPageNo = parseInt(pageInfo / perPage) + 1;
        if (lastPageNo - 1 == pageInfo / perPage) lastPageNo = lastPageNo - 1;
        pageEnd = pageStart + numPages - 1;
        if (pageEnd > lastPageNo) pageEnd = lastPageNo;
        html += "<span class='showpageOf'> الصفحة " + currentPageNo + ' من ' + lastPageNo + "</span>";
        var prevNumber = parseInt(currentPageNo) - 1;
      
  //Iccsi was here, doing magic      
        if (currentPageNo > 1) {
   if (currentPage == "page") {
     html += '<span class="showpage firstpage"><a href="' + home_page + '">' + firstText + '</a></span>'
   } else {
     html += '<span class="displaypageNum firstpage"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + firstText + '</a></span>'
   }
  }
  
  if (currentPageNo > 2) {
            if (currentPageNo == 3) { 
                if (currentPage == "page") {
                    html += '<span class="showpage"><a href="' + home_page + '">' + prevText + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + prevText + '</a></span>'
                }
            } else {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + prevNumber + ');return false">' + prevText + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + prevNumber + ');return false">' + prevText + '</a></span>'
                }
            }
        }
        if (pageStart > 1) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
            }
        }
        if (pageStart > 2) {
            html += ''
        }
        for (var jj = pageStart; jj <= pageEnd; jj++) {
            if (currentPageNo == jj) {
                html += '<span class="pagecurrent">' + jj + '</span>'
            } else if (jj == 1) {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
                }
            } else {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'
                }
            }
        }
        if (pageEnd < lastPageNo - 1) {
            html += ''
        }
        if (pageEnd < lastPageNo) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
            }
        }


        var nextnumber = parseInt(currentPageNo) + 1;
        if (currentPageNo < (lastPageNo - 1)) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + nextnumber + ');return false">' + nextText + '</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + nextnumber + ');return false">' + nextText + '</a></span>'
            }
  }
  
  if (currentPageNo < lastPageNo) {
   //Iccsi was here, doing magic
   if (currentPage == "page") {
     html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastText + '</a></span>'
   } else {
     html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastText + '</a></span>'
   }
        }

        var pageArea = document.getElementsByName("pageArea");
        var blogPager = document.getElementById("blog-pager");
        for (var p = 0; p < pageArea.length; p++) {
            pageArea[p].innerHTML = html
        }
        if (pageArea && pageArea.length > 0) {
            html = ''
        }
        if (blogPager) {
            blogPager.innerHTML = html
        }
    }

    function totalcountdata(root) {
        var feed = root.feed;
        var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);
        looppagecurrentg(totaldata)
    }

    function pagecurrentg() {
        var thisUrl = urlactivepage;
        if (thisUrl.indexOf("/search/label/") != -1) {
            if (thisUrl.indexOf("?updated-max") != -1) {
                postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
            } else {
                postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
            }
        }
        if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
            if (thisUrl.indexOf("/search/label/") == -1) {
                currentPage = "page";
                if (urlactivepage.indexOf("#PageNo=") != -1) {
                    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
                } else {
                    currentPageNo = 1
                }
                document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")
            } else {
                currentPage = "label";
                if (thisUrl.indexOf("&max-results=") == -1) {
                    perPage = 20
                }
                if (urlactivepage.indexOf("#PageNo=") != -1) {
                    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
                } else {
                    currentPageNo = 1
                }
                document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + postLabel + '?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')
            }
        }
    }

    function redirectpage(numberpage) {
        jsonstart = (numberpage - 1) * perPage;
        noPage = numberpage;
        var nameBody = document.getElementsByTagName('head')[0];
        var newInclude = document.createElement('script');
        newInclude.type = 'text/javascript';
        newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
        nameBody.appendChild(newInclude)
    }

    function redirectlabel(numberpage) {
        jsonstart = (numberpage - 1) * perPage;
        noPage = numberpage;
        var nameBody = document.getElementsByTagName('head')[0];
        var newInclude = document.createElement('script');
        newInclude.type = 'text/javascript';
        newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + postLabel + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
        nameBody.appendChild(newInclude)
    }

    function finddatepost(root) {
        post = root.feed.entry[0];
        var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
        var timestamp = encodeURIComponent(timestamp1);
        if (currentPage == "page") {
            var pAddress = "/search?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
        } else {
            var pAddress = "/search/label/" + postLabel + "?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
        }
        location.href = pAddress
    }
/*]]>*/
</script>
</b:if>
</b:if>

الآن قم بتغيير قيمة المتفير perPage الى العدد الذي يساوي عدد التدوينات في الصفحة الرئيسية .
وايضا غير قيمة المتفير numPages الى عدد ارقام الصفحات التي تريدها ان تظهر ، طبعا الافتراضي لقيمة المتغيرين السابقين 10 ، مكان هذه المتغيرات في بداية الكود السابق ، وبإمكانك أيضا تغيير الكلمات التالية (التالي ، السابق ، الصفحة الأولى ، الصفحة الأخيرة) ان اردت ذلك.
الى هنا ان انتهى شرح "اضافة ترقيم الصفحات لتسهيل التصفح في مدونات بلوجر بتصميم خاص"، وإذا واجهت اي مشكلة ضعها في تعليق ، دمتم بخير.