Templates e Acessórios

21 Maio 2012

Combo para modificar o layout de seu blog com facilidade

. Templates Acessorios postou as | 15:41

Será essa a aparência do blog.

Que tal modificar totalmente o layout de seu blog através do HTML/Javascript do seu blog ? Bem facinho e te permite fazer várias combinações.

Salve. Agora clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias, caso prefira colocar outras imagens para personalizar seu blog. Se não quiser retirar a barra, apague o código que está na cor vermelha.

20 Maio 2012

Widgets com efeito accordion

. Templates Acessorios postou as | 20:30

DEMO

Para quem economizar espaço no blog, que tal este efeito accordion em TODOS os widgets do Blogger ?

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>

Depois dele cole o seguinte código:

Salve.

Se quiser mudar a aparência de seus widgets, veja a explicação aqui, aqui, aqui ou aqui.

Os babacas da internet

. Templates Acessorios postou as | 19:40

Babaca detect

Não sei quanto ao blog de vocês mas por aqui sempre aparecem babacas para comentar. Eu não sei se é inveja, se falta de caráter, se é apenas frustração pela falta de capacidade de aprendizado mas sei que vira e mexe meu blog é alvo de comentários como este abaixo.

Sempre denuncio estes tipos de comentários como spam, deleto e deixo pra lá, mas resolvi mostrar para vocês como é a alma podre de algumas pessoas que se intitulam como "jovens sonhadores de paz e alegria e que tem Jesus como seu herói".

Vem cá, Jesus não pregava o desapego, a fraternidade e a humildade, tendo inclusive ensinado a dar a outra face ? Acho que seu herói é outro...

Fico me perguntando se o Deus e o Jesus dele acharia bacana esse tipo de comportamento destrutivo, odiento e sem educação. Para quem abre um blog para ensinar o próximo a arte de fotografar fico me perguntando se realmente ele é assim tão generoso. O que você acha ?

11 Maio 2012

Menu social na lateral do Blogger com efeito J.query

. Templates Acessorios postou as | 11:30

DEMO

Este é um menu com alguns efeitos interessantes. A começar que, os botões das páginas ficam escondidos, sendo mostrados a medida em que se passa o mouse. Há um tooltip que é mostrado assim que se pausa o mouse sobre os botões.

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>

Substitua então pelo código abaixo:

]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
<script type='text/javascript'>/*<![CDATA[*/

function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);

// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Carregando...</div>').appendTo(wrapper);

// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;

// Counts number of images that are succesfully loaded
images.each(function(){
if (this.complete) completed++;
});

if (completed == images.length){
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){

loading.hide();
// Remove scrollbars
wrapper.css({overflow: 'hidden'});

scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);

function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 99;
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Using outer height to include padding too
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();

// Create a invisible tooltip
var tooltip = $('<div class="sc_menu_tooltip"></div>')
.css('opacity', 0)
.appendTo(wrapper);

// Save menu titles
scrollable.find('a').each(function(){
$(this).data('tooltipText', this.title);
});

// Remove default tooltip
scrollable.find('a').removeAttr('title');
// Remove default tooltip in IE
scrollable.find('img').removeAttr('alt');

var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;

var wrapperOffset = wrapper.offset();

var tooltipLeft = e.pageX - wrapperOffset.left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());

var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
// Move tooltip under the mouse when we are in the higher part of the menu
if (e.pageY - wrapperOffset.top < wrapperHeight/2){
tooltipTop += 80;
}
tooltip.css({top: tooltipTop, left: tooltipLeft});

// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});

// Setting interval helps solving perfomance problems in IE
var interval = setInterval(function(){
if (!lastTarget) return;

var currentText = tooltip.text();

if (lastTarget.nodeName == 'IMG'){
// We've attached data to a link, not image
var newText = $(lastTarget).parent().data('tooltipText');

// Show tooltip with the new text
if (currentText != newText) {
tooltip
.stop(true)
.css('opacity', 0)
.text(newText)
.animate({opacity: 1}, 1000);
}
}
}, 200);

// Hide tooltip when leaving menu
wrapper.mouseleave(function(){
lastTarget = false;
tooltip.stop(true).css('opacity', 0).text('');
});

/*
//Usage of hover event resulted in performance problems
scrollable.find('a').hover(function(){
tooltip
.stop()
.css('opacity', 0)
.text($(this).data('tooltipText'))
.animate({opacity: 1}, 1000);

}, function(){
tooltip
.stop()
.animate({opacity: 0}, 300);
});
*/
}
}

$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]>*/</script>

Salve. Agora clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.