Organik Tabs (Sekmeli Menü)





Animasyona dayalı,her sekmesine farklı renkler atayabileceğiniz bir menü çeşidi olan organik tabs ayrıca blogunuza görsellik olarak çok şey katacak.

Şablona Ekleme

Bunu blogunuza eklemek için ilk önce buradan .rar uzantılı dosyayı indiriniz. Daha sonra bu dosya içindeki css ve js uzantılı dosyaları host sitenize yükleyiniz.  Daha sonra  Yerleşim-->Html Düzenle dedikten sonra ctrl+f ile arama yapıp ]]></b:skin> kodunu bulunuz. Bulduğunuz bu kodun hemen altına alttaki kodu ekleyiniz.

    <link rel="stylesheet" type="text/css" href="css/style.css" />
   
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript" src="js/example.js"></script>


Host sitenize yüklediğiniz dosyaların adreslerini adı ile gösterilen renkli yerlere yapıştırınız. Sonra şablonu kaydedip tekrar Yerleşim-> Gadget Ekle-> Html-Java Script adımlarını takip ederek alttaki kodu yapıştırınız.

---------------------------------------------
<div id='organic-tabs'>
                 
<ul id='explore-nav'>
<li id='ex-featured'><a class='current' href='#' rel='featured'>Örnek 1</a></li>
<li id='ex-core'><a href='#' rel='core'>Örnek 2</a></li>
<li id='ex-jquery'><a href='#' rel='jquerytuts'>Örnek 3</a></li>
<li class='last' id='ex-classics'><a href='#' rel='classics'>Örnek 4</a></li>
</ul>

<div id='all-list-wrap'>
     
<ul id='featured'>
<li><a href='http://hadipaylasblog.blogspot.com/2009/10/feed-tag-gadget.html'>Feed Tag Gadget</a></li>
<li><a href='http://hadipaylasblog.blogspot.com/2009/10/google-friend-connect.html'>Google Friend Connect</a></li>
</ul>

<ul id='core'>
<li><a href='http://hadipaylasblog.blogspot.com/2009/10/blog-yorumlarna-profil-resmi-avatar.html'>Blog Yorumlarına Profil Resmi (Avatar ) Ekleme</a></li>
<li><a href='http://hadipaylasblog.blogspot.com/2009/07/110-ucretsiz-rss-icon-seti.html'>110+ Ücretsiz RSS İcon Seti</a></li>
</ul>

<ul id='jquerytuts'>
<li><a href='http://hadipaylasblog.blogspot.com/2009/10/google-friend-connect.html'>Google Friend Connect</a></li>
<li><a href='http://hadipaylasblog.blogspot.com/2009/10/blogger-wibiya-eklentisi.html'>Blogger Wibiya Eklentisi</a></li>
</ul>

<ul id='classics'>
<li><a href='http://hadipaylasblog.blogspot.com/2009/07/tab-menu-2-sekmeli-menu.html'> Tab Menü-2 (Sekmeli Menü)</a></li>
<li><a href='http://hadipaylasblog.blogspot.com/2009/07/jquery-scroll-to-top-control.html'> jQuery Scroll to Top Control</a></li>
<li><a href='http://hadipaylasblog.blogspot.com/2009/10/blogger-wibiya-eklentisi.html'>Blogger Wibiya Eklentisi</a></li>
</ul>
</div>
</div>
</div>

---------------------------------------------------
 Düzenleme

  • Sekmelerin renklerini değiştirmek isterseniz indirdiğiniz dosya içerisindeki css uzantılı dosyayı açarak renk kodlarını değiştirebilirsiniz.(eğer bir programınız yoksa not defteri ile açabilirsiniz.)
  • Sekme sayısını azaltmak için alttaki resimde gösterilen şekilde isdeğinizi silip kaldırabilirsiniz.





7 yorum:

fikrinne on 9 Kasım 2009 11:45 dedi ki...

sızın vermıs oldugunuz js lerı kullansak demodakı yenıden upload etmesek olmaz mı

hadipaylas on 9 Kasım 2009 16:56 dedi ki...

Olur fakat sağlama almak en iyisi.

bYdUyGuSaL on 21 Ekim 2010 08:33 dedi ki...

demoda sorun war sanırım

tki on 23 Nisan 2011 06:33 dedi ki...

demoyu düzenlermisiniz

Adsız dedi ki...

en büyük AŞK

http://www.youtube.com/watch?v=leee0F0GxBc

aşk, hilal mertkan, büyük aşk, hilal aydın on 23 Mayıs 2011 15:32 dedi ki...

hilal mertkan büyük aşk gerçek sevgi...

http://www.youtube.com/watch?v=leee0F0GxBc

youtube,izlesene,aşk

gerçek aşk on 8 Kasım 2011 04:46 dedi ki...

seni seviyorum

Yorum Gönder