Blog yazılarınızı daha anlaşılır ve profesyonel hale getirmek istiyorsanız, tablolar ve grafikler kullanmanız gerekiyor. Özellikle karşılaştırmalı veriler, istatistikler veya teknik bilgiler sunarken, görsel öğeler okuyucularınızın içeriği daha kolay anlamasını sağlar. Bu yazıda, Blogger platformunda tablo ve grafik eklemenin tüm yöntemlerini adım adım öğreneceksiniz.
Blogger'a Neden Tablo ve Grafik Eklemeliyiz?
Blog yazılarınıza tablo ve grafik eklemek birçok avantaj sağlar:
İçerik Anlaşılırlığı: Karmaşık verileri görselleştirerek okuyucularınızın bilgiyi daha hızlı kavramasını sağlarsınız. Sayfa sayfa yazıyla anlatacağınız bilgiyi tek bir tablo veya grafikle özetleyebilirsiniz.
Profesyonel Görünüm: Tablolar ve grafikler, blogunuza kurumsal ve profesyonel bir hava katar. Özellikle teknik konularda, finans yazılarında veya karşılaştırmalı incelemelerde bu görsel öğeler güvenilirlik algısını artırır.
SEO Avantajı: Zengin içerikler Google tarafından daha değerli bulunur. Tablolar ve grafikler, içeriğinizin kalitesini artırarak arama motorlarında daha üst sıralarda yer almanıza yardımcı olabilir.
Okuyucu Deneyimi: Uzun paragraflar yerine görsel öğelerle desteklenmiş içerikler, okuyucuların sayfada daha uzun süre kalmasını sağlar. Bu da blog metriklerinizi olumlu yönde etkiler.
Yöntem 1: HTML Kodu ile Tablo Oluşturma
Blogger'da tablo eklemek için en temel yöntem HTML kodlarını kullanmaktır. Bu yöntem size tam kontrol sağlar ve istediğiniz gibi özelleştirebilirsiniz.
Adım Adım HTML Tablo Ekleme
Öncelikle Blogger panelinizde yeni bir yazı oluşturun veya mevcut yazınızı düzenleme moduna alın. Editörün sol üst köşesinde bulunan "Kalem" simgesine tıklayarak HTML Görünümü'ne geçin. Burası kodları yazacağınız alan.
Temel bir tablo kodu şu şekildedir:
<table border="1" style="width:100%; border-collapse:collapse;">
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
<th>Başlık 3</th>
</tr>
<tr>
<td>Veri 1</td>
<td>Veri 2</td>
<td>Veri 3</td>
</tr>
<tr>
<td>Veri 4</td>
<td>Veri 5</td>
<td>Veri 6</td>
</tr>
</table>Bu kodu HTML görünümüne yapıştırdıktan sonra "Oluştur" görünümüne dönün ve tablonuzun nasıl göründüğünü kontrol edin. Daha sonra istediğiniz gibi satır ve sütun ekleyebilir, içerikleri değiştirebilirsiniz.
Tablonuzu Görsel Olarak Zenginleştirme
Düz bir tablo yerine renkli ve dikkat çekici tablolar oluşturmak için CSS stilleri ekleyebilirsiniz:
<table style="width:100%; border-collapse:collapse; font-family:Arial;">
<tr style="background-color:#4CAF50; color:white;">
<th style="padding:12px; border:1px solid #ddd;">Ürün</th>
<th style="padding:12px; border:1px solid #ddd;">Fiyat</th>
<th style="padding:12px; border:1px solid #ddd;">Stok</th>
</tr>
<tr style="background-color:#f2f2f2;">
<td style="padding:10px; border:1px solid #ddd;">Laptop</td>
<td style="padding:10px; border:1px solid #ddd;">15.000 TL</td>
<td style="padding:10px; border:1px solid #ddd;">Var</td>
</tr>
<tr>
<td style="padding:10px; border:1px solid #ddd;">Telefon</td>
<td style="padding:10px; border:1px solid #ddd;">8.500 TL</td>
<td style="padding:10px; border:1px solid #ddd;">Yok</td>
</tr>
</table>Bu kod, başlık satırını yeşil renkle vurgular, satırlar arasına gri ton ekler ve genel olarak daha okunabilir bir tablo oluşturur.
Yöntem 2: Online Tablo Oluşturucular Kullanma
HTML kodlarıyla uğraşmak istemiyorsanız, çevrimiçi araçlar işinizi kolaylaştırır. Bu araçlar görsel arayüzlerle tablo oluşturmanızı ve hazır HTML kodunu kopyalamanızı sağlar.
Popüler Online Araçlar
Tables Generator (tablesgenerator.com): Bu araç, Excel benzeri bir arayüzle tablonuzu oluşturmanıza olanak tanır. Satır ve sütun ekleyebilir, hücreleri birleştirebilir, renklendirme yapabilirsiniz. İşiniz bittiğinde "Generate" butonuna basıp HTML kodunu kopyalamanız yeterli.
HTML Table Generator: Basit ve kullanıcı dostu bir araçtır. Sadece kaç satır ve sütun istediğinizi belirleyip içerikleri doldurursunuz. Araç otomatik olarak temiz HTML kodu üretir.
Quackit HTML Tables: Daha gelişmiş özellikler arıyorsanız bu araç tam size göre. Hücre genişlikleri, hizalama seçenekleri, kenarlık stilleri gibi detaylı ayarlamalar yapabilirsiniz.
Bu araçlardan birinde tablonuzu oluşturduktan sonra, üretilen HTML kodunu kopyalayın ve Blogger'ın HTML görünümüne yapıştırın. Bu yöntem hem hızlıdır hem de kod bilgisi gerektirmez.
Yöntem 3: Google Sheets Entegrasyonu
Google ekosistemini kullanıyorsanız, Google Sheets ile Blogger arasında mükemmel bir entegrasyon kurabilirsiniz. Bu yöntem özellikle büyük veri setleri veya sık güncellenen tablolar için idealdir.
Google Sheets'ten Tablo Gömme
Google Sheets'te tablonuzu oluşturun ve istediğiniz gibi biçimlendirin. Renkler, kenarlıklar, formüller ekleyebilirsiniz. Daha sonra "Dosya" menüsünden "Web'de yayınla" seçeneğine tıklayın.
Açılan pencerede "Göm" sekmesini seçin ve yayınlanacak sayfayı belirleyin. "Yayınla" butonuna tıkladıktan sonra size bir iframe kodu verilecek. Bu kodu kopyalayın ve Blogger'ın HTML görünümüne yapıştırın.
<iframe src="https://docs.google.com/spreadsheets/d/e/[SIZIN_SHEET_ID]/pubhtml?widget=true&headers=false" width="100%" height="400"></iframe>Bu yöntemin büyük avantajı, Google Sheets'teki verileri güncellediğinizde blog yazınızdaki tablonun da otomatik olarak güncellenmesidir. Her seferinde blog yazınızı düzenlemenize gerek kalmaz.
Blogger'a Grafik Ekleme Yöntemleri
Grafikler, verileri görselleştirmenin en etkili yollarından biridir. Pasta grafikleri, çubuk grafikler, çizgi grafikler gibi farklı türlerde grafikler oluşturabilirsiniz.
Google Charts ile İnteraktif Grafikler
Google Charts, ücretsiz ve güçlü bir grafik kütüphanesidir. JavaScript tabanlı bu araç, blogunuza profesyonel ve interaktif grafikler eklemenizi sağlar.
Öncelikle HTML görünümünde şu kodu ekleyin:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Ay', 'Ziyaretçi Sayısı'],
['Ocak', 1000],
['Şubat', 1500],
['Mart', 2200],
['Nisan', 1800],
['Mayıs', 2500]
]);
var options = {
title: 'Aylık Blog Ziyaretçi Sayıları',
curveType: 'function',
legend: { position: 'bottom' },
colors: ['#4CAF50']
};
var chart = new google.visualization.LineChart(document.getElementById('grafik_alani'));
chart.draw(data, options);
}
</script>
<div id="grafik_alani" style="width: 100%; height: 400px;"></div>Bu kod, aylık ziyaretçi sayılarını gösteren bir çizgi grafik oluşturur. Verileri ve başlığı kendi ihtiyaçlarınıza göre değiştirebilirsiniz.
Chart.js ile Modern Grafikler
Chart.js, daha modern ve estetik grafikler oluşturmak için popüler bir alternatiftir. Responsive tasarımı sayesinde mobil cihazlarda da mükemmel görünür.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma'],
datasets: [{
label: 'Günlük Satış',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(255, 206, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(153, 102, 255, 0.7)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 2
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>Görsel Olarak Hazır Grafik Ekleme
Kod yazmak istemiyorsanız, grafiklerinizi başka bir araçta oluşturup görsel olarak da ekleyebilirsiniz.
Canva: Canva'da ücretsiz hesap açarak binlerce grafik şablonuna erişebilirsiniz. İstediğiniz tasarımı seçip verilerinizi girin, PNG veya JPG formatında indirin.
Google Sheets: Google Sheets'te grafik oluşturup "Resim olarak indir" seçeneğiyle bilgisayarınıza kaydedebilirsiniz. Daha sonra bu görseli Blogger'a normal fotoğraf ekler gibi yükleyebilirsiniz.
Excel veya LibreOffice: Masaüstü programlarda oluşturduğunuz grafikleri ekran görüntüsü alarak veya "Resim olarak kaydet" özelliğiyle dışa aktarabilirsiniz.
Bu yöntem basit olsa da, grafikteki verileri güncellemek istediğinizde tüm süreci tekrar yapmanız gerekir.
Mobil Uyumlu Tablo ve Grafik Tasarımı
Blogunuzu okuyanların büyük çoğunluğu muhtemelen mobil cihaz kullanıyor. Bu nedenle tablolarınızın ve grafiklerinizin mobilde düzgün görünmesi kritik öneme sahip.
Responsive Tablo İpuçları
Tablonuzun genişliğini yüzde olarak belirleyin: width:100% kullanarak tablonun ekran genişliğine göre otomatik olarak uyum sağlamasını sağlayın.
Çok fazla sütun kullanmaktan kaçının. Mobilde 3-4 sütundan fazla yan yana gösterilmesi zor olabilir. Geniş tablolar için yatay kaydırma ekleyebilirsiniz:
<div style="overflow-x:auto;">
<table>
<!-- Tablo içeriği -->
</table>
</div>Font boyutlarını dikkatli seçin. Çok küçük yazılar mobilde okunmaz, çok büyük yazılar ise tablonun taşmasına neden olabilir. 14-16px arası ideal bir aralıktır.
Grafiklerde Responsive Tasarım
Google Charts ve Chart.js gibi modern kütüphaneler varsayılan olarak responsive gelir. Ancak yine de responsive: true özelliğinin aktif olduğundan emin olun.
Grafik yüksekliğini sabit piksel değeri yerine ekran yüksdeliğine göre ayarlayabilirsiniz: height: 50vh gibi bir değer, grafiğin ekranın yarısı kadar yükseklikte olmasını sağlar.
Tablo ve Grafiklerde Yaygın Hatalar ve Çözümleri
Hata: Tablom çok geniş ve sayfadan taşıyor
Çözüm: width:100% özelliğini ekleyin ve overflow-x:auto ile kaydırma özelliği kazandırın.
Hata: HTML kodları görünüyor, tablo görünmüyor
Çözüm: Muhtemelen "Oluştur" görünümünde kod yapıştırmışsınızdır. Mutlaka HTML görünümüne geçip kodu oraya yapıştırın.
Hata: Google Charts grafiğim yüklenmiyor
Çözüm: Script etiketinin sayfa başında doğru yüklendiğinden emin olun. Ayrıca div ID'lerinin eşleştiğini kontrol edin.
Hata: Tablom çok sıkışık görünüyor
Çözüm: padding değerlerini artırın. Her hücreye padding:10px eklemek okunabilirliği önemli ölçüde artırır.
Hata: Renkler ve stiller kayboluyor
Çözüm: Blogger'ın bazı temaları inline CSS'i daha iyi destekler. Stil özelliklerini style="" etiketleri içinde her öğeye ayrı ayrı yazmayı deneyin.
SEO İçin Tablo ve Grafik Optimizasyonu
Görsel içeriklerinizin arama motorları tarafından da anlaşılması önemlidir.
Alt Etiketleri Kullanın: Görsellere ve iframe'lere alt ve title etiketleri ekleyin. Bu, Google'ın içeriğinizi daha iyi anlamasını sağlar.
Açıklayıcı Başlıklar: Tablo ve grafiklerinizin üstüne veya altına kısa açıklayıcı metinler ekleyin. Örneğin: "2024 yılı aylık blog istatistikleri aşağıdaki tabloda gösterilmiştir."
Schema Markup: İleri seviye kullanıcılar, tablo verilerini yapılandırılmış veri formatında sunmak için schema.org markup'ları kullanabilir. Bu, zengin sonuçlarda görünme şansınızı artırır.
Sayfa Hızı: Çok fazla ağır grafik eklemek sayfa yükleme süresini uzatabilir. Grafik kütüphanelerini CDN'den yükleyin ve görselleri optimize edin.
Sonuç ve Öneriler
Blogger'da tablo ve grafik eklemek, blogunuzu profesyonelleştirmenin ve okuyucu deneyimini iyileştirmenin harika bir yoludur. HTML ile manuel ekleme, online araçlar veya Google entegrasyonu gibi farklı yöntemler arasından size en uygun olanı seçebilirsiniz.
Başlangıçta karmaşık görünse de, birkaç deneme sonrasında bu işlemleri kolayca yapabilir hale geleceksiniz. Önemli olan, tablolarınızın ve grafiklerinizin mobil uyumlu olmasına ve sayfa hızını olumsuz etkilememesine dikkat etmenizdir.
Teknik yazılar, karşılaştırmalı incelemeler, istatistiksel analizler veya eğitim içerikleri hazırlıyorsanız, tablo ve grafikler vazgeçilmez araçlarınız olacaktır. Okuyucularınız, karmaşık bilgileri görsel olarak sunduğunuzda içeriğinizi daha değerli bulacak ve blogunuza daha sık geri dönecektir.
Şimdi sıra sizde: blogunuzdaki bir yazıyı seçin ve öğrendiğiniz yöntemlerle bir tablo veya grafik ekleyin. Sonuçların okuyucu etkileşiminizi nasıl artırdığını kendiniz göreceksiniz!
0 Yorumlar