آموزش ساخت فوتر مانند انجمن ماورا (شماره 2)

[Paripaykar]

Screenshot 2026-10-08 232713.png

ابتدا وارد پنل مدیریت بشید از قسمت قالب ها گزینه (جست و جو در الگو) انتخاب کنید

page_footer

رو سرچ کنید و باز کنید
پیدا کنید:

{vb:hook 'footer_end'}
</footer>
</div>​

زیر آن اضافه کنید:
ابتدا کد های CSS:

<style>
.mavara-footer{min-height:200px;background:#363f4c;display:block;margin:10px 0 0;color:#cfd8e6;position:relative;z-index:10;font-family:iransansdn,sans-serif!important}
.mavara-footer .top{background:#323a45;min-height:50px}.mavara-footer .bottom {
    clear: both;
    display: block;
    border-top: 1px solid #2d353f;
    margin: 0 10px;
    line-height: 50px;
}
.mavara-footer .top .fixbox{display:flex;align-items:center;gap:12px}
.mavara-footer .top .scrollup{float:right;display:flex!important;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;margin:5px 0;text-decoration:none;border-radius:10px;background:rgba(210,235,95,.08);transition:background .25s,transform .25s}
.mavara-footer .scrollup svg{display:block;width:22px;height:22px;fill:none;stroke:#d2eb5f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mavara-footer .scrollup:hover{background:rgba(210,235,95,.18);transform:translateY(-2px)}
.mavara-footer .top .footer-notic{display:flex;align-items:center;gap:9px;flex:1;min-width:0;color:#8e9aac;font-size:13px;line-height:1.9;padding:8px 10px;text-decoration:none;transition:color .2s}
.mavara-footer .footer-notic svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:#59aed7;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mavara-footer .top .footer-notic:hover{color:#59aed7}
.mavara-footer .middles{width:48%;margin:15px 0 25px;line-height:2}
.mavara-footer .middle-right{float:right;margin-right:20px}
.mavara-footer .middle-left{float:left}
.mavara-footer .middles .footer-title{display:flex;align-items:center;gap:9px;color:#f59070;font-size:15px;border-bottom:1px solid rgba(255,255,255,.07);margin:10px 0 10px 20%;padding:0 0 10px;position:relative}
.mavara-footer .footer-title svg{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:#f59070;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mavara-footer .middles .footer-title:after{height:3px;width:30px;content:"";background:#f59070;position:absolute;bottom:-2px;right:5px;border-radius:2px;transition:width .25s}
.mavara-footer .middles:hover .footer-title:after{width:90px}
.mavara-footer .middle-left .footer-title{color:#d2eb5f}
.mavara-footer .middle-left .footer-title svg{stroke:#d2eb5f}
.mavara-footer .middle-left .footer-title:after{background:#d2eb5f}
.mavara-footer .middle-left:hover .footer-title:after{width:153px}
.mavara-footer .bottom{clear:both;display:flex;align-items:center;flex-wrap:wrap;gap:8px;border-top:1px solid #2d353f;margin:0 10px;padding:10px 0;line-height:1.9}
.mavara-footer .bottom .copy-right{font-size:11px;font-weight:300;flex:1;min-width:220px}
.mavara-footer .bottom .copy-right a{color:#d2eb5f;font-weight:400;text-decoration:none}
.mavara-footer .bottom .copy-right a:hover{color:#fff}
.mavara-footer .bottom .foot-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;float:none;background:#505d6d;line-height:1.8;font-size:12px;color:#b9c2cf;margin:0;border-radius:25px;padding:5px 12px;border:1px solid transparent;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.mavara-footer .bottom .foot-link svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mavara-footer .bottom .fl-vip{background:#fbec00;color:#3e4650;font-weight:600}
.mavara-footer .bottom .fl-vip:hover{background:transparent;border-color:#fbec00;color:#fbec00}
.mavara-footer .bottom .fl-ads:hover{background:transparent;border-color:#b9c2cf;color:#fff}
@media(max-width:700px){
.mavara-footer .middles{width:auto;float:none;margin:15px 12px 22px}
.mavara-footer .middle-right{margin-right:12px}
.mavara-footer .middles .footer-title{margin-left:0}
.mavara-footer .bottom{margin:0 12px}
.mavara-footer .bottom .copy-right{flex-basis:100%;min-width:0}
.mavara-footer .top .footer-notic{font-size:12px;padding-right:4px}
}
@media(prefers-reduced-motion:reduce){
.mavara-footer *{transition:none!important}
}
</style>​

بعد کدهای HTML:

<div class="mavara-footer">
    <section class="top">
        <div class="fixbox">
        <a href="#top"
    class="scrollup"
    id="scrollToTop"
    aria-label="بازگشت به بالای صفحه"
    title="بازگشت به بالا">
    <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 19V5M5 12l7-7 7 7"></path>
    </svg>
    </a>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
    const scrollBtn = document.getElementById('scrollToTop');
    if (!scrollBtn) return;
    window.addEventListener('scroll', function () {
        scrollBtn.classList.toggle('show', window.scrollY > 300);
    }, { passive: true });
    scrollBtn.addEventListener('click', function (e) {
        e.preventDefault();
        window.scrollTo({
        top: 0,
        behavior: 'smooth'
        });
    });
    });
    </script>
      <a title="انجمن کامپیوتر و اینترنت ماورا" href="https://forum.coffeenetmavara.ir/" class="footer-notic" rel="nofollow">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8A8.5 8.5 0 0 1 8.7 3.9a8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z"></path>
          <path d="M8 10h8M8 14h5"></path>
        </svg>
        <span>آموزش کامپیوتر، نرم&zwnj;افزار، سخت&zwnj;افزار و تازه&zwnj;ترین مطالب انجمن ماورا</span>
      </a>
    </div>
  </section>
  <div class="fixbox">
    <section class="middle-right middles">
      <h3 class="footer-title">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="8" r="4"></circle>
          <path d="M5 21v-2a7 7 0 0 1 14 0v2M19 8h2a2 2 0 0 1 0 4h-2M5 8H3a2 2 0 0 0 0 4h2"></path>
        </svg>
        <span>درباره ما</span>
      </h3>
      <p>
        <strong>انجمن تخصصی کامپیوتر و اینترنت ماورا</strong>
        فضایی برای پرسش&zwnj;وپاسخ، تبادل تجربه و یادگیری در حوزه فناوری
        اطلاعات است. کاربران می&zwnj;توانند درباره سخت&zwnj;افزار، نرم&zwnj;افزار،
        ویندوز، تعمیرات کامپیوتر، ارتقای سیستم و مشکلات فنی پرسش
        مطرح کنند و از تجربیات دیگر کاربران بهره&zwnj;مند شوند.
      </p>
      <p>
        این انجمن بخشی از مجموعه
        <a href="https://coffeenetmavara.ir/" title="وب&zwnj;سایت رسمی کافی&zwnj;نت ماورا">
          <strong>کافی&zwnj;نت ماورا</strong>
        </a>
        است و با هدف توسعه آموزش&zwnj;های کاربردی کامپیوتر و فناوری،
        به اشتراک&zwnj;گذاری دانش و دسترسی آسان&zwnj;تر به اطلاعات فنی فعالیت می&zwnj;کند.
      </p>
    </section>
    <section class="middle-left middles">
      <h3 class="footer-title">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z"></path>
          <path d="M4 5.5v15M8 7h8M8 11h7"></path>
          <path d="M9 16h7"></path>
        </svg>
        <strong>انجمن کامپیوتر و اینترنت ماورا</strong>
      </h3>
      مرجع تخصصی و فعال در زمینه سخت&zwnj;افزار، نرم&zwnj;افزار، تعمیرات،
      اسمبل سیستم، کارت گرافیک، پردازنده، رم، SSD و تمامی مباحث مرتبط
      با کامپیوتر و لپ&zwnj;تاپ در ایران است. کاربران می&zwnj;توانند سوالات
      فنی خود را مطرح کنند، تجربیات&zwnj;شان را به اشتراک بگذارند و از
      راهنمایی&zwnj;های تخصصی بهره&zwnj;مند شوند. این انجمن بخشی از مجموعه
      <strong>کافی&zwnj;نت ماورا</strong> در کرج می&zwnj;باشد.
    </section>
    <section class="bottom">
    <span class="copy-right">
        © کپی&zwnj;رایت • تمامی حقوق برای
        <a href="https://forum.coffeenetmavara.ir/" title="انجمن کامپیوتر و اینترنت ماورا" rel="follow">انجمن ماورا</a>
        محفوظ می&zwnj;باشد و هرگونه کپی&zwnj;برداری از قالب و محتوا پیگرد قانونی دارد.
      </span>
      <a class="foot-link fl-vip" href="https://forum.coffeenetmavara.ir/vip" target="_blank" rel="noopener noreferrer">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m2 8 5 4 5-8 5 8 5-4-2 12H4z"></path>
          <path d="M4 17h16M7 21h10"></path>
        </svg>
        <span>گروه کاربران طلایی</span>
      </a>
      <a class="foot-link fl-ads" href="https://forum.coffeenetmavara.ir/ads" target="_blank" rel="noopener noreferrer">
        <svg viewBox="0 0 24 24" aria-hidden="true" style="color:#b9c2cf">
          <path d="M3 11v2a2 2 0 0 0 2 2h2l9 5V4l-9 5H5a2 2 0 0 0-2 2z"></path>
          <path d="m7 15 2 6h4M19 9a5 5 0 0 1 0 6M21 6a9 9 0 0 1 0 12"></path>
        </svg>
        <span>سفارش تبلیغات</span>
      </a>
    
    </section>
  </div>
</div>​

[Paripaykar]

Screenshot 2026-10-09 000137.png

برای اینکه جمع تر بشه تو CSS اضافه کنید:

.fixbox {
    display: block;
    margin: 0 auto;
    width: 1500px;
    position: relative;
}