Blogger İçin Modern ve Dinamik "Günün Bilgisi" Kartı Oluşturun

Bugün, sitemizin kullanıcı deneyimini (UX) bir üst seviyeye taşıyacak, hem görsel olarak şık hem de teknik açıdan fonksiyonel bir "Dinamik Bilgi Hattı" widget'ı hazırlıyoruz.

Özellikle teknik içerikli bloglarda veya rehber sitelerinde, ziyaretçiye hap bilgiler sunmak her zaman ilgi çekicidir. Hazırladığımız bu özel kod ile her sayfa yenilendiğinde ziyaretçilerinizi yeni bir teknik ipucu ve modern bir animasyonla karşılayacağız.

Neden Bu Tasarımı Kullanmalısınız?

Bu widget, sadece bir yazı kutusu değil; aynı zamanda sitenizin "yaşayan bir organizma" olduğu hissini veren bir tasarım dokunuşudur:

  • Rastgele İçerik: Her sayfa yenilendiğinde havuzdaki yüzlerce bilgiden birini seçerek kullanıcıyı şaşırtır.

  • Modern Tipografi: Plus Jakarta Sans fontu ile premium bir görünüm sunar.

  • Gradient Metin Efekti: Yazılar klasik siyah yerine, turuncu ve kırmızı tonlarında modern bir renk geçişine sahiptir.

  • Canlı Arka Plan: Arka planda turuncu tonların yavaşça süzüldüğü, göz yormayan bir animasyon barındırır.

  • Hız Dostu: Tamamen saf CSS ve JavaScript ile hazırlandığı için sitenizi asla yavaşlatmaz.

Kurulum ve Kodlar

Aşağıdaki kodu Blogger panelinizde Yerleşim (Layout) > Gadget Ekle > HTML/JavaScript yolunu izleyerek veya doğrudan temanızın XML kodları arasında uygun bir yere yapıştırarak kullanabilirsiniz.

<!-- Blogger Arşivim Dinamik Bilgi Hattı v2.0 -->

<style>

  @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');


  #ba-infinite-box {

    margin: 30px 0;

    padding: 30px;

    position: relative;

    border-radius: 15px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    overflow: hidden;

    background: linear-gradient(120deg, rgba(255, 107, 107, 0.04), rgba(255, 149, 0, 0.08), rgba(255, 230, 0, 0.04));

    background-size: 300% 300%;

    animation: orangeFlow 12s ease infinite;

    border: 1px solid rgba(255, 149, 0, 0.1);

  }


  #ba-infinite-box::before {

    content: '';

    position: absolute;

    left: 0; top: 0;

    width: 5px; height: 100%;

    background: linear-gradient(to bottom, #FF6B6B, #ff9500);

    animation: slideInLine 2s ease-out forwards;

  }


  #ba-text-content {

    font-size: 18px;

    font-weight: 500;

    letter-spacing: -0.2px;

    line-height: 1.7;

    background: linear-gradient(45deg, #FF6B6B 0%, #ff9500 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin: 0;

    opacity: 0;

    animation: slowTextFade 2.5s ease-out 0.3s forwards;

  }


  .ba-tags-style {

    display: block;

    margin-top: 15px;

    font-size: 13px;

    font-weight: 700;

    color: #ff9500;

    opacity: 0;

    animation: slowTextFade 2.5s ease-out 0.8s forwards;

  }


  @keyframes orangeFlow {

    0% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

    100% { background-position: 0% 50%; }

  }


  @keyframes slideInLine { from { height: 0; } to { height: 100%; } }

  @keyframes slowTextFade { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

</style>


<div id="ba-infinite-box">

  <div id="ba-text-content">Yükleniyor...</div>

  <div id="ba-tags-area" class="ba-tags-style"></div>

</div>


<script>

  (function() {

    const veriHavuzu = [

      {

        m: "Blogger İçin Sayfa Hızlandırma ve Optimizasyon Teknikleri: Blogger kullanıcılarının en büyük derdi, sitenin yavaş açılmasıdır. Özellikle Google’ın Core Web Vitals güncellemesinden sonra hız, SEO için vazgeçilmez oldu.",

        e: "#BloggerSEO #SayfaHızı #Bloggerİpuçları"

      },

      {

        m: "WebP Dönüşümü: Blogger resim URL'lerinin sonuna '-rw' ekleyerek görselleri otomatik olarak WebP formatında sunabilir, sayfa boyutunu %40 oranında küçültebilirsiniz.",

        e: "#Performance #WebP #LCP"

      }

      // Dilediğiniz kadar içerik ekleyebilirsiniz...

    ];


    const rastgele = veriHavuzu[Math.floor(Math.random() * veriHavuzu.length)];

    document.getElementById("ba-text-content").innerText = rastgele.m;

    document.getElementById("ba-tags-area").innerText = rastgele.e;

  })();

</script>


Teknik İpuçları ve Özelleştirme

  • Renkler: Eğer blogunuzun ana rengi turuncu değilse, CSS içindeki #ff9500 ve #FF6B6B kodlarını kendi marka renklerinizle değiştirebilirsiniz.

  • İçerik Havuzu: JavaScript kısmındaki veriHavuzu dizisine dilediğiniz kadar yeni nesne ekleyebilirsiniz. Sistem her seferinde farklı bir tanesini seçecektir.

  • Tipografi: Yazı boyutunu font-size: 18px; satırından büyütebilir veya küçültebilirsiniz.

Siz de bu widget'ı sitemize ekleyerek hem ziyaretçilerinize değerli bilgiler sunabilir hem de modern bir görünüm elde edebilirsiniz. Sorularınızı yorum kısmından sormayı unutmayın!

Hiç yorum yok:

Yorum Gönder