Yukarı Çık Komutu

Merhabalar.
Sayfalarını takip ettiğim blogcu arkadaşlarımın ekserisi, Blogger'in kontrol panelinde kullanıcılarına sunduğu blog temalarını kullanmaktalar. Bu blog temalarında "YUKARI ÇIK" komutu bulunmamaktadır. Ben sayfama ekledim, örneğini benim sayfamdan izleyebilirsiniz.

Özellikle tek sayfa bloglarda, sayfanın alt kısımlarındayken en üst kısma çıkmak için düşünülmüş, küçük ama işe yarar bir işlevi olan bu butonu sayfamıza ekleyerek kullanıcılara daha rahat bir kullanım imkanı sağlayabiliriz. Gelelim bu küçük ama bir o kadarda işlevsel butonun hazır HTML kodunu, temamızın HTML'yi düzenle komutu ile komutlar arasına yerleştirmeye.

BİRİNCİ İŞLEM

Kontrol panelinde iken sol pencerede yer alan TEMA komut linkini tıklayın. Sağ pencerede yer alan turuncu renkli ÖZELLEŞTİR komut linkinin sağında bulunan aşağı yönlü ok simgesini tıklayarak seçeneklerle ilgili pencereyi açalım ve açılan bu penceredeki komutlardan HTML'yi DÜZENLE komutunu tıklayalım. 

İKİNCİ İŞLEM

ÜÇÜNCÜ İŞLEM

DÖRDÜNCÜ İŞLEM

Temanın HTML kod satırlarının yer aldığı bu ekran görünümünde 1 nolu ilk satırın bittiği yerdeki boşluğa faremizin sol tuşu ile bir kez tıklayarak kursörün (imlecin) yanıp sönmesini sağlayalım. Daha sonra klavyeden arama modülünü işleme sokmak için CTRL ve F tuşlarını kombine etmek üzere aynı anda basalım. SEARCH: arama modülü önünde imleç yanıp sönerken buraya </body> kodunu yazarak aratalım. 

BEŞİNCİ İŞLEM

Temanın HTML kodları arasında </body> bulur ve orada imleç yanıp sönmeye devam eder. Aşağıya hazırladığım HTML kodunu kopyalayıp </body> kod satırının üzerindeki ilk boş satıra yapıştırdıktan sonra, 

ALTINCI İŞLEM

kod penceresinin sağ üst tarafında disket simgesi şeklindeki KAYDET komutuna tıklayarak yaptığımız işlemin kaydedilmesini sağlayalım. "GÜNCELLEME BAŞARILI" bildirimini gördükten sonra 

YEDİNCİ İŞLEM

HTML kod ekranından sol üst tarafta bulunan GERİ DÖN ok tuşuna tıklayarak kod sayfasından çıkalım. Kontrol panelinin sol alt tarafında bulunan BLOGU GÖRÜNTÜLE komutuna tıklayarak sayfamızı çalıştıralım ve yaptığımız işlemi kontrol etmek üzere sayfamızın en altına inerek sağ alt taraftaki turuncu rengindeki üst yönlü ok komutuna tıklayarak blog sayfamızın en altından en üstüne nasıl çıktığımızı görelim. 

NOT: Ben böyle yapamam diyenler için bir başka kolay ve basit bir yol daha var. Kontrol panelinde iken DÜZEN komut sekmesini tıklayın, gövde şablonunda istediğiniz bir bölmeye HTML/JavaScript gadgeti ekleyip, içine aşağıdaki kodu kopyalayıp yapıştırın ve kaydedin. 

Selam ve saygılarımla.

KOPYALANACAK "YUKARI ÇIK" HTML KODU

<style>
#onlyJSyc{
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
border: none;
outline: none;
background: url(http://4.bp.blogspot.com/-b50XKMWz84U/W9RouwhqVII/AAAAAAAAR_U/qQFXBOiUuQUC9Rv_evE4S7P9_yZ1YzZDgCK4BGAYYCw/s1600/yukari.png) no-repeat;
cursor: pointer;
padding: 0px;
width: 40px;
height: 40px;
}
</style>
<button onclick="topFunction()" id="onlyJSyc"></button>
<script>
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500)
document.getElementById("onlyJSyc").style.display = "block"
else
document.getElementById("onlyJSyc").style.display = "none"
}
function topFunction() {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
document.body.scrollTop -= 40
document.documentElement.scrollTop -= 40
setTimeout(function() {
topFunction()
}, 0)
} else {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
}
</script>