Footer que se expande em 5 colunas

Coloque um footer em seu blog com 5 colunas que fica escondido, só aparecendo ao ser clicado. Essa dica é do blog Abu Farhan mas acabei fazendo uma adaptação. Veja AQUI como ficará.

»»Leia mais...

Popups para o Blogger. Janelas de recado

O Klerysson escreveu-me para saber a respeito das janelas para popups, essas com recados para os visitantes. dei uma olhadinha nos antigos códigos e os resgatei das profundezas dos poists antigos. Acabei refazendo e dando novas funções como por exemplo, colocar códigos do Adsense. Copie os códigos e cole em uma widget em Elementos de página. Cole em HTML/Javascript.

»»Leia mais...

Blogs doces, lindos, cutes...

A 14 anos atrás comecei a estudar decoração e me apaixonei. Na verdade estudava artes e fui fazer um curso de pinturas decorativas para mobiliário. Como uma coisa puxa a outra quando vi estava trabalhando com isso, fazendo projetos, decorando residencias, comércios, fazendo arte, pintando o sete.
Amo minha casa, sempre gostei, desde criança. Sempre sonhei com uma casa arrumada, tudo certinho, arrumadinho em seu devido lugar, com direito a cafeteira, chaleira,  bules, xícaras, edredons, e flores, bolinhos, potinhos, porta-joiás... Desde meus 21 anos que tenho por hábito redecorar a casa de pelo menos 2 em 3 anos. Não aguento coisas paradas e iguais por muito tempo então acabo passando uma tinta, trocando os móveis de lugar, colocando capas novas nas almofadas, tapetes novos, quadros diferentes, objetos repintados e repaginados, tudo isso gastando o mínimo que se pode, e com muita, mas muita criatividade e um pouco de copiar o que se vê por aí,  entende ? Você deve estar se perguntando o potrque de eu estar fazendo esse post. Bem, é que hj estava atrás de uma cafeteira da Arno que vi no Programa "O Aprendiz Universitário" e acabei caindo em um blog com coisinhas e dicas para casa.
Sabe coisas fofas, cutes, agradáveis, pois é, então tive que fazer esse post e deixar a dica para  vocês. Vejam isso que lindo:
Ela bloga com o maior e mais puro prazer, como deve ser...
Então aí está a dica.
Blog "Pedacinho do Céu"

»»Leia mais...

Imagem diferente na postagem para cada autor do Blogger

Se você tem um blog e aprendeu AQUI a deixa-lo coletivo (mais de um comentarista) coloque então  um código para identificar através de um avatar (imagem de foto)  para cada um dos autores. Isso é bom para que não dê confusão entre os visitantes de seu blog.Veja o exemplo AQUI.

»»Leia mais...

Blog coletivo. Convidando amigos para postar no Blogger.

A Luisa escreveu-me para saber como fazer para permitir que outras pessoas façam posts em seu blog. Se você tem um blog mas quer convidar outras pessoas para postar nele como a Luisa, proceda da seguinte forma:
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.
Abra seu blog e vá até
1-"Configurações", veja na aba a palavra 2-"Permissões" . Clique então em 3-"Adicionar autores"
Veja que abriu uma pequena janela. Escreva então aí o email da pessoa que vc quer convidar para escrever em seu blog e depois clique em "Convidar".
Querendo adicionar outros amigos basta clicar em "Adicionar autores" e escrever  outro email
Seu convidado receberá um email com o convite, basta que ele aceite e já está.
Que fique claro que este convidado só poderá postar ficando restrito ao dono do blog alterar o layout.
Quando o seu convidado receber o convite, diga para clicar no link. 
Ao ser direcionado a próxima página que ele coloque uma senha para entrar no blog. Através do email dele e da senha que ele postará no blog.

»»Leia mais...

Brasília, 50 anos.

Parabéns minha cidade amada, adorada idolatrada, não te troco por N A D A, por lugar nenhum do mundo.
Te amo, te amo, te amo !!!

»»Leia mais...

Colocando emoticons nos comentários do Blogger

Que tal colocar emoticons como esses nos comentários de seu blog ?

»»Leia mais...

Botão do Facebook no Blogger para atualização

Sei que este post já está saturado, muitos blogueiros já o publicaram, mas é bom te-lo aqui também. ;-)
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.
Vá até o HTML e procure pelo código:
<div class='post-footer-line post-footer-line-1'>
 Ou se o quer abaixo do título pelo código:
<div class='post-header-line-1'/>
 E então cole o código abaixo.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>
