Site için "Yukarı" düğmesi: nasıl yapılır
Bu işlev, bir sitenin "yukarı" düğmesi gibi,İnternet kaynağını ziyaretçileri için daha uygun hale getirir. Sayfadaki herhangi bir yerden üste kolayca geçmesine yardımcı olur. Bu, yalnızca çevrimiçi mağazalar ve aşağı doğru uzun bir kaydırma gerektiren büyük makalelere sahip siteler için gereklidir.
Bu ne için?
Şu anda çoğu sitedefonksiyonları, "yukarı" düğmesi gibi, hayır, ve bu konuda kritik bir şey yok. Fakat bunun kullanımı hem internet kaynağı hem de ziyaretçileri için birçok artı getirebilir.
Ziyaretçiler için fayda
Genellikle Internet kaynağının sayfasıbilgi makalesi çok fazla yer kapladığında ve fare tekerleği ile sayfayı aşağıya kaydırmanız gerektiğinde çok miktarda bilgi yüklenir. Buna ek olarak, makalenin sonuna birçok yorum yapılabilir.
Bir ziyaretçi bir makaleyi okuduğunda, hiçbir şeysayfayı aşağıya kaydırmada sıkıcı değil, fakat metin sona erdiğinde ve yukarı doğru ilerlemek gerekirse, biraz yorulmaya başlıyor. Çoğu kişi uzun bir kaydırmaya liderlik etmek için çok tembel olacaktır ve yalnızca genişliklerinde dolaşmak yerine siteyi kapatacaktır.
Anında sayfanın üst kısmına geçmek için düğmeyi kullanarak sitedeki eğlenceyi daha rahat hale getirir.
Bir İnternet kaynağı için fayda
Kaynak için olumlu taraflargeçmişteki faktörlerden, çünkü site üzerindeki basitleştirilmiş bir hareket davranışsal faktörleri geliştiriyor çünkü tüm ziyaretçiler eylemlerinde daha aktif olacak ve diğer sayfalara geçecek.
Dolayısıyla, bu davranışsal faktörler, tüm arama motorlarının sahaya olan tutumunu etkiler ve arama sonuçlarının yerinde bir iyileşmeye yol açar.
Sitede "yukarı" butonu nasıl yapılır?
Daha fazlasını anlıyoruz. CMS'nin herhangi birindeki bir site için yukarı kaydırma düğmesi her zaman kendiniz yapılabilir, sadece birkaç basit adım:
- bir görüntü oluşturmak;
- Bir senaryonun oluşturulması;
- bir düğme stili oluşturmak;
- siteye ekleniyor.
Düğme resmi
Siteye "yukarı" düğmesi eklemek içinsimgesini tıklamanız gerekecek, tıklandığında kullanıcı sayfayı yukarı taşıyacak. Bunu yapmak için, her zaman en uygun olanı seçebileceğiniz hazır seçenekler kullanabilirsiniz.
Düğmenin görünümünü iyileştirmek için, arka plan görüntülerini CSS temelinde birleştirebilmenizi ve böylece bir animasyon üretebilmenizi sağlayan bir kaydırma yapmak için bazı iyileştirmeler yapmanız gerekir.
Grafik çalışmaları için herhangi bir editör kullanabilirsiniz. Ancak en uygun seçenek PIXLR çevrimiçi servisidir, çünkü burada herhangi bir şey indirmenize gerek yoktur ve tarayıcınızda kullanabilirsiniz.
Görünen editör penceresinde çalışmaya başlamak için, "Bilgisayardan resim yükle" alanını seçin. Örnek olarak, roketin görüntüsünü alın.
Seçilen simgenin boyutu çok büyükseboyuta küçük bir ayarlama yapmalısınız. Bunu yapmak için, üst menüye gidip "Düzenle" alanını ve "Serbest dönüşüm ..." ü seçtikten sonra
Resmin hemen yanında özel varİşaretleyiciler, taşıyarak görüntüyü yeniden boyutlandırabilirsiniz. Oranları kaydetmek için, Shift tuşunu kullanarak, mavi işaretleyicileri hareket ettirmeniz gerekir. Bu eylemlerin sonunda, roketin görüntüsü elde edilir.
Bir sonraki adım, katmanın bir kopyasını oluşturmaktır.
Şimdi roket resminiyeni bir katman biraz yukarı. Bunu yapmak için, sol menünün ikinci sütununda bulunan taşıma aracını ve klavyede "yukarı" oku kullanmak uygun olacaktır.
Şimdi en iyi resmi siyah-beyaz yapmalısınız. Bu, üst menüdeki "Düzeltme" - "Ton / Doygunluk" öğesi kullanılarak yapılabilir. Tam renk solması için, Doygunluk kaydırıcısı -100 olarak ayarlanmalıdır. Bu işlem, "Yukarı" düğmesinin, üzerine geldiğinizde siyah beyazdan renge dönüşeceğini gösterir.
Son dokunuş, fazla alanın kaldırılmasıdıriki resim etrafında. Bunu yapmak için, sol menüden "Kırpma" öğesini seçin ve dikdörtgede yalnızca iki füzeyi seçin. Kırpmayı yürütmek için Enter tuşuna basın.
Sonuç, fazla alanın olmadığı bir görüntüdür. Elde edilen görüntünün genişliğini ve yüksekliğini kaydetmek gerekli olacaktır, çünkü bu veriler bir sonraki adımda yararlı olacaktır.
Kaydetmek için "Dosya" ya tıklayın -"Kaydet", soldaki "Bilgisayarım" öğesinde resmin adını yazıyoruz (sadece İngilizce düzeni), formatı (bu durumda - PNG) seçin ve "Evet" düğmesini tıklayın.
Düğme yukarı komut dosyasıyla dosya
Bu durumda, bir komut dosyası yazmanıza gerek yoktur. Kamu seçeneğinden yararlanmak, bitmiş kodda bazı düzeltmeler yapmak mümkün olacaktır.
Bunu yapmak için herhangi bir kod düzenleyicisini indirmeniz gerekir. En popüler ve ücretsiz sürüm Notepad ++. Yükledikten sonra, tüm bu kodu kopyalayıp yapıştırmanız gerekir:
| <script type = "text / javascript"> $ (document).hazır (function () {$ (window) .scroll (function () {if ($ (this) .scrollTop ()> 0) {$ ("# scroller"). fadeIn ();} else {$ ("# scroller ")." "(" # scroller "). FadeOut (); );}); </ script> |
Ardından "Dosya" üst menüsüne tıklayın - "Kaydet... ", sonra kodu .js formatında kaydediyoruz. Bundan sonra, bu kodu sitenizde kullanabilir, bir FTP bağlantısı kullanarak betik dosyalarını ve görüntüleri yükleyebilirsiniz.
Sitede kurulum
Kaydırma düğmesini site için yukarı ayarlamak için kodu istediğiniz yere yerleştirmeniz gerekir. Etiketten önce girmelisiniz </ body>.
CSS'de bir düğme stili oluşturma
Çoğu zaman, site için "yukarı" düğmesi altta bulunur ("bodrum").
Site style.css dosyasında, aşağıdaki kodu girmeniz gerekir:
"/ * Yukarı düğmesi * / .scrollTop { |
Bu durumda, görüntünün veri genişliğine ve yüksekliğine ihtiyacınız vardır. Sadece veriyi kod içine girmeye devam eder ve site için "yukarı" düğmesi hazır olacaktır! Başka ne var?
Wordpress sitesi için yukarı düğmesi
Bu CMS için, "Yukarı" düğmesi eklentilerin yanı sıra bağımsız olarak da yapılabilir.
Eklentilerdeki yöntem en uygun ve kurulumu kolaydır, çünkü bu sadece kurulum düğmesine tıklamak ve eklenti menüsündeki tüm işlevleri ayarlamak zorundadır.
İkincisinin seçimiDikkat, birlikte onunla birlikte sitede kolayca bir virüs elde etmek mümkün olacaktır. En popüler ve kanıtlanmış seçenek, Scroll Back to Top adlı bir eklentidir. Standart Wordpress eklentisi aramasını kullanarak indirebilirsiniz.
Bu uzantı birden çokFonksiyonel ve Wordpress üzerinde site için "yukarı" düğmesini bireyselleştirmek için çok basit olacak. Tüm değerlerin hiç değiştirilmesi gerekmez, sadece site sayfasındaki düğmenin görünümünü ve konumunu yapılandırmanız gerekir.
Gördüğünüz gibi, düğmeyi yukarıeklentiler çok basittir. Ancak yüklü bir eklentinin CMS'yi yüklediği önemli bir nüans var. Bu, İnternet kaynağının hızını etkileyebilir. Bu nedenle, çoğu site sahibi, tüm değişiklikleri doğrudan kodda yürütmeye çalışır ve üçüncü taraf uzantılarının yardımıyla gerçekleştirilmez. Tüketilen kaynakları en aza indirecek olan HTML için siteyi "yukarı" yapabilirsiniz.
Tüm sistem dosyalarını değiştirmeden önce WordPress yedek kopyalarını oluşturmalıdır. Ardından, yukarıda açıklanan kendi düğmenizi oluşturmak için tüm adımları takip edebilirsiniz.
Joomla için Knoka "yukarı"
CMS Joomla ayrıca Wordpress gibi eklentilerin kurulumunu da destekliyor. 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, herhangi bir eklenti "Uzantı Yöneticisi" aracılığıyla yüklenebilir. Bunu yapmak için ihtiyacınız olan:
- internetten eklentiyi indir;
- Extension Manager'da "Göz At" düğmesini tıklayın;
- indirilen arşivi seçin;
- "İndir" e tıklayın ve yükleyin.
Artık "Eklenti Yöneticisi" etkinleştirmeniz gerekiyor. Bunu yapmak için, bu bölüme gidin fişi bulup onun durumunu geçmelisiniz "sağladı."
Ardından, tüm eklenti seçeneklerini, bu eklentinin sağ tarafındaki "Temel Parametreleri" ni bulmanız gereken aynı bölümü kullanarak yapılandırabilirsiniz.
Sayfanın üstü aşağıdaki işlevselliğe sahiptir:
- Çalıştır / yönetici - seçeneği yalnızca İnternet kaynağında değil, aynı zamanda CMS Joomla'nın kendisinde de etkinleştirin.
- Düğme Ortaya Çıkar Konumu - "yukarı" düğmesinin görünmesi için kullanıcının kaç piksel sarması gerekir.
- Düğme Metni Çıkar - düğmedeki metin.
- Her Zaman En Üstte - sitenin sayfası her zaman en baştan görüntülenir. Sayfadaki belirli bir yere ilerlemek için "çapalar" kullanıldığında, bu seçeneğin etkinleştirilmesi gerekmez.
- Smooth Scroll - sayfayı daha yumuşak kaydırır.
- Kaydırma Süresi - sayfanın tamamen başlangıca kadar hareket ettiği saat.
- Kaydırma Kaydırma - büyük görsel efektler için kaydırma ekler.
- Geçişin Kolaylaştırılması - sayfanın üst kısmındaki hareketin "hafifletilmesi".
- Bağlantı Konumunu - yeri simgeler. standardına, sağ alt köşesinde bulunan düğme gibi.
- Stiller'i kullanın - aşağıdaki alanda ayarlanabilen düğmenin münferit stili. Negatif bir değere geçerseniz, tüm stil ayarları etkin site temasından alınacaktır.
- Link Stili - düğme stili ayarlarınızı girmek için bir alan.
"Yukarı" tuşunun stilini özelleştirmek için en azından minimum CCS bilgisine sahip olmanız gerekir. Aksi takdirde, sondan bir önceki parametrenin değerini "Hayır" olarak değiştirmek gerekir.
Bir başka önemli nüansİkondaki genel yazıt İngilizce metni içerir: Başa Dön. Rusça bir sitede, böyle bir metin mevcut olamaz, bu yüzden eklenti ayarlarında kapatır veya Rusça'ya çevirirsiniz.
Bu yazıyı değiştirmek içinFTP veya yerleşik barındırma dosya yöneticisi kullanarak sunucu sitesi. Daha sonra "/ -program / dil / tr-TR /" dizininde "tr-TR.plg_system_topofthepage.ini" isimli bir dosya bulmanız gerekir.
Metni değiştirmeden önce, bu belgenin kodlamasını utf-8 olarak değiştirmelisiniz. Bu, Rus harflerinin normal bir gösterimini yapacaktır.
Şimdi aşağıdaki satırı bulduk:
| "PLG_SYS_TOPOFTHEPAGE_GOTOTOP =" Başa Dön "" |
ve söz dizimini Rusça diline çevir. "Yukarı!", "Başlangıçta!" Veya "Yukarı!" Gibi ifadeleri kullanabilirsiniz.
Sonunda, değiştirilmiş dosyayı kaydetmeniz ve Joomla'daki site için "yukarı" düğmesini kontrol etmeniz gerekir.
Ucoz için yukarı düğmesi
Ucoz'daki sitenin "yukarı" düğmesi yapılacaktır.Bu CMS için bağlantı fişi imkansız olduğundan, kod enjeksiyonu kullanılarak. Ancak, bu sistem dosyalarını öğrenmek ve yalnızca istenen yerde küçük bir kod eklemek gerek gerekli hat aramak için uzun zaman gerektirmez.
Yüklemek için ihtiyacımız var:
- Kontrol Paneli -> Tasarım -> Tasarım Yönetimi (Şablonlar) -> Sitenin Altına Gitmek;
- bir komut dosyası ekleyin (projenin resmi web sitesinde ve üçüncü taraf kaynaklarda bulunabilir).
Sonuç
Bundan sonra, sağ alt köşede, kullanıcıyı sayfanın en üstüne taşıyacak bir simge görünecektir.
Gördüğünüz gibi, "Yukarı" düğmesiniCMS'nin herhangi biri özellikle zor değildi. Otomatik kurulum yöntemini (eklentileri) ve el kitabını kullanabilirsiniz. Bununla birlikte, ikinci seçenek, sitenin performansını olumsuz etkilemediği için en uygun seçenek olmaya devam etmektedir.
Site için "yukarı" düğmesini kullanabilirsiniz.HTML, site kaynaklarının tüketimini en aza indirgemek için, çok sayıda uzantının kaynak performansı üzerinde olumsuz bir etkisi olabileceğinden. Bir eklenti düğmesi "yukarı", sitenin sayfalarının yüklenme süresini büyük ölçüde etkilemez, ancak çoğu durumda, kullanıcının CMS'ye yüklenmiş en az bir düzine eklentisi vardır. Bu durumda, herhangi bir eklenti site sayfalarının performansını olumsuz yönde etkileyebilir.
</ p>>
