Blogger jQuery Tab Menü

Blogger'da yukarıdaki ve aşağıda resimlerde verilen menüleri yapmak içindoğru konudasınız.Yapmak isteyen arkadaşlar için işe başlayalım hemen.
Tabi ö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://dersphp.blogspot.com/">DersPHP</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.dersphp.blogspot.com">DersPHP</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.dersphp.blogspot.com">DersPHP</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

Yazar Hakkında:

Herkese Merhabalar ben Enes İLHAN. Gaziantep'te doğdum, şimdi Adana'da Büro Yönetimi ve Sekreterlik bölümünü okuyorum. İlk yılımı geride bıraktım. Ekim'de 2.sınıf derslerini alacağım. Bölümümü pek sevmesem de buradan mezun olup 4 yıllık bir fakülteye kapağı atıp hayalimdeki meslek olan Polis olmak için uğraş vereceğim. Beni bu blogun dışında Facebook'da, ve Twitter'da bulabilirsiniz. İki servisi de pek sevmem ama onlarsızda yapamam..