صفحه اصلی / آموزش های متفرقه /

ایجاد دکمه‌های "صفحه قبل" و "صفحه بعد" با استفاده از CSS و HTML در رزبلاگ

ایجاد دکمه‌های "صفحه قبل" و "صفحه بعد" که به صورت ثابت در دو طرف صفحه قرار می‌گیرند و برای ناوبری بین صفحات استفاده می‌شوند.

مراحل پیاده‌سازی:

1. HTML:

دو لینک (<a>) برای "صفحه قبل" و "صفحه بعد" ایجاد کنید. هر لینک باید کلاس مناسب (prev-page و next-page) و آدرس مقصد (href) داشته باشد.

کدهای زیر را در ویرایش قالب در رزبلاگ اضافه کنید.

<RB:Perv_Page_Block><a rel="prev" class="page-button prev-page" href="[Prev_Page]">صفحه قبل</a></RB:Perv_Page_Block>
<RB:Next_Page_Block><a rel="next" class="page-button next-page" href="[Next_Page]">صفحه بعد</a></RB:Next_Page_Block>
<style>
.page-button {
    position: fixed;
    bottom: 50%;
    transform: translateY(0) rotate(270deg);
    background-color: #4573f7;
    border: 1px solid #FFF;
    color: #fff;
    padding: 23px 28px 13px 29px;
    border-radius: 12px;
    text-align: center;
    font-size: 17px;
    z-index: 9999;
    text-decoration: none;
}
.prev-page {
    right: -52px;
}
.next-page {
    left: -52px;
}
</style>

طریقه استفاده:

1. قرار دادن کدها:

کد HTML را در بخش مورد نظر خود (مثلاً داخل <body>) قرار دهید.
کد CSS را در فایل استایل خود (مثلاً style.css) یا داخل تگ <style> در صفحه قرار دهید.

3. سفارشی‌سازی ظاهر:

رنگ پس‌زمینه (background-color)، اندازه فونت (font-size)، و فاصله از لبه‌های صفحه (left و right) را می‌توانید متناسب با طراحی خود تغییر دهید.