Yukarı Çık Butonu
Bugün yukarı çık butonunun nasıl yapıldığını öğreneceksiniz, Blog içeriğinizde özel, blogunuzdaki ziyaretçiler için kullanımı kolay.
Yukarı çık veya aşağı in butonu gibi ziyaretçilerinizin daha kolay gezinmelerini sağlamış olacaksınız.
1. 19 Farklı Stiller ile Top Düğmeler Görüntü
Adım 1
Tamam, şimdi blogger hesabına gidin ve Tasarım –> Şablon –> HTML'yi düzenle ve aşağıdaki kodu bulabilirsiniz.
Not: Yukarıda şablon yedeklemeyi mutlaka yapınız herhangi bir hatada
şablonu geri yükleyebilirsiniz.
HTML şablonu genişlete tıklayın ve Crtl+F tuşlarına basarak arama yapın.
]]></b:skin>
Yukarıda bulduğunuz kodun üstüne, aşağıda yazılı kodu yapıştırın.
#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
Adım 2
Şimdi aşağıdaki kodu bulun.
</body>
Bu kodun üstünede aşağıda yapılandıracağınız kodu koyacaksınız.
<a href="#" id="backtotop"><img src = "Resim URL"alt =" geri dön "/></ a>
Ama bu kodu şablonunuza eklemeden önce lütfen aşağıdaki beğendiğiniz bir düğme stilini seçin kırmızı, ile yazılan ile yazılan yere aşağıda beğeneceğiniz resimin kodunu yerleştirin.Tırnak işartelerine dikkat edin.Ayrık kalmasın.Şablon hata verirse kod aralarını inceleyerek birleştirin Hata ile karşılaştığınızda yaptıklarınızı ve yazılanları tekrar okuyun.
http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmXE1tvI/AAAAAAAAAP4/pQk69X73NIo/s1600/bttp-1.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png
http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png
Beğendiğinizi seçtiğinizde Resim-URLstili aşağıda gördüğünüz gibi görülmesi gerekir.Aşağıda seneryo gereği seçilen bir kod'un birleştirilmiş halidir.
<a href="#" id="backtotop"><img src="http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png" alt="back to top" /></a>
şablon kodunuzu yapıştırın.Şablonu kaydedin. Hepsi bu kadar.Farklı bir uygulama için diğer adımları takip edin.
Adım 3
Aşağıdaki kodu bulun
<head>
Ve sonra bu kodu yapıştırın.Buradaki kod yukarı çık aşağı in JS. kodudur.Diğer anlatılandan farklı bir uygulamadır.İkisini birden yapmayın.Buradaki anlatım ayrı bir işlemdir.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script> <script language="javascript"> $(window).ready(function(){ $('#backtotop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); </script>
ve sonra Şablonu Kaydet hepsi bu.
2. Yazı Geri farklı stilleri ve renkleri ile en iyi Link
Adım 1
Tamam, şimdi blogger hesabına gidin ve Dashboard>> Düzen>> Düzenle html>> ve aşağıdaki kodu bulabilirsiniz.
]]></b:skin>
Ve bu kodu eklemeden önce
#backtotop {
width:100px; /* Change Box Width*/
background:#F4FFBF; /* Change background color*/
border:1px solid #ccc; /* Change Border Style*/
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666; /* Change text color*/
text-decoration:none;
}
Ve blogunuza şablonu ile uyum ve uyum sağlamak için lütfen bu özelliklerini değiştirmek
Değişim 100 kutunun boyutunu artırmak veya azaltmak için daha düşük veya daha yüksek bir sayı.
Değişim 1px sınır genişliğini değiştirmek için.
# ccc favori renk kodunu değiştirmek kenarlık rengi için.
Değişim F4FFBF favori arka plan renk kodu.
Değişim 666 ; favori Metin renk kodu.
Adım 2
Aşağıdaki Kodu bulun:
</body>
Ve önce, aşağıdaki kodu yapıştırın.
<a href="#" id="backtotop">Back to top</a>
Düğme metni değiştirmek için, düşündüğünüz bir adı yazın.
Adım 3
Aşağıdaki kodu bulun
<head>
Ve sonra bu kodu yapıştırın.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
ve sonra Şablonu Kaydet kaydet.
