Blogger'da Tablo Oluşturmak

Herkese iyi akşamlar. Bugün blogger'da nasıl tablo oluştururuz onu göreceğiz. Peki tablo oluşturmak ne işimize yarar? Diyelim ki bir liste hazırlamak istiyoruz. Şahsen ben bir liste oluşturmak istediğimde şeklinin düzgün olmasını istiyorum. Bunu da tablo aracılığıyla sağlıyorum. Ayrıca yazınızla ilgili sayısal veriler vb. bilgiler paylaşmayı düşünüyorsanız tablo özelliğinin bunu karşılayacağını düşünüyorum. Şimdi "blogger'da nasıl tablo oluştururuz?" sorusunun cevabını vereyim. Yine oldukça basit birkaç koddan ibaret.

1. Adım

Blogger > Kayıtlar > Yeni Yayın yolunu izleyerek yeni yayın oluşturuyoruz.

2. Adım

Aşağıdaki kodları HTML kısmına yapıştırıyoruz.

HTML
<table cellpadding="0" cellspacing="0">
<tr>
<th>Tablo Başlığı 1</th>
<th>Tablo Başlığı 2</th>
<th>Tablo Başlığı 3</th>
</tr>
<tr>
<td>Tablo İçeriği 1</td>
<td>Tablo İçeriği 1</td>
<td>Tablo İçeriği 1</td>
</tr>
<tr>
<td>Tablo İçeriği 2</td>
<td>Tablo İçeriği 2</td>
<td>Tablo İçeriği 2</td>
</tr>
<tr>
<td>Tablo İçeriği 3</td>
<td>Tablo İçeriği 3</td>
<td>Tablo İçeriği 3</td>
</tr>
</table>

Bloggerda oluşturduğumuz tablonun aşağıdaki gibi ya da benzeri şekilde olması gerekiyor. düzenlemek istiyorsanız 3. Adımdaki, olmuyorsa/görülmüyorsa 4. Adımdaki yolu izleyin.

Tablo Başlığı 1	Tablo Başlığı 2	Tablo Başlığı 3
Tablo İçeriği 1	Tablo İçeriği 1	Tablo İçeriği 1
Tablo İçeriği 2	Tablo İçeriği 2	Tablo İçeriği 2
Tablo İçeriği 3	Tablo İçeriği 3	Tablo İçeriği 3

3. Adım
Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle yolunu takip edin. CTRL+F komutu ile table kelimesini arayalım. Aşağıda görülen  kod kısmını bulmamız gerekiyor. Kodlar içerisindeki renk kodlarını, border değerini, padding değerini vs. kendinize göre düzenleyebilirsiniz.

4. Adım
Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle yolunu takip edin. CTRL+F komutu ile ]]></b:skin> kodunu buluyoruz. Aşağıdaki kodları ]]></b:skin> kodunun hemen üstündeki satıra ekleyebiliriz.

CSS
.post-body table td, .post-body table caption{border:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
img {max-width:100%;height:auto;border:none;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}

Önizleme yazı içerisinde mevcut.

Daha iyi bloglar için...