Templates e Acessórios

Combo para modificar o layout de seu blog com facilidade

2012-05-21T15:41:00.002-03:00

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.

Widgets com efeito accordion

2012-05-20T20:30:00.000-03:00

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

2012-05-20T19:40:00.000-03:00

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 ?

Menu social na lateral do Blogger com efeito J.query

2012-05-11T11:30:00.002-03:00

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.

Menu social fixo na lateral no Blogger

2012-05-11T11:00:00.001-03:00

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 prefere que fique a direita troque o código em azul por right)

Menu social de alfinetes

2012-05-11T10:07:00.002-03:00

Facinho colocar este menu e linkar suas páginas sociais...

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.

Menu social jeans

2012-05-02T22:10:00.000-03:00

Mais um menu para linkar suas páginas sociais no Blogger.

Clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Botão para colocar o blog em forma dinâmica

2012-05-02T21:30:00.000-03:00

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: </body>

Substitua então pelo código abaixo:

Salve !

Se quiser, troque a imagem por uma de sua escolha. Pegue aqui.

Menu social de bandeirolas

2012-04-30T10:40:00.001-03:00

Tá aí, mais um modelo de menu social.

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.

Modelos de marcadores em forma de menu horizontal

2012-04-30T02:13:00.000-03:00

Continuando o post anterior, outros estilos para os marcadores em forma de menu horizontal pra quem tem blog com poucos marcadores, ou quer destacar os marcadores mais importantes do blog.

Já sabe ? A primeira coisa a fazer é deletar o widget de marcadores de seu blog. Vamos, delete-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

Procure por:

<div id='content-wrapper'>

Se não encontrar, procure por:

<div class='tabs-outer'>

Abaixo do código cole este trecho:

Salve !

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

E acima dele cole o código do modelo escolhido.

Modelo 1

/*Label------------------------------------------------------------------------------------------------*/
#Label1 {margin: 20px 5px;}
#Label1 h2 {display:none;}
#Label1 li {margin: 0 0 0 0px;display: inline;}

#Label1 li a:link {
font-size: 16px;
text-shadow: 1px 1px 1px #000;
background: #FDE8B5 url(http://4.bp.blogspot.com/-FHQ4SAFDMmc/T54Tz2ES4SI/AAAAAAAABQk/qhj0sanE5Eg/s1600/tag%25281%2529.png) no-repeat 5px;
display: inline block; border: 2px outset #FDE8B5;padding:8px 3px 8px 21px;color: #F6C252;line-height:1.15em;
}
#Label1 li a:hover, #Label1 li a:active {
text-shadow: 1px 1px 1px #fff;
background: #CAE4EC url(http://1.bp.blogspot.com/-ss2BJ07KRvA/T54T0CFkqUI/AAAAAAAABQs/rhH7InHzE1M/s1600/tag_add.png) no-repeat 5px; display: inline block; line-height:1.15em;border: 2px intset #CAE4EC;
padding:8px 3px 8px 21px; color: #344CDA;
}
#Label1 li a:visited {
background: #FAD4D4 url(http://2.bp.blogspot.com/-l-H7Ny_XOKI/T54T25ozyOI/AAAAAAAABQ8/5kKrr_4o_so/s1600/tag_remove.png) no-repeat 5px; display: inline block; line-height:1.15em;border: 2px outset #FAD4D4;
padding:8px 3px 8px 21px; color: #cc0000;
}

Modelo 2

/*Label------------------------------------------------------------------------------------------------*/
#Label1 {margin: 20px 5px;}
#Label1 h2 {display:none;}
#Label1 li {margin: 0 0 0 0px;display: inline;}

