Göster / Gizle - Aç / Kapat Alanı Kodu

Show / Hide - Göster / Gizle - Aç / Kapat - Daralt / Genişlet Alanı Kodu

Sitelerde veya bloglarda içeriği daha iyi aktarmak ve gerekli olduğunda açılabilecek bir bölüm oluşturmak sayfa içi düzeninde oldukça faydalı oluyor. Özellikle uygulama paylaşan bloglar için oldukça faydalı bir HTML - CSS kod düzenledim.
Show / Hide - Göster / Gizle - Aç / Kapat - On / Off alanı oluşturan kodlar :



Temel Kod :

<script type="text/javascript">
  function showBlock(blockId)
  {
    document.getElementById(blockId).style.display = "block";
  }
  function hideBlock(blockId)
  {
    document.getElementById(blockId).style.display = "none";
  }
</script>
<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a>
<div style="display: none;" id="block1"> OLAY  <a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>

Açılan bölümün Arka Plan rengi ile oluşturulması: 

<script type="text/javascript">
  function showBlock(blockId)
  {
    document.getElementById(blockId).style.display = "block";
  }
  function hideBlock(blockId)
  {
    document.getElementById(blockId).style.display = "none";
  }
</script>
<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a>
<div style="display: none;" id="block1"> <span style="background-color: #f5f5f5;"> OLAY  </span>
  <a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>

Resim veya video Göster / Gizle :

<script type="text/javascript">
  function showBlock(blockId)
  {
    document.getElementById(blockId).style.display = "block";
  }
  function hideBlock(blockId)
  {
    document.getElementById(blockId).style.display = "none";
  }
</script>
<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a>
<div style="display: none;" id="block1"> <img src="Ressim URL" > <br /> <img src="Ressim URL" >
  <a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>

Kod Göster / Gizle :

<script type="text/javascript">
  function showBlock(blockId)
  {
    document.getElementById(blockId).style.display = "block";
  }
  function hideBlock(blockId)
  {
    document.getElementById(blockId).style.display = "none";
  }
</script>
<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Kodları Göster</a>
<div style="display: none;" id="block1">
<textarea style="background-color:#transparent; width: 630px; height: 135px;" >GİZLENECEK RESİM, METİN, YAZI VEYA KOD </textarea>
  <a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Kodları Gizle</a></div>

Butonlu Temel Kod :

<script type="text/javascript">
  function showBlock(blockId)
  {
    document.getElementById(blockId).style.display = "block";
  }
  function hideBlock(blockId)
  {
    document.getElementById(blockId).style.display = "none";
  }
</script>
<a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')"><button> BUTON GÖSTER </button></a>
<div style="display: none;" id="block1"> OLAY  <a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br /><button> BUTON GİZLE </button></a></div>

Not : Kod tamamen sitenin kendi içerisinde çalıştığı için sayfa hızını etkilemez, örneğin bir sayfada yüzlerce yüksek çözünürlükte resim yayınlayacaksınız, bu kodun içerisine atarsanız sayfa hemen yüklenir ve ziyaretçi sadece resimlerin yüklenmesini bekler.
Ekleyeceğiniz resim, video, link, yazı gibi elementleri html olarak eklerseniz rengini , boyunu , fontunu gibi özellikleri değiştirmek için html tagları kullanmalısınız.



OLAY : İçerisine eklediğiniz her şeye (HTML/ Java) duyarlıdır. Örneğin yazdığınız yazıyı alt satıra geçirmek için  <br /> etiketi kullanılmalıdır. (br/ değil).
Bu kodu yazmamdaki temel işlev örneğin bir java yada html kodu yayınladınız, demo yada canlı görünümü sayfada yayınlarsanız sayfa çok uzuyor yada anlatım bozuluyor, bazende demo sayfa dışına taşabiliyor bu nedenle genelde test blogları tercih ediliyor. Bu kod sayesinde ziyaretçi önizlemeyi aç/kapa şeklinde görebilir. böylece adminlerde bir demo için boş yere fazladan bir test blogu açmak zorunda kalmazlar.

GİZLENECEK RESİM, METİN, YAZI VEYA KOD :  Sitenizde yayınladığınız koddlar bazen çok uzun yada çok geniş olup düzeni bozuyor , bazende örnek kodu kopyalanmaz hale getiriyor. <textarea> ile çerçeve içerisine alınmış kullanışlı bir açılır kapanır kod penceresidir. Bu kod penceresini ziyaretçi açarak rahatça kodu alabilir. Yada yazdığınız uzun yazılara alt açıklama , referans, örnek resim gibi alt bilgiler eklemek için kullanabilirsiniz.


background: #f5f5f5;} : Gizlenen alanın arkafon rengi

background-color:#transparent; Açılacak kod penceresinin arkafon rengi

width: 630px; : Açılacak kod penceresinin minimum genişliği

height: 135px; Açılacak kod penceresinin minimum yüksekliği

Değişkenler : Gözükmesini istediğiniz değişebilir etmenler.

('block1') : Bu yazdığım kodu bir alanda birden fazla kullanacaksanız. Eklediğiniz kod bir öndeki kod ile çakışmaması için id vermeniz gerekir. Yani ilk kodu eklediniz ikinci kod için id numarasını ('block2') üçüncü eklemek istediğiniz farklı bir olay için ('block3')... şeklinde ekleyerek bir sayfada birden çok göster/sakla özelliğini bir arada kullanabilirsiniz.

*Blogunuzda göstermek istediğiniz yere Blogger Kullanıcı paneli > Yerleşim > Gadget ekle > HTML/JavaScript ekle yolunu izleyerek ekleyebilirsiniz.
* Paylaşımlarınızı yazdığınız panelde HTML kısmından ekleyerek tek bir sayfa içinde de kullanabilirsiniz.
Standart buton yapısı kullanılmıştır, isterseniz değiştirip temanıza uygun görsellikte buton kullanabilirsiniz.

HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.



* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.