Blogger'da Mobil Uyumlu Tablo Yapalım!

Bu hafta yeni oluşturduğum, OSGB Hizmeti arayan kişilere yardımcı olabilmek amacıyla gruplandırdığım, Nilüfer OSGB, Osmangazi OSGB Firmaları, Bursa OSGB Firmaları yada İstanbul OSGB Firmaları, gibi bütün osgb firmalarını İlçe yada İl bazında gruplandırdığım Güncel osgb listelerini daha estetik görünmeleri için Blogger üzerinden tablo olarak eklemek ihtiyacı hissettim. Blogger Eklentileri, blogspot tasarımlarına yeni stil getirerek blogcuların gelişen teknolojiye uyum sağlayan, göze hoş görünen ve ziyaretçilerin sıkılmadan kolayca gezinebilecekleri bir içerik oluşturmaya katkı sağlamaktadır.

Kurulumu basit olan Apple Blog Tabloları nasıl oluşturabileceğinizi bu yazıda sizlere aktarmaya çalışacağım, bu kodlar sayesinde oluşturduğunuz içerikler daha anlaşılır hale gelecek ve bloglarımızın göze daha hoş gelen ve yormayan bir halde içeriklerinizi kullanıcılarınıza sunmuş olacaksınız.

Blogger Mobil Uyumlu Tablo Tasarımı ve Kurulumu

Blogumuzda oluşturduğumuz isim, terim yada sayısal verilerin düzenli görünümünü sağlamak için mobil uyumlu tablolar oluşturmamız gerekiyor, Mobil Uyumlu Tablo Nasıl Oluşturulur? sorusunun yanıtı için aşağıdaki kodları sitemize uygulamaya çalışalım.

• blogger.com 'dan hesabımıza giriş yapalım 
• blogger yenilenen kumanda panelini açalım.
• Blogger panelinde Şablon > HTML'i Düzenle sekmesine tıklayın. 
• Açılan sayfada blogunuzun şablon kodları yer almaktadır. Burada CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üstüne aşağıdaki kodları ekleyelim ve şablonumuzu bu haliyle kaydet butonu yardımıyla kaydedelim.

Eklenecek kodlar

