CSS ve jQuery ile Sekmeli Blog Yayını Oluşturma Eklentisi

24.4.17
CSS ve jQuery ile Sekmeli Blog Yayını Oluşturma Eklentisi

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 != &quot;item&quot;'>
<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 != &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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.
Bu makale faydalı mı?

Kategori İçerikleri

Blogger
Disqus
Yorum Ekle

11 yorum

Güzel yazı olmuş elinize sağlık hocam

Cevap

Teşekkürler

Cevap

Hocam burda jqouery linkinni eklemeyi unutmuşsun galiba çünkü sekmeler arasında geçiş yapılmıyor bir türlü

Cevap

Merhaba, blogunuzda <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> kodu bulunması gerekir, öncelikle bunu kontrol edin. Eğer blogunuzda bir google ajax kodu bulunmuyorsa yukarıdaki kodu </head> kodunun üzerine ekleyerek deneme yapın lütfen.

Cevap

Yukarıdaki eklentiyi blogunuzda çalıştırmak için, blogunuzda bir <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> Google Ajax kodu bulunması gerekir.

Cevap

Calismiyor dostum napalim?

Cevap

Blogunuzda bu koda <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> benzer bir kod olup olmadığını kontrol edin. Eğer buna benzer bir kod bulunmuyorsa, blogunuzun </head> kodunun bir satır üzerine jQuery kodunu ekleyerek deneyin.

Cevap

test ettim web sitemde fakat başarılı bir şekilde çalışmadı. tüm kodları doğru yerlere ekledim. önizlemedeki kodun tamamını bir kayıta yapıştırınca çalışıyor fakat. sadece div ekleyince tablar çalışmıyor. support@emirhankiziloglu.com yardımcı olursanız sevinirim.

Cevap

Öncelikle nasıl bir hata aldığınızı görmemi sağlayabilir misiniz?

Cevap

Bazı kodların sitenizde bulunan kodlar ile çakışmasından kaynaklanabilir.

Cevap

tablarda geçiş olmadı. geçiş yapmak için tıkadığımda herhangi bir şey olmuyor.

Cevap