#Label1 li a:link {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}
#Label1 li a:hover, #Label1 li a:active {
text-shadow: 1px 1px 1px #000;
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #000 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #B8B6B6) );
background: -moz-linear-gradient( center top, white 20%, #B8B6B6 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}
#Label1 li a:visited {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #cc0000 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cc0000) );
background: -moz-linear-gradient( center top, white 20%, #cc0000 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}

Depois abra o widget e desmarque os números e escolha os marcadores

Marcadores em forma de menu horizontal

2012-04-30T00:56:00.000-03:00

Pra quem tem blog com poucos marcadores, ou quer destacar os marcadores mais importantes do blog, essa é uma dica bem legal. Colocar seus marcadores em forma de menu horizontal. Aí estão os códigos, para dois modelo diferentes. A primeira coisa a fazer é deletar o widget de marcadores de seu blog. Vamos, delete-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

Procure por:

<div id='content-wrapper'>

Se não encontrar, procure por:

<div class='tabs-outer'>

Abaixo do código cole este trecho:

Salve !

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

E acima dele cole o código do modelo escolhido.

Modelo 1

/*Menu marcadores------------------------------------------------------------*/
.marcadores-menu {
height: 38px;
background: #ccc;
border:1px solid #808080;
margin: 0 auto;
padding:0px;
text-shadow: 0 1px 0 #fff;
text-transform: none;
width: 100%;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #808080;
}

.marcadores-menu h2 {
display: none;
}

.marcadores-menu a {
color: #000;
}
.marcadores-menu li {
border-right: 1px solid #666;
color: #000;
float: left;
font: bold 11px Arial;
margin: 0 2px 0px 0;
padding: 10px 4px;
}
.marcadores-menu li a:hover{
color: #fff; text-shadow: 0 1px 0 #000;
}

.marcadores-menu ul {
float: left;
list-style: none outside none;
margin-bottom: 0;
margin-left: 10px;
padding: 0;
}

Modelo 2

/*Menu marcadores------------------------------------------------------------*/
.marcadores-menu { height: 30px; background: transparent; margin: 10px 8px;}
.marcadores-menu h2 { display: none; }
.marcadores-menu li a{ font: $(tabs.font);color: #fff;}
.marcadores-menu ul { display: inline-block; margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);}
.marcadores-menu li {
background: #ccc url(http://4.bp.blogspot.com/-2-JnKvJQm-0/TiB_LhLKDZI/AAAAAAAAFtA/o3cqG8fD6sI/s1600/tag.png) no-repeat 3px; margin: 2px 2px;
display: inline-block;
padding: 8px 20px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #808080;
}
.marcadores-menu li.selected a, .marcadores-menu li a:hover { color: #000; }
.marcadores-menu li a:visited{ color: #cc0000;margin: 2px 2px; display: inline;}

Depois abra o widget e desmarque os números e escolha os marcadores

Colocar no Blogger widget para seguir no Twitter

2012-04-27T21:30:00.001-03:00

Dê a seus leitores a oportunidade de te seguir no Twitter.

Vá até Layout

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o próximo código escrevendo seu nick do Twitter (sem o @)

<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 305px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("AQUI SEU NICK DO TWITTER");</script
type="text>

Ícones Blogger

2012-04-26T22:49:00.000-03:00

Os ícones desta página não foram feitos por mim. São frutos de pesquisa na internet.

Cursores animados Candied cutes

2012-04-26T17:02:00.000-03:00

Enfeitando mais o seu blog com cursores fofos.

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o código referente ao cursor desejado.

Lacinho rosa

Bastão coração

Bolo

Candied

Varinha

Balinha

Bolinho

Borboletinha

Balinhas

Moranguinho

Cursores animados grátis para o Blogger/Blogspot

2012-04-26T15:35:00.001-03:00

Enfeitando mais o seu blog com cursores fofos.

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.

Varinha

Morango

Coração

Blogger

Laço

Joaninha

Seta cinza

Seta preta

Estrela amarela

Estrela azul

Meme

Pedra preciosa

Caveira

Coração chat

Rosa

Seta laranja

Seta verde

Seta azul

Seta rosa

Cupcake

Cupcake 2

Agradecimentos: Blogspot Tutorial, Cantinho do blog

Imagens com zoom em efeito jquery

2012-04-26T13:30:00.000-03:00

DEMO

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

Procure por: </head>

Substitua então pelo código abaixo:

Salve.

Saiba agora que para o script funcionar em seu blog é necessário que as imagens estejam dentro de um código. Copie então o código e cole no editor de postagem, no modo HTML e depois insira no local indicado o endereço de sua imagem. SEMPRE que quiser usar este efeito, sua imagem deverá ser inserida dentro deste código.

Letras circulando em volta do mouse

2012-04-26T11:50:00.000-03:00

Mais um efeito para o cursor mouse de seu blog. Você pode escrever uma frase, o nome de seu blog, seu namorado, marido, peguete...

Passe o mouse

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.Código em vermelho representa a cor da sestrelas

Estrelas seguindo o cursor

2012-04-26T11:16:00.000-03:00

Mais um efeito fofinho para o cursor mouse de seu blog. Fácil de instalar e da um efeito bacana

Passe o mouse

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.Código em vermelho representa a cor da sestrelas

Cursor com bolhas

2012-04-26T00:30:00.003-03:00

Passe o cursor

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o código abaixo

Meta tags para cada post do novo Blogger

2012-04-25T23:44:00.001-03:00

Meta tags são esses pequenos resumos que aparecem nos buscadores

Sim, é possível colocar uma meta tag para cada post no novo Blogger. Mas o que é essa tal de meta tag por post no Blogger ?

É um pequeno resumo, ou palavras para ajudar a indexação do blog nos buscadores de pesquisa como Google, Yahoo, etc.

Para isso, basta escrever o texto no editor de postagem do Blogger , clicar em "Discrição de pesquisa". Ao abrir a janela, escreva as palavras mais relevantes de sua postagem, separadas por vírgula e clique em "Concluído".

Colocar menu social com efeito ao pé do post

2012-04-25T22:37:00.001-03:00

DEMO

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>

E acima dele cole o código abaixo

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

Salve

Agora clique em "Expandir modelos de widget"

Procure por:

<div class='post-footer'>

E abaixo dele cole o seguinte código.

<b:if cond='data:blog.pageType == "item"'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {"shr_class":{"src":"http://www.shareaholic.com/media/css/styles/sb","link":"","service":"5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf142c45bd4cd03b01ec46b8658","localize":true,"shortener":"google","shortener_key":"","designer_toolTips":true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @paulcrowepro"}};
</script>

<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

Trocar palavra dos marcadores por avatar

2012-04-25T22:06:00.001-03:00

DEMO

É possível trocar as palavras dos marcadores por imagens. Fica bem bacana mas tem um porém: só aceita um marcador por postagem. É necessário também que você faça vários ícones no paint ou encontre pela net imagens compatíveis com seus marcadores.

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:

/*Icone marcadores---------------------------------------------------*/
.icone-marcadores{
position:absolute; left:-70px; top:5px; display:block; }
.icone-marcadores img{
width:50px;
height:50px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}

Procure agora por:

</head>

E acima dele cole:

Leitor, perceba que coloquei vários códigos com cores diferentes, os códigos em cores iguais representam o mesmo marcador. O que isso quer dizer ?

Quer dizer que, as chamadas tem que ter o MESMO nome, escrito de maneira igual, com todos os acentos, letra maiúscula no mesmo local.

Os códigos escritos com letra minúscula representam o código da imagem.

Clique em "Expandir modelos de widgets"

Procure por :

<div class='post-header'>

Cole então o próximo código acima dele.

<b:loop values='data:post.labels' var='label'> <a class='icone-marcadores' expr:href='data:label.url' rel='tag'> <script type='text/javascript'>lebel_logo("<data:label.name/>");</script> </a> </b:loop>

Tradutor nativo do Google no Blogger

2012-04-25T21:12:00.001-03:00

Sem gambiarra, agora é oficial: tradutor do Google nativo no Blogger. Em apenas 2 cliques.

Menu de navegação por página com títulos das postagens

2012-04-25T16:46:00.000-03:00

Troque as palavras "Postagens antigas" e "Postagens recentes" pelo título das postagens.

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: </body>

Acima dele, cole o seguinte código.

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("<<  " + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html( ">>  " + title);
}
}, 500);
});
//]]>
</script>
</b:if>

Salve.

Procure então por: </head>

Acime dele cole:

Salve, está prontinho.

Se quiser customizar o menu, procure por:

.blog-pager {
background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}

E troque por:

.blog-pager {
padding: 4px 3px 4px 3px;
}
.blog-pager a{
text-shadow: 0.1em 0.1em 0.2em black;
color: #fff;
border: 1px dashed #808080;
background: #ccc;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font: 12px/14px sans-serif;
padding:6px 8px; margin: 0 10px 3px 10px;
}

Se quiser colocar o menu na parte superior, clique em "Expandir modelos de widget"

Procure por:

<b:include name='nextprev'/>

e apague.

Agora procure por:

<b:if cond='data:mobile == "false"'>


<div class='blog-posts hfeed'>

Troque-o por:

<b:if cond='data:mobile == "false"'>

<div class='blog-posts hfeed'>
<b:include name='nextprev'/>

Colocar menu de navegação por página na parte superior do Blogger

2012-04-25T14:14:00.000-03:00

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

Clique em "Expandir modelos de widgets"

Procure por:

<b:include name='nextprev'/>

E apague.

Agora procure por:

<b:if cond='data:mobile == "false"'>

<div class='blog-posts hfeed'>

Substitua então pelo código abaixo:

<b:if cond='data:mobile == "false"'>


<div class='blog-posts hfeed'>
<b:include name='nextprev'/>

Se preferir dar estilo:

Procure por:

.blog-pager {
background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}

E troque por:

Modelo 1

.blog-pager {
background: #000;
padding: 8px 3px 8px 3px;
}
.blog-pager a{
color: #000;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:6px 8px; margin:10px 3px 10px 3px;
}

Modelo 2

.blog-pager {
background: #eee;
padding: 14px 3px 14px 3px;
border: 1px dashed #808080;
box-shadow: 0.1em 0.1em 0.2em black;
}
.blog-pager a{
text-shadow: 0.1em 0.1em 0.2em black;
color: #fff;
border: 1px dashed #808080;
background: #ccc;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background:#eee;
border: 1px dashed #808080;
font: 14px/18px sans-serif;
padding:6px 8px; margin: 0 10px 3px 10px;
box-shadow: 0.1em 0.1em 0.2em black;
}