Bloggerda, Ziyaretçilerin Arkaplan Rengini Kendi İsteklerine Göre Değiştirebileceği İnteraktif Renk Paleti Oluşturun!

 Blogger blogunuzda ziyaretçilerin arkaplan rengini kendi isteklerine göre değiştirebileceği interaktif bir renk paleti (renk seçici) oluşturmak için aşağıdaki adımları takip edebilirsiniz.

Bu kod bloğu, kullanıcının seçtiği rengi tarayıcının yerel depolama alanında (localStorage) saklar, böylece ziyaretçi sayfayı yenilese veya başka bir sayfaya geçse bile seçtiği renk kalmaya devam eder.

Adım 1: HTML ve JavaScript Kodunu Ekleme

Blogger kumanda panelinden Yerleşim (Layout) bölümüne gidin, uygun bir yere (örneğin kenar çubuğuna) HTML/JavaScript Gadget'ı ekleyin ve aşağıdaki kodları yapıştırın:

<div class="bg-switcher-widget" style="padding: 10px; background: #f9f9f9; border-radius: 8px; text-align: center; font-family: sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">

  <label for="bgColorPicker" style="font-size: 14px; font-weight: bold; color: #333; display: block; margin-bottom: 8px;">Arkaplan Rengini Seçin:</label>

  <input type="color" id="bgColorPicker" value="#ffffff" style="border: none; width: 50px; height: 30px; cursor: pointer; background: none;">

  <button id="resetBgColor" style="display: block; margin: 8px auto 0; padding: 4px 8px; font-size: 12px; background: #e74c3c; color: #fff; border: none; border-radius: 4px; cursor: pointer;">Sıfırla</button>

</div>


<script>

  document.addEventListener("DOMContentLoaded", function() {

    const colorPicker = document.getElementById("bgColorPicker");

    const resetButton = document.getElementById("resetBgColor");

    

    // Kaydedilmiş rengi kontrol et ve uygula

    const savedColor = localStorage.getItem("userCustomBgColor");

    if (savedColor) {

      document.body.style.backgroundColor = savedColor;

      colorPicker.value = savedColor;

    }


    // Renk değiştirildiğinde

    colorPicker.addEventListener("input", function() {

      const selectedColor = colorPicker.value;

      document.body.style.backgroundColor = selectedColor;

      localStorage.setItem("userCustomBgColor", selectedColor);

    });


    // Varsayılan renge sıfırlama

    resetButton.addEventListener("click", function() {

      localStorage.removeItem("userCustomBgColor");

      document.body.style.backgroundColor = "";

      colorPicker.value = "#ffffff";

    });

  });

</script>

Adım 2: Alternatif Olarak Tema Kodlarına Entegre Etme (İsteğe Bağlı)

Eğer widget yerine doğrudan temanızın CSS yapısına müdahale etmek isterseniz:

  1. Blogger panelinden Tema (Theme) > Düzenle (Edit HTML) bölümüne gidin.

  2. </head> etiketinin hemen önüne yukarıdaki <script> kodunu yapıştırabilirsiniz.

  3. Arkaplan renginin uygulanacağı ana elementin (genellikle body veya .body-func) script tarafından kontrol edildiğinden emin olun. Yukarıdaki hazır script doğrudan document.body üzerinden çalışmaktadır.