</b:if>
Se quer que o código flutue a esquerda substitua o código na cor azul pela palavra left
Não sei a quem pertence esse script

»»Leia mais...

Salvar o planeta Terra. Depende de cada um e de todos nós.

Encontrei este vídeo no blog Ambulatório na tv

»»Leia mais...

Marquee com bordas

Barras com bordas e efeito marquee servem por exemplo para que você deixe mensagens de boas vindas a seus visitantes. Copie e cole no HTML/Javascript. Depois faça as modificações a seu critério
VOCÊ PODERÁ DEIXAR UMA MENSAGEM A SEUS VISITANTES
<table background="http://img402.imageshack.us/img402/9733/fundowq.jpg" border="2" bordercolor="transparent" cellspacing="1" height="25" style="width: 600px;">
<tbody>
<tr>
<td background="http://img24.imageshack.us/img24/8703/baara34.jpg" valign="bottom"><marquee direction="left" height="20" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="600"><center><span style="color: black; font-family: Tahoma;">VOCÊ PODERÁ DEIXAR UMA MENSAGEM A SEUS VISITANTES</span></center></marquee>
</td></tr>
</tbody></table>
VOCÊ PODERÁ DEIXAR UMA MENSAGEM A SEUS VISITANTES
<table 2px="" background-color="#E7DBB3" border="2" bordercolor="#c6b949" cellspacing="1" height="25" solid;="" style="width: 600px;">
<tbody>
<tr>
<td background="" valign="bottom"><marquee direction="left" height="20" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="600"><center><span style="color: black; font-family: Tahoma;">VOCÊ PODERÁ DEIXAR UMA MENSAGEM A SEUS VISITANTES</span></center></marquee>
</td></tr>
</tbody></table>
Códigos
Verde: largura Azul: comprimento
Amarelo: Cor da borda
Rosa: sua mensagem
Vermelho: endereço da imagem
Cinza: cor de fundo

»»Leia mais...

Blog com kits de scrapbooking grátis

Encontrei este blog com kits para scrapbooking digital grátis, e como sabemos "digrátis" é mais gostoso ;-)
Galeria Free
Entre, salve-o em seus favoritos, agradeça, baixe os kits e faça muita arte

»»Leia mais...

Widget com postagens recentes com efeito slide

Eu tô mais perdida que cego em tiroteio, não sei nem mais o que já postei neste blog que está enoooooooooooooooooooooooorme... Se trata de um widget com os últimos posts de seu blog com efeito de slide. Veja AQUI o modelo.
 Bom, então como não sei posto mais uma vez esse widget. Basta copiar o código e colocar em uma HTML/Javascript e depois colocar o nome de seu blog no local indicado na cor rosa.
Claro que se você puder salvar os scripts em seu pc e depois hospeda-los em um servidor de sua preferência é bem melhor e bastante recomendado pois como sabemos o script poderá sobrecarregar a taxa de transferência do servidor e assim fazer com que o código simplesmente não funcione ;-)
Faça uma pequena mudança também no código que está na cor laranja é aí que você colocará seu widget do tamanho certo.
<script src="http://sites.google.com/site/postsrecentesslide/postsrecenteslide/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 800;
var pause = 6500;
function removeFirst(){
first = $('ul#slide li:first').html();
$('ul#slide li:first')
.animate({opacity: 0.5}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#slide').append(last)
$('ul#slide li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
interval = setInterval(removeFirst, pause);
</script>
<style type="text/css">
#slide{
height:190px;
width:95%;
overflow:hidden;
border: 1px solid #C94093;
margin: auto;
padding:5px;
#slide li{
margin: 10px 0 0 0;
list-style:none;
#slide .news-title{
display:block;
text-align: center;
line-height: 10px;
color: #C94093;
#slide img{
float:left;
margin-right:2px;
padding:10px;
border:solid 1px #C94093;
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "URL IMAGEN 1";
imgr[1] = "URL IMAGEN 2";
imgr[2] = "URL IMAGEN 3";
imgr[3] = "URL IMAGEN 4";
imgr[4] = "URL IMAGEN 5";
showRandomImg = true;
tablewidth = 950;
cellspacing = 1;
borderColor = "";
bgTD = "#ffffff";
imgwidth = 150;
imgheight = 150;
fntsize = 20;
acolor = "#808080";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 300;
summaryFontsize = 15;
summaryColor = "#000000";
icon2 = " ";
numposts = 5;
label = "";
home_page = "http://NOME DE SEU BLOG AQUI.blogspot.com/";
</script>
<script src="http://sites.google.com/site/postsrecentesslide/postsrecenteslide/recentepostslide.js " type="text/javascript"></script>

»»Leia mais...

Sidebar em forma de menu accordion

Coloque a sidebar de seu blog em forma de menu accordion como neste exemplo AQUI.
Se este tutorial não deu certo, tente este. Seu modelo de template deve ser atualizado.
 Vá até o HTML de seu blog e procure pelo código:
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.
Cole então o próximo código acima dele.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> var sidebarnameacc1=&quot;sidebar&quot;; var accordionside1=true; var sideshow1=new Array(0,0); var sidebarnameacc2=&quot;sidebar2&quot;; var accordionside2=false; var sideshow2=new Array(0,0); </script> <script type='text/javascript'> //<![CDATA[ /* Javascript Based on Redux http://www.i-marco.nl Widget for blogger by www.abu-farhan.com copyright by Abu Farhan Dont edit without permission from the Copyright owner */ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('g q=J.K;6(q.L("M.N")==-1){g $0=O.P()}d r(){$0("#"+7+" .2-4").s();$0("#"+7+" .2 8").t("u","v");w(i x o){$0("#"+7+" .2-4:h("+o[i]+")").y();$0("#"+7+" .2 8:h("+o[i]+")").j("5")}$0("#"+7+" .2 8").z(d(){6(Q){g a=$0(3).e();6((a.9(".2-4"))&&(a.9(":f"))){$0(3).e().k("b");$0(3).l("5");m n}6((a.9(".2-4"))&&(!a.9(":f"))){$0("#"+7+" .2-4:f").A("b");$0("#"+7+" 8").B("5");a.C("b");$0(3).j("5");m n}}D{$0(3).e().k("b");$0(3).l("5")}})}6(E(7)!="F"){$0(G).H(d(){r()})}d I(){$0("#"+c+" .2-4").s();$0("#"+c+" .2 8").t("u","v");w(i x p){$0("#"+c+" .2-4:h("+p[i]+")").y();$0("#"+c+" .2 8:h("+p[i]+")").j("5")}$0("#"+c+" .2 8").z(d(){6(R){g a=$0(3).e();6((a.9(".2-4"))&&(a.9(":f"))){$0(3).e().k("b");$0(3).l("5");m n}6((a.9(".2-4"))&&(!a.9(":f"))){$0("#"+c+" .2-4:f").A("b");$0("#"+c+" 8").B("5");a.C("b");$0(3).j("5");m n}}D{$0(3).e().k("b");$0(3).l("5")}})}6(E(c)!="F"){$0(G).H(d(){I()})};',54,54,'jx||widget|this|content|headactive|if|sidebarnameacc1|h2|is||normal|sidebarnameacc2|function|next|visible|var|eq||addClass|slideToggle|toggleClass|return|false|sideshow1|sideshow2|home_page_tab|initMenu1|hide|css|cursor|pointer|for|in|show|click|slideUp|removeClass|slideDown|else|typeof|undefined|document|ready|initMenu2|location|href|indexOf|blogger|com|jQuery|noConflict|accordionside1|accordionside2'.split('|'),0,{})) //]]> </script>
Para dar estilo, copie o próximo código e cole antes de: ]]></b:skin>
.sidebar h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
.sidebar2 h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
Abu Farhan

»»Leia mais...

Menu de navegação no blog em forma de slide

O excelente blog do Abu Fahar ensina a instalar este menu de navegação no Blogger que achei muito "modernoso". Instalei-o aqui e trouxe para vocês a dica.
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.
Vá até o HTML de seu blog e procure pelo código:
 Substitua-o então por:
.paginator { margin-top:60px; font-size:1em; } .paginator table { border-collapse:collapse; table-layout:fixed; width:100%; } .paginator table td { padding:0; white-space:nowrap; text-align:center; } .paginator span { display:block; padding:3px 0; color:#fff; } .paginator span strong, .paginator span a { padding:2px 6px; } .paginator span strong { background:#ff6c24; font-style:normal; font-weight:normal; } .paginator .scroll_bar { width:100%; height:20px; position:relative; margin-top:10px; } .paginator .scroll_trough { width:100%; height:3px; background:#ccc; overflow:hidden; } .paginator .scroll_thumb { position:absolute; z-index:2; width:0; height:3px; top:0; left:0; font-size:1px; background:#363636; } .paginator .scroll_knob { position:absolute; top:-5px; left:50%; margin-left:-10px; width:20px; height:20px; overflow:hidden; background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%; cursor:pointer; cursor:hand; } .paginator .current_page_mark { position:absolute; z-index:1; top:0; left:0; width:0; height:3px; overflow:hidden; background:#ff6c24; } .fullsize .scroll_thumb { display:none; } .paginator_pages { width:600px; text-align:right; font-size:0.8em; color:#808080; margin-top:-10px; } ]]></b:skin>
Agora cole este próximo código acima de:
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'></script> <script type='text/javascript'> var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=7; var numshowpage=6; </script> <script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
Salve ! 
 Clique então em "Expandir modelos de widget" e procure por:
Substitua então por:
O número 7 que está na cor vermelha deverá ser substituido pelo número de postagens que deverão ser mostradas em seu blog.

»»Leia mais...

Botões sociais ao pé das postagens de fácil aplicação

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.
Vi este menu social como o modelo acima  no blog do Pizcos. Para instala-lo vá até o HTML de seu blog, clique em "Expandir modelos de widget" e procure por este código.
<div class='post-footer-line post-footer-line-3'/>
E substitua por este código abaixo
<div class='post-footer-line post-footer-line-3'>
<img style="width: 323px; height: 64px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3PkQi9noLNA3ReRYHLS7_PUuT082QNXPj_K1107R1CfO6rd1XsuGpkQZGQrPLOF_G2Nta3WI0y2h0l94xrlhAYzTnmI3WR0omCXsPyZlspj9dFBr-t-BUEgoj5Wo5VGBoupDVA-03BWw/s320/se+gostou.png"/>
<img border='0' height='122' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOSwNZhq85R2SwQciLUE4CJVgbKIQ32DnyXocdGXEqcAoTcZeoioJuh92TPKovq7msRXNnFG-Of0hkqXve_QBvGHS6TOrGFs1Vyi8nnCNjROL11RRQs7k-9NL__VvRIgysBBQnCNO9uCo/s0/marcadores.png' usemap='#map' width='550'/>
<map name='map'>
<area coords='12,42,100,87' expr:href='&quot; http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' shape='rect' target='_blank' title='Meneame'/>
<area coords='74,87,168,129' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' shape='rect' target='_blank' title='Bitacoras'/>
<area coords='137,41,230,87' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' shape='rect' target='_blank' title='Delicious'/>
<area coords='207,87,298,130' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' shape='rect' target='_blank' title='facebook'/>
<area coords='271,39,361,86' expr:href='&quot;http://www.blogger.com/share-post-menu.g?blogID=3863663428153995270&quot;' shape='rect' target='_blank' title='blogger'/>
<area coords='343,86,430,128' expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' shape='rect' target='_blank' title='twitter'/>
<area coords='402,38,495,81' expr:href='&quot; http://www.wikio.es/vote?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' shape='rect' target='_blank' title='wikio'/>
<area coords='469,83,560,127' expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' shape='rect' target='_blank' title='buzz'/>
</map>
</div>
Essa dica é do blog do Pizcos.

»»Leia mais...

Data nos posts em forma de calendário

Para colocar data em suas postagens personalizada como neste exemplo, vá até o HTML de seu blog e antes de ]]></b:skin> cole o código abaixo
/*Datas das postagens-------------*/
.calendar {
margin: -6px 0 0 0; /*modificando os números o calendário sobe ou desce*/
float: right;/*se quer a esquerda substitua right por left*/
width:128px;
.calendar h4{
background: $bgcolor; /*cor de fundo*/
border: 1px solid $bordercolor; /*cor da borda*/
padding: 3px 0;
margin-bottom: 8px;
.calendar h4 span.day {
display: block;
float: right;
line-height: 24px;
font-size: 12px;
border-right:  2px solid $bordercolor;
padding-right: 5px;
.calendar h4 span.month, .calendar h4 span.year {
width: 88px;
.calendar h4 span.month {
display: block;
float: right;
font-size: 6px;
line-height: 10px;
padding-left: 4px;
text-align: center;
.calendar h4 span.year {
font-size: 12px;
display: block;
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.
Agora depois de </head> cole o próximo código
<div class='edit'>
<script type='text/javascript'>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;<span class='day'>&quot;+da[0]+&quot;</span>&quot;;
mes = &quot;<span class='month'>&quot;+da[1].slice(0,3)+&quot;<span class='year'>&quot;+da[2]+&quot;</span>&quot;+&quot;</span>&quot;;
document.write(mes+dia);
</script>
</div>
Agora salve. Clique em "Expandir modelos de widget" e procure pelo seguinte código:
<data:post.dateHeader/>
Substitua-o então por:
<div class='calendar'>
<h4 class='calendar '>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</h4>
</div>

»»Leia mais...