Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
MyBB açılır kapanır sağ blok (sidebar) [Modifikasyon]
#1
Lightbulb 
Bu modifikasyon sayesinde ana sayfaya açılır kapanır sağ blok(sidebar) eklenecektir. Diğer yapılan sağ bloklardan en önemli farkları; açılır kapanır olması, animasyonlu olması, sayfa yenilendikten sonra seçili ayarın hatırlanması ve plugine ihtiyaç duyulmaması.
Farklı bir sitede paylaşırken yapımcı ismi belirtmenizi rica ediyorum, örn: Modifikasyon Yapımcısı: Novruz.

Admin KP > Temalar ve şablonlar > Şablonlar > Kullandığınız temanın şablon seti > Ana sayfa şablonları > index aşağıdaki kodu bu bulun;
PHP Kod:
{$forums

aşağıdaki kod ile değiştirin.
PHP Kod:
<div class="layout">
        <
div class="layout_main">{$forums}</div>
         <
div class="layout_sidebar">
 
  <div class="layout_sidebar-inner">
             
             <
table border="0" cellspacing="0" cellpadding="5" class="tborder denemetb" id="denemetb">
<
thead>
<
tr>
<
td class="thead" colspan="5">
<
div class="expcolimage"><img src="{$theme['imgdir']}/collapse.png" id="cat_reklam_img" class="expander" alt="[-]" title="[-]" /></div>
<
div><strong>Reklam Alanı</strong></div>
</
td>
</
tr>
</
thead>
<
tbody style="" id="cat_reklam_e">
<
tr>
<
td class="trow1" align="center">
<
img src="http://lorempixel.com/90/90/" title="">
<
img src="http://lorempixel.com/90/90/" title="">
<
img src="http://lorempixel.com/90/90/" title="">
<
img src="http://lorempixel.com/90/90/" title="">
<
img src="http://lorempixel.com/90/90/" title="">
<
img src="http://lorempixel.com/90/90/" title=""></td>
</
tr>
</
tbody>
</
table>
</
div>
</
div>
</
div

Admin KP > Temalar ve şablonlar > Şablonlar > Kullandığınız temanın şablon seti > Ana sayfa şablonları > index > <body> tagının üstüne aşağıdaki kodu ekleyin.
PHP Kod:
    <script>
var 
indicator="";
        if(
document.cookie.indexOf("indicator")>-1){
                         
  indicator=document.cookie[document.cookie.indexOf("indicator")+10];
         
  }
var 
zaman=new Date();
zaman.setFullYear("2050");
var 
main document.getElementsByClassName("layout_main")[0];//forum
var sidebar document.getElementsByClassName("layout_sidebar")[0];//sidebar
function toggle(f){
    if(
indicator && indicator==1){
        
main.style.cssText="transition:none;width:100%";
        
sidebar.style.cssText="transition:none;width:0;opacity:0;"
    
}
    if(
f==&& indicator==){
        
main.style.cssText="width:75%;";
        
sidebar.style.cssText="width:24;opacity:1;";
        
document.cookie="indicator=2;expires="+zaman;
 
       indicator=document.cookie[document.cookie.indexOf("indicator")+10];
        return 
3;
    }
    if(
f==&& (indicator==|| !indicator)){
 
      console.log("indicator 2-dir");
 
      document.cookie="indicator=1;expires="+zaman;
        
main.style.cssText="width:100%;transition: width 500ms ease .5s;";
        
sidebar.style.cssText="width:0;opacity:0;transition: opacity .5s ease 0s, width .5s ease .5s";
 
       indicator=document.cookie[document.cookie.indexOf("indicator")+10];
    }
}
toggle();
    </
script


Admin KP > Temalar ve şablonlar > Kullandığınız tema > global.css > Gelişmiş düzenleme aşağıdaki kodları en alta ekleyin.
PHP Kod:
.layout {
    
displayflex;
    
justify-contentspace-between;
}

.
layout_main {
    
width75%;
    
transitionwidth 500ms ease 0s;
}

.
layout_sidebar {
    
width24%;
    
margin-bottom1.6%;
    
transitionopacity .5s ease .5swidth .5s ease 0s;
}

.
layout_sidebar-inner {
    
positionsticky;
    
top1%;


Aşağıdaki kod ise fonksiyonumuzu çalıştıracak butondur, Admin KP > Temalar ve şablonlar > Şablonlar > Kullandığınız temanın şablon seti > Ana sayfa şablonları > index şablonunda istediğiniz bölüme ekleye bilirsiniz.
PHP Kod:
<button type="button" onclick="toggle(3)">Sidebar aç/kapat</button

Önizleme;
GmVb2v.png
ücretli grafik - tasarım ve kodlama işleri yapılır
MyBB Dizayn
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla PGM
Teşekkür verenler: Aisha* , Taifun , Helper , Time Trave
#2
Eline sağlık, güzel.

“We are all in the gutter, but some of us are looking at the stars.”
eski ve son arge ekibi lideri
Cevapla PGM
Teşekkür verenler:
#3
Emeğine sağlık başarılı
destekforumu.10tl.net
Ara
Cevapla PGM
Teşekkür verenler:
#4
Çerezlerin nasıl kullanılacağına dair detaylı anlatım yapan bir yer yada öneriniz var mı? Emeğinize sağlık hocam...
Edep ile gelen lütuf ile gider...
(------ keyifsizm.10tl.net ------)
Bağışta bulunmak için Tıklayınız... :)
Cevapla PGM
Teşekkür verenler:
#5
(23-04-2019 Saat: 12:59)NextWorld Nickli Kullanıcıdan Alıntı: Çerezlerin nasıl kullanılacağına dair detaylı anlatım yapan bir yer yada öneriniz var mı? Emeğinize sağlık hocam...

Teşekkürler, detaylı anlatım için kesin bir kaynak veremem fakat Udemy'de bir çok eğitim seti mevcut.
ücretli grafik - tasarım ve kodlama işleri yapılır
MyBB Dizayn
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla PGM
Teşekkür verenler:
#6
Güncel.
ücretli grafik - tasarım ve kodlama işleri yapılır
MyBB Dizayn
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
Cevapla PGM
Teşekkür verenler:
#7
@Novruz üç tane div'i kapatmamışsın... şu ana kadar benden başka bu kodları kullanmaya girişen olmaması üzücü
Cevapla PGM
Teşekkür verenler:
#8
( Saat: 17:46)Nihility Nickli Kullanıcıdan Alıntı: @Novruz üç tane div'i kapatmamışsın... şu ana kadar benden başka bu kodları kullanmaya girişen olmaması üzücü

Bildirdiğin için teşekkür ederim, bir zamanlar en çok aranan özellikti oysa.
ücretli grafik - tasarım ve kodlama işleri yapılır
MyBB Dizayn
iletişim için;
özel mesaj, sosyal medya adreslerim:
facebook | twitter | instagram | behance | github
1
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



YILLARIN FORUMU / Forumcu.10TL.NeT -