Blogger Roket Görünümlü Sayfa Yukarı Git Eklentisi

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...

...

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 → guneynetworkmarketing

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.

Eklenti kodları:

Roket Görünümlü Sayfa Yukarı Git Eklentisi, Kaspersky Total Security ile taranmış olup, Güvenliği tehdit eden hiçbir bulguya sahip olmadığı tesbit edilmiştir.

 <div class="scroll-top"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxLq5y6eIA4XUj-XsN6I97E6doC-VG2-IFBHL40TGt8zl8nwtS0AtzjqIo_8IZfdcY6ExVtuqQi-3dIpREGOkpJvLQw32ojEQLEoOeGVk91CSFAhUTrIoaAzJA7TxQFK0iQneDmyKrevBG/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> )

Bulduğunuz bu etiketin hemen altına aşağıdaki JQuery  linkini kopyalayıp yapıştırın ve şablonunuzu kaydedin.

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.

Not: Blogger yeni temaların bazılarında eklenti çalışmayabilir. Güncelleme: 25.07.2019