Blogger Tab Widgets

Blogger Tab slide menü ekleme.

DEMO

 Öncelikle Html düzenle- Widget Şablonlarını Genişlet Deyip CTRL+F yardımıyla </head> kodunu buluyoruz ve hemen altına aşağıdaki kodu yapıştırıyoruz.

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>

<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>

<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>


<style type='text/css'>
.yui-content { padding:1em; /* pad content container */
}
.yui-navset .yui-content {
border:1px solid #111111;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff2dd;
}
.yui-navset .yui-nav li a {
background:#f3e7d2 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}
/* top oriented */
.yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:2px solid #ccc;
}
.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style> 

Şimdide aşağıdaki kodu gadget ekle- HTML/JAVA Script Deyip yapıştırıyoruz

<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab1</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab2</em></a></li>
<li><a href="#tab3"><em>Tab3</em></a></li>
<li><a href="#tab4"><em>Tab4</em></a></li>
</ul><br/>
<div class="yui-content">

<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
<div id="tab4"><p>Tab Four Content</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');

YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>

Şimdi sıra geldi tab ların içeriğini düzenlemeye.
-----Tab 1 yazan yere Birinci tabın başlığını yazıyoruz ve Tab One Content yazan yerede widget html kodunu yapıştırıyoruz. Ve diğer tablar içinde aynı işlemi sırasıyla tekrarlıyoruz.
 Hayırlı Olsun.