İçeriği sabit bırakmak yerine, onu yaşayan bir organizmaya dönüştürmek

Dijital çağın en sessiz ama en güçlü devrimi, satır aralarına gizlenmiş kodlarla gerçekleşiyor. Bir zamanlar yalnızca yazıların sıralandığı sade blog sayfaları, bugün akıllı sistemlerin nefes aldığı, ziyaretçiyi tanıyan ve ona göre şekillenen canlı platformlara dönüşüyor. Blogger gibi mütevazı görünen bir altyapı bile, doğru dokunuşlarla bir haber merkezine, bir dijital vitrine, hatta bir içerik orkestrasyonuna dönüşebiliyor.

Bu dönüşümün kalbinde ise basit ama etkili bir fikir yatıyor:
İçeriği sabit bırakmak yerine, onu yaşayan bir organizmaya dönüştürmek.

📌 Statik Sayfalardan Dinamik Akışlara

Geleneksel blog yapısı, okuyucuya tek yönlü bir yol sunar:
okur gelir, yazıyı okur ve gider.

Oysa modern içerik mimarisi şöyle der:

“Okuyucuya sadece bir yazı değil, bir yolculuk sun.”

İşte burada devreye giren sistem, rastgele ama kontrollü içerik sunumudur.
Her sayfa yenilendiğinde farklı içeriklerin görünmesi, sitenizi bir nevi canlı organizmaya dönüştürür.

📌 Temel Mantık: Akıllı Grid Sistemi

Kuracağımız yapı üç temel sütun üzerine kuruludur:

Feed’den içerik çekme
Rastgele sıralama
Responsive (ekrana uyumlu) grid sistemi

Bu üçlü birleştiğinde ortaya çıkan şey şudur:
👉 Her cihazda kusursuz görünen, sürekli değişen bir içerik akışı

⚙️ 1. HTML Yapısı (İçerik Alanı)

Bu alan, sistemin nefes aldığı yerdir:

<div id="random-posts-box"></div>

Bu küçük kutu, aslında sayfanın en dinamik bölgesidir.
Tüm içerik buraya akacaktır.

🎨 2. Responsive Grid (Akıllı Tasarım Sistemi)

Bu bölüm, sitenizin görsel zekâsıdır:

<style>

.post-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
}

/* Mobilde 2 sütun */
@media (max-width:768px){
.post-grid{
grid-template-columns:repeat(2,1fr);
}
}

.post-card{
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
transition:0.2s;
}

.post-card:hover{
transform:translateY(-3px);
}

.post-card img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
}

.post-card h3{
font-size:15px;
padding:8px;
line-height:1.4;
height:48px;
overflow:hidden;
}

</style>

✨ Bu yapı ne sağlar?

Mobilde 2 sütun disiplin
Masaüstünde özgür grid sistemi
Görsellerde bozulma yok
Kartlarda estetik denge

Bu, bir tasarım değil…
Bir davranış biçimidir.

⚡ 3. Javascript Motoru (Zekâ Katmanı)

Asıl sihir burada gerçekleşir:

<script>

var cekilenYazi = 300; 
var gosterilecek = 12;

fetch("/feeds/posts/default?alt=json&max-results=" + cekilenYazi)
.then(res => res.json())
.then(data => {

  var posts = data.feed.entry;

  // Rastgele sıralama
  posts.sort(function(){
    return 0.5 - Math.random();
  });

  var html = "<div class='post-grid'>";

  for(var i=0; i<gosterilecek; i++){

    var title = posts[i].title.$t;
    var link = "";

    for(var j=0; j<posts[i].link.length; j++){
      if(posts[i].link[j].rel == "alternate"){
        link = posts[i].link[j].href;
        break;
      }
    }

    var img = "";
    if(posts[i].media$thumbnail){
      img = posts[i].media$thumbnail.url.replace("s72-c","s500");
    }

    html += `
    <div class="post-card">
      <a href="${link}">
        <img src="${img}" alt="${title}">
        <h3>${title}</h3>
      </a>
    </div>
    `;
  }

  html += "</div>";

  document.getElementById("random-posts-box").innerHTML = html;

});
</script>

📊 Sistemin Felsefesi

Bu kod sadece içerik çekmez.

Zamanı kırar → eski yazılar yeniden görünür
Algıyı değiştirir → site her girişte farklı hissedilir
Ziyaretçiyi tutar → “bir tane daha bakayım” etkisi oluşturur

🧠 Derin Gerçek

Bugünün internetinde kazananlar:

En çok yazanlar değil
En çok reklam verenler değil

👉 En iyi akışı kuranlardır.

🚀 Sonuç

Bu sistemle:

Blogger siten sıradanlıktan çıkar
Okuyucu pasif olmaktan çıkar
İçerik kendi kendini pazarlayan bir yapıya dönüşür

Ve en önemlisi…

Sen artık sadece yazı yazan biri değil,
akıllı bir içerik mimarısının kurucususun.