Blogger da Tablo Nasıl Eklenir-Hareketli Tablo Yapımı
Makalelerinizin altında veya üstünde yukarıdakine benzer bir tablo gözükmesini istiyorsanız tam yerindesiniz demektir. Tablonun içeriğini istediğiniz gibi düzenleyebilir boyut ve kutu sayısını ihtiyacınıza göre düzenleyebilirsiniz. Tablo başlığına gelincede ufak bir renk değişikliği sizleri bekliyor bu tablo sizinde hoşunuza gittiyse hemen eklemeye başlayalım.
Bildiğiniz gibi böyle eklentileri kullanmak için öncelikle sitemize tanıtmamız gerekiyor. Bunu yapmak içinde aşağıdaki kodlara ihtiyacınız olacak. Yönetici panelinden Şablon > HTML'yi Düzenle dedikten sonra CTRL+F tuşlarını kullanarak ]]></b:skin> ya da </style> kodlarından birini bulun. Bulduğunuz kodun bir satır üstüne aşağıda verdiğim kodları yapıştırın.
.post-body table {width:100%;}
.post-body table td,.post-body table caption{background:#f8f8f8;border:1px solid rgba(0,0,0,0.05);padding:10px;text-align:left;vertical-align:top}
.post-body table th{background:#f98329;color:#fff;border:1px solid rgba(0,0,0,0.05);border-bottom:0;padding:10px;text-align:left;vertical-align:top}
.post-body table.tr-caption-container {border:1px solid rgba(0,0,0,0.14);margin:0;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #ddd;}
.post-body th{}
.post-body th:hover{color:#fff;}
.post-body td a{color:#444;}
.post-body td a:hover{color:#f98329;}
.post-body table.tr-caption-container td{border:0;padding:8px;background:#f8f8f8;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body li {list-style-type:square;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px!important;}
Şablonu Kaydet diyerek kapatıyoruz artık sitenize tablonuzu tanıttınız. Tabloyu makalelerinizde kullanmak için aşağıdaki kodu yazıyı yazarken üst tarafta bulunan HTML kısmına geçip yapıştırın.
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<th>Tablo Üstbilgi 1</th>
<th>Tablo Üstbilgi 2</th>
<th>Tablo Üstbilgi 3</th>
</tr>
<tr>
<td>Bölünme 1</td>
<td>Bölünme 2</td>
<td>Bölünme 3</td>
</tr>
<tr>
<td>Bölünme 1</td>
<td>Bölünme 2</td>
<td>Bölünme 3</td>
</tr>
<tr>
<td>Bölünme 1</td>
<td>Bölünme 2</td>
<td>Bölünme 3</td>
</tr>
</tbody>
</table>
Tablonuzu makalenize başarılı bir şekilde eklediniz. Tablonuz makalelerinizde aşağıdaki gibi görünecektir.
| Tablo Üstbilgi 1 | Tablo Üstbilgi 2 | Tablo Üstbilgi 3 |
|---|---|---|
| Bölünme 1 | Bölünme 2 | Bölünme 3 |
| Bölünme 1 | Bölünme 2 | Bölünme 3 |
| Bölünme 1 | Bölünme 2 | Bölünme 3 |
Hiç yorum yok: