Rastgele Bağlantı Listesi Gösterimi: Web Sayfanızı Zenginleştirin

Yazar: Kutay Utku | Kategori: Web Tasarım | Yorum Yok

Bu kod, web sayfası üzerinde rastgele seçilen bağlantıları (linkleri) görüntülemek için kullanılır. Amaç, belirli bir sayıdaki bağlantıyı (bu örnekte 10 bağlantı) rastgele şekilde seçip, bunları kullanıcıya göstermek ve her birinin tıklanabilir hale gelmesini sağlamaktır. Aşağıda kodun her kısmının ne işe yaradığını detaylıca açıklıyorum:

Kodun Amacı ve Kullanımı

  1. HTML Yapısı:
    • <div id="linkContainer"></div> etiketi, bağlantıların (linklerin) yerleştirileceği bir kapsayıcıyı (container) belirtir. Burada bağlantılar dinamik olarak eklenip, kullanıcıya sunulacaktır.
  2. CSS Stilleri:
    • Kodda, bağlantıların görsel olarak nasıl görüneceği belirlenmiştir.
    • #linkContainer elementinin genişliği 100% olacak şekilde ayarlanmış, ayrıca her bir bağlantının stilinin düzenlenmesi için özellikler belirlenmiştir.
    • Bağlantılar üzerine tıklanabilirken bir renk değişimi uygulanır (hover efekti).
  3. JavaScript:
    • links dizisi, her biri bir URL ve isme sahip 100 bağlantıyı saklar. Bu bağlantılar, kullanıcıya gösterilecek olan rastgele seçilen bağlantılardır.
    • getRandomLinks(count) fonksiyonu, links dizisinden rastgele bağlantılar seçer ve bu sayede her sayfa yüklendiğinde farklı bağlantılar gösterilir. count parametresi, kaç bağlantı gösterileceğini belirler.
    • displayLinks() fonksiyonu, getRandomLinks() ile seçilen bağlantıları alır ve her birini linkContainer içinde görüntüler. Bağlantılar, tıklanabilir hale getirilip bir satır altına yerleştirilir.

Nasıl Çalışır?

  • Web sayfası yüklendiğinde (DOM tamamen yüklendikten sonra), displayLinks() fonksiyonu çalışır.
  • Bu fonksiyon, links dizisinden 10 rastgele bağlantıyı alır ve her birini yeni bir <a> etiketi olarak ekler.
  • Bağlantılar, kullanıcı tıkladığında yeni bir sekmede açılacak şekilde ayarlanmıştır (target="_blank").

Kullanım Senaryoları:

  1. Web Sitesinde Dinamik Bağlantı Gösterimi: Kullanıcılar sürekli farklı içeriklere yönlendirilmek isteniyorsa, her sayfa yenilendiğinde farklı bağlantılar sunulabilir.
  2. Rastgele İçerik Gösterimi: Belirli bir içeriği dinamik olarak göstermek veya şans oyunları gibi uygulamalarda rastgele bağlantı yönlendirmeleri yapılabilir.
  3. Reklam ve Öneri Alanları: Web sitelerinde rastgele reklamlar veya önerilen linkler gösterilebilir.

Neden Kullanılır?

  • Kullanıcı Etkileşimini Artırma: Kullanıcıların farklı içeriklere tıklamalarını sağlamak için dinamik bağlantılar sunmak, site içeriğiyle daha fazla etkileşim kurmalarını teşvik eder.
  • Eğlenceli Kullanıcı Deneyimi: Rastgele bağlantı gösterimi, özellikle eğlenceli ve interaktif bir web deneyimi sağlamak isteyen siteler için idealdir.

Kısaca:

Bu kod, rastgele bağlantıları kullanıcıya dinamik olarak sunar ve her sayfa yenilendiğinde farklı bir bağlantı listesi gösterir. Bu tarz özellikler, web sitesine dinamiklik katmak ve kullanıcıların ilgisini çekmek için faydalıdır.

Kod:

