CSS ve jQuery ile Sekmeli Blog Yayını Oluşturma Eklentisi - Blog yayın içeriklerini çeşitli sekmelere ayırarak daha basit ve anlaşılır olması için sekmeli yayın oluşturma eklentisini kullanabilirsiniz.
Sekmeli yayın içerikleri genellikle teknoloji ve yazılım ile ilgili sunum yapan bloglar ve web siteleri tarafından kullanılır, farklı türde yayın yapan bloglar veya web siteleri için de kullanılabilir. Blog yayınlarının da daha anlaşılır olması için sekmeli yayın oluşturma eklentisi ile detaylı blog yayınları oluşturabilirsiniz.
Blogger yayınlarında tablo görünümlü sekmeli içerik oluşturmak için aşağıdaki adımları takip edin.
Blogger Sekmeli Yayın Oluşturma Eklentisi
Blog sekmeli yayın oluşturma eklentisi eklemek için Blogger hesabınıza giriş yapın. Eklemek istediğiniz blogun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın.
Tablo Görünümlü Tasarım
1- Blogunuzun şablon kodları arasına aşağıdaki CSS kodlarını ekleyin. CSS kodları eklemek için CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodunu </head> kodunun bir satır üzerine ekleyin.
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.tabs-container {
max-width: 800px;
margin: 0 auto;
}
ul.tabs {
margin: 0;
padding: 0;
list-style: none;
}
ul.tabs li {
background: none;
color: #333;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #ddd;
color: #333;
}
.tab-content {
display: none;
background: #eee;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
</style>
</b:if>2- jQuery kodunu şablon kodları arasına eklemek için CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.
<b:if cond='data:blog.pageType != "item"'>
<script>
//<![CDATA[
$(document).ready(function() {
$('ul.tabs li').click(function() {
var tab_id $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
}
)
}
) //]]>
</script>
</b:if>3- Blog yayınlarında sekmeli içerik oluşturmak için aşağıdaki HTML kodunu yayın editör sayfasının HTML bölümüne ekleyin.
<div class="tabs-container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab-1</li>
<li class="tab-link" data-tab="tab-2">Tab-2</li>
<li class="tab-link" data-tab="tab-3">Tab-3</li>
<li class="tab-link" data-tab="tab-4">Tab-4</li>
</ul>
<div id="tab-1" class="tab-content current">
<p>Açıklama-1</p>
</div>
<div id="tab-2" class="tab-content">
<p>Açıklama-2</p>
</div>
<div id="tab-3" class="tab-content">
<p>Açıklama-3</p>
</div>
<div id="tab-4" class="tab-content">
<p>Açıklama 4</p>
</div>
</div>HTML kod içerisinde bulunan Tab-1 ilgili açıklamanın başlığını oluşturmaktadır. Açıklama-1 ise ilgili başlığın açıklamasını oluşturmaktadır.
Akordeon Görünümlü Tasarım
Yukarıdaki gibi aşağıdaki kodları blogunuzun şablon kodları arasına ekleyerek akordeon görünümlü sekmeli yayın oluşturma eklentisini de blonunuzda kullanabilirsiniz.
1- Aşağıdaki CSS kodlarını yukarıdaki gibi </head> kodunun bir satır üzerine ekleyin.
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.container-content {
max-width:600px;
margin: 0 auto 10px
}
ul.tabs {
margin: 0 0 -1px;
padding: 0;
list-style: none
}
ul.tabs li {
background: 0 0;
display: inline-block;
margin: 0;
padding: 10px 15px;
cursor: pointer;
font-weight: 700;
border-radius: 4px 4px 0 0;
}
.tab-content,
ul.tabs li.current {
background: #555;
color: #fff
}
.tab-content {
display: none;
padding: 15px
}
.tab-content.current {
display: inherit
}
.container-content .tab-content p,
.container-content .tab-content ul,
.container-content .tab-content ol {
margin: 0
}
.container-content .tab-content ul li,
.container-content .tab-content ol li {
margin: 0 0 0 20px;
padding: 0
}
.tab-content a {
color: #9fe3ff
}
.technical-box {
display: block;
line-height: 1.3
}
.technical-box:after {
content: "";
clear: both;
display: block
}
.technical-box .field-name {
display: inline-block;
font-weight: 700;
width: 180px;
margin: 0;
position: relative;
top: 0;
float: left
}
.technical-box .field-value {
display: inline-block;
margin: 0;
width: calc(100% - 180px);
float: left
}
.tab-content input[type="checkbox"] {
position: absolute;
left: -9999px;
}
.hideContent {
position: relative;
height: auto;
}
label {
background: #FF9800;
display: block;
height: 30px;
line-height: 30px;
cursor: pointer;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
label:before {
position: absolute;
content: 'Devamı...';
width: 120px;
text-align: center;
left: 50%;
margin-left: -60px;
font-weight: bold;
}
.tab-content input[type="checkbox"] ~ div {
width: 100%;
overflow: hidden;
max-height: 144px;
padding-bottom: 30px;
position: relative;
}
.tab-content input[type="checkbox"] ~ div:after {
content: "";
width: 100%;
height: 70px;
position: absolute;
bottom: 15px;
background: -moz-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%);
background: -webkit-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgb(85, 85, 85) 100%);
background: linear-gradient(to bottom, rgba(126, 139, 150, 0) 0%, rgb(85, 85, 85) 100%);
z-index: 1;
}
.tab-content input[type="checkbox"]:checked ~ div {
max-height: 3000px;
transition: 2s;
}
.tab-content input[type="checkbox"]:checked ~ div:after {
background: 0 0;
}
.tab-content input[type="checkbox"]:checked + label:before {
content: 'Kapat';
}
@media screen and (max-width: 414px) {
ul.tabs li {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
background: #7e8b96;
margin: 0 0 5px;
color: #fff;
opacity: .7;
}
ul.tabs li.current {
opacity: 1
}
}
/*]]>*/
</style>
</b:if>2- Yukarıdaki jQuery kodunu blogunuzun şablon kodları arasına eklediyseniz tekrardan eklemenize gerek yok.
3- Aşağıdaki HTML kodu yayın editör sayfasının HTML bölümüne ekleyerek kullanabilirsiniz.
<div class="container-content">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Açıklama</li>
<li class="tab-link" data-tab="tab-2">Teknik bilgi</li>
<li class="tab-link" data-tab="tab-3">Özellikler</li>
</ul>
<div id="tab-1" class="tab-content current hideContent">
<input type="checkbox" id="check_id">
<label for="check_id"></label>
<div>
<p>
Açıklamayı buraya ekleyin.
</p>
</div>
</div>
<div id="tab-2" class="tab-content">
<span class="technical-box">
<span class="field-name">Başlık:</span> <span class="field-value">Buraya</span>
<span class="field-name">Dosya adı:</span> <span class="field-value">Buraya</span>
<span class="field-name">Dosya boyutu:</span> <span class="field-value">Buraya</span>
<span class="field-name">İşletim sistemi:</span> <span class="field-value">Buraya</span>
<span class="field-name">Lisans:</span> <span class="field-value">Ücretsiz</span>
<span class="field-name">Yazar:</span> <span class="field-value"><a href="#" rel="nofollow" target="_blank" class="external-link">Bağlantı adı</a></span>
</span>
</div>
<div id="tab-3" class="tab-content">
<p>
Diğer açıklamalar buraya.
</p>
</div>
</div>CSS kodlarında düzenlemeler yaparak sekmeli yayın oluşturma eklentisinin tasarımını istediğiniz gibi değiştirerek blogunuza uygun hale getirebilirsiniz.
Bu yazımızda Blogger ve Web sitelerinde sekmeli yayın oluşturma eklentisi ile ilgili ipuçları paylaştık. Bu eklenti ile ayrıntılı ve detaylı blog yayınlarının daha düzenli oluşturulmasını sağlamış olduk.
Yorum Gönder
1. İçerik konusuyla alakalı olmasına özen gösterin.
2. Aktif link bırakmayın. (Hemen silinir!)
3. Yazım ve dil bilgisi kurallarına uymaya çalışın lütfen.