Blog Yayınlarında Akordeon ve Blok Tablo Oluşturma - Blog siteleri için daha önce bir kaç yayın paylaşmıştık, şimdi bu yayınlardan farklı olarak blog sitelerinde kullanılan akordeon, blok ve sabit tablo kullanımı ve kodeksleri hakkında bilgiler bu yazımızda paylaşıyoruz. Daha önceki yazılarımıza da bakabilirsiniz;
- Blogger Tablo / Table Nasıl Oluşturulur?
- JQuery ile Otomatik Mobil Uyumlu HTML5 Tablo Oluşturma
- Blogger Mobil Uyumlu Tablo Tasarımı
Blog siteleri her geçen gün gelişmekte olup, yeni özellikler ile blog siteleri daha da önem kazanmaya başladı. Blog sitelerinin varlığını oluşturan en önemli unsur içerikleridir. Bu nedenle blog yayınlarınızda paylaştığınız içeriklerin daha düzenli olması ve kullanıcı deneyimi geliştirme çalışmaları ile blog sitenizin varlığını ön plana çıkarmaya çalışın.
Yukarıda kısa bir açıklama yaptık, bu açıklamamızın daha iyi anlaşılması için akordeon, blok ve sabit tablo oluşturma ve kodeksleri hakkında bilgiler verelim. Blog sitenizin tasarımı kullanıcılar tarafından da ilgisini çekmesi blogunuzun kalitesini gösterir.
Blog Yayınlarında Akordeon, Blok ve Sabit Tablo Oluşturma
A- CSS ve javaScrip kodları hakkında bilgiler: Blog sitenizde akordeon, blok ve sabit tablo kullanmak için öncelikle aşağıdaki CSS ve javaScript kodlarını blogunuzun şablon kodları arasına eklemelisiniz. Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasına açın. Blogunuzun şablon kodları arasında bulunan ]]></b:skin> veya </style> kodunu CTRL+F yardımıyla bulun ve aşağıdaki CSS kodları ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.
CSS kodları
// Panel Kodeks
h4.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit;font-weight:500;line-height:1.1}.table-accordeon:after{clear:both}.table-accordeon:after{display:table;content:" "}.table-accordeon:before{display:table;content:" "}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}.table-accordeon{padding-left:0;margin-bottom:0;list-style:none}.table-accordeon>li{position:relative;display:block}.table-accordeon>li>a{position:relative;display:block;padding:10px 15px}.table-accordeon>li>a:focus,.table-accordeon>li>a:hover{text-decoration:none;background-color:#eee}.table-accordeon>li.disabled>a{color:#777}.table-accordeon>li.disabled>a:focus,.table-accordeon>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}.table-accordeon .open>a,.table-accordeon .open>a:focus,.table-accordeon .open>a:hover{background-color:#eee;border-color:#337ab7}.table-accordeon .table-accordeon-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.table-accordeon>li>a>img{max-width:none}.table-accordeon-tabs{border-bottom:1px solid #ddd}.table-accordeon-tabs>li{float:left;margin-bottom:-1px}.table-accordeon-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.table-accordeon-tabs>li>a:hover{border-color:#eee #eee #ddd}.table-accordeon-tabs>li.active>a,.table-accordeon-tabs>li.active>a:focus,.table-accordeon-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.table-accordeon-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}pre{overflow:hidden;border:none;border-radius:0}.alert{position:relative;border:0;border-radius:0}.alert i{left:20px;top:20px}.alert p{overflow:hidden;margin:2px 0 0 30px}.btn{border-radius:0;margin:0 5px 5px 0;-webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s}.btn.active.focus,.btn.active:focus,.btn.focus,.btn.focus:active,.btn:active:focus,.btn:focus{outline:none}a.btn{text-decoration:none!important}.table-accordeon-tabs{padding:0!important;margin:0!important;border:0}.table-accordeon-tabs > li{margin:0!important}.table-accordeon-tabs > li > a{margin:0;border-radius:0;border:1px solid #ddd!important;border-right:0!important;border-bottom:0!important}.table-accordeon-tabs > li:last-child > a{border-right:1px solid #ddd!important}.table-accordeon-tabs > li.active > a,.table-accordeon-tabs > li.active > a:focus,.table-accordeon-tabs > li.active > a:hover{background:#F97413;color:#fff}.tab-content{border:1px solid #ddd;padding:15px}.tooltip.top .tooltip-arrow{border-top-color:#F97413}.tooltip.right .tooltip-arrow{border-right-color:#F97413}.tooltip.bottom .tooltip-arrow{border-bottom-color:#F97413}.tooltip.left .tooltip-arrow{border-left-color:#F97413}.tooltip-inner{background-color:#F97413}.panel-info>.panel-heading{background-color:#d9edf7;border-color:#bce8f1}.panel-info{border-color:#bce8f1}.panel-success>.panel-heading{background-color:#dff0d8;border-color:#d6e9c6}.panel-success{border-color:#d6e9c6}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default{border-color:#ddd}.panel-group .panel{border-radius:0;-webkit-box-shadow:0 0 0;-moz-box-shadow:0 0 0;box-shadow:0 0 0}.panel-group .panel+.panel{margin-top:5px}.panel-body{padding:15px}.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-group .panel-heading{padding:0;border-radius:0}.panel-default>.panel-heading a{color:#333}.panel-info>.panel-heading a{color:#31708f}.panel-success>.panel-heading a{color:#3c763d}.panel-group .panel-heading a{padding:10px 15px;opacity:1;display:block;text-decoration:none}.panel-group .panel-heading a:hover,.panel-group .panel-heading a:focus{text-decoration:none;opacity:0.8}.panel{border:1px solid transparent}.panel-info{border-color:#bce8f1}.panel-success{border-color:#d6e9c6}.panel-default{border-color:#ddd}
// Alert Kodeks
.alert{position:relative;border:0;border-radius:0}.alert i{float:left;margin-top:4px}.alert p{overflow:hidden;margin:0 0 0 20px}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}
// Tablo Kodeks
.table-blogger{min-height:.01%;overflow-x:auto}.table-brd{border:1px solid #ddd}table stn[class*=stn-]{position:static;display:table-column;float:none}.stn-xs-1{width:8.33333333%}.stn-xs-7{width:58.33333333%}.stn-xs-7,.stn-xs-1{min-height:1px;padding-right:15px;padding-left:15px}.table-str>tbody>tr:nth-of-type(odd){background-color:#f8f8f8}.table-brd>tbody>tr>th{border:1px solid #ddd}table{border-spacing:0;border-collapse:collapse}.table>colgroup+thead>tr:first-child>th{border-top:0}.table-brd>thead>tr>th{border-bottom-width:2px}.table-brd>thead>tr>th{border:1px solid #ddd}.table>tbody>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table-blogger th{text-align:left}.table-blogger code{font-family:Menlo,Monaco,Consolas,"Courier New",monospace;padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}
Yukarıdaki CSS kodlarını ekledikten sonra yine blogunuz şablon kodları arasında bulunan </body> kodunu CTRL+F yardımıyla bulun ve aşağıdaki javaScrip kodlarını </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.
javaScript kodları
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jquerycods/03/master/table.js"></script>
B- Blogger Sayfalarına Tablo Ekleme: Blogunuzda oluşturduğunuz yayınlara tablo eklemek için HTML kodlardan yararlanırız. Yukarıda CSS ve javaScript kodlarını eklediğimiz tablorı blog sayfa ve yayınlarında nasıl kullanıldığı hakkında kısa bir bilgi verelim;
"Yukarıdaki kodları blogunuza ekleyerek akordeon, blok ve sabit tablo oluşturmayı sağladınız. Bu tabloları blog yayınlarınızda kullandığınız gibi blogunuzun sabit sayfalarında da kullanabilirsiniz."1- Blog sayfa ve yayınlarında blok tablo oluşturma: Aşağıdaki HTML kodu blogunuzda yani yayın oluşturduğunuzda yayınları oluşturduğunuz sayfanın sol üst köşede bulunan HTML sayfa butonuna tıklayarak aşağıdaki HTML kodları ekleyebilirsiniz.
Blok tablo HTML kodu
<ul class="table-accordeon table-accordeon-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab" data-toggle="tab">Başlık #1</a></li>
<li role="presentation">
<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Başlık #2</a></li>
<li role="presentation">
<a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Başlık #3</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<p>
Açıklama veya metin
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<p>
Açıklama veya metin
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="messages">
<p>
Açıklama veya metin
</p>
</div>
</div>
2- Blog sayfa ve yayınlarında akordeon tablo oluşturma: Yukarıdaki gibi blogunuzun HTML bölümüne ekleyerek blogunuzun sayfa veya yayınlarından akordeon tablo oluşturabilirsiniz.
Akordeon tablo HTML kodu
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Akordeon #1</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Açıklama veya metin
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Akordeon #2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Açıklama veya metin
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Akordeon #3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Açıklama veya metin
</div>
</div>
</div>
</div>
3- Blog sayfa ve yayınlarında sabit tablo oluşturma: Aşağıdaki HTML kodları kullanarak blog sayfa ve yayınlarınızda sabit tablo oluşturabilirsiniz.
Blok tablo HTML kodu
<div class="table-blogger">
<table class="table table-brd table-str">
<colgroup>
<col class="stn-xs-1">
<col class="stn-xs-7">
</colgroup> <thead><tr>
<th>Sınıf</th>
<th>Açıklama</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="blogger-row">
<code>Kartlar</code>
</th>
<td>
Açıklama.
</td>
</tr>
<tr>
<th scope="blogger-row">
<code>Oyunlar</code>
</th>
<td>
Açıklama.
</td>
</tr>
<tr>
<th scope="blogger-row">
<code>Filmler</code>
</th>
<td>
Açıklama.
</td>
</tr>
<tr>
<th scope="blogger-row">
<code>Yıldızlar</code>
</th>
<td>
Açıklama.
</td>
</tr>
<tr>
<th scope="blogger-row">
<code>Doğa</code>
</th>
<td>
Açıklama.
</td>
</tr>
</tbody>
</table>
</div>
4- Blog sayfa ve yayınlarına uyarı butonları ekleme: Aşağıdaki HTML kodları kullanarak blog sayfa ve yayınlarınızda butonları ekleyebilirsiniz. Uyarı butonlarına farklı bir tasarımlar ekleyebilirsiniz. HTML kod içerisindeki icon kodlarını "Font Awesome İcon Seti Sayfası"ndan değiştirebilirsiniz.
Blok uyarı etiketleri HTML kodu
<div class="alert alert-success"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i><p>Müthiş! Süper havalısın!</p></div>
<div class="alert alert-info"><i class="fa fa-film" aria-hidden="true"></i><p>Hey! Harika bir hamle yaptın!</p></div>
<div class="alert alert-danger"><i class="fa fa-windows" aria-hidden="true"></i><p>Uyarı! Bu tehlikeli bir mesaj!</p></div>
<div class="alert alert-warning"><i class="fa fa-map-marker" aria-hidden="true"></i><p>Dikkat! Konum belirsiz!</p></div>
Bu yayınımızda sizlere blog yayınlarını oluştururken kolaylık sağlaması için; akordeon, blok ve sabit tablo oluşturma ile blog sayfalarında ve yayınlarında uyarı butonu oluşturma ile ilgili bilgiler paylaştık. Bu yayınımız ile ilgili olarak sorularınız için lütfen yorum sistemini kullanın.
Yorumlar
Yorum Gönder