Forum.mevsim.Org'a Hoş Geldiniz!

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için kayıt olmalı yada giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Responsive Sağda ve solda sabit yapışkan kayan banner alanı

  • Konbuyu başlatan BaRoN
  • Başlangıç tarihi
  • Okuma süresi: 0:54
Katılım
2 Haz 2019
Mesajlar
2,899
Tepkime puanı
5,605
Puanları
113
Yaş
44
Konum
istanbul
Cinsiyet
Erkek

Forum.Mevsim.Org

Responsive,Sağda ve solda sabit,yapışkan,kayan banner alanı
Sık sık soruluyor basitte olsa yapamayan arkadaşlar var bu yüzden bira daha detaylı css kodu ile mobil sistemleri de dahil ettim için umarım işinize yarar.
1604244907293.png

Kurulum;
Temanızda PAGE_CONTAINER isimli şablonu aşın ve bulun <div class="p-body">
Hemen üzerine ekleyin
HTML:
<!--[XGT]- Sabit banner alanı-->
    <div class="xgtSolSabitBanner">
        <a href="url">
            <img src="https://img.webme.com/pic/i/isacotur/160x600banner_rozet.jpg" alt="Banner alanı" width="" height="">
        </a>
    </div>
  
    <div class="xgtSagSabitBanner">
        <a href="url">
            <img src="https://img.webme.com/pic/i/isacotur/160x600banner_rozet.jpg" alt="Banner alanı" width="" height="">
        </a>
    </div>
    <!--[XGT]- Sabit banner alanı-->
Yine aynı temada extra.less isimli şablonu açın ve en üstüne ekleyin
CSS:
.xgtSolSabitBanner
{
    position: fixed;
    z-index: 999;
    left: 0;
    top: 150px;//-- Banner ust boslugu opsiyonel olarak kullanılabilir.
    margin-left: 20px; //-- Banner sag yan boslugu opsiyonel olarak kullanılabilir.         
}

.xgtSagSabitBanner
{
    position: fixed;
    z-index: 999;
    right: 0;
    top: 150px; //--Banner ust boslugu opsiyonel olarak kullanılabilir.
    margin-right: 20px; //-- Banner sag yan boslugu opsiyonel olarak kullanılabilir. 
}

//-- 1500PX Altı ekranlarda banner max genişliği 100PX olsun!

@media (max-width: 1500px)
{ 
    .xgtSolSabitBanner 
    {
        max-width: 100px;
        margin-left: 0px;
    }
    .xgtSagSabitBanner
    {
        max-width: 100px;
        margin-right: 0px;
    }
}

//-- 1300PX Altı ekranlarda banner gizle!
@media (max-width: 1300px)
{
    .xgtSolSabitBanner, .xgtSagSabitBanner
    {
        display: none;
    } 
}
 
Tüm sayfalar yüklendi.

Konuyu Görüntüleyen Kullanıcılar (Toplam:1)