Kullanıcı:
Filtreler
Xenforo Duyuru Alanı

XF 2.2 Xenforo Duyuru Alanı

Genel bakış Güncellemeler (6) Yorumlar (2) Forum konusu
Bu eklenti, add-ons XenForo 2.2.X ile uyumlu ve stabil olarak çalışmaktadır.

Duyuru Alanı V5.2

⚙ Eklenenler :

Hata iyileştirmesi ve düzenlemer
Tasarımsal değişiklikler
Extra kullanım kolaylığı

Görünümü​

Macbook-Air-teknokesif.com.tr.webp Xiaomi-Mi-11i-teknokesif.com.tr.webp
​
Kurulum :

AdminCP> Kurlumlar> Reklam yöneticisi > Reklam Ekle

HTML Kısmına eklenecek kodlar

screenshot-20231208033759-png.24748


screenshot-20231208034121-png.24749

​
HTML: 
<div id="gizleme" class="genelDiv">
      <div class="bdiv">
        <button class="buton" onclick="gizleGoster();">X</button>
      </div>
      <div class="duyuruContainer">
        <div class="duyuruicon">
          <i class="fas fa-bullhorn"></i>
        </div>
        <div class="duyuruText">
          <h2 class="duyurubaslik">📢 Duyuru Başlığı 🚀 </h2>
          <div class="metin">
            <b>
              Bu Tasarım Ap Yazılım® Tarafından Kara Üzüm Habbesi Dinlerken Issız Gecelerde Kodlanmıştır 🙂. Tamemn Ücretsizdir, İyi Forumlar. <br>
              Tasarım İle İlgili Hataları Belirtirseniz Sevinirim <br>
              <button class="iletisimButton"><a href="https://apyazilim.com.tr/" target="_blank">İletişim için tıkla!</a></button>
            </b>
          </div>
        </div>
      </div>
    </div>
    <!--Aşağıdaki Kodlar Duyurunun Kapanmasını Sağlıyor. Doğru Çalışması İçin Değişiklik Yapmayın-->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
          var gizlemeDiv = document.getElementById('gizleme');
          var gizlemeDurumu = sessionStorage.getItem('gizlemeDurumu');
          if (gizlemeDurumu === 'gizli') {
            gizlemeDiv.style.display = 'none';
          } else {
            gizlemeDiv.style.display = 'block';
          }
        });
        function gizleGoster() {
          var gizlemeDiv = document.getElementById('gizleme');
          if (gizlemeDiv.style.display === 'none') {
            gizlemeDiv.style.display = 'block';
            sessionStorage.removeItem('gizlemeDurumu');
          } else {
            gizlemeDiv.style.display = 'none';
            sessionStorage.setItem('gizlemeDurumu', 'gizli');
          }
        }
      </script>

extra.less şablonuna eklenecek kodlar

screenshot-20231208034811-png.24751

​
CSS: 
/* Duyuru Alanı */
:root {
        --arkaplan1: @xf-contentAccentBg;
        --arkaplan2: @xf-xentr_infoColor;
        --icon-reng: @xf-buttonCtaBg;
        --uyari-baslik-renk1:@xf-warningFeatureColor;
        --uyari-baslik-renk2:@xf-errorBg;
        --metin-rengi: @xf-textColor;
        --iletisim-metin-reng:@xf-pageBg;
        --iletisim-arka-plan-rengi1 :@xf-contentAccentBg;
        --iletisim-arka-plan-rengi2 :@xf-xentr_infoColor;
        --iletisim-butonu-kenar-renkleri: @xf-buttonCtaBg;
        --duyuru-baslik-degisim-saniye:3s;
        --kapatma-buton-reng:#ffffff;
        --duyuru-kapatma-butonu-arkaplan-renk: rgba(69, 69, 69, 0.199);

        --metin-boyut:18px;
         --mobil-metin-boyut:15px;
        --icon-boyut:80px;
        --mobil-icon-boyut:50px;
        --icon-opaklik: 0.8;
        --icon-aci-derecesi: rotate(-25deg);
        --iletisim-metin-boyut:15px;
    
        --iletisim-buton-genislik:20%;
        --iletisim-buton-yukseklik:32px;
        
        --mobil-iletisim-buton-genislik:60%;
        --mobil-iletisim-buton-yukseklik:38px;
      }
      
      .genelDiv {
        background: linear-gradient(90deg, var(--arkaplan1) 0%, var(--arkaplan2) 100%);
        padding: 5px;
        border-radius: 20px;
        margin-bottom: 15px;
        box-shadow: rgba(0, 0, 0, 0.302) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
      }
      
      .duyuruContainer {
        display: flex;
        align-items: center;
      }
      
      .duyuruicon {
        font-size: var(--icon-boyut);
        color: var(--icon-reng);
        transform: var(--icon-aci-derecesi);
        margin-left: 20px;
        opacity: var(--icon-opaklik);
      }
      
      .duyuruText {
      font-weight: bold;
      margin: 0 auto;
    }

    .metin {
        color: var(--metin-rengi);
        padding: 3px;
        text-align: center;
        font-size: var(--metin-boyut);
      }
      
      .iletisimButton {
        border-radius: 10px;
        background: linear-gradient(90deg, var(--iletisim-arka-plan-rengi1) 0%, var(--iletisim-arka-plan-rengi2) 100%);
        border-color: var(--iletisim-butonu-kenar-renkleri);
        width: var(--iletisim-buton-genislik);
        height: var(--iletisim-buton-yukseklik);
        margin-top: 2%;
        text-decoration: none;
        box-shadow: rgba(50, 50, 93, 0.251) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.349) 0px -2px 6px 0px inset;
      }

      .iletisimButton a {
        color: var(--iletisim-metin-reng);
        text-decoration: none;
        font-weight: bold;
        font-size: var(--iletisim-metin-boyut);
      }
      
      
      .buton {
        color: var(--kapatma-buton-reng);
        border: none;
        background-color: var(--duyuru-kapatma-butonu-arkaplan-renk);
        border-radius: 50%;
        width: 25px;
        height: 25px;
        float: right;
      }
      
      .bdiv {
        padding-right: 3px;
      }
      
      #gizleme {
        display: none;
      }
      @keyframes uyaribaslik {
  50% {
    color: var(--uyari-baslik-renk1);
  }
  50% {
    color: var(--uyari-baslik-renk2);
  }
}

