• صفحه نخست
  • درباره ی ما
  • ارتباط با ما
  • وبلاگ
  • مرکز آموزش
  • قوانین خرید
قالب بلاگ بیان،قالب و افزونه وردپرس|بلاگ تمز
  • قالب بلاگ بیان
  • قالب وردپرس
  • افزونه وردپرس
  • پروژه کامپیوتر
  • ورود / عضویت
  • فراموشی گذرواژه

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

  • خانه
  • دسته بندی نشده
  • باکس صفحات بلاگ با استایل
ج.محمد شهریور ۲۰, ۱۳۹۴ دسته بندی نشده ۰ نظر

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

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

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

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

– ۱ –

  • قبلی
  • ۱
  • ۲
  • ۳
  • ۴
  • …
  • ۲۰
  • بعدی
<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>
votes
رتبه دهی مطلب
همچنین بخوانید  چگونه با سی اس اس رنگ متن انتخاب شده را تغییر بدهیم؟
paginationtemplatetemplate designtemplate for blogصفحات بلاگطراحی قالب بلاگقالب بلاگقالب وبلاگکدنویسیوبلاگوبلاگ/آموزشوبلاگ/آموزش برنامه نویسی وبوبلاگ/سی اس اس
ترجمه رایگان قالب جدید بلاگفا به بلاگ – درخواستی کاربرمطلب قبلی
کدنویسی قالب آموزش الکترونیک برای کودکان – تبدیل قالب PSD به بلاگمطلب بعدی
اشتراک
اطلاع از
Please login to comment
0 نظرات
Inline Feedbacks
View all comments

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان فروردین ۲۴, ۱۳۹۹
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل مرداد ۲۲, ۱۳۹۸
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان مرداد ۸, ۱۳۹۸
  • استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده
    استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده تیر ۲۳, ۱۳۹۸
  • قالب مجله ای و خبری ماهتاک بلاگ بیان
    قالب مجله ای و خبری ماهتاک بلاگ بیان تیر ۱۷, ۱۳۹۸
  • قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان
    قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان تیر ۷, ۱۳۹۸
  • راهنمای قالب انحنا بلاگ بیان
    راهنمای قالب انحنا بلاگ بیان تیر ۱, ۱۳۹۸
  • افزونه نمایش استوری بلاگ بیان
    افزونه نمایش استوری بلاگ بیان اردیبهشت ۴, ۱۳۹۸
  • آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب
    آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب فروردین ۱, ۱۳۹۸
  • دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو
    دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو بهمن ۳, ۱۳۹۷

سوالات متداول

  • انتشار مطلب در بلاگ بیان
  • چطور تصویر پروفایل در هدر قالب را تغییر دهم ؟
  • قالب های بلاگ بیان نیازمند فعالسازی جاوااسکریپت می باشد
  • نحوه ی نصب قالب های بلاگ بیان
  • نحوه ی استفاده از نشانه ها در بلاگ بیان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان
  • نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
    نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان
©۱۳۹۷ بلاگ تمز ساخته شده با ♥؛ توسط تیم ماکاوب با استفاده از وردپرس و ووکامرس.
ورود ×
کد تایید
لطفاً کد تأیید ارسال شده را تایپ کنید
ثبت
رمز عبور را فراموش کرده اید؟
آیا حساب کاربری ندارید؟
ثبت نام
ارسال مجدد کد یکبار مصرف(00:30)
برگشت به ورود

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به ورود
  • (+98) ایران
0
0
Would love your thoughts, please comment.x
()
x
| پاسخ