السلام عليكم

اليوم سوف نقوم بالتعرف على كيفية اضافة عداد ترقيم الصفحات لمدونات بلوجر مع تعديل الاستايل ليناسب موقعك.

يمكنك معاينة الاضافة في قالب ويب العرب

  1. قم بالذهاب الى المدونة ثم اضغط على قالب
  2. اضغط على تحرير html
  3. اضغط على ctrl + f و اطبع nextprev ثم اضغط enter
  4. امسح كل محتوي العنصر ثم بعد وسم استدعاء جيكويري اطبع الاكواد التالية
    
    <style>
    /* Pagination */
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    .posts-pagination,
    .posts-pagination ul {
        padding: 0;
        margin: 0;
        text-align: center;
    }
    .posts-pagination ul { display: inline-block; vertical-align: middle;}
    .posts-pagination li {
        float: right;
        display: block;
        height: 30px;
        background-color: #fff;
        line-height: 30px;
        text-align: center;
        text-transform: capitalize
    }
    
    .posts-pagination a,
    .posts-pagination .dots {
        padding: 0 15px;
        height: 100%;
        color: #0275d8;
        display: block;
    }
    .posts-pagination .dots { padding: 5px; }            
    .pagi-prev:after,
    .pagi-next:after { 
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    
    .posts-pagination a {
        position: relative;
        box-shadow: 0 2px 1px transparent;
        text-decoration: none;
        border: 1px solid #e1e1e1;
        -webkit-transition: all 1s ease, color .7s ease;
        transition: all 1s ease, color .7s ease;
        cursor: pointer;
    }
    .posts-pagination li:hover a {
        background-color: #efefef;
    }
    
    .posts-pagination .active-btn a,
    .posts-pagination .active-btn a:hover {
        background-color: #0275d8;
        border-color: #0275d8;
        color: #fff;
    }
    .posts-pagination .disabled a {
        cursor: not-allowed
    }
    .posts-pagination li.disabled:hover a {
        background-color: #fff
    }
    </style>
    
  5. و بعده قم باضافة كود javascript
    
    <!-- Pagination code by www.w3arab.info -->
    <script type='text/javascript'>
              // <![CDATA[ 
              window.onload = function () {
       'use strict';
                var data,
                    newPath,
                    labelpath,
                    labelName,
                    maxPosts = 7, // per page
                    btnsPerPage = 3, // nav btns
                    startDots = "<li><span class='dots'>...</span></li>", // clollapsed nav dots
                    endDots = "<li><span class='dots'>...</span></li>", // clollapsed nav dots
                    outerNav = true,
                    prevBtnHTML = "<span class='pagi-prev'>⤏</span>",
                    nextBtnHTML = "<span class='pagi-next'>⤎</span>",
                    siteProtocol = window.location.protocol + '//',
                    siteHost = window.location.hostname,
                    activePageNum = 1,
                    timeStamp,
                    blogFeeds,
                    time, tTemp,
                    is_label;
                function currentPageNum() {
                  if (/pgNum=d+/gi.test(window.location.hash)) {
                    activePageNum = +/d+/.exec(window.location.hash);
                  }
                }
                currentPageNum();
    
                var paginHTML = "<div class='posts-pagination clearfix'><ul>";
                var paginInnerHTML = '';
    
                function feedPath() {
                  if (!/label/.test(window.location.pathname)) {
                    blogFeeds = "/feeds/posts/default?alt=json";
                    is_label = false;
                  } else {
                    labelpath = window.location.pathname.split('/');
                    labelName = labelpath[labelpath.length - 1];
                    blogFeeds = "/feeds/posts/summary/-/" + labelName + "?alt=json";
                    is_label = true;
                  }
                }
    
                function ajaxJson(url) {
                  var httpRequest;
                  if (window.XMLHttpRequest) {
                    httpRequest = new XMLHttpRequest();
                  } else if (window.ActiveXObject) {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  httpRequest.onreadystatechange = function() {
                    if (httpRequest.status === 200 && httpRequest.readyState === 4) {
                      data = JSON.parse(this.responseText);
                      pathInit();
                    }
                  };
                  httpRequest.open('GET', url, true);
                  httpRequest.send(null);
                }
    
                function navInit() {
                  feedPath();
                  ajaxJson(blogFeeds);
                }
                navInit();
    
                function timestampInit(postIndex) {
                  time = data.feed.entry[postIndex].published.$t.split('.');
                  tTemp = time[0];
                  tTemp += time[1].substr(-6);
                  timeStamp = tTemp;
                }
    
                function pathInit() {
                  var lastBtn = '',
                      locationList = [],
                      beforeAfterActiveBtn, nextBtns, prevBtns, availablePages;
    
                  // all posts / posts per page
                  availablePages = Math.ceil(data.feed.entry.length / maxPosts);
                  // convert even num
                  if (!(btnsPerPage % 2)) btnsPerPage += 1;
    
                  beforeAfterActiveBtn = (btnsPerPage - 1) / 2;
                  nextBtns = beforeAfterActiveBtn + activePageNum;
                  prevBtns = activePageNum - beforeAfterActiveBtn;
    
                  if (btnsPerPage > availablePages) {
                    btnsPerPage = availablePages;
                  }
    
                  var startPage = prevBtns,
                      pagesLen = nextBtns;
    
                  if (prevBtns < 3) {
                    startPage = 2;
                    pagesLen = Math.min(btnsPerPage + 1, availablePages);
                    startDots = "";
                  }
    
                  if (pagesLen >= availablePages - 1) {
                    startPage = Math.max(availablePages - btnsPerPage, 2);
                    pagesLen = availablePages;
                    endDots = "";
                  }
    
                  function initFirstBtn(content, cont) {
                    newPath = siteProtocol + siteHost + ( (is_label) ? "/search/label/" + labelName : "" );
                    paginInnerHTML += "<li" + ((activePageNum === 1 && !cont) ? " class='active-btn' " :
                                                 (activePageNum === 1 && cont) ? " class='disabled'" : "") +
                      "><a href='" + (!cont && activePageNum === 1 || cont ? 'javascript:void(0)' : newPath) + 
                      "'>" + content + "</a></li>";
                    if (!cont) locationList.push(activePageNum === 1 ? 'activeLink' : newPath);
                  }
                  // prev btn
                  if (pagesLen > 1) {
                    initFirstBtn(prevBtnHTML, 1);
                  }
                  // first btn
                  initFirstBtn('1', 0);
                  paginInnerHTML += startDots;
    
                  if (pagesLen > 1) {
                    // nav btns
                    if (pagesLen > 2) {
                      for (var i = startPage, l = pagesLen; i < l; i++) {
                        timestampInit(((i - 1) * maxPosts) - 1);
                        new_path();
                        newPath += timeStamp + "&max-results=" + maxPosts +'#pgNum=' + i;
                        paginInnerHTML += "<li"+((i === activePageNum) ? " class='active-btn' " : "") +
                          "><a href='" + (activePageNum === i ? 'javascript:void(0)' : newPath) + "'>"+ i +
                          "</a></li>";
                        locationList.push(activePageNum === i ? 'activeLink' : newPath);
                      }
    
                    }
                    function initLastBtn(content, cont) {
                      timestampInit( ((availablePages - 1) * maxPosts) - 1 );
                      new_path();
                      newPath += timeStamp + "&max-results=" + maxPosts;
                      if (!cont) {
                        paginInnerHTML += endDots;
                      }
                      paginInnerHTML += "<li" + ((availablePages === activePageNum && !cont) ? " class='active-btn' " :
                                                   (availablePages === activePageNum && cont) ? " class='disabled'":"") + "><a href='" +
                        (!cont && activePageNum === availablePages || cont ? 'javascript:void(0)' : newPath) +
                        (!cont ? '#pgNum=' + availablePages : '') + "'>" + content + "</a></li>";
                      if (!cont) 
                        locationList.push(activePageNum === availablePages ? 'activeLink' : newPath + '#pgNum=' + availablePages);
                    }
                    // last page
                    initLastBtn(availablePages, 0);
                    // last HTML
                    initLastBtn(nextBtnHTML, 1);
                  }
                  paginHTML += paginInnerHTML + "</ul></div>";
                  if (document.getElementsByClassName('hfeed')[0]) 
                    document.getElementsByClassName('hfeed')[0].insertAdjacentHTML('beforeend', paginHTML);
    
                  /* nav prev/next*/
                  var navPrevBtn = document.getElementsByClassName('pagi-prev')[0],
                      navNextBtn = document.getElementsByClassName('pagi-next')[0],
                      activeBtnIndex = locationList.indexOf('activeLink');
    
                  if (pagesLen > 1) {
                    navControl(navPrevBtn, -1);
                    navControl(navNextBtn, 1);
                  }
    
                  function new_path() {
                    is_label ? newPath = siteProtocol + siteHost + "/search/label/"+labelName+"?updated-max=" 
                       : newPath = siteProtocol + siteHost + "/search?updated-max=";
                  }
    
                  function navControl(nav, index) {
                    if (nav) {
                      nav.addEventListener('click', function () {
                        // if active index === 0 and previous nav clicked or active index === numPages and next nav clicked
                        if (activeBtnIndex === 0 && index === -1 || activeBtnIndex === locationList.length - 1 && index === 1) {
                          return false;
                        }
                        window.location = locationList[activeBtnIndex + index];
                      });
                    }
                  }
                }
              };
              //]]>
    </script>
    
  6. اضغط على حفظ قالب save html

لتغيير لون الاستايل قم بتغيير الكود الي بلون ازرق الى لون قالبك

اي سؤال اكتبه في تعليق و انشاء الله سوف يتم الاجابة