Blog ana sayfanızda yazı bağlantı linkine tıklayıp yazınızı okumak isteyen okuyucularınızın Sayfa başına hızlı gitmesini sağlayan Roket Görünümlü Sayfa Yukarı Git Eklentisi.
Yukarı çık, Sayfa başına git, eklenti kodlarını blog’un, Html JavaScript gadget’ine ekleyerek hemen kullanmaya başlayabilir, Blogger’un gadget eklentilerini kullanarak blog temanızı geniş bir yelpazede tasarlayabilirsiniz.
Canlı incele → bloggeradnanguney.blogspot.com
Eklentinin çalışma biçimi:
Roket görünümlü sayfa yukarı git eklentisi, okuyucunuzun herhangi bir yazıya tıklayıp okumak için açtığında ve aşağıya doğru kaydırdığında sağ tarafta roket görselinden oluşmaktadır. Roket görselindeki resme tıklandığında roketten alev çıkarak hızla sayfa başına gitmektedir. Animasyonlu roket eklentisini kesinlikle severek ve kullanacaksınız.
Eklentinin kurulumu oldukça basit adımlardan ibaret olup yönergeleri takip edebilirsiniz.
Yukarı Çık Sayfa Eklenti kurulumu:
→Her ihtimali göz önünde bulundurarak blog’unuzun bir yedeğini alın.→ Blogger kumanda paneline giriş yapın.
→ Sırası ile, Yerleşim → Gadget ekle → HTML/JavaScript gadget’ini açın.→ Aşağıdaki kodları kopyalayın ve gadget içine yapıştırıp kaydedin.
<div class=”scroll-top”><img src=”https://4.bp.blogspot.com/-erzBNhVCTE8/WahWkX_QAjI/AAAAAAAArVY/UZXpufa3nI4bnZqAR9ee-wSOVGbutkwTwCLcBGAs/s1600/roket.png” />
<span class=”flame”></span>
<span class=”flame”></span>
<span class=”flame”></span>
</div>
<style>
.scroll-top img{
height:45px;
margin: -12px 0 0 5px;
border:0;
}
.scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}@keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}}
</style>
<script type=”text/javascript”>
// Scroll to top button
wnHeight = jQuery(window).height();
//Check to see if the window is top if not then display button
jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() > wnHeight/2) {
jQuery(‘.scroll-top’).fadeIn();
} else {
jQuery(‘.scroll-top’).fadeOut().removeClass(‘scrolling’);
}
});
//Click event to scroll to top
jQuery(‘.scroll-top’).click(function(){
jQuery(‘html, body’).animate({scrollTop : 0},800);
jQuery(this).addClass(‘scrolling’);
});
</script>
Özel Not: Roket Görünümlü Sayfa Yukarı Git Eklentisinin çalışabilmesi için, JQuery kütüphanesinin kodlarının kullanılması gerekmektedir. JQuery kodları eklemek için aşağıdaki etiketi tema kodlarınızda aratıp bulun. CTRL + F Arama kısa yolu ile arama yapabilirsiniz. ( ]]></b:skin> )
JQuery linki:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
Şablon kodlarına eklenmiş JQuery link görselini inceleyin.
Blogger’un varsayılan ve Blogger özel temanızı özelleştirme konusunda sorun yaşıyorsanız Tema Tasarım kategorisindeki makaleleri inceleyerek sorunlarınızı çözebilirsiniz.
