Blogger Sekmeli İçerik Kutusu Eklentisi

Blogunuzun sidebarına ekleyeceğiniz bu eklenti ile tek bir gadgetlık alana birden fazla gadget sığdırabileceksiniz. Nasıl mı? Bu eklentide tab yani sekmeler bulunuyor. Her bir sekmeye değişik içerik ekeyebiliyorsunuz. İster resim, ister metin, ister video. Böylece hem kullanışlı hem de şık bir sidebar eklentisine sahip olabileceksiniz.

 

Eklenti resimde gördüğünüz şekldedir. Bu eklentiyi blogunuza eklemek için Blogger kumanda paneline girdikten sonra Yerleşim > Gadet Ekle > HTML/JavaScript yolunu izleyerek aşağıdaki kodları yapıştırmanız yeterli.

 

<!-- Portakal Kabuğu Sekmeli İçerik Menüsü -->
<style type="text/css">
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 100%;
}

ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 4px ;
height: 31px;
line-height: 21px;
border: 1px solid #999999;
border-left: none;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
width:50px;
}

ul.tabs li:hover {
background: #CCCCCC;
}

ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.tab_container {
border: 1px solid #999999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}

.tab_content {
padding: 10px;
font-size: 1.2em;
display: none;
}

#container {
width: 280px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<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">Tab1</li>
<li rel="tab2">Tab2</li>
<li rel="tab3">Tab3</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p>İçerik
</p>
</div>
<div id="tab2" class="tab_content">
<p>İçerik
</p>
</div>
<div id="tab3" class="tab_content">
<p>İçerik
</p>
</div>
</div>
</div>
<!-- Portakal Kabuğu Sekmeli İçerik Menüsü -->

 

- Kodlarda mavi renkle gösterdiğim Tab1, Tab2, Tab3 yazan yerler sekmelerin başlıklarıdır. Örneğin 1. sekmenin içeriğine favori linklerinizi koyacaksanız Tab1 başlığını Linkler olarak değiştirebilirsiniz.

 

- Mor renkle gösterdiğim yerlere o sekmeye ait içeriğin HTML kodlarını yazabilirsiniz. Sekme içerisinde resim göstermek için oraya şöyle bir kod ekleyebilirsiniz:

 

<img src="https://resim.png" />

Takıldığınız bir yer olursa yorum bölümünden sorabilirsiniz.

Paylaş

BLOG SEO , teknoloji

Melisa