Blogger Mobil Uyumlu Tablo Tasarımı - 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 bloglarına destek olmaktadır.
Bu yazımızda sizlere kurulumu ve kullanışı çok kolay olan ve Apple tarzı blog tablo oluşturmanın ipuçlarını paylaşıyoruz. Bu vesileyle blogunuzda oluşturduğunuz yayınların daha düzgün ve anlaşılır olması ve blogunuzun karmaşık bir yapıdan daha sade bir görünüme sahip olmasını sağlayacaktır. Google algoritmalarının bu düzene önem verdiğini daha önceki yazılarımızda değinmiştik.
Blogger Mobil Uyumlu Tablo Tasarımı ve Kurulumu
Blogunuzda oluşturduğunuzun sıralı isimler, terimler veya sayısal verilerin daha düzenli görünmesini sağlamak için, mobil uyumlu tablo oluşturmalısınız. Peki mobil uyumlu blogger tablosu nasıl oluşturulur? Aşağıdaki adımları takip edin;
1. Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelini açın, açılan panelde Ş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 üzerine ekleyin ve şablonu kaydedin.
.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;}2. Blogunuzun kumanda panelinden Yeni yayın veya yeni bir sayfa oluşturmak için Sayfalar sekmesine tıklayın. Açılan sayfanın HMTL bölümüne aşağıdaki HTML kodu ekleyin ve kod içerisinde belirtilen yerlere bilgilerinizi ekleyin. Yayın başlığı, etiketler, arama açıklaması ve yayınınızı oluşturduktan sonra Yayınla sekmesine tıklayarak yayınlayın.
<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>Eğer sadece bir sayfada 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> 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;}
</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>Daha önce yayınlamış olduğumuz "Blogger Tablo / Table Nasıl Oluşturulur?" yazımıza da göz atabilirsiniz. Eğer blogunuz için oluşturmak istediğiniz farklı tasarımları veya eklentileri oluşturamıyorsanız, yorum sistemimizi kullanarak bize istediğiniz tarım veya eklenti hakkında detaylı bilgi verin 1 (bir) hafta içerisinde hazırlayalım. Bu yeni hizmetimiz ile okuyucularmız daha kaliteli hizmet verebilmek içindir.
Yorum Gönder