.duyurubaslik {
  animation: uyaribaslik var(--duyuru-baslik-degisim-saniye) infinite;
  text-align: center;
}

@media (max-width: 650px){
    .duyuruicon {
    font-size: var(--mobil-icon-boyut);
    color: var(--icon-reng);
    transform: var(--icon-aci-derecesi);
    margin-left: 0px;
    opacity: var(--icon-opaklik);
 }
}

@media (max-width: 650px){
.metin {     
    font-size: var(--mobil-metin-boyut);
 }
}

@media (max-width: 650px){
.iletisimButton {
        width: var(--mobil-iletisim-buton-genislik);
        height: var(--mobil-iletisim-buton-yukseklik);
 }
}

!!! Unutmayin Birden Fazla Tema Kullananlar ( Gece / Gündüz Teması Farklı Olan ) Diğer Tema extra.less Şablonuna extra.less Kodlarını Girmeleri Gerekir !!!​
Eklenmesini İstediğiniz Özellikleri Belirtin İyi Forumlar 🙂
Hata Bildirimi Yaparasanız Sevinirim
  • Beğendim
Tepkiler: eightbornv

Duyuru Alanı V5

⚙ Eklenenler :

Hata iyileştirmesi ve düzenlemer
Tasarımsal değişiklikler

Görünümü

iPhone-13-PRO-teknokesif.com.tr (1).pngMacbook-Air-teknokesif.com.tr.png
​

Kurulum :

AdminCP> Kurlumlar> Reklam yöneticisi > Reklam Ekle

HTML Kısmına eklenecek kodlar

screenshot-20231208033759-png.24748


screenshot-20231208034121-png.24749


HTML: 
<div id="gizleme" class="genelDiv">
      <div class="bdiv">
        <button class="buton" onclick="gizleGoster();">X</button>
      </div>
      <div class="duyuruContainer">
        <div class="duyuruicon">
          <i class="fas fa-bullhorn"></i>
        </div>
        <div class="duyuruText">
          <h2 class="duyurubaslik">📢 Duyuru Başlığı 🚀 </h2>
          <div class="metin">
            <b>
              Bu Tasarım Ap Yazılım® Tarafından Kara Üzüm Habbesi Dinlerken Issız Gecelerde Kodlanmıştır 🙂. Tamemn Ücretsizdir, İyi Forumlar. <br>
              Tasarım İle İlgili Hataları Belirtirseniz Sevinirim <br>
              <button class="iletisimButton"><a href="https://apyazilim.com.tr/" target="_blank">İletişim için tıkla!</a></button>
            </b>
          </div>
        </div>
      </div>
    </div>
    <!--Aşağıdaki Kodlar Duyurunun Kapanmasını Sağlıyor. Doğru Çalışması İçin Değişiklik Yapmayın-->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
          var gizlemeDiv = document.getElementById('gizleme');
          var gizlemeDurumu = sessionStorage.getItem('gizlemeDurumu');
          if (gizlemeDurumu === 'gizli') {
            gizlemeDiv.style.display = 'none';
          } else {
            gizlemeDiv.style.display = 'block';
          }
        });
        function gizleGoster() {
          var gizlemeDiv = document.getElementById('gizleme');
          if (gizlemeDiv.style.display === 'none') {
            gizlemeDiv.style.display = 'block';
            sessionStorage.removeItem('gizlemeDurumu');
          } else {
            gizlemeDiv.style.display = 'none';
            sessionStorage.setItem('gizlemeDurumu', 'gizli');
          }
        }
      </script>

extra.less şablonuna eklenecek kodlar

screenshot-20231208034811-png.24751

