Blogger’da Yazılara/Sayfalara Akordeon SSS Nasıl Eklenir?

Son güncelleme: 06/02/2023

Blogger’da yazılara SSS akordeonu eklemek istiyorsanız, aşağıdaki işlemleri uygulayarak bunu kolaylıkla yapabilirsiniz. Blogger’da akordeon widget oluşturmak kodlama bilgisi gerektirse de burada gerekli olan kodları sağlayacağız ve bu kodları nereye nasıl ekleyeceğinizi de göstereceğiz. İşlem gayet kolay!

Akordeon, herhangi bir öğeyi tıklayarak genişletip daraltabileceğiniz-açıp kapatabileceğiniz otomatik bir işlevdir. Akordeon bölümleri, öğreticiler, kılavuzlar ve SSS’ler dahil olmak üzere neredeyse her tür uzun biçimli içerik için kullanışlıdır.

Blogger’da akordiyon bölümleri oluşturmak nispeten kolay bir işlemdir. Aşağıdaki seçenekleri olduğu gibi kullanabilir veya bunu kendi bloğunuzun tasarımına uygun olarak özelleştirebilirsiniz.

Blogger’a Akordeon Nasıl Eklenir? SSS Akordiyon Oluşturma ve Blogger Gönderilerine Ekleme

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 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üne 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.

İç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.

Umuyoruz bu kılavuz, Blogger bloğunuz için akordeon stilli SSS bölümleri oluşturmanıza ve bloğunuza eklemenize yardımcı olmuştur. Herhangi bir sorunuz varsa aşağıda yorum bırakabilirsiniz. Ayrıca diğer Blogger kılavuzlarımıza da göz atabilirsiniz.

Son güncelleme: 06/02/2023

Takip Et

2 Yorum

Bloggerci dedi ki:
10/03/2023, 20:16
Hocam acaba wp gibi googleda algilanirmi sss olarak. Yoksa sadece görüntümu
Yanıtla
1. Editör dedi ki:
  10/03/2023, 23:39
  Merhaba, arama motorları muhtemelen buradaki kodları direkt SSS schema olarak algılamayacaktır (yine de deneyip Search Console’dan kontrol edebilirsiniz). Sonuç alamazsanız, şu kılavuzumuzdaki adımları uygulamak beklentinizi karşılayacaktır: https://wpekran.com/sss-semasi-faq-schema-nedir-nasil-yapilir/
  İyi çalışmalar dileriz 🙂
  Yanıtla