Tab Menü-2 (Sekmeli Menü)

Daha önceki yazılarımda birkaç tab menü çeşidini vermiştim. Zaman buldukça farklı çeşitlerini de size yeni yazılarımda vereceğimi söylemiştim. İşte bugün yeni bir tab menü çeşidi ile karşınızdayım. Buradan örneğini inceleyebilir ve alttaki adımları takip ederek blogunuza yerleştirebilirsiniz.



1. Yerleşim--->Html Düzenle-- diyerek ctrl+f ile ]]></b:skin> kodunun hemen alt satırına veya </head> kodunu hemen üst satırına alttaki kodu ekliyoruz.



<link href='http://www.sigmirror.com/files/23552_ax40w/style.css' rel='stylesheet' type='text/css'/>
<script src='http://www.sigmirror.com/files/23549_nqptp/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://www.sigmirror.com/files/23550_xcbti/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'/>
<script src='http://www.sigmirror.com/files/23551_eudqc/sprinkle.js' type='text/javascript'/>


Not:

• style.css
• sprinkle.js
• jquery-ui-personalized-1.5.2.packed.js
• jquery-1.2.6.min.js

dosyalarını ileride sorun yaşamamak için kendi hosting sitenize yükleyiniz. (sağ tıkla/farklı kaydet)(Hosting sitelerine burdan bakabilirsiniz.)

2. Yerleşim--> Sayfa Öğeleri--> Gadget Ekle--> Html JavaScript diyerek alttaki kodu ekliyoruz.


<div class='widget' id='tabvanilla'>

<ul class='tabnav'>
<li><a href='#popular'>Popüler Yazılar</a></li>
<li><a href='#recent'>Duyuru</a></li>
<li><a href='#featured'>Son Yorumlar</a></li>
</ul>

<div class='tabdiv' id='popular'>
<ul>
<li><a href='#'>Resimli Son Yazılar Eklentisi</a></li>
<li><a href='#'>Benzer Yazılar Eklentisi (Türkçe karakter Destekli)</a></li>
<li><a href='#'>Verilen Linklere Açıklama Ekleme</a></li>
<li><a href='#'>Yazı Başlık Kutusu/ Post Box</a></li>
<li><a href='#'>Blogger Slideshow (Manşet Atma)</a></li>
<li><a href='#'>jQuery Feed Menü Yapımı</a></li>
<li><a href='#'>Blogger Yazılarına Kod Ekleme</a></li>
<li><a href='#'>Meta Tag Nedir? Nasıl Eklenir?</a></li>
<li><a href='#'>5 Çeşit Açılır Menü</a></li>
<li><a href='#'>Blogger Resimleriniz Mouse İle Canlansın</a></li>
</ul>
</div><!--/popular-->

<div class='tabdiv' id='recent'>
<p>Bu bir denemedir.</p>
</div><!--/recent-->

<div class='tabdiv' id='featured'>
<ul>
<li><a href='#'>Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href='#'>Are We Alone? A Look Into Space</a></li>
</ul>
</div><!--featured-->

</div><!--/widget-->


style.css dosyasından tab menü boyutlarını şablonunuzun boyutlarına göre ayarlamayı unutmayın. Tabii isterseniz farklı stiller için değişiklikler yapabilirsiniz.
Kolay gelsin....




Lütfen Alıntı yaparken kaynak gösterin....