Yukarı çık butonu eklemeson zamanlarda birçok blogger’ın ya da evden yazı yazarak para kazananların sıkça cevap aradığı sorularından biridir. Merak edip Google üzerinde şöyle bir “yukarı çık butonu ekleme” şeklinde arama yaptığımda birçok farklı sonucun olduğunu fark ettim. Ancak arama sonuçlarında çıkan bu sitelerin büyük kısmındaki yorumlardan anladığım kadarıyla ya kodlar zamanla bozulmuş ya da karmaşık anlatımdan dolayı bazı blogger arkadaşlar bloglarında yukarı çık butonu ekleme işlemini yapamamışlar.
Ben de buradan yola çıkarak derli toplu, kodların sorunsuz çalıştığı bir yukarı çık butonu ekleme yazısını kaleme almak istedim.
Şimdi isterseniz daha fazla oyalanmadan işlemlerimize başlayalım…
1. ADIM
Öncelikle Blogger yönetici panelimize giriş yapalım.
Ardından Yerleşim > Gadget Ekle > HTML/JavaScript’i tıklayalım.
Son olarak aşağıdaki kodları bu alana yapıştıralım.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});
jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<a href="#" class="backtotop">Back to Top</a>
2. ADIM
Şimdi ise Tema > HTML’yi Düzenle bölümüne girelim.
Burada Ctrl+F tuşlarına aynı anda basalım ve açılan kutuya ]]></b:skin> yazıp enter’a basalım.
]]></b:skin> kodunu bulduğumuz yerin bir satır üstüne aşağıda yer alan kodları yapıştıralım.
.backtotop {
position: fixed;
bottom: 10px;
right: 0px;
color: #000000;
background-color: #ffffff;
font-size: 12px;
padding: 10px;
text-transform: uppercase;
letter-spacing: 1.0px;
}
.backtotop:hover {
background-color: #333333;
color: #ffffff;
text-decoration: none;
}
Ve son olarak kaydet butonunu tıklayalım.
(Bu alandan ayrıca yukarı çık butonunu özelleştirebilmemiz de mümkün)
Eğer HTML kodları üzerinde yaptığınız değişiklikleri kaydedemezseniz, geri yapıp sayfanın en altından “Klasik Görünüme Geri Dön” yazısına tıklayın.
3. ADIM
Bu adımda tekrardan birinci adımda yaptığımız işlemi tekrarlayacağız.
Blogger yönetim panelinden Yerleşim > Gadget Ekle > HTML/JavaScript’i tıklayalım.
Ardından da aşağıdaki kodları yapıştıralım.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});
jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<a href="#" class="backtotop"><img src="DIRECT IMAGE URL" alt="Back To Top"></a>
Kodların son satırında fark ettiyseniz, “DIRECT IMAGE URL” yazan bir alan var.
Buraya istediğimiz bir yukarı çık ikonu ekleyeceğiz. Bu nedenle internetten bir yukarı çık ikonu bularak, bu ikonu herhangi bir resim yükleme sitesine yükleyip linkini kopyalayarak alacağız.
Ardından da yukarıdaki (DIRECT IMAGE URL yazan yere) alana yapıştıracağız.
Bu işlemleri bilmeyenler aşağıdaki görselleri sırasıyla inceleyebilirler.
Daha sonra bu resmi hizliresim.com sitesine yüklüyorum.
Yükledikten sonra buradan resmin linkini kopyalıyorum.
Bu kopyaladığım linki de yukarıdaki kodlarda DIRECT IMAGE URL yazan yere yapıştırıyorum. Hepsi bu kadar!
4. ADIM
Son olarak ise tekrardan HTML’yi düzenle bölümüne gireceğiz. Bunun için panelimizden Tema > HTML’yi Düzenle yazılarını tıklıyoruz.
Daha önce yaptığımız gibi Ctrl+F tuşlarına aynı anda basalım ve açılan kutuya ]]></b:skin> yazıp enter’a basalım.
]]></b:skin> kodunu bulduğumuz yerin bir satır üstüne aşağıda yer alan kodları yapıştıralım.
.backtotop {
position: fixed;
bottom: 10px;
right: 0px;
color: #000000;
background-color: #ffffff;
font-size: 12px;
padding: 10px;
text-transform: uppercase;
letter-spacing: 1.0px;
}
.backtotop:hover {
background-color: #333333;
color: #ffffff;
text-decoration: none;
bottom: 10px;
right: 0px;
padding: 10px;
}
Ve kaydet butonuna basalım. Yani sonuç olarak aynı işlemleri iki kez yapmış olduk. Ancak kodlar her ne kadar birbirlerine benzer görünseler de aralarında bazı farklılıklar var.
Bu yüzden yazıda hata mı var? Diye düşündüyseniz düşünmeyin. Çünkü bu şekilde yapılıyor.
Son olarak bloğu görüntüle diyerek yaptığımız butonu kontrol ediyoruz.
Sonuç olarak, yukarıdaki gibi oldukça güzel görünen bir blogger yukarı çık butonu oluşturmuş olduk.
Eğer anlaşılmayan bir nokta kaldıysa, aşağıdaki videomu da izleyerek blogger yukarı çık butonu ekleme hakkında detaylı bilgi edinebilirsiniz.
Aklınıza takılan herhangi bir nokta olursa, yorumlar bölümünde belirtmeyi unutmayın.
Etiket:
Blogger
