Blogger 3 Cesit Tab Menu Yapımı (Blogspot)

Yazar: EfsaneFenerli | Posted in Blogger

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

DersPHP - Blogger İpucları ve Yardımı - Bloggerda 3 Çesit Menü Yapmak

0 yorum yapıldı: "Blogger 3 Cesit Tab Menu Yapımı (Blogspot)"

Sen de bir yorum yap...

Yorum Göndermek için mesaj yazmanız Yeterlidir.