امروز در خدمتون هستم با یک پست کاربردی برای تمام بلاگ نویسان، میدونید که در حالت عادی صفحه بندی بلاگ، استایل خاصی نداره (مثلا فرم جستجو خودش استایل داره).

   راهنمای استفاده: در گام اول کد استایل زیر را کپی و در بخش قالب --> فایل css اضافه کنید و تغییرات را ذخیره کنید. 

در گام بعدی هم  کد باکس مورد نظر را انتخاب و کپی کنید وارد بخش ساختار قالب وبلاگتون شوید و کد صفحات رو بعد از تگ <box:post_list/> قرار بدهید. (کد باکس صفحات را بعد از پایان کدهای نمایش پست بلاگ تان قرار بدهید) 


کد استایل باکس صفحات

/* -------------------------------- 

style asli : http://1coder.blog.ir

-------------------------------- */
nav[role="navigation"] {
  text-align: center;
}

.cd-pagination {
  width: 90%;
  max-width: 720px;
  margin: 2em auto 4em;
  text-align: center;
}
.cd-pagination li {
  display: none;
  margin: 0 .2em;
}
.cd-pagination li.button { display: inline-block;}
.cd-pagination a, .cd-pagination span {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none; -ms-user-select: none;user-select: none;
padding: .6em .8em; font-size: 15px; } .cd-pagination a { color: #2E4057; text-decoration: none; border: 1px solid #e6e6e6; border-radius: 0.25em; } .no-touch .cd-pagination a:hover { background-color: #f2f2f2; } .cd-pagination a:active { /* click effect */ -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .cd-pagination a.disabled { /* button disabled */ color: rgba(46, 64, 87, 0.4); pointer-events: none; } .cd-pagination a.disabled::before, .cd-pagination a.disabled::after {opacity: .4;} .cd-pagination .current {background-color: #64a281;
border-color: #64a281;color: #ffffff;pointer-events: none;} @media only screen and (min-width: 768px) {.cd-pagination li {display: inline-block;}} @media only screen and (min-width: 1170px) {.cd-pagination {margin: 4em auto 8em;}} /* -------------------------------- 2:http://1coder.blog.ir -------------------------------- */ .cd-pagination.no-space {width: auto;max-width: none;
display: inline-block;border-radius: 0.25em;
border: 1px solid #e6e6e6;padding: 0; } .cd-pagination.no-space:after {content: "";display: table;clear: both;} .cd-pagination.no-space li {margin: 0;float: right;border-right: none; } .cd-pagination.no-space li:last-of-type { border-right: 1px solid #e6e6e6; float: left; } .cd-pagination.no-space a, .cd-pagination.no-space span { float: none; border-radius: 0; padding: .8em 1em; border: none; } .cd-pagination.no-space li:first-of-type a { border-left: 1px solid #e6e6e6; } .cd-pagination.no-space li:last-of-type a { border-radius: 0 0.25em 0.25em 0; } /* -------------------------------- 3: http://1coder.blog.ir -------------------------------- */ .cd-pagination.move-buttons:after { content: ""; display: table; clear: both; } .cd-pagination.move-buttons .button:first-of-type { float: right; } .cd-pagination.move-buttons .button:last-of-type { float: left; }

                                      کد ساختار باکس صفحات

                                                   ( 1 )

<box:pagination>
<nav role="navigation">
<ul class="cd-pagination"> <check:if page_prev="">
<li class="button">
<a href="(*page_prev*)" data-mce-href="(*page_prev*)">قبلی</a>
</li> </check:if> <view:pages spec="5,2,4,2,3,2">
<check:if page_num><li>
<a class="(*page_current*)" href="(*page_link*)">(*page_num*)</a>
</li></check:if>
<check:if not page_num><li>
<a href="/" class="disabled"> ... </a>
</check:if></li> </view:pages> <check:if page_next="">
<li class="button">
<a href="(*page_next*)" data-mce-href="(*page_next*)">بعدی</a>
</li> </check:if> </ul> </nav> </box:pagination>

                                                    ( 2 )

<box:pagination>
<nav role="navigation">
<ul class="cd-pagination no-space"> <check:if page_prev="">
<li class="button">
<a href="(*page_prev*)" data-mce-href="(*page_prev*)">قبلی</a>
</li> </check:if> <view:pages spec="5,2,4,2,3,2">
<check:if page_num><li>
<a class="(*page_current*)" href="(*page_link*)">(*page_num*)</a>
</li></check:if>
<check:if not page_num>
<li><a href="/" class="disabled"> ... </a></li>
</check:if> </view:pages> <check:if page_next="">
<li class="button">
<a href="(*page_next*)" data-mce-href="(*page_next*)">بعدی</a>
</li> </check:if> </ul> </nav> </box:pagination>

                                                    ( 3 )

<box:pagination>
<nav role="navigation">
<ul class="cd-pagination move-buttons custom-icons">
<li class="button">
<a class="disabled" href="(*page_prev*)" data-mce-href="(*page_prev*)">قبلی</a>
</li> <view:pages spec="5,2,4,2,3,2">
<check:if page_num><li>
<a class="(*page_current*)" href="(*page_link*)">(*page_num*)</a>
</li></check:if>
<check:if not page_num>
<li><a href="/" class="disabled"> ... </a></li>
</check:if> </view:pages>
<li class="button">
<a href="(*page_next*)" data-mce-href="(*page_next*)">بعدی</a>
</li> </ul> </nav>
</box:pagination>