باکس صفحات بلاگ با استایل
موضوعات

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

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

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

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

منتشر شده توسط ج . محمد

ج . محمد
محمد جمال زاده هستم یک برنامه نویس وب! علاقه بسیاری زیادی به یادگرفتن فریم ورک های جدید و بخصوص فریم ورک های هایبریدی یا ( Cross Platform) دارم و از کدنویسی لذت خاصی میبرم! به هیچ وج از کدنویسی خسته نخواهم شد! فریلنسری و دور کاری را بیشتر از کار تمام وقت دوست دارم باعث میشه ایده های مختلف روبه رو بشی! کارهای متفاوت انجام بدی !

۷ دیدگاه در باکس صفحات بلاگ با استایل

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

    با تشکر
    1. سلام ، بزودی میگذارم . موفق باشید.
  3. سلام ممنون
    بیشتر از 5 نمیتونم بذارم؟ 
    جای هست که یاد بده مثلا عدد اول برای چی هست 
    چون سرچ کردم چیزی پیدا نکردم 
    1. سلام ، من ندیدم ؛ خود بلاگ هم گفته که توضیح این فرمول در صفحه راهنماش نمی گنجه.
  4. سلام ممنون از شما 
    ولی مثل اون نشد 
    من 19 صفحه درست کردم اولش اینطوری نشون داد 1 2 3  ... 19 بعدش هر چی تعداد صفحه ها بیشتر میشد طول نمایش صفحه ها هم بیشتر میشد
    این عکس رو ببینید لطفا صفحه اول هست 

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

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



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

    مثلا مثل سایت http://soft98.ir/ 
    باید اون عدد های جلوی spec رو تغییر بدم؟ 
    ممنون
    1. آره ، می تونید به این صورت استفاده کنید ؛ 
      <view:pages spec="4,4,3,2,1,1"></view:pages>
      
  6. سلام 
    منظورم این هست که توی همین صفحه ای که الان هستیم دو تا دکمه باشه که کاربر بتونه پست قبل و بعد راحت بره
    میشه همین چیزی ؟
    یعنی زیر پست ها باشه 
    مثلا این پست شماره 20 هست و اون دو تا دکمه ما رو به  پست های شماره 19 و 21 میبره
    1. در حالت عادی این امکان وجود نداره که از باکس صفحات در تگ مطلب بکار برد! و اینکه تگ مطلب قبلی و بعدی من ندیدم تو بلاگ ؛ فقط صفحه بعد و قبل هست.
  7. سلام
    ممنون برای این مطلب مفید
    یک سوال داشتم
    چطوری میتونم زیر پست هام دکمه های "پست بعدی"  و "پست قبلی" اضافه کنم
    اگه بتونید کمک کنید ممنون میشم
    در قسمت راهنمای بیان گشتم ولی پیدا نکردم
    ممنونم 
    1. سلام ، منظورتون در حالت نمایش یه مطلب هست ؟ 
      یا نه در حالت نمایش لیست مطالب ؟ (تو همین مطلب هست )

ارسال دیدگاه

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی