Siteye Girenlere Intro Gösterme

Yükleniyor

Yeni bir site yaptıysanız ve kullanıcıların ilk girişte dikkatini çekmek, sitenizin kullanımını kolayca anlatmak istiyorsanız mutlaka denemeniz gereken bir javascript kütüphanesi intro.js. Çünkü hepimizin bildiği gibi ilk intiba çok önemli.

Burada size internetin tanımını falan yapacak değilim. Sözü çok dallandırıp budaklandırmadan anlatıma geçeyim.

Öncelikle Intro.js kullanan site örneği:

Hobilendik Pazar Yeri

Bu projemde hedef kitle ev hanımları olduğundan dedim ki güzel bir tasarım yapayım, kullanımını da anlatayım. Intro.js bu konuda bana epey katkı sağladı. Örnekte sayfayı yenilerseniz tekrar tekrar çıkmadığını görürsünüz. Bir önceki derste anlattığım kod ile Cookie kullanarak siteye ilk kez girenleri tespit etmeyi başarmış oldum çünkü.

Kullanım

Öncelikle Intro.Js’yi şu adresten indiriverin.

Ardından sitenizin head tagları arasında <script type=’text/javascript’ src=’falanfilan/intro.js’></script> şeklinde çağırın.

Daha sonra intronun hedef alacağı divlere, “a” taglarına, “img” taglarına kısacası istediğiniz yere şu şekilde intro ataması yapın.

data-intro’lar intro kutusundakileri, data-step’ler kaçıncı sırada olduğunu, data-position’lar da intro kutusunun tanıtılacak nesneye göre konumunu belirtmektedir efendim.

Nasıl Çalışacak?

Head taglarınıza script’i çektiniz mi? Çektiniz. Tanıtılacak nesnelerinize data-intro’ları vs. girdiniz mi? Girdiniz. O halde gelelim en civcivli noktaya. Şimdi size üç seçenek sunabilmekteyim. Bunlar şunlar:

  1. Sitemde butona basınca çalışsın.
  2. Siteye ilk kez girene çalışsın.

Görüldüğü üzere üç seçenek deyip iki seçenek sundum.

İlk seçeneğe bakacak olursak, en basiti bu olsa gerek. Sitenizin body tagları arasına şöyle bir şey yerleştirin.

<a href=”#” onClick=”introJs().start();” title=”Nasıl çalıştığını görün.”>Nasıl Yapsak?</a>

Bu kodu tabii ki bir resme de bağlayabilirsiniz.

Siteye ilk kez girenlere çalışmasını istiyorsanız:

Siteye İlk Kez Girenleri Tespit Etme adlı konuda anlattığım kodda son kısımda

"// ilk kez girenlere yapılacak işlem" kısmını introJs.start(); yaparak ve o konuda anlatılanları yaparak dilediğinizi almış olacaksınız.

Sorunuz olursa lütfen sormaktan çekinmeyin.

Siteye Girenlere Intro Gösterme” için 3 yorum

    Author’s gravatar

    paylaşım için teşekkürler. nopcommerce üzerinde çalışıyorum ve bir plugin oluşturuyorum. yalnız cookie.js içinde introJs’yi çağıramıyorum. kod patlıyor.

    Cevapla

Bir Cevap Yazın

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