CSS: 
:root {
    /* Renk Ve Boyutları Lüfen Aşakıdaki Konumda (Sadece root Parantezi İcerisindeki) Değiştrin. Aksi Taktirde Tasırmda Bozulmalar Ola Bilir */
        --arkaplan1: @xf-contentAccentBg;
        --arkaplan2: @xf-xentr_infoColor;
        --icon-reng: @xf-buttonCtaBg;
        --uyari-baslik-renk1:@xf-warningFeatureColor;
        --uyari-baslik-renk2:@xf-errorBg;
        --metin-rengi: @xf-textColor;
        --iletisim-metin-reng:@xf-pageBg;
        --iletisim-arka-plan-rengi1 :@xf-contentAccentBg;
        --iletisim-arka-plan-rengi2 :@xf-xentr_infoColor;
        --iletisim-butonu-kenar-renkleri: @xf-buttonCtaBg;
        --duyuru-baslik-degisim-saniye:3s;
        --kapatma-buton-reng:#ffffff;
        --duyuru-kapatma-butonu-renk: rgba(69, 69, 69, 0.199);

        --metin-boyut:18px;
        --icon-boyut:80px;
        --iletisim-metin-boyut:15px;
      }
     
      .genelDiv {
        background: linear-gradient(90deg, var(--arkaplan1) 0%, var(--arkaplan2) 100%);
        padding: 5px;
        border-radius: 20px;
        margin-bottom: 15px;
        box-shadow: rgba(0, 0, 0, 0.302) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
      }
     
      .duyuruContainer {
        display: flex;
        align-items: center;
      }
     
      .duyuruicon {
        font-size: var(--icon-boyut);
        color: var(--icon-reng);
        transform: rotate(-25deg);
        margin-left: 20px;
        opacity: 0.8;
      }
     
      .duyuruText {
      font-weight: bold;
      margin: 0 auto;
    }

    .metin {
        color: var(--metin-rengi);
        padding: 3px;
        text-align: center;
        font-size: var(--metin-boyut);
      }
     
      .iletisimButton {
        border-radius: 10px;
        background: linear-gradient(90deg, var(--iletisim-arka-plan-rengi1) 0%, var(--iletisim-arka-plan-rengi2) 100%);
        border-color: var(--iletisim-butonu-kenar-renkleri);
        width: 20%;
        height: 32px;
        margin-top: 2%;
        text-decoration: none;
        box-shadow: rgba(50, 50, 93, 0.251) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.349) 0px -2px 6px 0px inset;
      }

      .iletisimButton a {
        color: var(--iletisim-metin-reng);
        text-decoration: none;
        font-weight: bold;
        font-size: var(--iletisim-metin-boyut);
      }
     
     
      .buton {
        color: var(--kapatma-buton-reng);
        border: none;
        background-color: var(--duyuru-kapatma-butonu-renk);
        border-radius: 50%;
        width: 25px;
        height: 25px;
        float: right;
      }
     
      .bdiv {
        padding-right: 3px;
      }
     
      #gizleme {
        display: none;
      }
      @keyframes uyaribaslik {
  50% {
    color: var(--uyari-baslik-renk1);
  }
  50% {
    color: var(--uyari-baslik-renk2);
  }
}

.duyurubaslik {
  animation: uyaribaslik var(--duyuru-baslik-degisim-saniye) infinite;
  text-align: center;
}

@media (max-width: 650px){
    .duyuruicon {
    font-size: var(--icon-boyut);
    color: var(--icon-reng);
    transform: rotate(-25deg);
    margin-left: 0px;
    opacity: 0.8;
 }
}

@media (max-width: 650px){
.iletisimButton {
    border-radius: 10px;
    background: linear-gradient(90deg, var(--iletisim-arka-plan-rengi1) 0%, var(--iletisim-arka-plan-rengi2) 100%);
    border-color: var(--iletisim-butonu-kenar-renkleri);
    width: 60%;
    height: 38px;
    margin-top: 2%;
    text-decoration: none;
    box-shadow: rgba(50, 50, 93, 0.251) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.349) 0px -2px 6px 0px inset;
 }
}

!!! Unutmayin Birden Fazla Tema Kullananlar ( Gece / Gündüz Teması Farklı Olan ) Diğer Tema extra.less Şablonuna extra.less Kodlarını Girmeleri Gerekir !!!​
Eklenmesini İstediğiniz Özellikleri Belirtin İyi Forumlar 🙂
Hata Bildirimi Yaparasanız Sevinirim

Slider reklam alanı V4

⚙ Eklenenler :

Bu güncelleme ile artık sağa / sola kayan bir reklam alanı eklendi

AdminCP> Kurlumlar> Reklam yöneticisi > Reklam Ekle

HTML Kısmına eklenecek kodlar

Screenshot-20231208033759.png

Screenshot-20231208034121.png

