یک برنامه نویس وب - قالب بلاگ بیان

آموزش برنامه نویسی وب ، دانلود رایگان قالب بلاگ بیان ، میهن بلاگ و وردپرس، دانلود برترین آهنگ

یک برنامه نویس وب - قالب بلاگ بیان

آموزش برنامه نویسی وب ، دانلود رایگان قالب بلاگ بیان ، میهن بلاگ و وردپرس، دانلود برترین آهنگ

سلام خوش آمدید
باکس صفحات بلاگ با استایل

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

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

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

نظرات (۷)

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

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

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

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



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

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

    ارسال نظر

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

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

    آخرین نظرات