Blogunuzun tasarımını daha düzenli, şık ve okunaklı hale getirmek ister misiniz? Yazı alanınızı (Main Post) ve yan paneli (Sidebar) birbirinden ayırmak, içeriğinize odaklanmayı kolaylaştırmanın en etkili yollarından biridir.
Bu rehberde, Blogger sitenizin hem yazılarına hem de kenar çubuğuna CSS kullanarak nasıl estetik kenarlıklar ekleyebileceğinizi adım adım ve tamamen özgün bir yöntemle anlatıyoruz.
Adım Adım Kenarlık (Border) Ekleme Tasarımı
Blogger şablonunuza kod eklemeden önce, sitenizin mevcut CSS sınıflarını (class) bilmeniz gerekir. Genellikle Blogger şablonlarında yazı alanı .main-inner, .post-outer veya #main olarak; kenar çubuğu ise .sidebar-container, #sidebar veya .sidebar olarak adlandırılır.
İşte bu alanları modern bir çerçeve içine almanın en temiz yolu:
Adım 1: Blogger Panelini Açın
Blogger kumanda panelinize giriş yapın. Sol menüde yer alan Tema sekmesine tıklayın ve ardından Özelleştir butonunun yanındaki aşağı ok simgesine basarak HTML'i Düzenle seçeneğini seçin.
Adım 2: CSS Kod Alanını Bulun
Kod editörünün içinde herhangi bir yere tıklayın ve CTRL + F kombinasyonunu kullanarak </b:skin> kodunu aratın. Ekleyeceğimiz özel kodları bu satırın hemen üstüne yapıştıracağız.
Adım 3: Kenarlık Kodlarını Ekleyin
Aşağıdaki hazır CSS kod bloğunu kopyalayın ve </b:skin> etiketinin hemen üstüne ekleyin:
/* Yazı Alanı Kenarlık Tasarımı */
.post-outer, .main-inner {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* Kenar Çubuğu (Sidebar) Kenarlık Tasarımı */
.sidebar .widget, .sidebar-container .widget {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 25px;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
Adım 4: Özelleştirme ve Kaydetme
border:
1pxkalınlığı,soliddüz çizgiyi,#e0e0e0ise rengi temsil eder. Kendi temanıza göre rengi değiştirebilirsiniz.border-radius: Kenarlıkların köşelerini yumuşatır (ovalleştirir). Modern bir görünüm için
8pxidealdir.padding: İçerik ile kenarlık arasındaki boşluktur. Yazıların çizgiye yapışmasını engeller.
Kodları ekledikten sonra sağ üst köşede bulunan Kaydet (Disk) simgesine tıklayarak şablonunuzu güncelleyin. Sitenizi yenilediğinizde yazılarınızın ve bileşenlerinizin şık bir çerçeveye kavuştuğunu göreceksiniz.
Blogger kenarlık ekleme, Blogger sidebar tasarımı, Blog CSS border
İlgili Olabilecek Diğer Başlıklar
Blogger Temalarında CSS ile Box-Shadow (Gölge) Efektleri Nasıl Yapılır?
Web Tasarımında Bento Grid Düzeni ve Blog Sitelerine Uygulanışı
Blogger Bileşen Alanlarını (Widget) Birbirinden Ayırma Yöntemleri
Minimalist Blog Tasarımı İçin CSS Kenarlık ve Boşluk Ayarları
Blogger Şablonlarında Göze Hoş Gelen Yuvarlatılmış Köşe (Border-Radius) Kullanımı
Konuyla İlgili Anahtar Kelimeler
blogger css kodları, border-radius kullanımı, blog tasarımı özelleştirme, kenar çubuğu çerçeve yapma, html blog düzenleme, minimalist web tasarımı, web sitesi kenarlık ekleme, css border styles, blogger widget süsleme, blog yazı alanı estetiği,