Sitemize Tab Box Yapıyoruz

YoRuMSuZ · 28 Şbt 2009

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.

Ayrıca bu uygulama Ajax Tab bileşenleri ile çakışmadığı için entegresi oldukça kolay.

Bu uygulama ile sitenizin istediğiniz yerinde Son Yazılar, Son Yorumlar, Kategoriler vs göstermek için sayfa yenilemeye gerek kalmaz. 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 { position: relative; top: 0; left: 0; width: 452px; height: 222px; border: 5px solid #bdbcb6;  }

.tabbox h2 { position: relative; margin: 0; padding: 0; width: 150px; border: solid #bdbcb6; border-width: 1px 0 0 1px; z-index: 2; }
.tabbox .last h2 { border-bottom-width: 1px; }

.tabbox h2 a { display: block; padding: 5px; margin: 0 1px 0 0; font-size: 11px;  color: #000; text-decoration: none; }
.tabbox h2 a:hover { background: #D8D7CC; }

.tabbox .tabpanel { position: absolute; top: 0; left: 150px; width: 292px; height: 212px; padding: 5px; background: #F4F3E8; border: 1px solid #bdbcb6; border-top: 1px solid #bdbcb6; z-index: 1; display: none; }

.tabbox .selected .tabpanel { display: block; overflow: auto; }
.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

[

Bağlantıyı görüntüleme izniniz yok, görüntülemek için: Giriş yapın veya üye olun.

]

Sitemize Tab Box Yapıyoruz

YoRuMSuZ

Biz işimize bakalım...

Benzer konular