1. * 5651 Sayılı Kanun'a göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur.
    * Telif hakkına konu olan eserlerin yasal olmayan şekilde paylaşıldığını ve yasal haklarının çiğnendiğini düşünen hak sahiplerinin İLETİŞİM bölümünden bize ulaşmaları durumunda ilgili şikayet incelenip gereği 1 (bir) hafta içinde gereği yapılacaktır.
    E-posta adresimiz

Sitemize Tab Box Yapıyoruz

Konusu 'WebMaster Bölümü' forumundadır ve YoRuMSuZ tarafından 27 Şubat 2009 başlatılmıştır.

  1. YoRuMSuZ
    Avare

    YoRuMSuZ Biz işimize bakalım!

    Katılım:
    7 Haziran 2006
    Mesajlar:
    24.427
    Beğenileri:
    7.354
    Ödül Puanları:
    11.330
    Cinsiyet:
    Bay
    Banka:
    8.771 ÇTL
    Bu tab box uygulaması ile sitenizde sayfa yenilemeye gerek olmadan farklı sayfalardan veri çekebilir, küçük alanlarda daha fazla içerik sunabilirsiniz. Uygulamayı html, asp veya php tabanlı sitelerinizde rahatlıkla çalıştırabilirsiniz.

    [​IMG]

    Ayrıca bu uygulama Ajax Tab bileşenleri ile çakışmadığı için entegresi oldukça kolay. Bu uygulamanın çalışan halini [Linkleri görebilmek için ÜYE olmalısınız!..] adresinde görebilirsiniz.

    Bu uygulama ile sitenizin istediğiniz yerinde Son Yazılar, Son Yorumlar, Kategoriler vs göstermek için sayfa yenilemeye gerek kalmaz[Linkleri görebilmek için ÜYE olmalısınız!..] Tamamen yardım amaçlı içerikte sunabilirsiniz. Örnek uygulamayı indirerek css kodlarında kolayca beğendiğiniz renkleri kullanabilirsiniz.

    Şimdi bu uygulamayı Wordpress tabanlı sitemizde kullandığımız temaya nasıl entegre edeceğimizi görelim:

    * Alttaki linkten indirdiğiniz dosyanın içindeki menu.js adlı dosyayı tema klasörüne atın.

    * Tema dizininde bulunan style.css dosyasını açıp şu satırları en sona ekleyin.

    PHP:
     .tabbox positionrelativetop0left0width452pxheight222pxborder5px solid #bdbcb6;  }
     
     
    .tabbox h2 positionrelativemargin0padding0width150pxbordersolid #bdbcb6; border-width: 1px 0 0 1px; z-index: 2; }
     
    .tabbox .last h2 border-bottom-width1px; }
     
     .
    tabbox h2 a displayblockpadding5pxmargin0 1px 0 0font-size11px;  color#000; text-decoration: none; }
     
    .tabbox h2 a:hover background#D8D7CC; }
     
     
    .tabbox .tabpanel positionabsolutetop0left150pxwidth292pxheight212pxpadding5pxbackground#F4F3E8; border: 1px solid #bdbcb6; border-top: 1px solid #bdbcb6; z-index: 1; display: none; }
     
     
    .tabbox .selected .tabpanel displayblockoverflowauto; }
     .
    tabbox .selected h2 a background#F4F3E8; margin: 0; cursor: default; }
    * header.php dosyasında <head></head> satırları arasına alttaki satırı ekleyin. (Bu satırı isterseniz içirik girmek için girdiğiniz kodlardan önce de girebilirsiniz)
    PHP:
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/menu.js"></script>
    * Şimdi temanızda bu uygulamayı nerede kullanmak isterseniz (sidebar.php, index.php, footer.php) alttaki satırları girmemiz heterli.
    PHP:
    <div class="tabbox"
     <
    div class="selected">
      <
    h2>
      <
    a href="#tab_bir" name="tab_bir" onclick="return changeTab(this)" onfocus="return changeTab(this)">
      
    Bölüm 1</a>
      </
    h2>
      <
    div class="tabpanel">
      
    Buraya içeriği girin.
      </
    div>
     </
    div
     <
    div>
      <
    h2>
      <
    a href="#tab_iki" name="tab_iki" onclick="return changeTab(this)" onfocus="return changeTab(this)">
      
    Bölüm2</a>
      </
    h2>
      <
    div class="tabpanel">
      
    Buraya içeriği girin.
      </
    div>
     </
    div
     <
    div class="last">
      <
    h2>
      <
    a href="#tab_alti" name="tab_alti" onclick="return changeTab(this)" onfocus="return changeTab(this)">
         
    Bölüm 3</a>
       </
    h2>
       <
    div class="tabpanel">
        
    Buraya içeriği girin
       
    </div>
     </
    div
    </
    div>
    Örnek uygulamayı alttaki linten indrebilirsiniz.

    Boyut: 3 Kb

    [ [Linkleri görebilmek için ÜYE olmalısınız!..] ]

    Örnek Uygulama: [Linkleri görebilmek için ÜYE olmalısınız!..]
     

Sayfayı Paylaş