Templates e Acessórios

Postagens Recentes

18 de jun. de 2012

Menu social com efeito hover

DEMO

Menu social com efeito hover para colocar ao final dos posts, com vários botões de várias páginas de indexação e divulgação.

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>

Acima dele, cole o código abaixo:

/*Sociais--------------------------------------------------------------------*/
#templeacesso-sociais { clear: both;padding: 2px 0px 20px 0;}
#templeacesso-sociais ul {list-style: none;clear: none;padding: 0px 0px ;margin: 45px 0;}
#templeacesso-sociais ul li {display: inline;background:none;margin:0;padding:0;}
#templeacesso-sociais ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPY8UYGy6Pl3QjItlUJtZYXEH3-Iq_Xv-Efc74xv4ru9exP6DhvI49ix1Srg6b8Gt4WYnr7zwufClxGGCtfrWuYxZppclZQF1dQ_u0UhL7uSRLWlxZCoksKNgF8DkcU2iVrzGYAVBnSajL/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#templeacesso-sociais ul li a.twitter {background-position: -0px -0px; }
#templeacesso-sociais ul li a.twitter:hover {background-position: -0px -33px; }
#templeacesso-sociais ul li a.facebook {background-position: -32px -0px; }
#templeacesso-sociais ul li a.facebook:hover {background-position: -32px -33px; }
#templeacesso-sociais ul li a.stumbleupon {background-position: -64px -0px; }
#templeacesso-sociais ul li a.stumbleupon:hover{background-position: -64px -33px; }
#templeacesso-sociais ul li a.digg {background-position: -192px -0px; }
#templeacesso-sociais ul li a.digg:hover {background-position: -192px -33px;}
#templeacesso-sociais ul li a.reddit {background-position: -160px -0px; }
#templeacesso-sociais ul li a.reddit:hover {background-position: -160px -33px;}
#templeacesso-sociais ul li a.google {background-position: -128px -0px; }
#templeacesso-sociais ul li a.google:hover {background-position: -128px -33px;}
#templeacesso-sociais ul li a.del-icio-us {background-position: -480px -0px; }
#templeacesso-sociais ul li a.del-icio-us:hover{background-position: -480px -33px;}
#templeacesso-sociais ul li a.mixx {background-position: -96px -0px; }
#templeacesso-sociais ul li a.mixx:hover {background-position: -96px -33px; }
#templeacesso-sociais ul li a.technorati {background-position: -416px -0px; }
#templeacesso-sociais ul li a.technorati:hover {background-position: -416px -33px;}
#templeacesso-sociais ul li a.linkin {background-position: -256px -0px; }
#templeacesso-sociais ul li a.linkin:hover {background-position: -256px -33px;}
#templeacesso-sociais ul li a.yahoobuzz {background-position: -448px -0px; }
#templeacesso-sociais ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#templeacesso-sociais ul li a.myspace {background-position: -512px -0px; }
#templeacesso-sociais ul li a.myspace:hover {background-position: -512px -33px;}
#templeacesso-sociais ul li a.more {background-position: -576px -0px; }
#templeacesso-sociais ul li a.more:hover {background-position: -576px -33px;}

Salve !

Clique em "Expandir modelos de widgets"

Procure por:

<div class='post-footer-line post-footer-line-2'>

Cole então o próximo código depois dele. Salve e já está.

<b:if cond='data:blog.pageType == "item"'>
<div id='templeacesso-sociais'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Divulgue este post em twitter'/></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Facebook'/></li>
<li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Stunbleupon'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Digg'/></li>
<li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post em Reddit'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Salve este post no Google'/></li>
<li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Delicious'/></li>
<li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Divulgue este post no Mixx'/></li>
<li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Favorite no Technorati'/></li>
<li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Divulgue este post em Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Myspace'/></li>
<li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if><div style='clear:both;'/>

»»Leia mais...

16 de jun. de 2012

Combo: modificar a header e o menu de páginas do novo Blogger

. Elke di Barros | 00:30 7 comentários:

DEMO

"Vambora" modificar a header de seu blog ? Colocar um menu social, buscador, feed de comentários e posts e costumizar o menu de páginas do Blogger ?

Para dar estilo à header do Blogger, é necessário antes, dividir a header do Blogger, colocando ali um novo widget. Para isso, siga primeiro essa dica. Depois volte aqui e siga o resto da tutorial...

Ao abrir, cole então o próximo código fazendo as modificações necessárias para linkar suas páginas sociais.

»»Leia mais...

15 de jun. de 2012

Dando estilo aos marcadores com efeito hover

. Elke di Barros | 22:26 8 comentários:

DEMO

Ontem, no Facebook, recebi do Dudu Srfstinha a dica dos marcadores com efeito hover que está instalado em seu blog, o TPSO. Dei umas modificadinhas e trago a dica para vocês e os meus agradecimentos ao Dudu.

Vá até o 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.

Se você não conseguiu, faça o seguint: exclua o widget de marcadores de seu blog e depois reinstale o widget.

»»Leia mais...

21 de mai. de 2012

Combo para modificar o layout de seu blog com facilidade

. Elke di Barros | 15:41 5 comentários:

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.

»»Leia mais...

20 de mai. de 2012

Widgets com efeito accordion

. Elke di Barros | 20:30 Nenhum comentário:

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.

»»Leia mais...

Os babacas da internet

. Elke di Barros | 19:40 10 comentários:

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 ?

»»Leia mais...

11 de mai. de 2012

Menu social na lateral do Blogger com efeito J.query

. Elke di Barros | 11:30 2 comentários:

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.