VİDEO İÇİN: http://cssders.com/29-dle-part-sistemi-yapma.html



S.a arkadaşlar, şimdi DLE'de nasıl part sistemi yapabiliriz? Onu öğrenelim..

İlk olarak admin panelimizde İlave Alan oluşturmalıyız. Bunu için;

https://www.siteadi.com/admin.php?mo...tion=configure adresine giriyor ve Yeni Alan Ekle diyoruz.


Alan Adı --- Alanımızın Adı (Türkçe karakter kullanmayın - ı,ş,ç,ğ,ü,İ -)

Alan Tanımı --- Konu eklerken gözükecek bir tanım (Örneğin; Embed kodunu yazınız.. gibi)

Kategori --- Tümü diyeceksiniz..

Alan Tipi --- (Bu iki türlü olacak. Part başlıkları için Bir Satır diyeceksiniz.. Part Embed kısmı için ise Birkaç satır diyeceksiniz.)

Varsayılan Değer --- Boş bırakıyoruz.

İsteğinize Göre Kullanın sekmesinide işaretlemeyi unutmayın.


Kaydet diyoruz ve tamam ilave alanımızı oluşturduk. Şimdi oluşturacağınız ilave adlarınızı aşağıda yazıyorum. Sabır ile oluşturun lütfen

tab1 -- Bir Satır

tabembed1  -- Birkaç Satır

tab2 -- Bir Satır

tabembed2 -- Birkaç  Satır

tab3 -- Bir Satır

tabembed3 -- Birkaç Satır

tab4  -- Bir Satır

tabembed4 -- Birkaç Satır

tab5 -- Bir Satır

tabembed5  -- Birkaç Satır

tab6 -- Bir Satır

tabembed6 -- Birkaç  Satır

tab7 -- Bir Satır

tabembed7 -- Birkaç Satır

tab8  -- Bir Satır

tabembed8 -- Birkaç Satır

tab9 -- Bir Satır

tabembed9  -- Birkaç Satır

ilave alanlarımızı oluşturduktan sonra admin panelimiz aşağıdaki görüntüde olması gerekiyor.



Şimdi ise bu alanları full-story.tpl'mizde göstermeyi öğrenelim..

Bunu için arkadaşlar ben kendimde olan bir tam sistemini kurdum.Şimdi full-story.tpl dosyanızı açın ve tab sistemini göstereceğiniz kısma aşağıda kodları yazın.

<ul>
        <li><a  href="#tab1">[xfvalue_tab1]</a></li>
        <li><a  href="#tab2">[xfvalue_tab2]</a></li>
        <li><a  href="#tab3">[xfvalue_tab3]</a></li>
        <li><a  href="#tab4">[xfvalue_tab4]</a></li>
        <li><a  href="#tab5">[xfvalue_tab5]</a></li>
        <li><a  href="#tab6">[xfvalue_tab6]</a></li>
        <li><a  href="#tab7">[xfvalue_tab7]</a></li>
        <li><a  href="#tab8">[xfvalue_tab8]</a></li>
        <li><a  href="#tab9">[xfvalue_tab9]</a></li>
    </ul>
    <div>
        <div  id="tab1">
        [xfvalue_tabembed1]
        </div>
        
        <div  id="tab2">
        [xfvalue_tabembed2]
        </div>
        
        <div  id="tab3">
        [xfvalue_tabembed3]
        </div>
        
        <div  id="tab4">
        [xfvalue_tabembed4]
        </div>

        <div  id="tab5">
        [xfvalue_tabembed5]
        </div>
        
        <div  id="tab6">
        [xfvalue_tabembed6]
        </div>
        
        <div  id="tab7">
        [xfvalue_tabembed7]
        </div>
        
        <div  id="tab8">
        [xfvalue_tabembed8]
        </div>
        
        <div  id="tab9">
        [xfvalue_tabembed9]
        </div>
    </div>

    <div  style="clear:both;"></div>

Daha sonra main.tpl dosyasını açıp HEAD tagları arasına aşağıda kodu yazın.

<script type="text/javascript"  src="http://sitenizinadi.com/jquery.min.js"></script>
<script  type="text/javascript">

$(document).ready(function() {

    //Default  Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs  li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show();  //Show first tab content
    
    //On Click Event
    $("ul.tabs  li").click(function() {
        $("ul.tabs  li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active");  //Add "active" class to selected tab
        $(".tab_content").hide();  //Hide all tab content
        var activeTab =  $(this).find("a").attr("href"); //Find the rel attribute value to  identify the active tab + content
        $(activeTab).fadeIn();  //Fade in the active content
        return false;
    });

});
</script>

jquery.min.js Download


Son olarak temanızın CSS dosyasını açın.

/*  Tab Sistemi */
    ul.tabs {margin: 0; padding: 0; float: left;  list-style: none; height: 25px; width: 100%;}
    ul.tabs li {float:  left; margin: 0; padding: 0; height: 24px; line-height: 24px;  border-left: none; margin-bottom: -1px; background: #000; overflow:  hidden; position: relative;}
    ul.tabs li a {text-decoration: none;  color: #fff; display: block; font-size: 12px; padding: 0 10px; outline:  none;}
    ul.tabs li a:hover {background: #ddd;}    
    html  ul.tabs li.active, html ul.tabs li.active a:hover  {background-color:  #fff; color: #000; text-shadow: 1px 1px 3px #000;}
    html ul.tabs  li.active a {color: #000;}
    .tab_container {clear: both; float:  left; width: 100%; background: transparent;}

Yukarıdaki CSS kodları benim kendi sitemin temasına göre uyarlıdır. Siz isteğinize göre değiştirebilirsiniz. Tab sisteminiz hayırlı olsun Birde videoyu izlemenizi tavsiye ederim.

Zaten DLE'de olan bir özellik ile güzel birşey yapmış olduk Umarım herkes anlamıştır.

Kolay gelsin / Tayfun Erbilen