Blogger Yukarı Çık Butonu Eklentisi Kurulumu | E L M A

Blogger Yukarı Çık Butonu Eklentisi Kurulumu

Blogger Yukarı Çık Butonu Eklentisi

Blogger Yukarı Çık Butonu Eklentisini nasıl ekleyebileceğiniz konusunda ve şık tasarıma sahip eklentiyi sizde kolay bir şekilde blogunuza uygulayabilirsiniz.

Blogger Yukarı Çık Butonu Eklentisi blog ziyaretçilerinizin basit tek bir tıkla ve kolaylıkla sayfanın başına dönmesine yardımcı olacak bu eklenti sayesinde ziyaretçilerinize sayfa gezinmeleri ve sayfada kalma sürelerine olumlu katkı sağlayabilecek kullanışlı bir eklentidir.

Bu eklenti bir çok blogger temasında bulunmaktadır. Ancak sizde mevcut Yukarı Çık Butonundan memnun değil veya görünümü değiştirmek istiyor iseniz bu eklentiyi kullanabilirsiniz.

Bu blogger eklentisini 2 kolay adımla kurabilirsiniz.

Blogger Yukarı Çık Butonu Eklentisi Ekleme

Bloğunuza kolay bir şekilde ekleyebileceğiniz bu eklentiyi kurmak için Bloğunuzun temalar bölümüne gidin HTML düzenle bölümüne tıklayın. Açılan Bölümde </head>  hemen üstüne aşağıdaki kodları ekleyin.

Bu kodlar eklentinin ccs kodlarıdır. Görsel görünümü etkilemektedir.

 <style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>


İkinci ve son adımda ise başa dön eklentisinin kodlarını </body> bulmak ve </body> hemen üstüne aşağıdaki kodu ekleyin. Ctrl+F kombinasyonunu kullanarak veya temanızın kodlarının en altına inerek uygun alanı bulabilirsiniz.

<div class='backtotop hide'><svg viewBox='0 0 24 24'>
<path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>


Temayı kaydettikten sonra Blogger yukarı çık butonu eklentisini başarı ile kurmuş olacaksınız. Biraz CSS ve HTML bilginiz var ise başa dön eklentisini temanıza uygun bir şekilde rengini, boyutunu ayarlamanız mümkündür.

Yorum Gönder

Daha yeniDaha eski