Dicas para Blogs e Sites

Veja como adicionar um gadget flutuante o seu blog assim esse gadget ficará sempre visível mesmo quando os visitantes usarem a barra de rolagem esse gadget vai deslizar pela sidebar da mesma forma que o widget de botões flutuantes de rede sociais que já mostramos anteriormente. Esse tipo de widget que desliza pela pagina pode atrair a atenção dos seus visitantes e ajudá-lo a divulgar algo que você ache importante no seu blog como, por exemplo, sua pagina de fãs no Facebook ou seus artigos recomendados.


Para colocar o gadget flutuante na barra lateral do blog entre na pagina modelo, faça um backup do seu template, use o crtl F para achar o HTML: </head>, cole esse código antes dele e clique para salvar:

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

Depois entre na pagina layout > Adicionar gadget > html/javascript e cole esse código:

<script type="text/javascript">
(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>
<script>
$(document).ready(function(){
$("#rbtSocialFloat").sticky({topSpacing:0});
$("#topside_box").sticky({topSpacing:6});
});
</script>
<div class="sticky-wrapper" id="topside_box-sticky-wrapper" style="text-align:center;"><div id="topside_box-sticky-wrapper" class="sticky-wrapper"><div id="topside_box">
Código HTML
</div></div></div>

Aqui neste trecho final onde está escrito: Código HTML você deve trocar pelo código HTML que desejar ,por exemplo, como falamos no inicio do post pode ser a caixa de fãs do Facebook ou seus artigos recomendados, mas esse não é o gadget de posts populares, estamos falando do código do Addthis para mostrar suas postagens mais compartilhadas porque como já falamos esse código funciona somente para gadgets de HTML.

Cuidados ao Usar Gadget Flutuante no Blog

Não utilize esse código com anúncios do Google Adsense porque isso viola as regras dos anúncios. Como as Regras do Google Adsense explicam é inaceitável colocar anúncios do Google em uma "caixa flutuante" na qual os anúncios podem percorrer, se movimentar ou ser expandidos na página da web.

Sempre posicione esse gadget flutuante no final da sua barra lateral (sidebar) senão quando rolar a pagina do seu blog ele vai sobrepor ou ficar por baixo dos outros gadgets que estão abaixo dele durante a rolagem da pagina.

Veja também:
Gadget com Botões Flutuantes de Redes Sociais no Blogger
Criar e Colocar Barra de Notificação/Divulgação no Blog

Para terminar queremos agradecer o comentário feito por Aguinaldo Paladino aqui no Dicas para Blogs que nos levou a pesquisar e testar esse código.

Marcadores: Códigos, Gadgets, Scripts