A sidebar (ou barra lateral, em português) do nosso blog é um excelente local para colocar publicidade para os nossos visitantes. Um Widget/Gadget que tem tido bastante sucesso entre os blogueiros, devido aos seus excelentes resultados, é o Widget ou Gadget flutuante na sidebar do seu blog. O “papel” desse widget é fazer com que o banner apresentado no blog acompanhe os seus leitores na altura que eles correm a página para cima ou para baixo, assim estará sempre visível no seu blog e aumentará a taxa de cliques nos seus anúncios.
Atenção: Não é permitido o uso deste tipo de anúncios com o Google Adsense caso contrário corre o risco da sua conta ser banida.
Garanto que com este widget flutuante vai obter uma taxa de cliques muito mais elevada do que num anúncio fixo, o que lhe vai ajudar a ganhar mais dinheiro com os anúncios/aumentar as suas curtidas e/ou partilhas nas redes sociais.
Implementação no WordPress
Para implementar este Gadget/Widget no WordPress apenas terás de instalar um plugin e este fará o resto por ti. O nome do plugin é jQuery Image Lazy Load WP e podes fazer o download do mesmo através do site WordPress.org, a partir do Widgets Blogger.
Implementação no Blogger
Quanto ao Blogger a implementação já é um pouco diferente, mas não é nada de complicado. Em primeiro lugar terás de acessar ao código HTML/JavaScript do template e procurar pela tag “</head>” e mesmo antes dela colar o seguinte código:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
Caso o teu blog já tenha esse código inserido podes ignorar o passo anterior, escusas de colocar duas vezes o mesmo código no blog.
O último passo é adicionar uma caixa HTML/JavaScript no blog e no seu conteúdo cole o seguinte código, alterando os campos a vermelho antes de salvar:
<script type=”text/javascript”>
//<![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>
<script>
$(document).ready(function(){
$(“#rbtSocialFloat”).sticky({topSpacing:0});
$(“#topside_box”).sticky({topSpacing:6});
});
</script>
<div class=”sticky-wrapper” id=”topside_box-sticky-wrapper” style=”height: 222px;text-align:center;”><div id=”topside_box-sticky-wrapper” class=”sticky-wrapper” style=”height: 112px;”><div class=”” id=”topside_box” style=””>
Cola AQUI o código do teu Gadget
</div></div></div>
Depois do campo a vermelho estar substituído pelo código do teu widget ou gadget a inserir, apenas tem de salvar e verificar o resultado!
Espero que tenha ajudado e que a implementação tenha corrido como esperado, mas caso tenham dúvidas na implementação façam a vossa pergunta ou sugestão na secção de comentários abaixo, abraço!
