16 Mayıs 2017 Salı

Blogger Yukarı Çık Eklentisi

Etiketler

Her blog da olması gereken eklentilerden olan “Yukarı Çık” butonu eklentisi, blog okuyucularının fazlasıyla işine yaramakta. Bir blog yazısının en az 250 kelimeden oluştuğunu baz alırsak blogunuzu mobilden veya tabletten ziyaret edenler için bu eklenti blogunuza oldukça faydalı olacaktır. Blogunuzda yaptığınız her yardımcı eklenti, okurlarınız için kolaylık sağlamakta.

Blogger Yukarı Çık Eklentisi

Yukarı çık eklentisini alttaki kodlar ile blogunuza kolay bir şekilde uygulayabilirsiniz.
Oldukça şık bir görünüme sahip olan eklentiyi bende bugün bloguma yükledim. Demo olarak biraz aşağı inip sitenin sağ tarafında görebilirsiniz.

Eklentiyi bloguma nasıl uygulayacağım?

İlk olarak kumanda panelinden, tema’ya tıklıyoruz, ardından HTML’yi Düzenle’ye tıklıyoruz. Kodlar çıkacak, CTRL+F yardımı ile </head> kodunu aratıyoruz. Aşağıda ki kodu </head> kodunun bir satır üstüne yapıştırıyoruz.

Eğer bu kodu daha önce blogunuza eklendiyseniz, tekrar eklemenize gerek yoktur.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"></link>

Şimdi sıra CSS kodlarını eklemeye geldi. Yine CTRL+F yaparak bu sefer ]]></b:skin> yada </style>  kodunu aratıyoruz ve yine bir satır üzerine gelecek şekilde aşağıda ki kodları yapıştırıyoruz.
.bescroll-top{position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background:#f58220;color:#fff;width:47px;height:44px;line-height:44px;right:25px;bottom:-25px;padding-top:3px;border-radius:4px;transition:all 0.5s ease-in-out;transition-delay:0.2s}.bescroll-top:hover{background:#e76120;color:#fff;transition:all 0.2s ease-in-out;transition-delay:0s}.bescroll-top.show{visibility:visible;cursor:pointer;opacity:1;bottom:25px}.bescroll-top i.fa{line-height:inherit}

Şimdi son adıma geldik. Yapacağımız işlem bu sefer CTRL+F ile </body> kodunu bulmak ve bulduktan sonra hemen bir satır üzerine aşağıdaki kodları yapıştırarak, şablonu kaydetmek.
<div class="bescroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> <script type='text/javascript'> //<![CDATA[ $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.bescroll-top').addClass('show'); } else { $('.bescroll-top').removeClass('show'); } }); $('.bescroll-top').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear'); } //]]> </script>

Bu yazı hakkında Hiç yorum yok