3 Çeşit Tab Menü Yapımı

Blogger'da yukarıdaki ve aşağıda resimlerde verilen menüleri yapmak için buradan örneklerine bakabilirsinz.Yapmak isteyen arkadaşlar için işe başlayalım.

Tabii önce şablonumuzun yedeğini alıyoruz. Sonra
1.Yerleşim--->HTML Düzenle---> Widget Şablonlarını Genişlet
2.Ctrl+f ile

</head>

kodunu buluyoruz. bu kodun hemen üst satırına aşağıdaki kod1'i kopyalayıp yapıştırıyoruz.

<link rel="stylesheet" type="text/css" href="tabcontent.css" />

<script type="text/javascript" src="tabcontent.js">

</script>

3. tabcontent.css tabcontent.js (Sağ Click/Farklı Kaydet)dosyalarını bildiğimiz herhangi bir host sitesine yüklüyoruz.Yüklediğimiz dosyaların Url adreslerini kod1 de isimleri ile gösterilen yere yapıştırıyoruz.
4.Aşağıda verilen kodlardan istediğinizi seçerek bloğunuzun istediğiniz köşesine koyabilirsiniz. Sidebar'a koyacaksanız alttaki kodun hemen alt satırına ekleyin.

<div id='sidebar-wrapper'>

Resim 1 için ; genişliğini dilediğiniz gibi ayalayabilirsiniz. Boyu içeriğine göre kendiliğinden değişmektedir.

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://hadipaylasblog.blogspot.com/">Hadi Paylaş Blog</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

Resim 2 için ; Boyutlarını ayarlayabilirsiniz ancak içeriğine dikkat etmelisiniz. İçeriğe göre boyutu değişmez/enabled..

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>


<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" >Tab 1</a></li>
<li><a href="#" rel="tcontent2" >Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

Resim 3 için ; Bu da resim 2 deki gibidir ancak tab değişimi otomotiktir.

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4">Tab 4</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p>
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="dog3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="dog4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>


<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>

Not: Verilen tab menülerin boyutlarını kodların
right: 30px; width:150px bölümünden ayarlayabilirsiniz.Buttonların url adreslerini ben .css dosyası içine ekledim. İsteyen arkadaşlar bloguna uygun butonlarla değiştirebilirler