HTML: 
<!-- Coder By Ap Yazılım®. İletişim +90 546 180 66 63. Bu duyuru alanı tamemen ÜCRETSİZDİR. Parayla satış yapanları lütfen bildirin -->
<div id="gizleme" class="geneldiv">
  <div class="bdiv">
    <button class="buton" onclick="gizleGoster();">X</button>
  </div>
  <div class="duyuru uyari">
    <div class="uyarialan">
      <i class="fas fa-bullhorn"></i>
    </div>
    <div class="uyarialan">
      <div class="metin goster1" id="metin1">
        <b> Bu Tasarım Ap Yazılım® Tarafından Kodlanmıştır 🙂. Tamemn Ücretsizdir, İyi Forumlar. <br>
          Tasarım İle İlgili Hataları Belirtirseniz Sevinirim +90 546 180 66 63<br>
          <button class="iletisim"><a href="https://apyazilim.taplink.ws/" target="_blank">İletişim için
              tıkla!</a></button>
        </b>
      </div>
      <div class="metin goster2" id="metin2">
        <b> Güncelleme İle Dahada Geliştim. <br>
          Artık Kaydırmalı Fotoğraf Reklamım Var <br>
          <button class="iletisim"><a href="https://apyazilim.taplink.ws/" target="_blank">İletişim için
              tıkla!</a></button>
        </b>
      </div>
      <div class="fotogenldiv">
        <div class="fotodiv">
          <div class="foto"><a href="    https://apyazilim.taplink.ws/" target="_blank"><img
                src="https://xenforo.gen.tr//data/profile_banners/l/13/13606.jpg" width="600" height="150" alt=""></a>
          </div>
          <div class="foto"><a href="    https://apyazilim.taplink.ws/" target="_blank"><img
                src="https://xenforo.gen.tr//data/profile_banners/l/13/13606.jpg" width="600" height="150" alt=""></a>
          </div>
          <div class="foto"><a href="    https://apyazilim.taplink.ws/" target="_blank"><img
                src="https://xenforo.gen.tr//data/profile_banners/l/13/13606.jpg" width="600" height="150" alt=""></a>
          </div>
          <!-- İhtiyaca göre daha fazla resim ekleyebilirsiniz -->
        </div>
        <button class="slider-btn slider-btn-sol" onclick="oncekiResim()">❮</button>
        <button class="slider-btn slider-btn-sag" onclick="sonrakiResim()">❯</button>
      </div>
      <div class="gosterge" id="gosterge"></div>
    </div>
  </div>
</div>
<!--Aşağıdaki Kodları Lütfen JavaSc Bilginiz Yoksa Değiştirmeyin. Karşısına Not Duşulmuş Kodlar Değişe Bilir. Nasıl yapılacağını Bilmiyorsanız İteşime Geçe Bilirsiniz +90 546 180 66 63 -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var gizlemeDiv = document.getElementById('gizleme');
    var gizlemeDurumu = sessionStorage.getItem('gizlemeDurumu');
    if (gizlemeDurumu === 'gizli') {
      gizlemeDiv.style.display = 'none';
    } else {
      gizlemeDiv.style.display = 'block';
      var metin1 = document.getElementById('metin1');
      var metin2 = document.getElementById('metin2');

      function toggleMetin() {
        metin1.classList.toggle('goster1');
        metin1.classList.toggle('goster2');
        metin2.classList.toggle('goster1');
        metin2.classList.toggle('goster2');
      }

      setInterval(toggleMetin, 5 * 1000); /* Bu Kod (1 * 60 * 1000) Metin Değişim Suresi Mantığı İse Şu Şekilde 1-Dakika  60-Saniye 1000-Millisaniye 1 2 olursa metin 2 dakika aralıkla değişir. 60 ve 1000 Dokunmanız Tavisiye Edilniyor*/
    }
  });

  function gizleGoster() {
    var gizlemeDiv = document.getElementById('gizleme');
    if (gizlemeDiv.style.display === 'none') {
      gizlemeDiv.style.display = 'block';
      sessionStorage.removeItem('gizlemeDurumu');
    } else {
      gizlemeDiv.style.display = 'none';
      sessionStorage.setItem('gizlemeDurumu', 'gizli');
    }
  }
</script>
<!--Fotoğraf Değişim Kodları : Aşağıdaki Kodları Lütfen JavaSc Bilginiz Yoksa Değiştirmeyin. Karşısına Not Duşulmuş Kodlar Değişe Bilir. Nasıl yapılacağını Bilmiyorsanız İteşime Geçe Bilirsiniz +90 546 180 66 63 -->
<script>
  var suankiResim = 0;

  function resimGoster(index) {
    var photoContainer = document.querySelector('.fotodiv');
    suankiResim = index;
    var offset = -index * 100;
    photoContainer.style.transform = 'translateX(' + offset + '%)';
    gostergeyiGuncelle();
  }

  function oncekiResim() {
    suankiResim = (suankiResim > 0) ? suankiResim - 1 : resimSayisi - 1;
    resimGoster(suankiResim);
  }

  function sonrakiResim() {
    suankiResim = (suankiResim < resimSayisi - 1) ? suankiResim + 1 : 0;
    resimGoster(suankiResim);
  }

  function gostergeyiGuncelle() {
    var gosterge = document.getElementById('gosterge');
    gosterge.innerHTML = '';
    for (var i = 0; i < resimSayisi; i++) {
      var nokta = document.createElement('span');
      nokta.className = 'gnokta';
      if (i === suankiResim) {
        nokta.classList.add('aktiv');
      }
      nokta.setAttribute('data-index', i);
      nokta.onclick = function () {
        var index = parseInt(this.getAttribute('data-index'));
        resimGoster(index);
      };
      gosterge.appendChild(nokta);
    }
  }

  var resimSayisi = 3; /* Resim artırısanız sayıyı güncelleyin */
  gostergeyiGuncelle();

  /* Otomatik olarak slayt değişimi */
  setInterval(function () {
    sonrakiResim();
  }, 5 * 1000); /* 5sn bir fotoğraf değişicek şekide ayarlandı. Kod bilginiz yoksa değişmeyin. Değişmesi gereken durumlarda chatgpt destek alın */
</script>

extra.less şablonuna eklenecek kodlar

Screenshot-20231208034632.png
Screenshot-20231208034811.png

