أعلان الهيدر

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

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


أليوم قررت طرح إضافة ترقيم الصفحات مثل الموجود في مدونتي و لكن للبلوجر
لتركيب الإضافة يرجى إتباع الخطوات التالية
أولا إذهب إلى مدونتك
تم إلى تبويب تخطيط
تم إضافة أداة
تم تختار صنف HTML / JAVASCRIT
و تضع الكود التالي فيه

 <!--Page Navigation Starts By 3arabhelp.com-->
<style>
/*Pagination Style*/
.pagination {
display:block;
text-align: center !important;
padding-left: 0px;
overflow: hidden;
margin-bottom: 20px;
float:right;
clear:right;
}
.pagination a, .pagination a:link, .pagination a:visited {
background: url(../images/pages-num-bg.png);
text-decoration: none;
color:#666 !important;
display: block;
text-align: center;
background: rgb(249,249,249);
background: -moz-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(249, 249, 249, 1)), color-stop(100%, rgba(234, 234, 234, 1)));
background: -webkit-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -o-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -ms-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eaeaea', GradientType=0 );
background: linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
border: 1px solid #d6d6d6;
text-shadow: 0px 0px 0px #fed4a8;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
float: right;
padding: 7px 15px;
margin-left: 7px;
}
.pagination a:hover {
color: #666;
background: #fff;
}
.pagination span.pages {
display:none;
}
.pagination span.current {
text-decoration: none;
color:#fff !important;
display: block;
text-align: center;
margin-left: 7px;
background: rgb(223,115,9);
background: -moz-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(223, 115, 9, 1)), color-stop(100%, rgba(207, 78, 7, 1)));
background: -webkit-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);
background: -o-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);
background: -ms-linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df7309', endColorstr='#eaeaea', GradientType=0 );
background: linear-gradient(top, rgba(223, 115, 9, 1) 0%, rgba(207, 78, 7, 1) 100%);
border: 1px solid #a43900;
text-shadow: 1px 1px 1px #823604;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
display: block;
padding: 7px 15px;
float: right;
}
.pagination span.extend {
text-decoration: none;
color:#666 !important;
display: block;
text-align: center;
margin-left: 4px;
background: rgb(249,249,249);
background: -moz-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%, rgba(249, 249, 249, 1)), color-stop(100%, rgba(234, 234, 234, 1)));
background: -webkit-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -o-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
background: -ms-linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eaeaea', GradientType=0 );
background: linear-gradient(top, rgba(249, 249, 249, 1) 0%, rgba(234, 234, 234, 1) 100%);
border: 1px solid #d6d6d6;
text-shadow: 0px 0px 0px #fed4a8;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
padding: 7px 15px;
float: right;
}
</style>
<div class='pagination'>
<script type='text/javascript'>


                    var pageNaviConf = {
                      perPage: 8,
                      numPages: 8,
                      firstText: "الصفحة الأولى",
                      lastText: "الصفحة الأخيرة",
                      nextText: "&#187;",
                      prevText: "&#171;"
}
//<![CDATA[
function pageNavi(o) {
  var m = location.href,
    l = m.indexOf("/search/label/") != -1,
    a = l ? m.substr(m.indexOf("/search/label/") + 14, m.length) : "";
  a = a.indexOf("?") != -1 ? a.substr(0, a.indexOf("?")) : a;
  var g = l ? "/search/label/" + a + "?updated-max=" : "/search?updated-max=",
    k = o.feed.entry.length,
    e = Math.ceil(k / pageNaviConf.perPage);
  if(e <= 1) {
    return
  }
  var n = 1,
    h = [""];
  l ? h.push("/search/label/" + a + "?max-results=" + pageNaviConf.perPage) : h.push("/?max-results=" + pageNaviConf.perPage);
  for(var d = 2; d <= e; d++) {
    var c = (d - 1) * pageNaviConf.perPage - 1,
      b = o.feed.entry[c].published.$t,
      f = b.substring(0, 19) + b.substring(23, 29);
    f = encodeURIComponent(f);
    if(m.indexOf(f) != -1) {
      n = d
    }
    h.push(g + f + "&max-results=" + pageNaviConf.perPage)
  }
  pageNavi.show(h, n, e)
}
pageNavi.show = function (f, e, a) {
  var d = Math.floor((pageNaviConf.numPages - 1) / 2),
    g = pageNaviConf.numPages - 1 - d,
    c = e - d;
  if(c <= 0) {
    c = 1
  }
  endPage = e + g;
  if((endPage - c) < pageNaviConf.numPages) {
    endPage = c + pageNaviConf.numPages - 1
  }
  if(endPage > a) {
    endPage = a;
    c = a - pageNaviConf.numPages + 1
  }
  if(c <= 0) {
    c = 1
  }
  var b = '<span class="pages">الصفحة ' + e + ' من ' + a + "</span>";
  if(c > 1) {
    b += '<a href="' + f[1] + '">' + pageNaviConf.firstText + "</a>"
  }
  if(e > 1) {
    b += '<a href="' + f[e - 1] + '" class="inactive">' + pageNaviConf.prevText + "</a>"
  }
  for(i = c; i <= endPage; ++i) {
    if(i == e) {
      b += '<span class="current">' + i + "</span>"
    } else {
      b += '<a href="' + f[i] + '" class="inactive">' + i + "</a>"
    }
  }
  if(e < a) {
    b += '<a href="' + f[e + 1] + '">' + pageNaviConf.nextText + "</a>"
  }
  if(endPage < a) {
    b += '<a href="' + f[a] + '" class="inactive">' + pageNaviConf.lastText + "</a>"
  }
  document.write(b)
};
(function () {
  var b = location.href;
  if(b.indexOf("?q=") != -1 || b.indexOf(".html") != -1) {
    return
  }
  var d = b.indexOf("/search/label/") + 14;
  if(d != 13) {
    var c = b.indexOf("?"),
      a = (c == -1) ? b.substring(d) : b.substring(d, c);
    document.write('<script type="text/javascript" src="/feeds/posts/summary/-/' + a + '?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')
  } else {
    document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')
  }
})();
//]]>
</script>
</div>
<!--Page Navigation Ends By 3arabhelp.com-->


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

هناك 3 تعليقات:

  1. كيف اغير اللون وشكرا

    ردحذف
  2. الكود به عدة الوان اخي
    ما هو اللون بالضبط الذي تريد تغييره
    شكرا

    ردحذف
  3. عذرًا لا تظهر عندي الاضافه :(
    أيضًا لدي طلب وهو كيف صعنت هذه التأثيرات على الصفحات؟ أي بمجرد تمرير الماوس فإنه يتغير اللون بسلاسه، وأيضًا كيف أضع قائمه تنسدل من تلك الصفحات تتضمن التسميات؟
    هلَّا تكرمت بوضع موضوع يشرح هذه الأكواد إذا سمحت؟
    آسفه عل الإطالة، وشكرًا :)

    ردحذف

يتم التشغيل بواسطة Blogger.