ÖNİZLEME Sayfa başına dön butonu ne işe yarar? Ziyaretçiniz özellikle uzun yazılarınızı okuduktan sonra tekrar yukarı çıkmak iste...
Sayfa başına dön
butonu ne işe yarar?
Ziyaretçiniz
özellikle uzun yazılarınızı okuduktan sonra tekrar yukarı çıkmak istediğinde
iki saat o güzel parmaklarını yormasın diye oltanın ucuna tek tıklamayla
sayfayı yukarı çıkarır. Anlatıma geçelim.
Oltayla Balık Tutar
Gibi! Sayfa Başına Dön Butonu Yapımı
1. Blogger panelize
girin.
2. Şablon
3. HTML'yi Düzenle
4. Kodlar üzerine
tıklayın CTRL F tuşlarına basın arama kutusunu açın.
5. ]]></b:skin> kodunu
bulun ve üst satırına aşağıdaki kodları yapıştırın.
<!--PROGRAM USTASI-->
<!--http://www.programustasi.com-->
<style>
.umpanikan{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZl9htmc9tXmAo9A2my-8LIpV-UVvWVCWPBXUnU2xD_xV1bmTikvAPhE0EHRKSdh5hyphenhyphen3x2tUeuBWdwLwHO9Ti-Q9OyDLzsyyz2U6RVvaazylTo7SaPA9sX2xy4SDvtwDOyUalo7EzCdII/s1600/blogbakkali.png);background-repeat:no-repeat;position:relative}
#umpanikan{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#umpanikan-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#umpanikan:hover > #umpanikan-bubble,#umpanikan:hover > #umpanikan-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#umpanikan-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99}
</style>
<!--http://www.programustasi.com-->
<!--PROGRAM USTASI-->
6. </body> kodunu
bulun. Yine üstüne aşağıdaki kodları ekleyin.
<!--PROGRAM USTASI-->
<!--http://www.programustasi.com-->
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#umpanikan").css("top","0"):n("#umpanikan").css("top",o-700+"px")}),n("#umpanikan").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#umpanikanTOP").offset().top},"slow")})});
//]]>
</script>
<!--http://www.programustasi.com-->
<!--PROGRAM USTASI-->
7. <body> kodunu
bul ve altına aşağıdaki kodları kopyala ve yapıştır.
<!--PROGRAM USTASI-->
<!--http://www.programustasi.com-->
<div id="umpanikanTOP">
</div>
<div class="umpanikan" id="umpanikan">
<div id="umpanikan-bubble">
Anaam köpek balığı! Çek yukarıı çeeek.</div>
</div>
<!--http://www.programustasi.com-->
<!--PROGRAM USTASI-->
Yorumlar