Site için "yukarı" düğmesi gibi bir işlev, İnternet kaynağını ziyaretçileri için daha uygun hale getirir. Sayfanın herhangi bir yerinden sayfanın en üstüne kolayca geçmenize yardımcı olur. Bu, uzun süre aşağı kaydırma gerektiren büyük makaleleri olan çevrimiçi mağazalar ve siteler için bir zorunluluktur.
Ne için
Şu anda çoğu sitenin "yukarı" düğmesi gibi bir işlevi yoktur ve bunda kritik bir şey yoktur. Ancak kullanımı hem İnternet kaynağı hem de ziyaretçileri için birçok avantaj sağlayabilir.
Ziyaretçiler için avantaj
Genellikle bir İnternet kaynağının sayfası yoğun bir şekilde bilgi ile yüklendiğinde, bilgilendirici bir makale çok yer kapladığında ve fare tekerleği ile sayfayı aşağı kaydırmanız gerektiğinde olur. Buna ek olarak yazının sonunda bununla ilgili birçok yorum olabilir.
Bir ziyaretçi bir makale okuduğunda, sayfayı aşağı kaydırmanın yorucu bir tarafı yoktur, ancak metin sona erdiğinde ve yukarı çıkmanız gerektiğinde biraz yorucu olmaya başlar. Çoğu insan uzun süre kaydırma yapamayacak kadar tembel olacak ve geniş alanlarda başka bir gezintiye çıkmak yerine siteyi kapatacak.
Düğmeyi kullanmaanında sayfanın en üstüne çıkmak sitede vakit geçirmeyi daha uygun hale getiriyor.
İnternet kaynağının faydası
Sitede daha kolay gezinme, tüm ziyaretçiler eylemlerinde daha aktif olacağından ve diğer sayfalara geçeceğinden davranışsal faktörleri iyileştirdiğinden, kaynağın kendisi için olumlu sonuçlar geçmiş faktörlerden gelir.
Böylece bu davranışsal faktörler, tüm arama motorlarının siteye karşı tutumunu etkiler ve arama sonuçlarındaki konumunda bir iyileşmeye yol açar.
Sitedeki "yukarı" düğmesini kendiniz nasıl yapabilirsiniz
Daha fazlasını yapmak. Son derece basit birkaç adımı izleyerek istediğiniz zaman herhangi bir CMS'de bir site için yukarı kaydırma düğmesi oluşturabilirsiniz:
- görüntü oluşturma;
- komut dosyası oluşturma;
- düğme stili oluştur;
- siteye ekleme.
Düğme resmi
Siteye "yukarı" düğmesi eklemek için önce simgenin kendisini yapmanız gerekir, tıklandığında kullanıcı sayfanın en üstüne hareket eder. Bunu yapmak için, her zaman en uygun olanı seçebileceğiniz hazır seçenekleri kullanabilirsiniz.
Düğmenin görünümünü iyileştirmek için bazı iyileştirmeler yapmamız gerekiyor, yani arka plan resimlerini CSS'ye dayalı olarak birleştirmemize ve böylece onlardan bir animasyon oluşturmamıza olanak tanıyan bir hareketli grafik yapmamız gerekiyor.
Grafik çalışmaları için herhangi bir düzenleyiciyi kullanabilirsiniz. Ancak en uygun seçenek çevrimiçi bir hizmet olacaktır. PIXLR, burada indirilecek bir şey olmadığından ve doğrudan tarayıcınızda kullanabilirsiniz.
Başlamak için, görünen düzenleyici penceresinde "Bilgisayardan resim yükle" alanını seçin. Örnek olarak bir roketin görüntüsünü ele alalım.
Seçilen simgenin boyutları çok büyükse, küçük bir boyut ayarı yapmanız gerekecektir. Bunu yapmak için üst menüye gidin ve "Düzenle" alanını seçin ve "Serbest dönüştürme …"den sonra
Ardından, resmin yanında hareket eden ve resmin boyutunu değiştirebileceğiniz özel işaretçiler belirir. Oranları korumak için, mavi işaretleri hareket ettirmeniz gereken Shift tuşunu kullanabilirsiniz. Bu adımların sonunda bir roket görüntüsü elde edilir.
Bir sonraki adım, katmanın bir kopyasını oluşturmaktır.
Şimdi roketin resmini yeni katmandan biraz yukarı taşımanız gerekiyor. Bunu yapmak için sol menünün ikinci sütununda bulunan hareket aracını ve klavyedeki yukarı oku kullanmak uygun olacaktır.
Şimdi üstteki resmi siyah beyaz yapmamız gerekiyor. Bu, üst menüdeki "Düzeltme" - "Ton / Doygunluk" öğesi kullanılarak yapılabilir. Tam desatürasyon için Doygunluk kaydırıcısı -100'e ayarlanmalıdır. Bu eylem, "Yukarı" düğmesinin üzerine geldiğinizde siyah beyazdan renkliye dönüşeceği bir efekt oluşturmanıza olanak tanır.
Son dokunuş, iki resmin etrafındaki fazladan boşluğun kaldırılmasıdır. Bunu yapmak için sol menüden "Kırp" öğesini seçin vebir dikdörtgende sadece iki roket seçiyoruz. Kırpma yapmak için Enter tuşuna basılır.
Sonuç, fazladan boş alan olmayan bir görüntüdür. Bu veriler bir sonraki adımda faydalı olacağından, ortaya çıkan görüntünün genişliğini ve yüksekliğini yazmanız gerekecek.
Kaydetmek için, "Dosya" - "Kaydet"e tıklamanız gerekir, burada sol paragrafta "Bilgisayarım" resmin adını yazıyoruz (yalnızca İngilizce düzen), biçimi seçin (bu case, PNG) ve "Evet" düğmesini tıklayın.
"Yukarı" düğmesinin komut dosyasıyla dosyalayın
Bu durumda bir komut dosyası yazmanıza gerek yok. Bitmiş kodda bazı değişiklikler yaparak genel sürümü kullanmak mümkün olacak.
Bunu yapmak için herhangi bir kod düzenleyiciyi indirmeniz gerekir. En popüler ve aynı zamanda ücretsiz olan seçenek Notepad++'dır. Kurduktan sonra, tüm bu kodu kopyalayıp içine yapıştırmanız gerekiyor:
| $(belge).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} else {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); false döndür;}); }); |
Sonra, üst menüdeki "Dosya" - "Farklı kaydet …" seçeneğine tıklayın, ardından kodu.js formatında kaydederiz. Sonrasında bir FTP bağlantısı kullanarak script dosyalarını ve görselleri sitenize yükleyerek bu kodu sitenizde kullanabilirsiniz.
Siteye yükleyin
Sitenin yukarı kaydırma düğmesini ayarlamak içingerekli yer kodu. etiketinden önce girmelisiniz.
CSS ile Düğme Stili Oluşturma
Genellikle, sitenin "yukarı" düğmesi altta (" altbilgi") bulunur.
Sitenin style.css dosyasına şu kod eklenmelidir:
|
/Yukarı Düğmesi/ .scrollTop{ background:url('images/up.png') 0 0 tekrarsız;/yerel resim yolu/ width:39px;/ düğmesi genişlik/ height:96px;/%50 düğme yüksekliği/ bottom:5px;/sabit konumda alt dolgu/ left:89%;/sola kaydır/ }.scrollTop:hover{ background-position:0 -108px; } /arka plan ofseti/" |
Bu durumda, bu görüntü genişlik ve yükseklik verilerine ihtiyaç duyulacaktır. Sadece alınan verileri koda girmek için kalır ve site için "yukarı" düğmesi hazır olacaktır! Başka?
Wordpress sitesi için yukarı düğmesi
Bu CMS için "Yukarı" düğmesi eklentiler kullanılarak ve bağımsız olarak yapılabilir.
Eklentiler yöntemi, yalnızca yükle düğmesine tıklamanızı ve eklenti menüsündeki tüm işlevleri yapılandırmanızı gerektirdiğinden, kurulumu en uygun ve en kolay yöntemdir.
İkincisinin seçimine dikkatle yaklaşılmalıdır, çünkü onunla sitede virüs bulaşmak kolay olacaktır. En popüler ve kanıtlanmış seçenek, Scroll Back To Top adlı bir eklentidir. Wordpress eklentileri için standart aramayı kullanarak indirebilirsiniz.
Bu uzantıdabirden fazla işlevsellik ve bir Wordpress sitesi için "yukarı" düğmesini özelleştirmek çok kolay olacaktır. Tüm değerleri değiştirmeniz gerekmez, yalnızca site sayfasındaki düğmenin görünümünü ve konumunu yapılandırmanız gerekir.
Gördüğünüz gibi eklentilerle kurulum butonunu ayarlamak çok kolay. Ancak, yüklü her eklentinin CMS'yi yüklemesi olan önemli bir nüans vardır. Bu, İnternet kaynağının hızını etkileyebilir. Bu nedenle çoğu site sahibi, tüm değişiklikleri üçüncü taraf uzantıların yardımıyla değil, doğrudan kodda yapmaya çalışır. Bir HTML sitesi için tüketilen kaynakları en aza indirecek bir "yukarı" düğmesi yapabilirsiniz.
Tüm Wordpress sistem dosyalarını değiştirmeden önce, onları yedeklemeniz gerekir. Ardından, yukarıda açıklanan kendi düğmenizi oluşturmak için tüm adımları takip edebilirsiniz.
Joomla için "yukarı" düğmesi
CMS Joomla, Wordpress gibi eklentilerin kurulumunu da destekler. Joomla 3'teki bir site için "yukarı" düğmesinin en başarılı sürümü, Sayfanın Başı adlı bir uzantıdır.
Bu CMS'de, "Uzantı Yöneticisi" aracılığıyla herhangi bir eklenti yüklenebilir. Bunun için ihtiyacınız olan:
- Eklentiyi internetten indirin;
- uzantı yöneticisinde "Gözat" düğmesine tıklayın;
- indirilen arşivi seçin;
- "İndir"e tıklayın ve kurun.
Şimdi "Eklenti Yöneticisi"nde etkinleştirmeniz gerekiyor. Bunun içinbu bölüme gitmeniz, eklentiyi bulmanız ve durumunu "etkin" olarak değiştirmeniz gerekiyor.
Bir sonraki adım, bu eklentinin "Temel parametreleri"ni sağ tarafta bulmanız gereken bölümü kullanarak tüm uzantı parametrelerini yapılandırmaktır.
Sayfanın Başı aşağıdaki işlevselliğe sahiptir:
- Run in/ manager - seçeneği yalnızca İnternet kaynağında değil, aynı zamanda Joomla CMS panelinde de etkinleştirir.
- Düğme Gösterimi Konumu - yukarı düğmesinin görünmesi için kullanıcının kaç piksel geri sarması gerekir.
- Düğme Metnini Atla - düğmedeki metnin varlığı.
- Her Zaman En Üstte - site sayfası her zaman üstten görüntülenecektir. Sayfada belirli bir konuma kaydırmak için bağlantıları kullanırken, bu seçeneğin etkinleştirilmesi gerekmez.
- Pürüzsüz Kaydırma - sayfa kaydırmayı daha yumuşak hale getirir.
- Kaydırma Süresi - sayfanın tamamen başa taşınacağı süre.
- Scroll Transition - Kaydırmaya daha fazla görsel efekt ekler.
- Geçiş Kolaylaştırma - sayfanın en üstüne hareketi "zayıflatma".
- Bağlantı Konumu - simgenin konumu. Varsayılan olarak, düğme sağ alt köşede bulunur.
- Use Styles – aşağıdaki alanda ayarlanabilen bireysel düğme stili. Negatif bir değere değiştirilirse, tüm stil ayarları sitenin aktif temasından alınacaktır.
- Bağlantı Stili - düğme stili parametrelerinizi girmek için bir alan.
"Yukarı" düğmesinin stilini özelleştirmek için en az minimumCCS bilgisi. Aksi takdirde, sondan bir önceki parametrenin değerini "Hayır" olarak değiştirmelisiniz.
Başka bir önemli nüans, simgedeki olağan yazının İngilizce metnini içermesidir: En Başa Dön. Böyle bir metin Rusça dilindeki bir sitede bulunamaz, bu nedenle eklenti parametrelerinde onu devre dışı bırakmanız veya Rusça olarak değiştirmeniz yeterlidir.
Bu yazıyı değiştirmek için FTP veya barındırmada yerleşik dosya yöneticisini kullanarak site sunucusuna gitmeniz gerekir. Ardından, "/administrator/language/en-GB/" dizininde "en-GB.plg_system_topofthepage.ini" adlı bir dosya bulmanız gerekir.
Metni değiştirmeden önce, bu belgenin kodlamasını UTF-8 olarak değiştirmelisiniz. Bu, Rusça harflerin normal görüntülenmesini sağlayacaktır.
Ardından şu satırı buluyoruz:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Başa Dön"" |
ve tırnak içindeki ifadeyi Rusça olarak değiştirin. "Yukarı!", "En yukarıya!" gibi ifadeler kullanabilirsiniz. veya “Yukarı!”.
Sonunda, değiştirilen dosyayı kaydetmeniz ve Joomla'daki site için "yukarı" düğmesini kontrol etmeniz gerekecek.
Ucoz için Yukarı düğmesi
Ucoz'daki site için "yukarı" düğmesi, bu CMS için eklentileri bağlamak imkansız olduğundan kod enjeksiyonu kullanılarak yapılmalıdır. Ancak bu, sistem dosyalarının uzun süre çalışılmasını ve gerekli satırların aranmasını gerektirmez, sadece doğru yere küçük bir kod yapıştırmanız yeterlidir.
Bizi yüklemek içingerekli:
- "Kontrol Paneline gidin -> Tasarım -> Tasarım Yönetimi (şablonlar) -> Sitenin alt kısmı;
- betiği ekleyin (projenin resmi web sitesinde ve üçüncü taraf kaynaklarında bulunabilir).
Sonuç
Bundan sonra, sağ alt köşede kullanıcıyı sayfanın en üstüne taşıyan bir simge görünecek.
Gördüğünüz gibi, herhangi bir CMS için geri düğmesini ayarlamak özellikle zor değildi. Hem otomatik yükleme yöntemini (eklentiler) hem de manuel olanı kullanabilirsiniz. Ancak, sitenin performansını olumsuz etkilemediği için ikinci seçenek en uygunu olmaya devam ediyor.
Çok sayıda uzantı kaynağın performansı üzerinde olumsuz bir etkiye sahip olabileceğinden, site kaynaklarının tüketimini en aza indirmek için bir HTML sitesi için "başa dön" düğmesini kullanabilirsiniz. Bir "yukarı" düğmesi eklentisi, site sayfalarının yüklenme süresini büyük ölçüde etkileyemez, ancak çoğu durumda kullanıcının CMS'de yüklü en az bir düzine eklentisi vardır. Bu durumda herhangi bir eklenti site sayfalarının performansını olumsuz etkileyebilir.
