Gadget flutuante na lateral do Blogger

Pouco tempo atrás um mostrei aqui no Espaço Blog como colocar Widget flutuante na lateral do WordPress e agora venho mostrar como fazer isso para quem usa o Blogger.

Esse gadget flutuante nos permite colocar alguma coisa na lateral do blog e conforme o usuário vai descendo na página, esse gadget que normalmente ficaria parado em seu lugar na parte de cima do blog, vai seguir o usuário descendo também, ficando sempre visível na tela para o visitante.

Vale lembrar que você não pode fazer isso em anúncios do Google AdSense já que é contra os regulamentos do programa. Faça em box para Facebook, Twitter, caixa para se increver e receber atualizações por e-mail.

Índice

1 Gadget flutuante no Blogger
2 Widget flutuante para WordPress

Gadget flutuante no Blogger

Atenção: É proibido usar isso com os anúncios do Google AdSense.

1º Passo: Entre no painel do seu Blogger e clique em “Modelo” e depois “Editar HTML“:

2º Passo: Clique “levemente” sobre o código do seu template para pesquisar dentro do código e não usando a pesquisa do navegador.

Aperte CTRL + F e pesquise por:

</head>

3º Passo: E logo acima desse código copie e cole esse outro código:

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>

Veja no exemplo abaixo como deve fazer:

Feito isso clique em “Salvar modelo“.

4º Passo: Agora copie o código abaixo e coloque em um gadget no seu blog substituindo apenas o final do código destacado em amarelo onde está “SEU CÓDIGO AQUI” pelo código do seu gadget.

100

101

102

103

104

105

106

107

108

109

110

//<![CDATA[

(function($) {

var defaults = {

topSpacing: 0,

bottomSpacing: 0,

className: 'is-sticky',

wrapperClassName: 'sticky-wrapper'

$window = $(window),

$document = $(document),

sticked = [],

windowHeight = $window.height(),

scroller = function() {

var scrollTop = $window.scrollTop(),

documentHeight = $document.height(),

dwh = documentHeight - windowHeight,

extra = (scrollTop > dwh) ? dwh - scrollTop : 0;

for (var i = 0; i < sticked.length; i++) {

var s = sticked[i],

elementTop = s.stickyWrapper.offset().top,

etse = elementTop - s.topSpacing - extra;

if (scrollTop <= etse) {

if (s.currentTop !== null) {

s.stickyElement

.css('position', '')

.css('top', '')

.removeClass(s.className);

s.stickyElement.parent().removeClass(s.className);

s.currentTop = null;

}

else {

var newTop = documentHeight - s.stickyElement.outerHeight()

- s.topSpacing - s.bottomSpacing - scrollTop - extra;

if (newTop < 0) {

newTop = newTop + s.topSpacing;

} else {

newTop = s.topSpacing;

}

if (s.currentTop != newTop) {

s.stickyElement

.css('position', 'fixed')

.css('top', newTop)

.addClass(s.className);

s.stickyElement.parent().addClass(s.className);

s.currentTop = newTop;

}

resizer = function() {

windowHeight = $window.height();

methods = {

init: function(options) {

var o = $.extend(defaults, options);

return this.each(function() {

var stickyElement = $(this);

stickyId = stickyElement.attr('id');

wrapper = $('<div></div>')

.attr('id', stickyId + '-sticky-wrapper')

.addClass(o.wrapperClassName);

stickyElement.wrapAll(wrapper);

var stickyWrapper = stickyElement.parent();

stickyWrapper.css('height', stickyElement.outerHeight());

sticked.push({

topSpacing: o.topSpacing,

bottomSpacing: o.bottomSpacing,

stickyElement: stickyElement,

currentTop: null,

stickyWrapper: stickyWrapper,

className: o.className

});

update: scroller

};

if (window.addEventListener) {

window.addEventListener('scroll', scroller, false);

window.addEventListener('resize', resizer, false);

} else if (window.attachEvent) {

window.attachEvent('onscroll', scroller);

window.attachEvent('onresize', resizer);

}

$.fn.sticky = function(method) {

if (methods[method]) {

return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

} else if (typeof method === 'object' || !method ) {

return methods.init.apply( this, arguments );

} else {

$.error('Method ' + method + ' does not exist on jQuery.sticky');

}

};

$(function() {

setTimeout(scroller, 0);

});

})(jQuery);

//]]>

</script>

$(document).ready(function(){

$("#rbtSocialFloat").sticky({topSpacing:0});

$("#topside_box").sticky({topSpacing:6});

});

</script>

SEU CÓDIGO AQUI

</div></div></div>

Não sabe como adicionar um gadget no Blogger? Clique no botão abaixo par aprender:

Como adicionar Gadget no Blogger

Widget flutuante para WordPress

Para fazer ter um widget flutuante no WordPress fiz um outro tutorial.

Widget flutuante no WordPress