Cumartesi 25 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. HTML ile Okuma İlerleme Çubuğu Nasıl Yapılır?
 HTML ile Okuma İlerleme Çubuğu Nasıl Yapılır?
Arayüz HTML5

HTML ile Okuma İlerleme Çubuğu Nasıl Yapılır?

Yazar : Bilal UÇAR 27 Ocak 2017 1 Comment

Bazı popüler sitelerin makalelerinin başında okuma ilerleme çubuğunu görürsünüz. Bu küçük çubuk sayesinde kullanıcılar makalenin ne kadarını okuduğu ve ne kadar kaldığını görebiliyor. Bu makalede, size HTML sayfalarda okuma ilerleme çubuğunun nasıl ekleneceğini anlatacağız.

okuma-ilerleme-cubugu

Eğer sitemizi düzenli olarak takip ediyorsanız WordPress ile Okuma İlerleme Çubuğu Nasıl Yapılır? adlı bir makale yazmıştım. Bu makalede aynı işlemi WordPress’te eklentiyle nasıl basit bir şekilde yapıldığından bahsetmiştim. Bu makalenin üzerine birkaç okuyucumuzdan bu olay HTML’de nasıl yapılır gibi sorular almaya başladım. Bu soruların üzerine HTML ile Okuma İlerleme Çubuğu Nasıl Yapılır? adlı bir makale yazıyorum.

Bu işlevi yerine getiren jQuery ile yazılmış bir eklenti buldum. Bunu kısaca tanıtıp daha sonra örnek kodları sizlerle paylaşmayı hedefliyorum.

Nasıl Kullanılır?

1. JQuery kütüphanesini yüklendikten sonra jQuery Scrolline.js eklentisini ekleyin.

2. Web sayfanızın üst kısmında varsayılan okuma / kaydırma konumu göstergesi oluşturmak için eklentiyi başlatın.

3.Okuma / kaydırma konumu göstergesini özelleştirmek için kullanılabilen seçenekler.

Nasıl eklendiğinden bahsettikten sonra gelelim örnek bir uygulamayı sizlerle paylaşmaya. Altta örnek olarak bulduğum bir Okuma İlerleme Çubuğunu sizlerle paylaşıyorum. HTML, CSS ve JS dosyalarını aşadaki küçük araç sayesinde görebilirsiniz.

HTML için Okuma İlerleme Çubuğu başka bir deyişle Okuma Pozisyonu Göstergesi sizler için umarım faydalı olmuştur. Bu konu hakkındaki sorularınızı, düşüncelerinizi bizlerle yorum yaparak paylaşabilirsiniz.

Etiketler: html ile okuma ilerleme çubuğu jquery ile okuma ilerleme çubuğu okuma ilerleme çubuğu nasıl yapılır okuma pozisyonu göstergesi nasıl yapılır okuma pozisyonu göstergesi nedir reading position indicator nasıl yapılır reading position indicator nedir
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

1 Yorum

  • Furkan Bayrak says:
    27 Ocak 2017 at 15:21

    Paylaşım için teşekkürler, elinize sağlık..

    Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.