<div id="linkContainer"></div>
<style>
  /* Style for the container */
  #linkContainer {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Style for each link */
  #linkContainer a {
    display: block;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
    margin: 5px 0;
    padding: 8px 0;
  }

  /* Hover effect on links */
  #linkContainer a:hover {
    color: #0A64B1;

  }

  /* Adding line spacing for clarity */
  #linkContainer br {
    margin-bottom: 5px;
  }
</style>

<script>
const links = [
    { url: "https://example1.com", name: "Example Site 1" },
    { url: "https://example2.com", name: "Example Site 2" },
    { url: "https://example3.com", name: "Example Site 3" },
    { url: "https://example4.com", name: "Example Site 4" },
    { url: "https://example5.com", name: "Example Site 5" },
    { url: "https://example6.com", name: "Example Site 6" },
    { url: "https://example7.com", name: "Example Site 7" },
    { url: "https://example8.com", name: "Example Site 8" },
    { url: "https://example9.com", name: "Example Site 9" },
    { url: "https://example10.com", name: "Example Site 10" },
    { url: "https://example11.com", name: "Example Site 11" },
    { url: "https://example12.com", name: "Example Site 12" },
    { url: "https://example13.com", name: "Example Site 13" },
    { url: "https://example14.com", name: "Example Site 14" },
    { url: "https://example15.com", name: "Example Site 15" },
    { url: "https://example16.com", name: "Example Site 16" },
    { url: "https://example17.com", name: "Example Site 17" },
    { url: "https://example18.com", name: "Example Site 18" },
    { url: "https://example19.com", name: "Example Site 19" },
    { url: "https://example20.com", name: "Example Site 20" },
    { url: "https://example21.com", name: "Example Site 21" },
    { url: "https://example22.com", name: "Example Site 22" },
    { url: "https://example23.com", name: "Example Site 23" },
    { url: "https://example24.com", name: "Example Site 24" },
    { url: "https://example25.com", name: "Example Site 25" },
    { url: "https://example26.com", name: "Example Site 26" },
    { url: "https://example27.com", name: "Example Site 27" },
    { url: "https://example28.com", name: "Example Site 28" },
    { url: "https://example29.com", name: "Example Site 29" },
    { url: "https://example30.com", name: "Example Site 30" },
    { url: "https://example31.com", name: "Example Site 31" },
    { url: "https://example32.com", name: "Example Site 32" },
    { url: "https://example33.com", name: "Example Site 33" },
    { url: "https://example34.com", name: "Example Site 34" },
    { url: "https://example35.com", name: "Example Site 35" },
    { url: "https://example36.com", name: "Example Site 36" },
    { url: "https://example37.com", name: "Example Site 37" },
    { url: "https://example38.com", name: "Example Site 38" },
    { url: "https://example39.com", name: "Example Site 39" },
    { url: "https://example40.com", name: "Example Site 40" },
    { url: "https://example41.com", name: "Example Site 41" },
    { url: "https://example42.com", name: "Example Site 42" },
    { url: "https://example43.com", name: "Example Site 43" },
    { url: "https://example44.com", name: "Example Site 44" },
    { url: "https://example45.com", name: "Example Site 45" },
    { url: "https://example46.com", name: "Example Site 46" },
    { url: "https://example47.com", name: "Example Site 47" },
    { url: "https://example48.com", name: "Example Site 48" },
    { url: "https://example49.com", name: "Example Site 49" },
    { url: "https://example50.com", name: "Example Site 50" },
    { url: "https://example51.com", name: "Example Site 51" },
    { url: "https://example52.com", name: "Example Site 52" },
    { url: "https://example53.com", name: "Example Site 53" },
    { url: "https://example54.com", name: "Example Site 54" },
    { url: "https://example55.com", name: "Example Site 55" },
    { url: "https://example56.com", name: "Example Site 56" },
    { url: "https://example57.com", name: "Example Site 57" },
    { url: "https://example58.com", name: "Example Site 58" },
    { url: "https://example59.com", name: "Example Site 59" },
    { url: "https://example60.com", name: "Example Site 60" },
    { url: "https://example61.com", name: "Example Site 61" },
    { url: "https://example62.com", name: "Example Site 62" },
    { url: "https://example63.com", name: "Example Site 63" },
    { url: "https://example64.com", name: "Example Site 64" },
    { url: "https://example65.com", name: "Example Site 65" },
    { url: "https://example66.com", name: "Example Site 66" },
    { url: "https://example67.com", name: "Example Site 67" },
    { url: "https://example68.com", name: "Example Site 68" },
    { url: "https://example69.com", name: "Example Site 69" },
    { url: "https://example70.com", name: "Example Site 70" },
    { url: "https://example71.com", name: "Example Site 71" },
    { url: "https://example72.com", name: "Example Site 72" },
    { url: "https://example73.com", name: "Example Site 73" },
    { url: "https://example74.com", name: "Example Site 74" },
    { url: "https://example75.com", name: "Example Site 75" },
    { url: "https://example76.com", name: "Example Site 76" },
    { url: "https://example77.com", name: "Example Site 77" },
    { url: "https://example78.com", name: "Example Site 78" },
    { url: "https://example79.com", name: "Example Site 79" },
    { url: "https://example80.com", name: "Example Site 80" },
    { url: "https://example81.com", name: "Example Site 81" },
    { url: "https://example82.com", name: "Example Site 82" },
    { url: "https://example83.com", name: "Example Site 83" },
    { url: "https://example84.com", name: "Example Site 84" },
    { url: "https://example85.com", name: "Example Site 85" },
    { url: "https://example86.com", name: "Example Site 86" },
    { url: "https://example87.com", name: "Example Site 87" },
    { url: "https://example88.com", name: "Example Site 88" },
    { url: "https://example89.com", name: "Example Site 89" },
    { url: "https://example90.com", name: "Example Site 90" },
    { url: "https://example91.com", name: "Example Site 91" },
    { url: "https://example92.com", name: "Example Site 92" },
    { url: "https://example93.com", name: "Example Site 93" },
    { url: "https://example94.com", name: "Example Site 94" },
    { url: "https://example95.com", name: "Example Site 95" },
    { url: "https://example96.com", name: "Example Site 96" },
    { url: "https://example97.com", name: "Example Site 97" },
    { url: "https://example98.com", name: "Example Site 98" },
    { url: "https://example99.com", name: "Example Site 99" },
    { url: "https://example100.com", name: "Example Site 100" }
];

