Geçtiğimiz senelerde de Blogger için tab menü yapımı ile ilgili içerikler paylaşmıştık. Şimdi paylaşıyor olacağım sekmeli menü ise oldukça pratik bir yapıya sahip olup, ekstra kod bilgisine gereksinim bırakmamaktadır. Yan menününüzde çok fazla gadget mevcut ise, bunları tab menü içerisine alabilirsiniz. Sizler için CSS kodunu düzenledim ancak kendinize göre tekrar değiştirebilirsiniz. Aşağıdaki kodları ise HTML/JavaScript Ekle bölümüne eklemeniz yeterlidir.

AYRICA: Blogger’da Yan Menü Başlık Stillerini Değiştirelim

Blogger'da Tab Menü Yapımını Öğrenelim

<style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 10px ;
height: 31px;
line-height: 31px;
border: 1px solid #ddd;
border-left: none;
font-weight: normal;
background: #22a1c4;
overflow: hidden;
position: relative;
color: #fff;
font-size:13px;
}
ul.tabs li:hover {
background: #22a1c4;
}
ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFF;
color:#444;
}
.tab_container {
border: 1px solid #ddd;
border-top: none;
clear: both;
float: left;
width: 279px;
background: #FFFFFF;
}
.tab_content {
padding: 10px;
font-size: 15px;
display:none;
}
#container {
width: 280px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
<div id="container">
<ul class="tabs">
<li class="active" rel="tab1">Menü 1</li>
<li rel="tab2">Menü 2</li>
<li rel="tab3">Menü 3</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>
1. İçerik
</p>
</div>
<div id="tab2" class="tab_content">
<p>
2. İçerik
</p>
</div>
<div id="tab3" class="tab_content">
<p>
3. İçerik
</p>
</div>
</div>
</div>


Not: Kırmızı alanları kendinize göre değiştirebilirsiniz.

Örnek Görünüm

Bilgi: Eklentinin çalışması için web sitenizde jQuery Kütüphanesi olduğundan emin olun.