WordPress ve web sitelerinde karşılaşmış olduğunuz sıkça sorulan sorular sayfa eklentisi ile blog sitelerinde de sıkça sorulan sorular sayfası oluşturmak için kullanabileceğiniz basit kodlama ile oluşturulmuş ve harika bir tasarımı olan eklentiyi paylaşacağım.
Blog yazılarımın bir çoğunda blogcular için, blog sitelerinde kullanılacak olan eklentilerin blog sitesine ne kadar faydalı, ne kadar zararlı? olduğunu tartışmadan blog sitesine eklememelerini önerdim. Hatta bazı eklentileri harici komut dosyası olmadan CSS3 ile oluşturdum ve paylaştım. Buradaki amacımız, blog sitelerinin performansını etkileyecek her türlü eklentinin faydalarını ve zararlarını hakkında bilgi vererek blog sitelerinin daha düzenli çalışmasını sağlamaktır.
Bu yazımızda paylaşacağım eklenti de herhangi bir harici komut dosyası oluşturmadan ve blog sitesinin performansını etkilemeden çalışacak. Böylece, blog sitelerinde kusursuz bir sıkça sorulan sorular sayfası oluşturabileceksiniz.
Blog sitenizde sıkça sorulan sorular sayfası oluşturmak için aşağıdaki adımları takip edin.
Blogger Sıkça Sorulan Sorular Eklentisi Kurulumu
Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın ve aşağıdaki adımları uygulayın.
Birinci adım: Aşağıdaki CSS kodlarını tema editör sayfanızda bulunan </head> kodunun bir satır üzerine ekleyin.
CSS Kodu
<style type='text/css'>
/*<![CDATA[*/
.gs_list_box_container{border:solid 5px #dad8d7;box-sizing:border-box}
.gs_list_box_container *{box-sizing:border-box}
.gs_card_header{display:block;width:100%;background-color:#f2f2f2;line-height:40px;height:40px;font-size:18px;font-weight:bold;cursor:pointer;border-bottom:solid 1px #ddd;padding:0 20px;position:relative}
.gs_card_body{padding:0;display:none}
.gs_card_body a,.gs_card_body p{background-color:#fff;color:#333;display:block;width:100%;font-size:16px;margin:0;padding:10px 20px;border-bottom: 1px solid #ddd}
.gs_card_body a{font-style:italic;text-decoration:none;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.gs_card_body a:hover{background-color:#eee;color:#f08221;}
.gs_card_arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAIVBMVEVHcEx4WgVVQAMcFQEeFgF3WARYQgNWQAN6YAMuJAFjSgD0PZHsAAAAC3RSTlMANsD7+jq6vSbyH6nxLOIAAABRSURBVCjPzc9BDoAwCETRAYq2vf+BFWOIkelaZ/lfWAB8ub7KY2NdB6QR0SZgcnUidy+SPWSn/RRLUZPnecqrp5QOeIia16fclPYQ3oE58ZMdOgEBCuqhN+oAAAAASUVORK5CYII=) no-repeat center;width:24px;height:24px;position:absolute;display:block;right:20px;top:10px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background-size:16px}
.gs_active .gs_card_arrow{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.gs_active .gs_card_header{color:#f08221}
.gecmis-sorular-menu li a{font-size:14px}
/*]]>*/
</style>İkinci adım: Aşağıdaki javaScript kodunu tema editör sayfanızda bulunan </body> kodunun bir satır üzerine ekleyin.
jQuery Kodu
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$(".gs_active .gs_card_body").slideDown(),$(".gs_card_header").click(function(){var s=$(this).parent().find(".gs_card_body");"block"==s.css("display")?(s.slideUp(),$(this).parent().removeClass("gs_active")):($(".gs_list_box_container .gs_card").removeClass("gs_active"),$(this).parent().addClass("gs_active"),$(".gs_card_body").slideUp(),s.slideDown())})});
//]]>
</script>Yukarıdaki adımları tamamladıktan sonra tema editör sayfanızı kaydedin.
Üçüncü adım: Blogunuzun kumanda panelinde bulunan Sayfalar sekmesine tıklayın. Yeni sayfa oluştur sekmesine tıklayın ve sıkça sorulan sorular başlıklı sayfanızı oluşturmak için, aşağıdaki HTML kodu sayfa editör sayfasının HTML formatına ekleyin.
HTML Kod
<div class="gs_list_box_container">
<div class="gs_card gs_active">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<a href="#" title="Bağlantı başlığı" target="_blank" rel="nofollow noopener">Bağlantı başlığı</a>
</div>
</div>
<div class="gs_card">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<p>İçerik</p>
</div>
</div>
<div class="gs_card">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<p>İçerik</p>
</div>
</div>
<div class="gs_card">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<p>İçerik</p>
</div>
</div>
<div class="gs_card">
<div class="gs_card_header">Başlık<span class="gs_card_arrow"></span></div>
<div class="gs_card_body">
<p>İçerik</p>
</div>
</div>
</div>HTML kod içerisinde başlık ve içerik bölümü yer almaktadır. Soru başlıklarını ve içerik metnini kod içerisinde belirtilen yerlere ekleyin. HTML kod içerisinde bağlantı kodları da paylaşmak için kod içerisine bir bağlantı kodu ekledim. Bağlantı kodunu tercih durumuna göre kullanabilirsiniz, ancak blogunuza ait bağlantıları eklerken bağlantı kodu içerisinde bulunan "rel='nofollow noopener'" kodu kaldırın.
Blogger sıkça sorulan sorular eklentisini farklı menü ve sayfalarınızda da kullanabilirsiniz. Tema editör sayfasına eklemiş olduğunuz CSS ve javaScript kodu sayesinde yukarıdaki HTML kodu istediğiniz gibi tüm blog yayınlarında kullanabilirsiniz.
Bu yazımızda paylaşmış olduğumuz eklenti ve bilgiler hakkında görüş ve sorularınızı yorum formundan bize iletebilirsiniz.