AllaTurkaa

Değerli Allaturka Ailesi ve Ziyaretçilerimiz,
Sizler için hem mobil uyumlu hem de web sitelerinizde, forum temalarınızda veya bloglarınızda rahatlıkla kullanabileceğiniz, görsel olarak son derece şık ve interaktif 50 Soruluk Siyer-i Nebi (Peygamber Efendimizi Ne Kadar Tanıyorsun?) Bilgi Yarışması Widget'ını hazırladık!

Bu konumuzda widget'ın tüm özelliklerini, renk ve boyut özelleştirmelerini nasıl yapacağınızı, soruları nasıl güncelleyeceğinizi ve sitelerinize nasıl ekleyeceğinizi detaylıca bulabilirsiniz.
Widget Özellikleri ve Tasarım Detayları

• Görsel Uyum: Paylaştığımız ilk görselin o muazzam koyu yeşil (#06402B) ve sarı/altın (#E5C37 renk paleti birebir uygulanarak estetik bir bütünlük sağlandı.
  
• İdeal Boyutlar: Genişliği 360px, yüksekliği ise 500px olarak optimize edildi. Bu sayede ne çok büyük ne de çok küçük; tam kararında bir widget görünümü sunar.
  
• Kaydırmasız (Scrollbarsız) Tasarım: Soru cevaplandıktan sonra açılan açıklama alanı, dikey boşluğa tam oturtulduği için hiçbir şekilde çirkin kaydırma çubuklarına (scrollbar) yer bırakmaz, temiz bir okuma alanı sunar.
  
• Akıllı Puanlama & Sonuç Ekranı: 50 sorunun tamamı bittiğinde kullanıcının kaç doğru ve yanlış yaptığını, başarı yüzdesini yüzde olarak hesaplayıp ekrana getiren özel bir sonuç ekranı bulunur.
  
• Skora Göre Ödül ve Teşvik Sözleri:
  
  • Tam yapanlara: Muhteşem başarı ödülü ve tebrik mesajı!
    
  • Eksik yapanlara: Siyer bilginizi artırmaya yönelik samimi ve motive edici teşvik sözleri yer alır.
    

Kodlar Üzerinde Nasıl Değişiklik Yapabilirsiniz?
Eğer widget üzerinde kendi zevkinize göre oynamak isterseniz, kod içindeki şu alanları kolayca değiştirebilirsiniz:

1. Renklerin Değişimi:
   
   • CSS kısmındaki #06402B kodunu değiştirerek widget'ın ana koyu yeşil arkaplan rengini dilediğiniz renk yapabilirsiniz.
     
   • #E5C378 kodunu değiştirerek sarı/altın tonlarındaki başlık ve buton çerçeve renklerini özelleştirebilirsiniz.
     

[*]En ve Boyun Değişimi:

• CSS içindeki .quiz-widget sınıfında yer alan width: 360px; ve height: 500px; değerlerini sitenizin alanına göre artırıp azaltabilirsiniz.
  

[*]Soruların Değiştirilmesi ve Yenilerinin Eklenmesi:

• Kodun JavaScript bölümünde yer alan quizData dizisi içinde sorular yer alır. Buradaki soru metinlerini, seçenekleri (options), doğru cevap indeksini (answer -> 0: A şıkkı, 1: B şıkkı, 2: C şıkkı, 3: D şıkkı şeklinde) ve info kısmındaki açıklamaları dilediğiniz gibi güncelleyebilir veya yeni sorular ekleyebilirsiniz.
  

Hangi Platformlara Uyumludur? Blogspot'a Eklenir mi?
Evet! Blogspot (Blogger) dahil olmak üzere HTML/JS kodu çalıştıran tüm platformlara %100 uyumludur.
Blogspot'a Nasıl Eklenir?

1. Blogger kumanda panelinize girin ve Yerleşim (Layout) sekmesine gidin.
   
2. Widget'ı eklemek istediğiniz alanda "Gadget Ekle" (Add a Gadget) seçeneğine tıklayın.
   
3. Açılan pencereden "HTML/JavaScript" öğesini seçin.
   
4. Aşağıda vereceğim tüm HTML/CSS/JS kodunu bu kutunun içine yapıştırıp kaydedin. Artık sitenizde kusursuzca çalışacaktır!
   

Kurulum İçin Tam Kodlar
Aşağıdaki ekte verilen kod bloğunun tamamını kopyalayarak .html uzantılı bir dosya olarak kaydedebilir veya doğrudan sitenizin/blogunuzun uygun alanına ekleyebilirsiniz:

DEMO ADRES: BURDAN BUYRUN [*][*]
Selâm ve dua ile...[*][*]
[*]*İlim müminin kaybolmuş malıdır; nerede bulursa almalıdır.* (Tirmizî, İlim, 19) Yüreğinizden ilim, dilinizden hikmet, evinizden huzur ve bereket hiçbir zaman eksik olmasın. Allah'a emanet olun![*]