Blogger Balık Oltası Şeklinde Sayfa Başına Çıkma Kodu/Eklentisi
Blogger Balık Oltası Şeklinde Sayfa Başına Çıkma Kodu/Eklentisi
Merhaba arkadaşlar Blogger sitemiz için balık oltası şeklinde sayfa başına çıkma kodlarını paylaşacığım kodları ve anlatımı aşağıda bulabilirsiniz.
1- Öncelikle Blogger panelimizden Tema kısmına gelip oradan da Html'i düzenleme bölümüne geliyoruz. Sonra CTRL+F tuş kombinasyonu ile sayfada kod bulma bölümüne erişiyoruz.
2- ]]></b:skin> kodumuzu bulup bir satır üzerine aşağıda ki kodumuzu yapıştırıyoruz.
/* Aksoyhlc.net Sayfa Baışna Çıkma Kodu */
.aksoyhlcbtn {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLSe02AVXFgwTn9BGV6lbEtZ4Xrv20VJ24thWhFHaQFLHCnd61VI03sLD9VdzWS3DrsyGy0c5HjW7Seu0M3pX4fmJxz2QukGFqiVr5eXDjuGPVADGQUkWimd3RaehWfQOcPyeDdAXCZo/s640/aksoyhlcsayfabasi.png);
background-repeat: no-repeat;
position: relative
}
#aksoyhlcbtn {
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
}
#aksoyhlcbtn-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
}
#aksoyhlcbtn:hover>#aksoyhlcbtn-bubble,
#aksoyhlcbtn:hover>#aksoyhlcbtn-bubble:after {
opacity: 1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
visibility: visible
}
#aksoyhlcbtn-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
}
3- Sonra temamızda </body> etiketini bulup (genelde sayfanın sonunda olur) bir satır üzerine aşağıda ki kodumuzu ekliyoruz.
< script type = 'text/javascript' >
jQuery(document).ready(function(n) {
n(window).on("scroll", !1, function() {
var o = n(window).scrollTop();
o > 700 ? n("#aksoyhlcbtn").css("top", "0") : n("#aksoyhlcbtn").css("top", o - 700 + "px")
}), n("#aksoyhlcbtn").unbind("click").click(function() {
n("html,body").animate({
scrollTop: n("#aksoyhlcbtnTOP").offset().top
}, "slow")
})
}); <
/script>
4- Sonra <body> etiketini bulup bir satır altına aşağıda ki kodumuzu ekliyoruz.
<!--Aksoyhlc.net Sayfa Baışna Çıkma Kodu -->
<div id="aksoyhlcbtnTOP"></div>
<div class="aksoyhlcbtn" id="aksoyhlcbtn">
<div id="aksoyhlcbtn-bubble">Beni hemen sayfanın başına götür.</div>
</div>
Evet her şey tamam şimdi tek yapmanız gereken temanızı kayıt edip sitenizi kontrol etmek herhangi bir sorunla karşılaşırsanız yorum yapabilirsiniz.
Yorumlar
Yorum Gönder