.row {margin-right: 25%;margin-left: 25%;}
.post-body table td{background: #444;padding: 5px;border: 1px solid #555;}
.apple-table-table-black .table th {padding:10px 10px !important;background-color:#333;color:#fbc560;border-top: 0 !important;border-bottom:1px solid #666 !important;border:1px solid #666;}
.apple-table-table-black .table tr:hover {background-color: #333;}
.apple-table-table-black .table {background: #444;color: #FFF;}
.apple-table-table-black {border:0px;}
.apple-table-table-black .table> tbody> tr> td, .apple-table-table-black .table> tbody> tr> th, .apple-table-table-black .table> tfoot> tr> td, .apple-table-table-black .table> tfoot> tr> th, .apple-table-table-black .table> thead> tr> td, .apple-table-table-black .table> thead> tr> th {border-top: 1px solid #555;text-align: left;}

Blogun kumanda panelinde görünen Yeni Yayın butonuna tıklayarak yeni bir yazı yada yeni sayfa oluşturmak istiyorsak sayfalar bölümüne gelerek yeni sayfa butonuna tıklayalım. Açılan içerik editörü kısmında HTML bölümüne tıklayalım ve aşağıdaki html kodlarını ekleyelim ve kod içindeki ilgili alanlara kendi bilgilerimizi yerleştirelim.
İçeriklerimizi girdikten sonra ilgili anahtar kelimeleri ve arama açıklamasını yazdıktan sonra yayınla butonu yardımıyla hazırladığımız içeriğimizi yayına alalım.
Eklenecek Kodlar

<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="table-responsive apple-table-table-black">
<table class="table">
<thead>
<tr>
<th width="2%">NO</th>
<th>ADI</th>
<th>SOY ADI</th>
<th>KULLANICI ADINZ</th></tr>
</thead>
<tbody>
<tr>
<td>1 -</td>
<td>Ad</td>
<td>Soy ad</td>
<td>@kullanıcı</td></tr>
<tr>
<td>2 -</td>
<td>Ad</td>
<td>Soyad</td>
<td>@kullanıcı</td></tr>
<tr>
<td>3 -</td>
<td>Ad</td>
<td>SoyAd</td>
<td>@kullanıcı</td></tr>
<tr>
<td>4 -</td>
<td>Ad</td>
<td>Soyad</td>
<td>@kullanıcı</td></tr>
<tr>
<td>5 -</td>
<td>Adınız</td>
<td>Soy adınız</td>
<td>@kullanıcı</td></tr>
<tr>
<td>6 -</td>
<td>Adınız</td>
<td>Soy adınız</td>
<td>@kullanıcı</td></tr>
</tbody>
</table>
</div>
</div>
</div>

ÖRNEK GÖRÜNÜM launch

Eğer sadece blogger sayfasında tablo kullanmak istiyorsanız;

Aşağıdaki kodlar içerisinde hem CSS hem de HTML kodlar yer almaktadır. Sadece CSS kodlarını <style> içerisine alarak sadece bir sayfada kullanabilirsiniz. Bunu neden bu şekilde ekliyoruz? Çünkü sadece bir sayfada kullanacağımız kodlar için, blogunuzun şablon kodlarının şişmemesi yani blogunuzun yüklenme hızını etkilememesi açısından çok önemlidir. Yada tüm sayfalarınızda bu uygulamayı kullanabilirsiniz.

Burada yapmanız gereken yayınınızı oluşturduktan sonra aşağıdaki kodları yayın içerisine ekleyin, kodlar içerisinde belirtilen yerlere yayın bilgilerinizi ekleyin ve yayınlayın.

<style>
.row {margin-right: 25%;margin-left: 25%;}
.post-body table td{background: #444;padding: 5px;border: 1px solid #555;}
.apple-table-table-black .table th {padding:10px 10px !important;background-color:#333;color:#fbc560;border-top: 0 !important;border-bottom:1px solid #666 !important;border:1px solid #666;}
.apple-table-table-black .table tr:hover {background-color: #333;}
.apple-table-table-black .table {background: #444;color: #FFF;}
.apple-table-table-black {border:0px;}
.apple-table-table-black .table&gt; tbody&gt; tr&gt; td, .apple-table-table-black .table&gt; tbody&gt; tr&gt; th, .apple-table-table-black .table&gt; tfoot&gt; tr&gt; td, .apple-table-table-black .table&gt; tfoot&gt; tr&gt; th, .apple-table-table-black .table&gt; thead&gt; tr&gt; td, .apple-table-table-black .table&gt; thead&gt; tr&gt; th {border-top: 1px solid #555;text-align: left;}
</style>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="table-responsive apple-table-table-black">
<table class="table">
<thead>
<tr>
<th width="2%">NO</th>
<th>ADI</th>
<th>SOY ADI</th>
<th>KULLANICI ADI</th></tr>
</thead>
<tbody>
<tr>
<td>1 -</td>
<td>Adınız</td>
<td>Soy adınız</td>
<td>@kullanıcı</td></tr>
<tr>
<td>2 -</td>
<td>Adınız</td>
<td>Soy adınız</td>
<td>@kullanıcı</td></tr>
<tr>
<td>3 -</td>
<td>Adınız</td>
<td>Soy adınız</td>
<td>@kullanıcı</td></tr>
<tr>
<td>4 -</td>
<td>Adınız</td>
<td>Soy adınız</td>
<td>@kullanıcı</td></tr>
<tr>
<td>5 -</td>
<td>Adınız</td>
<td>Soy adınız</td>
<td>@kullanıcı</td></tr>
<tr>
<td>6 -</td>
<td>Adınız</td>
<td>Soy adınız</td>
<td>@kullanıcı</td></tr>
</tbody>
</table>
</div>
</div>
</div>