Ana içeriğe atla

Blog Yayınlarında Akordeon ve Blok Tablo Oluşturma

Yazan:
Blog Yayınlarında Akordeon ve Blok Tablo Oluşturma

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;


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.
Etiketler:

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Haber sitelerinin RSS adresleri

Yazan:
Bu sayfa Türkçe yayın yapan haber sitelerinin RSS adreslerini içerir. Siteler alfabeye göre sıralanmış, RSS adreslerinin linkleri yanlarında verilmiştir. Burada listelenen haber sitelerini -XML/OPML destekleyen- RSS okuyucu uygulamanızda içe aktarma yapabilmek için  içe aktarma dosyasını  kullanabilir ve ya deneme aşamasındaki  altın RSS adresine  göz atabilirsiniz. Böylece haber sitelerinin son dakika haberlerini anlık olarak takip edebilirsiniz. Yerel gazetelerin web sitelerine ait RSS adresleri için " Yerel gazeteler ", RSS yayını yapmayan web siteleri için de " RSS yayını yapmayan siteler " alt başlığına bakabilirsiniz. Adreslerin sonunda yer alan "  " görseli adresin birleştirilmiş olduğunu, " " görseli ise adresin tarih hatası içerdiğini gösterir. Ajanslar Anadolu Ajansı (AA) -  http://www.aa.com.tr/tr/rss/default?cat=guncel Doğan Haber Ajansı (DHA) -  http://www.dha.com.tr/rss.asp İhlas Haber Ajansı (İHA) -  http://www.iha.c...
4 yorum
Devamı

Blogger Domain Ekleme ve Yönlendirme

Yazan:
Blogger Özel Alan Adı Ekleme ve Yönlendirme - Blogger siteniz için almış olduğunuz domaini blogger servisine yönlendirmek için aşağıdaki adımları takip ederek kolaylık yönlendirebilirsiniz. Bu yazımızda İsimtescil.NET üzerinden alınmış olan domainin blogger'a yönlendirilmesini anlatacağım, diğer domain sitelerinden alınan domainleri de aynı şekilde blogger sitenize yönlendirebilirsiniz. Blogger sitesine domaini yönlendirmeden önce bazı önemli bilgileri paylaşmak istiyorum; 1- Blog alan adı/domain alma: Blog siteniz için alan adı/domain almadan önce almak istediğiniz alan adını blogunuzda kullanılabilirliğini kontrol edin. Eğer bir alan adı/domain daha önce başka bir blog üzerinde veya web sitesinde kullanılmış ise bu alan adı/domain blogunuza yönlendirilmemektedir. Domaini blogunuzda kontrol etmek için blogunuzun kumanda panelinde bulunan Ayarlar > Temel ayarlar yolunu takip ederek açılan sayfada bulunan Yayıncılık menüsünde aşağıdaki resimde gördüğün gibi alan adınızın/domain...
Yorum Gönder
Devamı

Blogger Yönetim Paneli Hakkında Bilgiler

Yazan:
Blogger Yönetim Paneli Hakkında Bilgiler - Blogger kullanıcılarının yönetmiş oldukları blog sitelerini daha iyi yönetmek ve blogu anlamak için, blog yönetim paneli hakkında ayrıntılı bilgileri sizlerle paylaşmak istedik. Blogger sitesi açmayı bir kullanıcı zaten biliyor, ama yeni başlayanlar için kısaca bu konuya değinelim; Blogger sitesi açmak için öncelikle bir Gmail hesabı oluşturmalısınız. Oluşturduğunuz Gmail hesabı ile Blogger.com'a giriş yaparak ilk blogunuzu oluşturabilirsiniz. Bu yazımı blogunuzu oluturduktan sonra yapmanız gerekenler ile ilgili önemli bilgileri size aktarmak için oluşturduk. Blogger Yönetim Paneli ve Bölümleri Blogger Yönetim Paneli 11 bölümden oluşan her bir bölümü kendi içerisinde farklı özelliklere sahiptir. Blogunuzda yayın paylaşmadan önce bu yazımızı tamamen okumanızı tavsiye ederiz. A- Kayıtlar: Yönetim panelinde bulunan yayınlar bölümü blog sitesinde paylaştığınız yayınlar yer almaktadır. Bu bölümde yayınlar ile ilgili tüm bilgilere ulaşabilirsi...
Yorum Gönder
Devamı