Blogger, kullanıcıların kolayca blog oluşturup yönetebileceği popüler bir platformdur. Özellikle SSS (Sıkça Sorulan Sorular) bölümleri, ziyaretçilerinizin merak ettikleri sorulara hızlıca ulaşmalarını sağlar. Bu yazıda, Blogger'da yazılarınıza veya sayfalarınıza akordeon stilinde bir SSS bölümü nasıl ekleyebileceğinizi adım adım anlatacağız.
Akordeon SSS Nedir?
Akordeon SSS, kullanıcıların soruları tıkladığında cevapların açılıp kapanabildiği bir yapıdır. Bu, sayfa düzenini korurken kullanıcıların istedikleri bilgiye kolayca ulaşmalarını sağlar.
Adım 1: Blogger Yönetim Paneline Giriş Yapın
1. Blogger paneline girdikten sonra, sol menüden "Sayfalar" veya "Yazılar" bölümüne gidin.
2. Yeni bir sayfa veya yazı oluşturun ya da mevcut bir sayfa/yazıyı düzenleyin.
3. Düzenleme modunda, üst menüden "HTML Görünümü" seçeneğine tıklayın.
Adım 3: Akordeon SSS Kodunu Ekleyin
Aşağıdaki HTML ve CSS kodunu sayfanıza ekleyerek akordeon SSS oluşturabilirsiniz:
Adım 4: Kodun Açıklaması
- CSS kodunu değiştirerek renkleri, yazı tipini veya boyutlarını kendi blog tasarımınıza uygun hale getirebilirsiniz.
Sonuç
Bu adımları takip ederek Blogger'da yazılarınıza veya sayfalarınıza kolayca akordeon stilinde bir SSS bölümü ekleyebilirsiniz. Bu, kullanıcı deneyimini artırır ve ziyaretçilerinizin sorularına hızlıca cevap bulmalarını sağlar.
Akordeon SSS Nedir?
Akordeon SSS, kullanıcıların soruları tıkladığında cevapların açılıp kapanabildiği bir yapıdır. Bu, sayfa düzenini korurken kullanıcıların istedikleri bilgiye kolayca ulaşmalarını sağlar.
Adım 1: Blogger Yönetim Paneline Giriş Yapın
- Blogger sitesine gidin ve Google hesabınızla giriş yapın.
- Akordeon SSS eklemek istediğiniz blogu seçin.
1. Blogger paneline girdikten sonra, sol menüden "Sayfalar" veya "Yazılar" bölümüne gidin.
2. Yeni bir sayfa veya yazı oluşturun ya da mevcut bir sayfa/yazıyı düzenleyin.
3. Düzenleme modunda, üst menüden "HTML Görünümü" seçeneğine tıklayın.
Adım 3: Akordeon SSS Kodunu Ekleyin
Aşağıdaki HTML ve CSS kodunu sayfanıza ekleyerek akordeon SSS oluşturabilirsiniz:
HTML:
<style>
.accordion {
background-color: #f1f1f1;
color: #333;
cursor: pointer;
padding: 15px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 16px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<button class="accordion">Soru 1</button>
<div class="panel">
<p>Cevap 1</p>
</div>
<button class="accordion">Soru 2</button>
<div class="panel">
<p>Cevap 2</p>
</div>
<button class="accordion">Soru 3</button>
<div class="panel">
<p>Cevap 3</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>- CSS Kodu: Akordeon düğmelerinin ve panellerin stilini belirler.
- HTML Kodu: Sorular ve cevaplar için düğmeler ve paneller oluşturur.
- JavaScript Kodu: Kullanıcı bir soruya tıkladığında cevabın açılıp kapanmasını sağlar.
- "Soru 1", "Soru 2" gibi metinleri kendi sorularınızla değiştirin.
- "Cevap 1", "Cevap 2" gibi metinleri de kendi cevaplarınızla güncelleyin.
- Kodları ekledikten ve soruları/cevapları özelleştirdikten sonra, sayfanızı veya yazınızı kaydedin.
- Sayfanızı yayınlayın ve akordeon SSS bölümünün çalıştığını kontrol edin.
- CSS kodunu değiştirerek renkleri, yazı tipini veya boyutlarını kendi blog tasarımınıza uygun hale getirebilirsiniz.
Sonuç
Bu adımları takip ederek Blogger'da yazılarınıza veya sayfalarınıza kolayca akordeon stilinde bir SSS bölümü ekleyebilirsiniz. Bu, kullanıcı deneyimini artırır ve ziyaretçilerinizin sorularına hızlıca cevap bulmalarını sağlar.