function getRandomLinks(count) {
    let shuffled = links.sort(() => 0.5 - Math.random());
    return shuffled.slice(0, count);
}

function displayLinks() {
    const container = document.getElementById("linkContainer");
    container.innerHTML = "";
    const randomLinks = getRandomLinks(10);
    randomLinks.forEach(link => {
        let a = document.createElement("a");
        a.href = link.url;
        a.textContent = link.name; // Custom name for the link
        a.target = "_blank";  // Ensures the link opens in a new tab
        container.appendChild(a);
        container.appendChild(document.createElement("br"));
    });
}

document.addEventListener("DOMContentLoaded", displayLinks);
</script>

Bu kodu geliştirerek CSS ile daha etkileyici hale getirebilirsiniz. Aşağıda hem JavaScript hem de CSS kısmını güncelleyerek, görünümü daha şık ve kullanıcı dostu yapabilirsiniz:

Yenilikler ve İyileştirmeler:

  1. Responsive Tasarım: @media query kullanılarak, mobil cihazlarda daha iyi görünüm sağlanmıştır. Bağlantılar küçük ekranlarda tam genişlik alacak şekilde ayarlanmıştır.
  2. Görsel Efektler: Bağlantılara hover efekti eklenerek, kullanıcılar üzerine geldiğinde bağlantılar renk değiştirir ve büyür.
  3. Kutular ve Gölgeler: Bağlantılar kutu gölgesi (box-shadow) ile vurgulanmış, daha modern ve şık bir görünüm elde edilmiştir.

Bu şekilde, kullanıcıya daha etkileşimli ve görsel açıdan zengin bir deneyim sunabilirsiniz.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir