Blogger Açılır Kapanır Yazı Oluşturma

Blogger blogunuzda oluşturduğunuz sayfalar içerisinde bazen açılır kapanır yazılar yapmanız gerekebilir. Örneğin eğitimle ilgili bir siteniz var. Sitede soru ve cevapların olması gerekiyor. Sorunun altında cevaplar olduğunda pek de güzel olmaz. Cevapların linke tıklandığında açılıp kapanması sağlansa görsel açıdan daha iyi olur.

Bunun için aşağıdaki kodu HTML görünümünde yapıştırarak gerekli düzenlemeleri yapmak.
1. Yöntem

<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Yazıyı göstermek ve gizlemek eklentisi" type="button">CEVAP</button> <div id="spoiler" style="display: none;"> Doğru Cevap B Yazıcıdır. </div>

Yukarıdaki kodun çıktısı aşağıdaki şekilde olacaktır.
Eğer birden fazla soru olacaksa spoiler yazan kısmı değiştirmeniz gerekir. Yoksa kodlarda karmaşa çıkacaktır.

Printer kelimesinin Türkçe karşılığı nedir?
A) Tarayıcı
B) Yazıcı
C) İşlemci
D) Anakart

Doğru Cevap B Yazıcıdır.

2. Yöntem

Aşağıdaki kodu yine HTML kodu olarak ekleyiniz.

<div style="margin: 5px;"><br /> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Printer kelimesinin Türkçe karşılığı nedir?</span></i><input value="Doğru Cevap" style="margin: 0px; padding: 0px; width: 180px; font-size: 14px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide Answer / Explanation'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Doğru Cevap'; }" type="button"/><br /> </div><br /> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><br /> <div style="background-color: #ebebff; display: none;"> Printer kelimesinin Türkçesi Yazıcıdır. </div></div></div>

Kodların çıktısı aşağıdaki gibidir.

Printer kelimesinin Türkçe karşılığı nedir?

Printer kelimesinin Türkçesi Yazıcıdır.

Ben birinci yöntemi tavsiye ederim. Tabii ki kullanım size kalmış.