CSS: 
/* Asağıdaki Kodlar Duyuru Alanı Kodlarıdır. Css Bilginiz Yoksa Değişiklik Yapmayın. Karşısına Not Duşulmuş Kodlar Değişe Bilir. Nasıl yapılacağını Bilmiyorsanız İteşime Geçe Bilirsiniz +90 546 180 66 63 */

    @import url('https://fonts.googleapis.com/css2? family= Open+Sans:wght@300 & display=swap');
    /* Font Cağırma */

    .geneldiv {
      background: linear-gradient(90deg, #ff0000 0%, #ff7b00 80%);
      /* Arka plan renk*/
      padding: 5px;
      border-radius: 20px;
      margin-bottom: 15px;
      display: none;
    }

    .duyuru {
      align-items: center;
      display: flex;
    }

    .duyuru i {
      margin-right: 5px;
    }

    .duyuru a {
      color: #000000;
      /* Admin İletişim Renk*/
      text-decoration: none;
      font-weight: bold;
      font-size: 15px;
    }

    .iletisim {
      border-radius: 10px;
      background: linear-gradient(90deg, rgba(244, 143, 1, 1) 0%, rgba(255, 72, 0, 1) 100%);
      /* Buton Arka PLan */
      border-color: #d0ff00;
      /* Kenar Çizgi Rengi */
      height: 30px;
      margin-top: 2%;
    }

    .uyarialan i {
      padding-right: 10px;
      display: flex;
      justify-content: center;
    }

    .uyari .uyarialan i {
      font-size: 40px;
      color: #ff7800;
      /* İcon Renk */
      align-items: center;
    }

    .metin {
      color: white;
      /* Metin rengi */
      background: url(https://i.hizliresim.com/4fi28qi.gif) repeat scroll 0 0%;
      padding: 3px;
      font-family: Open San, sans-serif;
    }

    .buton {
      color: #ffffff;
      /* Kapatma buton renk */
      border: none;
      background-color: rgba(68, 68, 68, 0.356);
      /*Kapatma buton arka plan renk */
      border-radius: 50%;
      width: 25px;
      /* Kapatma buton genişlik */
      height: 25px;
      /* Kapatma buton yükseklik */
      float: right;
    }

    .bdiv {
      padding-right: 3px;
    }

    #gizleme {
      display: block;
    }

    .goster1 {
      display: block;
      animation: goster 2s ease-in;
      /* Metin1 Kaç Saniyede Ekrana Geleceğini Ayarlar */
    }

    .goster2 {
      display: none;
      animation: goster 2s ease-in;
      /* Metin2 Kaç Saniyede Ekrana Geleceğini Ayarlar */
    }

    @keyframes goster {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    .fotogenldiv {
      position: relative;
      overflow: hidden;
      margin-top: 15px;
      text-align: center;
      background: url(https://i.hizliresim.com/4fi28qi.gif) repeat scroll 0 0%;
    }

    .fotodiv {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .foto {
      flex: 0 0 auto;
      width: 100%;
      box-sizing: border-box;
    }

    .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      /* Kaydırma buton genişlik */
      cursor: pointer;
      background: none;
      border: none;
      color: #d4d4d4;
      /* Kaydırma buton rengi */
      background-color: rgba(68, 68, 68, 0.356);
      /*Kaydırma buton arka plan renk */
      border-radius: 50%;
      width: 30px;
      /* Kaydırma arkaplan buton genişlik */
      height: 30px;
      /* Kaydırma arkaplan buton yükseklik */
    }

    .slider-btn-sag {
      right: 10px;
    }

    @media only screen and (max-width: 600px) {
      .slider-btn-sag {
        right: 1px;
      }
    }

    .slider-btn-sol {
      left: 10px;
    }


    @media only screen and (max-width: 600px) {
      .slider-btn-sol {
        left: 1px;
      }
    }

    .gosterge {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      margin-bottom: 5px;
    }

    .gnokta {
      height: 12px;
      width: 12px;
      margin: 0 5px;
      background-color: #ddddddc2;
      /* Alt slider gösterge rengi */
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .gnokta.aktiv {
      background-color: #6d6d6db6;
      /* Alt slider gösterge aktiv rengi */
    }

Görünüm


Screenshot-20231208032048.png
Mobil Görünüm

Screenshot-20231208035721 (1).png​
Eklenmesini İstediğiniz Özellikleri Belirtin İyi Forumlar 🙂
Hata Bildirimi Yaparasanız Sevinirim

  • Beğendim
Tepkiler: Mana88

2 Duyuru 1 Arada Ve Daha İyi Bir Duyuru Alanı

⚙ Eklenler :

1. Duyuruyu Görmek İstemeyenler için Kapatma Butonu eklendi
2. Duyuru Kapatıldığında Sayfa Yenilenmesinden Etkilenmez. Sayfa Kapatılıp Ve Ya Yeni Sekmede Acılınca Gözükücektir
3. Admin İletişim Butonu
4. 2 Duyuru Tek Sekmede / ( Genel İyileştirme )

AdminCP> Kurlumlar> Reklam yöneticisi > Reklam Ekle

HTML Kısmına eklenecek kodlar

HTML: 
<div id="gizleme" class="geneldiv">
    <div class="bdiv">
      <button class="buton" onclick="gizleGoster();">X</button>
    </div>
    <div class="duyuru uyari">
      <div class="uyarialan">
        <i class="fas fa-bullhorn"></i>
      </div>
      <div class="uyarialan">
        <div class="metin goster1" id="metin1">
           <b> Bu Tasarım Ap Yazılım® Tarafından Kodlanmıştır 🙂. Tamemn Ücretsizdir, İyi Forumlar. <br>
            Tasarım İle İlgili Hataları Belirtirseniz Sevinirim +90 546 180 66 63<br>
            <button class="iletisim"><a href="https://apyazilim.taplink.ws/" target="_blank">İletişim için tıkla!</a></button>
            </b> 
        </div>
        <div class="metin goster2" id="metin2">
           <b> Güncelleme İle Dahada Geliştim. <br>
            Modern Görünümüm İle Formunuzu Güzelleştire Bilirim <br>
            <button class="iletisim"><a href="https://apyazilim.taplink.ws/" target="_blank">İletişim için tıkla!</a></button>
            </b>
        </div>
      </div>
    </div>
</div>
<!--Aşağıdaki Kodları Lütfen JavaSc Bilginiz Yoksa Değiştirmeyin. Karşısına Not Duşulmuş Kodlar Değişe Bilir. Nasıl yapılacağını Bilmiyorsanız İteşime Geçe Bilirsiniz +90 546 180 66 63 -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
      var gizlemeDiv = document.getElementById('gizleme');
      var gizlemeDurumu = sessionStorage.getItem('gizlemeDurumu');
      if (gizlemeDurumu === 'gizli') {
        gizlemeDiv.style.display = 'none';
      } else {
        gizlemeDiv.style.display = 'block';
        var metin1 = document.getElementById('metin1');
        var metin2 = document.getElementById('metin2');
        function toggleMetin() {
            metin1.classList.toggle('goster1');
            metin1.classList.toggle('goster2');
            metin2.classList.toggle('goster1');
            metin2.classList.toggle('goster2');
        }
        setInterval(toggleMetin, 1 * 60 * 1000); /* Bu Kod (1 * 60 * 1000) Metin Değişim Suresi Mantığı İse Şu Şekilde 1-Dakika  60-Saniye 1000-Millisaniye 1 2 olursa metin 2 dakika aralıkla değişir. 60 ve 1000 Dokunmanız Tavisiye Edilniyor*/
      }
    });
    function gizleGoster() {
      var gizlemeDiv = document.getElementById('gizleme');
      if (gizlemeDiv.style.display === 'none') {
        gizlemeDiv.style.display = 'block';
        sessionStorage.removeItem('gizlemeDurumu');
      } else {
        gizlemeDiv.style.display = 'none';
        sessionStorage.setItem('gizlemeDurumu', 'gizli');
      }
    }
</script>

Ekran Görüntüsü (18).webp
Ekran Görüntüsü (17).webp​

extra.less alanına eklenecek kodlar

CSS: 
  /* Asağıdaki Kodlar Duyuru Alanı Kodlarıdır. Css Bilginiz Yoksa Değişiklik Yapmayın. Karşısına Not Duşulmuş Kodlar Değişe Bilir. Nasıl yapılacağını Bilmiyorsanız İteşime Geçe Bilirsiniz +90 546 180 66 63 */
    @import url('https://fonts.googleapis.com/css2? family= Open+Sans:wght@300 & display=swap'); /* Font Cağırma */
    .geneldiv {
        background: linear-gradient(90deg, #ff0000 0%, #ff7b00 80%); /* Arka plan renk*/
        padding: 5px;
        border-radius: 20px;
        margin-bottom: 15px;
        display: none;
    }
    .duyuru {
        align-items: center;
        display: flex;
    }
    .duyuru i {
        margin-right: 5px;
    }
    .duyuru a {
        color: #000000; /* Admin İletişim Renk*/
        text-decoration: none;
        font-weight: bold;
        font-size: 15px;
    }
    .iletisim {
        border-radius: 10px;
        background: linear-gradient(90deg, rgba(244, 143, 1, 1) 0%, rgba(255, 72, 0, 1) 100%); /* Buton Arka PLan */
        border-color: #d0ff00; /* Kenar Çizgi Rengi */
        height: 30px;
        margin-top: 2%;
    }
    .uyarialan i {
        padding-right: 10px;
        display: flex;
        justify-content: center;
    }
    .uyari .uyarialan i {
        font-size: 40px;
        color: #ff7800; /* İcon Renk */
        align-items: center;
    }
    .metin {
        color: white; /* Metin rengi */
        background: url(https://i.hizliresim.com/4fi28qi.gif) repeat scroll 0 0%;
        padding: 3px;
        font-family: Open San, sans-serif;
    }
    .buton {
        color: #ffffff; /* Kapatma buton renk */
        border: none;
        background-color: rgba(68, 68, 68, 0.356); /*Kapatma buton arka plan renk */
        border-radius: 50%;
        width: 25px; /* Kapatma buton genişlik */
        height: 25px; /* Kapatma buton yükseklik */
        float: right;
    }
    .bdiv {
        padding-right: 3px;
    }
    #gizleme {
        display: block;
    }
    .goster1 {
        display: block;
        animation: goster 2s ease-in; /* Metin1 Kaç Saniyede Ekrana Geleceğini Ayarlar */
    }
    .goster2 {
        display: none;
        animation: goster 2s ease-in; /* Metin2 Kaç Saniyede Ekrana Geleceğini Ayarlar */
    }
    @keyframes goster {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

Ekran Görüntüsü (19).webp

Görünüm


Ekran Görüntüsü (20).webp

Ekran Görüntüsü (21).webp
​
Eklenmesini İstediğiniz Özellikleri Belirtin İyi Forumlar 🙂
Hata Bildirimi Yaparasanız Sevinirim


​

Ekli dosyalar

  • Ekran Görüntüsü (18).webp
    Ekran Görüntüsü (18).webp
    27 KB · Görüntüleme: 37
  • Ekran Görüntüsü (19).webp
    Ekran Görüntüsü (19).webp
    40,8 KB · Görüntüleme: 35
  • Ekran Görüntüsü (17).webp
    Ekran Görüntüsü (17).webp
    43,4 KB · Görüntüleme: 41
  • Beğendim
Tepkiler: caylakpenguen

iLETİŞİM bUTONU

⚙ Eklenler :

1. Duyuruyu Görmek İstemeyenler için Kapatma Butonu eklendi
2. Duyuru Kapatıldığında Sayfa Yenilenmesinden Etkilenmez. Sayfa Kapatılıp Ve Ya Yeni Sekmede Acılınca Gözükücektir
3. Admin İletişim Butonu

AdminCP> Kurlumlar> Reklam yöneticisi > Reklam Ekle

HTML Kısmına eklenecek kodlar

HTML: 
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<div id="gizleme" class="geneldiv">
    <div class="bdiv">
      <button class="buton" onclick="gizleGoster();">X</button>
    </div>
    <div class="duyuru uyari">
      <div class="uyarialan">
        <i class="fas fa-bullhorn"></i>
      </div>
      <div class="uyarialan">
        <div class="metin">
          <b>
            Bu Tasarım Ap Yazılım® Tarafından Ali Cabbar Dinlerken Issız Gecelerde Kodlanmıştır 🙂. Tamemn Ücretsizdir, İyi Forumlar. <br>
            Tasarım İle İlgili Hataları Belirtirseniz Sevinirim <br>
            <button class="iletisim"><a href="https://apforum.xyz/index.php?misc/contact" target="_blank">İletişim için tıkla!</a></button>
          </b>
        </div>
      </div>
    </div>
  </div>
<!--Aşağıdaki Kodlar Duyurunun Kapanmasını Sağlıyor. Doğru Çalışması İçin Değişiklik Yapmayın-->
<script>
    document.addEventListener('DOMContentLoaded', function () {
      var gizlemeDiv = document.getElementById('gizleme');
      var gizlemeDurumu = sessionStorage.getItem('gizlemeDurumu');
      if (gizlemeDurumu === 'gizli') {
        gizlemeDiv.style.display = 'none';
      } else {
        gizlemeDiv.style.display = 'block';
      }
    });
    function gizleGoster() {
      var gizlemeDiv = document.getElementById('gizleme');
      if (gizlemeDiv.style.display === 'none') {
        gizlemeDiv.style.display = 'block';
        sessionStorage.removeItem('gizlemeDurumu');
      } else {
        gizlemeDiv.style.display = 'none';
        sessionStorage.setItem('gizlemeDurumu', 'gizli');
      }
    }
  </script>

ekran-goruntusu-23-png.23776


extra.less alanına eklenecek kodlar

CSS: 
.geneldiv{
    background: linear-gradient(90deg, #ff0000 0%, #ff7b00 80% ); /* Arka plan renk*/
    padding: 5px;
    border-radius: 20px;
    margin-bottom: 15px;
 
}
.duyuru {
    align-items: center;
    display: flex;
}
.duyuru i {
    margin-right: 5px;
}
.duyuru a {
    color: #000000; /* Admin İletişim Renk*/
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
}
.iletisim{
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(244,143,1,1) 0%, rgba(255,72,0,1) 100%); /* Buton Arka PLan */
    border-color: #d0ff00; /* Kenar Çizgi Rengi */
    width: 18%;
    height: 30px;
    margin-top: 2%;
}
.uyarialan i {
    padding-right: 10px;
    display: flex;
    justify-content: center;
}
.uyari .uyarialan i {
    font-size: 40px;
    color: #ff7800; /* İcon Renk */
    align-items: center;
}
.metin{
    color:white; /* Metin rengi */
    background: url(https://i.hizliresim.com/4fi28qi.gif) repeat scroll 0 0%; /* Metin arka plan  */
    padding: 3px;
 
}
.buton{
    color: #ffffff; /* buton renk */
    border: none;
    background-color: rgba(68, 68, 68, 0.356); /* buton arka plan renk */
    border-radius: 50%;
    width: 25px; /* buton genişlik */
    height: 25px; /* buton yükseklik */
    float: right;
}
.bdiv{  /* buton divi */
    padding-right: 3px;
 
}
#gizleme {
      display: none;
    }

Ekran Görüntüsü (12).webp

Eklenmesini İstediğiniz Özellikleri Belirtin İyi Forumlar 🙂
Hata Bildirimi Yaparasanız Sevinirim
  • Beğendim
Tepkiler: caylakpenguen

Duyuru Kapatma Özelliği Eklendi

⚙ Eklenler :

1. Duyuruyu Görmek İstemeyenler için Kapatma Butonu eklendi
2. Duyuru Kapatıldığında Sayfa Yenilenmesinden Etkilenmez. Sayfa Kapatılıp Ve Ya Yeni Sekmede Acılınca Gözükücektir

AdminCP> Kurlumlar> Reklam yöneticisi > Reklam Ekle

HTML Kısmına eklenecek kodlar

HTML: 
<div id="gizleme" class="geneldiv">
        <div class="bdiv">
          <button class="buton" onclick="gizleGoster();">X</button>
        </div>
        <div class="duyuru uyari">
          <div class="uyarialan">
            <i class="fas fa-bullhorn"></i>
          </div>
          <div class="uyarialan">
            <div class="metin">
              <b>
                Bu Tasarım Ap Yazılım® Tarafından Ali Cabbar Dinlerken Issız Gecelerde Kodlanmıştır 🙂. Tamemn Ücretsizdir, İyi Forumlar. <br>
                Tasarım İle İlgili Hataları Belirtirseniz Sevinirim <br>
                <a href="https://apforum.xyz/index.php?misc/contact" target="_blank">İletişim için tıkla!</a>
              </b>
            </div>
          </div>
        </div>
      </div>
    <!--Aşağıdaki Kodlar Duyurunun Kapanmasını Sağlıyor. Doğru Çalışması İçin Değişiklik Yapmayın-->
    
<script>
        document.addEventListener('DOMContentLoaded', function () {
          var gizlemeDiv = document.getElementById('gizleme');
          var gizlemeDurumu = sessionStorage.getItem('gizlemeDurumu');
          if (gizlemeDurumu === 'gizli') {
            gizlemeDiv.style.display = 'none';
          } else {
            gizlemeDiv.style.display = 'block';
          }
        });
   
        function gizleGoster() {
          var gizlemeDiv = document.getElementById('gizleme');
          if (gizlemeDiv.style.display === 'none') {
            gizlemeDiv.style.display = 'block';
            sessionStorage.removeItem('gizlemeDurumu');
          } else {
            gizlemeDiv.style.display = 'none';
            sessionStorage.setItem('gizlemeDurumu', 'gizli');
          }
        }
      </script>

Ekran Görüntüsü (23).png

extra.less alanına eklenecek kodlar

CSS: 
.geneldiv{
    background: linear-gradient(90deg, #ff0000 0%, #ff7b00 80% ); /* Arka plan renk*/
    padding: 5px;
    border-radius: 20px;
    margin-bottom: 15px;
 
}

.duyuru {
    align-items: center;
    display: flex;
}

.duyuru i {
    margin-right: 5px;
}

.duyuru a {
    color: #fff900; /* Admin İletişim Renk*/
    text-decoration: none;
}

.uyarialan i {
    padding-right: 10px;
    display: flex;
    justify-content: center;
}

.uyari .uyarialan i {
    font-size: 40px;
    color: #ff7800; /* İcon Renk */
    align-items: center;
}

.metin{
    color:white; /* Metin rengi */
    background: url(https://i.hizliresim.com/4fi28qi.gif) repeat scroll 0 0%; /* Metin arka plan  */
    padding: 3px;
 
}
.buton{
    color: #ffffff; /* buton renk */
    border: none;
    background-color: rgba(68, 68, 68, 0.356); /* buton arka plan renk */
    border-radius: 50%;
    width: 25px; /* buton genişlik */
    height: 25px; /* buton yükseklik */
    float: right;
}

.bdiv{  /* buton divi */
    padding-right: 3px;
 
}

#gizleme {
      display: none;
    }

Mobil ve bilgisayar uyumludur

Ekran Görüntüsü (24).png

Eklenmesini İstediğiniz Özellikleri Belirtin İyi Forumlar 🙂
  • Beğendim
  • Sevdim
Tepkiler: Black, tamirmasası, anilozdemir423 ve 1 kişi daha
Kişiselleştirme

Tema editörü

Ayarlar Renkler

  • Mobil kullanıcılar bu fonksiyonları kullanamaz.

    Alternatif header

    Farklı bir görünüm için alternatif header yapısını kolayca seçebilirsiniz.

    Görünüm Modu Seçimi

    Tam ekran ve dar ekran modları arasında geçiş yapın.

    Izgara Görünümü

    Izgara modu ile içerikleri kolayca inceleyin ve düzenli bir görünüm elde edin.

    Resimli Izgara Modu

    Arka plan görselleriyle içeriğinizi düzenli ve görsel olarak zengin bir şekilde görüntüleyin.

    Yan Paneli Kapat

    Yan paneli gizleyerek daha geniş bir çalışma alanı oluşturun.

    Sabit Yan Panel

    Yan paneli sabitleyerek sürekli erişim sağlayın ve içeriğinizi kolayca yönetin.

    Box görünüm

    Temanızın yanlarına box tarzı bir çerçeve ekleyebilir veya mevcut çerçeveyi kaldırabilirsiniz. 1300px üstü çözünürler için geçerlidir.

    Köşe Yuvarlama Kontrolü

    Köşe yuvarlama efektini açıp kapatarak görünümü dilediğiniz gibi özelleştirin.

  • Renginizi seçin

    Tarzınızı yansıtan rengi belirleyin ve estetik uyumu sağlayın.
Geri