Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Blogger için Sekmeli Menü (Tab Menü) Yapımı


FacebookTwitterPinterestTumblrYazdır


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.


    • Bercan Aydın
    • 3 Ekim 2020, 17:45

    Hocam Yenişafak gazetesinin sitesini mobilde açtığımda üstteki kategorileri parmağımla kaydırabiliyorum. Bu şekilde responsive temayı bozmayacak ama parmağımla sağa-sola kaydırabileceğim bir gadget alanın nasıl oluşturabilirim?

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri
Yukarı Çık