Blogger’da yazılarınıza SSS (Sıkça Sorulan Sorular) akordeonu eklemek istiyorsanız, aslında iş sandığınızdan çok daha kolay. Normalde akordeon gibi açılır-kapanır bölümler eklemek biraz kod bilgisi gerektirir, ama merak etmeyin; gerekli kodları burada sizinle paylaşacağız ve adım adım nereye eklemeniz gerektiğini göstereceğiz. Böylece yazılarınızı hem daha düzenli hem de okuyucular için çok daha kullanıcı dostu hale getirebilirsiniz.
Akordeon SSS Nedir? Neden Önemlidir?
Akordeon, bir başlığa tıkladığınızda içeriği açıp kapatmanıza yarayan pratik bir özelliktir. Yani istediğiniz bölümü genişletip daraltabilir, sayfanın daha düzenli görünmesini sağlayabilirsiniz. Özellikle uzun yazılarda, öğretici içeriklerde, adım adım kılavuzlarda ya da SSS (Sıkça Sorulan Sorular) alanlarında inanılmaz iş görür.
SEO tarafında da akordeonun önemi büyüktür. Çünkü ziyaretçiler aradıkları bilgiyi kolayca bulur, sayfada daha fazla vakit geçirir ve bu da hemen çıkma oranınızı (bounce rate) düşürür. Ayrıca akordeon bölümleri doğru şekilde yapılandırıldığında – mesela FAQ Schema kullanarak – Google’da zengin sonuç (rich snippet) olarak öne çıkabilir. Blogger’da yazılara akordeon SSS eklemek düşündüğünüzden daha kolaydır. İsterseniz hazır kodlarla doğrudan kullanabilir, isterseniz blogunuzun tasarımına göre ufak tefek değişikliklerle özelleştirebilirsiniz.
Blogger Yazılarına SSS Akordiyon Nasıl Eklenir?
Blogger’da yazılarınıza SSS akordeon widgetları eklemek ya da akordeon SSS sayfaları oluşturmak için;
- Öncelikle Blogger hesabınıza giriş yapın ve ‘Tema‘ bölümüne gidin.
- Özelleştirme seçeneğinin altındaki ‘HTML’yi düzenle‘ye tıklayın.
- HTML kod sayfasının içinde herhangi bir boş yere tıklayın. Şimdi klavyenizde ctrl+F tuşlarına basın, böylece arama kutusu açılacak.
- Arama kutusuna </head> yazın ve enter tuşuna basın. Html’deki <head> etiketi sarı renkte gösterilecek ve vurgulanacaktır.
- Aşağıdaki CSS kodunu </head> etiketinin hemen altına yapıştırın ve temayı kaydedin.
<style>
summary { font-size: 1.25rem; font-weight: 600;
background-color: #fefefe; color: #333;
isolation: isolate; padding: 1rem;
margin-bottom: 1rem;
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
border-radius: 0.25rem;
text-align: left; cursor: pointer;
position: relative; } details >
summary::after { position: absolute;
content: "+"; right: 20px; }
details[open] > summary::after { position: absolute;
content: "-"; right: 20px; } details >
summary::-webkit-details-marker { display: none; }
details[open] summary ~ * { animation: sweep .5s ease-in-out;
animation: sweep .5s ease-in-out;
box-shadow: -8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6, 4px 4px 4px 0px
#d1d9e6 inset, -4px -4px 4px 0px#ffffff inset;
isolation: isolate;
margin-bottom: 1rem;
background-color: #fefefe;
padding: 1rem; }
@keyframes sweep { 0% {opacity: 0; margin-top: -10px}
100% {opacity: 1; margin-top: 0px} }
</style>
- Şimdi bu widget’ı eklemek istediğiniz gönderiye/sayfaya gidin.
- Sol üstteki kalem simgesine dokunun ve “HTML Görünümü“ne geçin.
- Şimdi aşağıdaki html kodunu SSS akordeonun görünmesini istediğiniz yere yapıştırın.
<details>
<summary>SSS 1 : Sorunuzu buraya girin...</summary>
<div class="$(function(AT-FAQ)">
<p>Cevabınızı veya gerekli bilgiyi buraya girin....</p>
</div>
</details>
<details>
<summary>SSS 2 : Sorunuzu buraya girin...</summary>
<div class="$(function(AT-FAQ)">
<p>Cevabınızı veya gerekli bilgiyi buraya girin....</p>
</div>
</details>
<details>
<summary>SSS 3 : Sorunuzu buraya girin....</summary>
<div class="$(function(AT-FAQ)">
<p>Cevabınızı veya gerekli bilgiyi buraya girin...</p>
</div>
</details>
Kodu ekledikten sonra sayfayı kaydedin/yayınlayın. Bunun sonunda içerikteki Blogger akordeon görünümü şu şekilde olacak:
Hem CSS kodu hem de HTML kodu üzerinde düzenlemeler yaparak akordeonu özelleştirebilirsiniz. Ayrıca soru-cevap bölümlerini de konunuza uygun biçimde düzenlemeyi unutmayın. Dilerseniz aynı mantıkla ilerleyip daha fazla soru-cevap bölümü de ekleyebilirsiniz.
Yukarıdaki kodlar genellikle Blogger tüm temalarında sağlıklı çalışır fakat sizde işe yaramazsa aşağıdaki işlemi de deneyebilirsiniz.
⚡ Blogger’da SSS Akordiyonu oluşturmak için ikinci seçenek:
- Öncelikle Blogger kontrol paneline gidin.
- Tema bölümüne ve ardından Özelleştir >> HTML’yi Düzenle‘ye gidin.
- ctrl+f kombinasyonunu kullanarak </head> etiketini arayın.
- Aşağıdaki kodu </head> etiketinin hemen üzerine ekleyin (bu kod ya da buna benzer bir kod zaten mevcutsa tekrar eklemenize gerek yok).
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
- Şimdi aynı şekilde ]]></b:skin> etiketini arayın ve aşağıdaki CSS kodunu ]]></b:skin> etiketinin hemen üst kısmına yapıştırın.
.containerwidth {
width: 100%;
}
.wrapper {
background-color: #ffffff;
padding: 10px 20px;
margin-bottom: 20px;
border-radius: 5px;
-webkit-box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
box-shadow: 0 15px 25px rgba(0, 0, 50, 0.2);
}
.toggle,
.content {
font-family: "Poppins", sans-serif;
}
.toggle {
width: 100%;
background-color: transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 16px;
color: #111130;
font-weight: 600;
border: none;
outline: none;
cursor: pointer;
padding: 10px 0;
}
.content {
position: relative;
font-size: 14px;
text-align: justify;
line-height: 30px;
height: 0;
overflow: hidden;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
- Şimdi </body> etiketini arayın ve aşağıdaki JAVASCRIPT kodunu </body> etiketinin üst kısmına yapıştırın.
<script>
//<![CDATA[
let toggles = document.getElementsByClassName("toggle");
let contentDiv = document.getElementsByClassName("content");
let icons = document.getElementsByClassName("icon");
for (let i = 0; i < toggles.length; i++) {
toggles[i].addEventListener("click", () => {
if (parseInt(contentDiv[i].style.height) != contentDiv[i].scrollHeight) {
contentDiv[i].style.height = contentDiv[i].scrollHeight + "px";
toggles[i].style.color = "#0084e9";
icons[i].classList.remove("fa-plus");
icons[i].classList.add("fa-minus");
} else {
contentDiv[i].style.height = "0px";
toggles[i].style.color = "#111130";
icons[i].classList.remove("fa-minus");
icons[i].classList.add("fa-plus");
}
for (let j = 0; j < contentDiv.length; j++) {
if (j !== i) {
contentDiv[j].style.height = 0;
toggles[j].style.color = "#111130";
icons[j].classList.remove("fa-minus");
icons[j].classList.add("fa-plus");
}
}
});
}
//]]>
</script>
- Şimdi akordeon göstermek istediğiniz içeriğe/sayfaya gidin ve Html Görünümüne geçip şu kodu yapıştırın:
<div class="boxaccordion">
<div class="containerwidth">
<div class="wrapper">
<button class="toggle">Sorunuzu buraya girin...<i class="fas fa-plus icon"></i></button>
<div class="content">
<p>Cevabınızı buraya girin...</p>
</div>
</div>
<div class="wrapper">
<button class="toggle">Sorunuzu buraya girin...<i class="fas fa-plus icon"></i></button>
<div class="content">
<p>Cevabınızı buraya girin...</p>
</div>
</div>
<div class="wrapper">
<button class="toggle">Sorunuzu buraya girin...<i class="fas fa-plus icon"></i></button>
<div class="content">
<p> Cevabınızı buraya girin...</p>
</div>
</div>
</div>
</div>
Önceki yöntemde olduğu gibi, bu yöntemde de html ve css kodlarını düzenleyerek akordeonu özelleştirebilir ve Blogger akordeon ekleme, Blogger SSS akordeon stili ekleme işlemini tamamlayabilirsiniz. Blogger’da İçeriklere akordeon SSS kutuları eklemek için her defasında işlemin tamamını tekrarlamanıza gerek yok, sadece içeriğe eklenecek html kodunu kullanmanız yeterli olacaktır.
Hazır Widget/Eklenti Kullanmak
Kod yazarak vakit kaybetmek istemiyorsanız, hazır hizmetlerden faydalanabilirsiniz:
– Elfsight Accordion FAQ Widget
- Kendi paneliyle görsel olarak akordeon oluşturur, renk, kategori gibi ayarları kolayca yapmanızı sağlar.
- Ücretsiz plana sahip, aynı zamanda SEO uyumlu microdata (schema markup) içerir.
- Kullanımı:
- Elfsight sitesinde widget’ınızı oluşturun ve düzenleyin.
- Oluşturulan embed kodunu Blogger’da içeriğinize ekleyin.
– Common Ninja Accordion Widget
- Customizable, sürükle-bırak arayüzü var (dashboard üzerinden).
- Oluşturduğunuz widget’ın embed kodunu Blogger’a ekleyebilirsiniz.
- Mobil uyumlu, stil seçenekleri geniş.
Tek bir yazıya birkaç akordeon eklemek istiyorsanız, manuel kod yöntemi size esneklik sağlar. Buna ek olarak, oturmuş bir görünüm ve SEO optimizasyonu isterseniz, Elfsight veya Common Ninja gibi widget çözümleri zaman kazandırır ve profesyonel bir görünüm sunar.
