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

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

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

راستی برای اطلاع از آخرین مطالب از قسمت مدیریت پنل بلاگ ---> ارتباط ---> وبلاگهای که دنبال میکنم ----> وبلاگ ما رو دنبال کنید. 

   راهنمای استفاده :  در گام اول کد استایل زیر را کپی و در بخش قالب --> فایل 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>

نظرات۶

  1. mehdi noorani

    باسلام
    ممنون بابت مطالبتون
    میخواستم بین آیا امکان داره باکس صفحات بلاگ با استایل مربوط به بلاگ خودت که در صفحه نخست می بینم را هم برام بفرستید، و یا در همین صفحه بگذارید.
    آخه خیلی خوشگله
    خواهشا بگذارید یا برام میل کنید.

    با تشکر
  2. author

    پاسخ

    سلام ، بزودی میگذارم . موفق باشید.
  1. http://skylove.ir/

    پوریا آریافر

    سلام ممنون
    بیشتر از 5 نمیتونم بذارم؟ 
    جای هست که یاد بده مثلا عدد اول برای چی هست 
    چون سرچ کردم چیزی پیدا نکردم 
  2. author

    پاسخ

    سلام ، من ندیدم ؛ خود بلاگ هم گفته که توضیح این فرمول در صفحه راهنماش نمی گنجه.
  1. http://skylove.ir/

    پوریا آریافر

    سلام ممنون از شما 
    ولی مثل اون نشد 
    من 19 صفحه درست کردم اولش اینطوری نشون داد 1 2 3  ... 19 بعدش هر چی تعداد صفحه ها بیشتر میشد طول نمایش صفحه ها هم بیشتر میشد
    این عکس رو ببینید لطفا صفحه اول هست 

    بعدش صفحه 3 و 5 و بعد صفحه 7 رو باز کردم شکل زیر شد

    و صفحه 15 رو باز کردم اینطوری شد



  2. author

    پاسخ

    شما  همین اعداد رو تغییر بدهید تا استایل مد نظرتون رو نشون بده. ( یه خرده بازی میخاد با اعداد)
  1. پوریا آریافر

    اکی ممنون
    راستی یک سوال دیگه
    الان سایت من اینطوری صفحه بندی شده مثلا 1 2 3 ... 8 9 10
    چطوری میتونم صفحه بندی سایت رو این شکلی کنم 1 2 3 4 5 6 7 ... 10

    مثلا مثل سایت http://soft98.ir/ 
    باید اون عدد های جلوی spec رو تغییر بدم؟ 
    ممنون
  2. author

    پاسخ

    آره ، می تونید به این صورت استفاده کنید ؛ 
    <view:pages spec="4,4,3,2,1,1"></view:pages>
    
  1. http://skylove.ir/

    پوریا آریافر

    سلام 
    منظورم این هست که توی همین صفحه ای که الان هستیم دو تا دکمه باشه که کاربر بتونه پست قبل و بعد راحت بره
    میشه همین چیزی ؟
    یعنی زیر پست ها باشه 
    مثلا این پست شماره 20 هست و اون دو تا دکمه ما رو به  پست های شماره 19 و 21 میبره
  2. author

    پاسخ

    در حالت عادی این امکان وجود نداره که از باکس صفحات در تگ مطلب بکار برد! و اینکه تگ مطلب قبلی و بعدی من ندیدم تو بلاگ ؛ فقط صفحه بعد و قبل هست.
  1. پوریا آریافر

    سلام
    ممنون برای این مطلب مفید
    یک سوال داشتم
    چطوری میتونم زیر پست هام دکمه های "پست بعدی"  و "پست قبلی" اضافه کنم
    اگه بتونید کمک کنید ممنون میشم
    در قسمت راهنمای بیان گشتم ولی پیدا نکردم
    ممنونم 
  2. author

    پاسخ

    سلام ، منظورتون در حالت نمایش یه مطلب هست ؟ 
    یا نه در حالت نمایش لیست مطالب ؟ (تو همین مطلب هست )

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی