Blogger siteleri için WordPress üç temel eklentilerinden olan, çok basit ve blog siteleri için hafif olan scroll tot top eklentisini blogunuzda kullanabilirsiniz. Bu eklenti modern bir görünüme sahip olup, Google Material'den yararlanarak tasarlanmıştır. Blogunuzda yukarı çık (başa dön) kaydırma butonu ile blogunuzu ziyaret eden kullanıcıların blogunuzda her hangi bir yazı okuması esnasında tarayıcı kaydırma çubuğunu kullanması durumunda, sayfada bulunan yazının ne kadar süre içerisinde okunabileceğini gösteren okuma zaman göstergesi ekranın sol tarafında görünecektir. Şuan bu eklentinin WordPress sitelerinde yeni kullanılmaya başlaması ve ziyaretçiler tarafından memnun kalınması nedeni ile bu eklentiyi blogger steleri için de tasarladık. Fonksiyonel bir kullanıma sahip olan bir çok özelliği ile ziyaretçilere kolaylık sağlamaktadır. Tüm blogculara bu eklentiyi bloglarına eklemelerini tavsiye ediyorum.
Özellikler;
- Blog sayfalarında bulunan yazıların okunma süresini ve okumanın yani yazının bittiğini belirten foksiyon.
- Müthiş başa dön kaydırma butonu.
- Müthiş tarayıcı kaydırma çubuğu.
- Son derece özelleştirilebilir özellik.
- Goole Material ile blogger tasarımı.
- Kolay kurulum.
- Kullanıcı dostu ve çok güzel panel seçenekleri.
- Temiz kodlama.
Kurulum;
1. Blogger hesabınıza giriş yapın ve blogunuzun kullanıcı panelinde bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodlarını sayfasını açın.2. Açılan sayfada CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin.
<style type="text/css">
.blogger-scrolltop {
display: block;
position: fixed;
width: 0;
height: 0;
bottom: 23px;
right: 23px;
padding: 0;
overflow: hidden;
outline: none;
border: none;
border-radius: 2px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
cursor: hand;
border-radius: 50%;
background:#FFC107;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
-ms-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
-moz-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
-o-transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
}
.blogger-scrolltop:hover {
background-color:#FFC107;
text-decoration: none;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 3px 15px rgba(0, 0, 0, 0.5);
}
.blogger-scrolltop::before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
content: "";
width: 0;
border-radius: 100%;
background:#FF9800;
}
.blogger-scrolltop:active::before {
width: 120%;
padding-top: 120%;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.blogger-scrolltop.reveal {
width: 56px;
height: 56px;
cursor:pointer;
}
.blogger-scrolltop span {
display: block;
font-size: 25px;
color: #fff;
}
.blogger-scrolltop,
.blogger-scrolltop::before {
background-image: url(https://cdn.rawgit.com/jquerycods/swp/master/top-arrow.svg);
background-position: center 50%;
background-repeat: no-repeat;
}
.blogger-scrolltop:hover {
background-color:#ff5722;
}
.blogger-scrolltop {
background:#f44336;
}
.kalanOkumaSure {
background:#f44336;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
color: #ffffff;
}
.blogger-scrolltop {
bottom: 100px;
right: 100px;
}
.{
display: none !important;
}
.kalanOkumaSure {
position: fixed;
font-weight: bold;
font-size: 13px;
border-radius: 3px;
left: 40px;
bottom: 40px;
width: 95px;
height: 38px;
line-height: 38px;
text-align: center;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: normal;
background: rgba(0, 0, 0, 0.4);
color: white;
z-index: 9999;
opacity: 1;
-webkit-transition: opacity 0.45s ease;
-moz-transition: opacity 0.45s ease;
-o-transition: opacity 0.45s ease;
transition: opacity 0.45s ease;
}
.kalanOkumaSure.hidden {
opacity: 0;
-moz-transition-property: none;
-webkit-transition-property: none;
-o-transition-property: none;
transition-property: none;
}
</style>3. Yine CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki javaScript kodlarını </body> kodunun bir satır üzerine ekleyin.
<script>
(function( $ ) {
$( document ).ready(function() {
$('body').bloggerScrollTop();
});
})( jQuery );
//<![CDATA[
(function($) {
function bScrollTop(element, settings) {
var _ = this,
breakpoint;
var scrollTo = 0;
_.btnClass = '.blogger-scrolltop';
_.revealClass = 'reveal';
_.btnElement = $(_.btnClass);
_.initial = {
revealElement: 'body',
revealPosition: 'top',
padding: 0,
duration: 600,
easing: 'swing',
onScrollEnd: false
}
_.options = $.extend({}, _.initial, settings);
_.revealElement = $(_.options.revealElement);
breakpoint = _.options.revealPosition !== 'bottom' ? _.revealElement.offset().top : _.revealElement.offset().top + _.revealElement.height();
scrollTo = element.offsetTop + _.options.padding;
$(document).scroll(function() {
if (breakpoint < $(document).scrollTop()) {
_.btnElement.addClass(_.revealClass);
} else {
_.btnElement.removeClass(_.revealClass);
}
});
_.btnElement.click(function() {
var trigger = true;
$('html, body').animate({
scrollTop: scrollTo
}, _.options.duration, _.options.easing, function() {
if (trigger) {
trigger = false;
var callback = _.options.onScrollEnd;
if (typeof callback === "function") {
callback();
}
}
});
return false;
});
}
$.fn.bloggerScrollTop = function() {
var _ = this,
opt = arguments[0],
l = _.length,
i = 0;
if (typeof opt == 'object' || typeof opt == 'undefined') {
_[i].bloggerScrollTop = new bScrollTop(_[i], opt);
}
return _;
};
}(jQuery));
//]]>
</script>
<b:if cond='data:blog.pageType != "index"'>
<script src='https://cdn.rawgit.com/jquerycods/swp/master/nscroll.js'/>
<script src='https://cdn.rawgit.com/jquerycods/swp/master/okuma.js'/>
<script>
(function( $ ) {
$( document ).ready(function() {
$('body').kalanOkuma();
});
})( jQuery );
</script>
<script type='text/javascript'>
(function( $ ) {
$(document).ready(function(){
$("html").niceScroll({
cursorcolor: "#f44336",
cursorwidth: "10px",
cursorborderradius: "0px",
cursorborder: "0px solid #fff",
scrollspeed: "50",
autohidemode: false,
touchbehavior: false,
bouncescroll: true,
horizrailenabled: false,
});
});
})( jQuery );
</script>
</b:if>
4. Aşağıdaki HTML kodu yukarıdaki javaScript kodunun bir satır üzerine ekleyin ve şablonu kaydedin.
<button class='blogger-scrolltop' type='button'>
<span>↑</span>
</button>
Etiketler: Blogger Scroll Top, Blogger Okuma Zaman Göstergesi, Blogger Tarayıcı Scroll Tasarım
Yorum Gönder