Templates e Acessórios: Menu social na lateral do Blogger com efeito J.query

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.

2 comentários:

Unknown21 de maio de 2012 às 21:56
muito bom
ResponderExcluir
Respostas
Anônimo25 de julho de 2013 às 14:22
afff ta dando ero nessa porra
ResponderExcluir
Respostas

Adicionar comentário

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.

Templates e Acessórios

11 de mai. de 2012

Menu social na lateral do Blogger com efeito J.query

Posts Relacionados

2 comentários:

Quem Sou

Postagens populares

Posts aleatórios