Giriş yapmadınız.

Seyyah20

Orta Düzey

  • "Seyyah20" bir erkek
  • Konuyu başlatan "Seyyah20"

Mesajlar: 235

Kayıt tarihi: Jan 26th 2014

Konum: DENİZLİ/Gönlünüze ektiğiniz her güzellik, bir gün size bereketli bir hasat olarak dönecektir.

  • Özel mesaj gönder

1

Wednesday, 21.01.2026, 03:26

İnteraktif "Süper ötesi" Dijital Kütüphane Paneli [HTML/CSS/JS]

Selamun Aleyküm değerli forum üyeleri ve içerik üreticileri,

Kendi web sitesinde, blogunda veya forum sayfasında kitap tanıtımı yapmak isteyenler için hazırladığım, görsel estetiği yüksek ve tamamen etkileşimli " Kitaplık" projesini sizlerle paylaşıyorum.
Bu panel, ziyaretçilerinize sadece bir liste değil, gerçek bir kütüphane rafından kitap seçiyormuş hissi verir.


[*]İnteraktif Kitap Deneyimi: Her bir kitap kapağı tıklanabilir özelliktedir. Fare ile üzerine gelindiğinde hafif büyüme (zoom) efekti ile etkileşime girer.
[*] Modern Modal (Pencere) Sistemi: Kitaplara tıklandığında ekranı kaplamayan, şık ve okumayı kolaylaştıran özel bilgilendirme pencereleri açılır. Arka plan bulanıklaştırılarak odağın tamamen kitap açıklamasında kalması sağlanır.
[*] Okuma Dostu Metin Düzeni: Tüm kitap açıklamaları, okuyucuyu yormayacak şekilde anlamlı yerlerden ikiye bölünmüş ve aralarına ferahlık vermesi için fazladan paragraf boşlukları eklenmiştir.
[*] Zengin İçerik Arşivi: Kütüphane; Huzur Sokağı'ndan Seyyah'a, Riyâzü's-Sâlihîn'den Zamanın Zeynebi'ne kadar geniş bir yelpazede, hayatımıza yön veren değerli eserlerin özetlerini barındırır.
[*] Mobil Uyumlu ve Saf Kod: Tasarım; JavaScript ve CSS kullanılarak en hafif haliyle kodlanmıştır, herhangi bir harici kütüphaneye ihtiyaç duymadan her tarayıcıda hızlıca çalışır.
[*]

[*] Kütüphanemizde Yer Alan Bazı Eserler:
  • Tarih ve Destan: Bir Destandır Çanakkale, Esir Türkler.
  • Aile ve Çocuk: Mahremiyet Eğitimi, Aile ile Bağlanma Aidiyet.
  • İnanç ve Rehberlik: İslâm İlmihali, Peygamberin Sevdiği Müslüman, Kuran'ın Kalbine Yolculuk.
  • Edebiyat ve Tefekkür: Seyyah, Huzur Sokağı, Zülfikarlar Bilendi.
Bu dijital kütüphane, sadece bir kitap listesi değil; aynı zamanda bir bilgi hazinesine açılan interaktif bir kapıdır.

Projenin Öne Çıkan Teknik Özellikleri:
  • Ahşap Oyma (Emboss) Efekti: Başlık ve imza kısımlarında kullanılan özel gölgelendirme sayesinde, yazılar kütüphanenin ahşap dokusuna gömülü bir el işçiliği gibi görünür.
  • Akıllı Modal Sistemi: Herhangi bir kitaba tıklandığında, sayfa yenilenmeden şık bir bilgi penceresi açılır.
  • Havadar Metin Düzeni: Kitap özetleri, okuma konforunu artırmak için özel paragraf etiketleri (<p></p>) ile iki bölüme ayrılmıştır.
  • Hafif ve Hızlı: Dışarıdan hiçbir kütüphane (jQuery vb.) yüklemez; saf HTML, CSS ve JavaScript ile her cihazda yıldırım hızında çalışır.
Kurulum Rehberi (Sitenize Nasıl Eklersiniz?)
Bu kütüphaneyi kendi sayfanıza eklemek oldukça basittir:
  1. Görselleri Hazırlayın: images/ klasörüne kütüphane arka planını (dolap.png) ve kitap kapaklarını ekleyin.
  2. Kodu Yapıştırın: Aşağıdaki ekte olan kod bloğunun tamamını kopyalayarak sitenizin HTML bölümüne yapıştırın.
  3. Konumlandırma: Eğer kendi kitaplarınızı eklemek isterseniz, style="left:...; top:..." değerlerini değiştirerek kitapları raflara milimetrik olarak dizebilirsiniz.
Kitaplar, ruhun derinliklerine yapılan en sessiz ama en derin yolculuklardır. Bu kütüphane paneliyle amacım, dijital dünyanın hızı içinde bir anlığına durup tefekkür etmeye, okumaya ve öğrenmeye alan açmaktır. Unutmayın ki:
"Kitapla yetişen nesiller, başarıya emin adımlarla yürürler."
Faydalı olması temennisiyle, projeyi geliştirip kendi içeriklerini ekleyen herkese şimdiden kolaylıklar dilerim.

Ne işimize yarayacak demeyin arşivinize atın bir gün lazım olur...

Canlı Örnek: Burdan Buyrun
Seyyah20 belirtilen resmi ekledi:
  • Resim-2.png
Seyyah20 belirtilen dosyaları ekledi: