Web Sitem İçin Tanıtım ve Yardım Eklentisi Lazım Diyorsanız

Intro.js tam aradığınız eklenti.

Bu eklentiyi bulur bulmaz hemen uygulama yaptım. Görünen o ki kullanımı son derece kolay.
Tanıtım ve Yardım Eklentisi olan Intro.js'yi sitemize eklemek için öncelikle bilgisayara idirelim. Bu bağlantı sizi intro.js Github sayfasına yönlendirecek.

Intro.js'nin son sürümünün zip ya da tar.gz dosyalarından birini indirmeyi tercih edebilirsiniz. Ben zip dosyasını indirdim.
Eğer isterseniz eski sürümleri de sayfada yer alıyor.

Zip dosyamızın içindeki intro.js dosyalarını sitemizde benzeri eklentileri bulundurduğunuz dizine çıkartıyoruz.
Aşağıdaki dosyalar yeterli olacak.
bootstrap.min.css
demo.css
introjs.css
bootstrap-responsive.min.css
intro.js

Eğer sitemizde bootstrap.min.css ve bootstrap-responsive.min.css dosyaları yer alıyorsa tekrar eklemeyin. Fakat sıralamasına dikkat etmekte fayda var. Ya da demo.css, introjs.css ve intro.js dosyalarınızı sona peş peşe eklemeyi tercih ettiyseniz (en önemlisi jquery dosyanızdan sonra eklemelisiniz) ve çalışmıyorsa yukarıdaki sıralamayı kontrol etmenizde fayda var.

Sitemize tanımlama yaptıktan sonra yapmamız gereken, istediğimiz yerlere yardım metinlerini eklemek.
O da şöyle olacak.

2 alan ile tanımlama yapıyoruz. İlki data-step ile gösterim sırası ve ikincisi ise data-intro ile yardım ya da tanıtım metni.
Sayfamızın tasarımından dolayı, eğer ilk yardım ya da tanıtım metnimiz sayfamızın üstünde yer almıyorsa bu hiç problem değil. Intro.js data-step="1" niteliğini (attribute) gördüğü yerden çalışmaya başlar.

Yani 5 maddemiz varsa ve 5. madde sayfanın üstündeyse, sırası geldiğinde gösterilecek.

Kodumuzu nasıl yerleştirdiğimizi de görelim.
Diyelim ki listemize uygulamak istiyoruz. O zaman aşağıdaki şekilde uyguluyoruz.

<ul
    class="nav nav-pills pull-right"
    data-step="5"
    data-intro="Get it, use it."
>
    <li>Bir li ögesi</li>
    <li>Bir başka li ögesi</li>
    <li>Daha başka bir li ögesi</li>
</ul>

Yani genel bir örnek vermemiz gerekirse

<etiket
    class="class-tanimlarimiz"
    style="style-tanimlarimiz"
    id="idmiz"
    data-step="introjs-sira-numarasi"
    data-intro="Yardım ya da tanıtım metnimiz"
>

Elbette class, style, id gibi nitelikleri kullanmak zorunda değilsiniz. Eğer onlar da gerekiyorsa, bir arada nasıl kullanıldığını göstermek istedim. Gördüğünüz gibi class, style, id gibi nitelikleri gibi kullanılıyor. Değişen niteliğimizin adı, yani aynen data-step ve data-intro şeklinde yazmamız gerekiyor.

Bu arada intro.js bireysel kullanım için ücretsiz. Eğer ticari amaçlı kullanacaksanız 1, 5 ya da sınırsız kullanım için 1 kez ödeme yapmanız isteniyor. Fiyatlarını ticari kullanım sayfasından öğrenebilirsiniz.

Burada güzel bir yardım bağlantısı olsun mesela

Arkadaşlarının da faydalanması için sen de bu yazımı hemen paylaş.
Teşekkürler :)