Blogger yukarı çık butonu back to top ekle



Yukarı Çık Butonu

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.

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-5.png?w=54

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-4.png?w=54

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-3.png?w=54

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-1.png?w=54

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-2.png?w=54

Blogger için en geri

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-10.png?w=110

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-9.png?w=110

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-8.png?w=110

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-71.png?w=133

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-11.png?w=110

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-12.png?w=110

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-13.png?w=55

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-14.png?w=41

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-15.png?w=41

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-16.png?w=41

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-17.png?w=41

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/bttp-19.png?w=41

Blogger için en geri

https://adnanguney.files.wordpress.com/2012/05/20.png?w=41

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=”https://adnanguney.files.wordpress.com/2012/05/20.png?w=41” 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.

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

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.

Not: Siz bizim aracılığıyla favori renk kodları burada yeni hex renk kodları jeneratör

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.

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'&gt;&lt;/script&gt; &lt;script language=&quot;javascript&quot;&gt; $(window).ready(function(){ $('#backtotop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); &lt;/script&gt;

ve sonra Şablonu Kaydet kaydet

Örnek bakabileceğiniz sayfa

Reklamlar

UNUTMAYIN! YORUMLAR DİĞER KULLANICILARA YOL GÖSTERİR

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s