Blogger Tablo / Table Nasıl Oluşturulur?

6/16/2016

Blogger Tablo / Table Nasıl Oluşturulur? - Blogger web sitenizde yazılarınızın altında veya üstünde yazınızla ilgili sayısal veriler yada grup isimler paylaşmak için blog sayfasında tablo / table oluşturmanız gerekmektedir. Peki blog üzerinde tablo / table nasıl oluşturulur ipuçlarını paylaşıyoruz.

Blogger Tablo / Table Nasıl Oluşturulur?


1. Blogger hesabınıza giriş yapın ve blogunuzu seçin. Blogunuzun kumanda panelinden (arayüz) Şablon > HTML'i Düzenle yolunu takip ederek CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

.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;}

2. Aşağıdaki HTML kodları oluşturmuş olduğunuz blog yayının altına yada üstüne ekleyerek kod içerisinde renkli alanları kendinize göre düzenleyerek tablolu yayınınızı oluşturabilirsiniz.

<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>


Blog sitesinde tablo oluşturma ile ilgili CSS ve HTML kodları hakkında bilgiler paylaştık, CSS kodları içerisinde değişiklikler yaparak blogunuza daha uygun tablo oluşturabilirsiniz.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

2 yorum

Tablo için teşekkürler hocam

Cevap

For all you visual learners who want to add features to your blog, but don't have the patience to browse our help articles, we've created the new Blogger Help YouTube Channel. There you can find videos that show you step by step how to use Blogger features.
There are only a few videos at the moment, and we've decided to start with the basics:

How to Create a Blog with Blogger
Purchasing and Setting Up a Custom Domain through Blogger
Adjusting Your Blogger Privacy Settings
In the coming months we'll be adding more videos. If you have a suggestion for a video you'd like to see, let us know by posting in our Help Group. In addition, you can give us feedback on each video's comment form. We're always trying to find new and better ways to help you use Blogger and we appreciate the feedback - thanks!

Cevap