Postagens Recentes

29 de abr de 2010

Footer que se expande em 5 colunas

11 comentários:
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á.

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

 Agora cole o código  acima dele.




<div id='dock'>
<!-- Put your dock in this section -->
<div id='footer-columna-contenedor'>
<div id='footer1' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 20%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:left;'/>
</div>

<div id='footer5' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col5' preferred='yes' style='float:left;'/>
</div>
</div>
</div>


Agora encontre:
]]></b:skin>

E cole o próximo código abaixo dele.
(É recomendável que vc salve e depois hospede os dois scripts abaixo em um servidor para evitar problemas)
jqueryeasing.js
jqueryeasing.js

<script src='http://www.sigmirror.com/files/23924_ndaws/jquery.js' type='text/javascript'/>
<script src='http://www.sigmirror.com/files/23965_5kf1u/jqueryeasing.js' type='text/javascript'/>
<script>
//http://webtips.dan.info/graceful.html
$(document).ready(function() {
//Transition you want
var easing_type = &#39;easeOutBounce&#39;;
//The default height for the dock (on mouse out)
var default_dock_height = &#39;20&#39;;
//Expanded height, the height of the dock on mouse over, you have to set it in CSS
var expanded_dock_height = $(&#39;#dock&#39;).height();
//Fake body height
var body_height = $(window).height() - default_dock_height;
//Set the size of #fake_body
$(&#39;#fake-body&#39;).height(body_height);
//Set the CSS attribute for #dock
$(&#39;#dock&#39;).css({&#39;height&#39;: default_dock_height, &#39;position&#39;:&#39;fixed&#39;, &#39;top&#39;: body_height});
//In case the user resize the browser, we will need to recalculate the height and top for #fake_body and #dock
$(window).resize(function () {
//Grab the updated height/top
updated_height = $(window).height() - default_dock_height;
//Set the updated height for #fake_body and top for #dock
$(&#39;#fake-body&#39;).height(updated_height);
$(&#39;#dock&#39;).css({&#39;top&#39;: updated_height});
});
//The main event for the dock bottom menu
$(&#39;#dock&#39;).mouseover(function () {
//Recalculate expanded height (always get the latest height), in case user has resized the window
expanded_height = $(window).height() - expanded_dock_height;
//Animate the height change, set the height to expanded_dock_height and set the top value as well
$(this).animate({&#39;height&#39;:expanded_dock_height,&#39;top&#39;: expanded_height},{queue:false, duration:800, easing: easing_type});
}).mouseout(function () {
//Recalculate default body height (always get the latest height), in case user has resized the window
body_height = $(window).height() - default_dock_height;
//Animate the height change, set the height to default_dock-height and set the top value as well
$(this).animate({&#39;height&#39;:default_dock_height,&#39;top&#39;: body_height},{queue:false, duration:800, easing: easing_type});
});
});
</script>
<style type='text/css'>
<!--
#floatmenu{position:absolute; width: 220px; top: 10px; left: 10px; z-index:5; visibility:visible;}
-->
</style>
<script language='javascript'>
<!--
function FixMenuY(){
document.getElementById('floatmenu').style.top = document.body.scrollTop + 10;
}
setInterval("FixMenuY()",200);
theObjects = document.getElementsByTagName("object");
for (var i = 0; i < theObjects.length; i++) {
theObjects[i].outerHTML = theObjects[i].outerHTML;}
//-->
</script>



Muito bem, agora vamos dar estilo as 5 colunas. Você pode aumenta-las horizontalmente, modificar cores de fundo, de borda e do fundo do título.

 Acima de ]]></b:skin> cole o código abaixo.



/*Footer expansivo-----------------------------*/
#fake-body {overflow:auto; z-index:1;}
#dock {
background:#000; /*cor de fundo*/
 border-top: 3px solid #808080; /*cor da borda*/
 height:300px;
 z-index:100;
width:100%;
}
#footer-columna-contenedor {clear:both;}
.footer-columna {padding: 10px;}

#col1 .widget{height:240px;overflow:auto;}
#col1{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col1 h2{
background: #ccc;/*cor de fundo do título*/
 font-size: 16px;
 text-align: center;
}

#col2 .widget{height:240px;overflow:auto;}
#col2{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col2 h2{
background: #ccc;/*cor de fundo do título*/
font-size: 16px;
text-align: center;
}

#col3 .widget{height:240px;overflow:auto;}
#col3{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col3 h2 {
background: #ccc;/*cor de fundo do título*/
font-size: 16px;
text-align: center;
}

#col4 .widget{height:240px;overflow:auto;}
#col4{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col4 h2{background: #ccc; font-size: 16px; text-align: center;}

#col5 .widget{height:240px;overflow:auto;}
#col5{
background:#fff;/*cor de fundo do widget*/
border: 2px solid #cc0000;/*cor da borda do widget*/
margin: 5px;
padding: 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#col5 h2{
background: #ccc; /*cor de fundo do título*/
font-size: 16px;
text-align: center;
}




Pronto, as colunas estão instaladas. Vá até "Elemento de página" clique sobre "Adicionar um widget" e escolha o que colocar.


28 de abr de 2010

Popups para o Blogger. Janelas de recado

8 comentários:
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.

 Vamos então o que interessa:


 Popup número 1


Essa é a tradicional, é aberta assim que o visitante entra.
(cuidado se você tem "Leia mais" no blog. Poderá irritar o visitante)








<script>
msg = "AQUI SUA MENSAGEM"; //
alert(msg);
</script>





------------------------------*;*---------------------------
Popup número 2



Esse popup  já é totalmente customizável. e ela desliza pela página. Com este código você poderá trocar as cores de fundo, da borda, colocar mensagens, fotos, imagens variadas, mural de recados, vídeos e até mesmo anúncio do Adsense.
O código em amarelo é da imagem do x em vermelho, para troca-lo cole o endereço de sua imagem.



<!--Começo --->
<style type="text/css">
#topbar{
position:absolute;
border: 2px solid #000;/*cor da borda*/
padding: 10px;
margin: 2% 0 0 55%;
background-color: #ffffff;/*cor de fundo*/
width: 37%;
visibility: hidden;
z-index: 600;
}
</style>


<div id='topbar'>
<a href='' onclick='closebar(); return false'><img border="0" src="http://4.bp.blogspot.com/_BaCxSD9NFn8/S9jROBO5I7I/AAAAAAAABgc/W6-GwOsrxgI/s1600/icontexto-webdev-cancel-048x048.png" /></a><span style="font-size: 18px;"><b>AQUI COLOQUE O QUE QUISER. ANÚNCIOS, VÍDEOS, MENSAGENS, É SÓ COLAR OS CÓDIGOS AQUI
</script></b></span>
</div>

<script type="text/javascript">
var persistclose=0 // Se colocar o número 0 a janela abrirá novamente. O número 1significa que depois que a barra for fechada, permanecerá fechada
var startX = 20 // Tamanho horizontal
var startY = 5 // Tamanho vertical
var verticalpos="fromtop" // "fromtop" o "frombottom" define se vai em cima ou embaixo
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<!--Fim --->

------------------------------*;*---------------------------
Popup número 3


Com esse código a popup só abre quando é clicado.









------------------------------*;*---------------------------


Clique-me



<center><a href="AQUI O ENDEREÇO DO SEU BLOG" onMouseover="alert('ESCREVA AQUI O QUE VC QUER QUE APAREÇA NA JANELA')"> ESCREVA AQUI ONDE A PESSOA TEM QUE PASSAR O MOUSE PARA QUE A JANELA SE ABRA</a><br></center>




------------------------------*;*---------------------------
Popup número 4

 Esta janela se abre e deixa 3 mensagens ao visitante



<FORM>

<INPUT TYPE="button" Value=" Alerta " onClick="alert('Seja bem vindo !');
alert('Espero que encontre o que veio procurar');
alert('Se gostou comente e volte sempre')")>

</FORM>







------------------------------*;*---------------------------
Janela 5





<FORM>
<INPUT TYPE="button" VALUE="Abrir Janela" ONCLICK="window.open
('exemplo.htm', 'Exemplo', 'toolbar=no,location=no,
directories=no,status=no,
menubar=no,scrollbars=no,
resizable=no,
copyhistory=yes,
width=300,height=150')">
</FORM>




  Não me lembro de onde tirei esses códigos. O segundo dei uma arrumada para se adaptar melhor a qualquer blog.

26 de abr de 2010

Blogs doces, lindos, cutes...

2 comentários:
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"

23 de abr de 2010

Imagem diferente na postagem para cada autor do Blogger

4 comentários:
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.



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 clique em "Expandir modelos de widget"


Agora procure pelo código:


<div class='post-header-line-1'/>

E abaixo dele cole o seguinte código fazendo as modificações nos locais conforme se pede.
 


 <div class='post-footer'>
<div class='autor-post'>
<span class='autor-post'>
<b:if cond='data:post.author == &quot;NOME DO BLOGUEIRO 1&quot;'>
<span class='author'><img src='ENDEREÇO DA IMAGEM DO PERFIL 1'/>Postado por<b> </b><a href='ENDEREÇO DO PERFIL 1'>
<b>NOME DO BLOGUEIRO 1</b>
<div class='red tit-arial' style='font-size: 11px; '>DISCRIÇÃO DO BLOGUEIRO 1</div>
</a>
</span>
</b:if>
<b:if cond='data:post.author == &quot;NOME DO BLOGUEIRO 2&quot;'>
<span class='author'><img src='ENDEREÇO DA IMAGEM DO PERFIL 2'/>Postado por<b> </b><a href='ENDEREÇO DO PERFIL 2'>
<b>NOME DO BLOGUEIRO 2</b>
<div class='red tit-arial' style='font-size: 11px; '>DISCRIÇÃO DO BLOGUEIRO 2</div>
</a>
</span>
</b:if>
</span>
</div></div>



Atenção que os nomes devem estar escritos EXATAMENTE igual estiver escrito nas postagens, e as imagens deixe que cada um escolha a sua.


PRESTE ATENÇÃO PARA NÃO APAGAR NADA ALEM DO QUE DEVE, UMA ASPA APAGADA UM PONTO PODERÁ DAR ERRO.

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


e acima dele cole o próximo código:


.autor-post {
width: 97%;
height: 85px;
background: #437818;  /*aqui a cor de fundo*/
margin: 1px 0 3px 0;
padding: 4px;
}
.author img{
width: 60px;
height: 70px;
float: left;
padding: 5px 5px 5px 15px;
margin: 1px 4px 1px 1px;
}



Endereço do perfil é o edndereço da barra de navegação do perfil seu e de seu convidado.



Para a imagem do avatar eu recomendo que vc clique na foto do perfil do seu convidado, ao abrir, clique sobre a foto com o botão esquerdo do mouse, clique então em "Copiar endereço da imagem", ou "Copiar URL da imagem" ou em "Propriedades"



Blog coletivo. Convidando amigos para postar no Blogger.

6 comentários:
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.


22 de abr de 2010

Brasília, 50 anos.

Um comentário:



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 !!!



















19 de abr de 2010

Colocando emoticons nos comentários do Blogger

2 comentários:











Que tal colocar emoticons como esses nos comentários de seu blog ?
Ví essa dica no blog da Gem@ que viu no blog do Vagabundia, mas por lá os emoticons não eram animados por isso modifiquei tudo, rsrsrsrs. Então proceda da seguinte forma:

A primeira coisa a fazer será incorporar os comentários as páginas. Vá até "Configurações", "Comentários" e marque o ítem "Postagens abaixo incorporada", depois clique em salvar.


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á então até o HTML de seu blog e clique em "Expandir modelos de widget" Agora procure por ]]></b:skin>


 E depois dele cole o seguinte código.




<!-- Emoticons -->
<style type='text/css'>
.comment-body p img {vertical-align: top; padding-right: .3em;}
</style>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(cual) {
  if(!document.getElementById) {return;}
  bodyText = document.getElementById(cual);
cualTexto = bodyText.innerHTML;
// :-A
cualTexto = cualTexto.replace(/:-\A/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons387.gif" />');
// :-Z
cualTexto = cualTexto.replace(/:-\Z/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons505.gif" />');
// :-C
cualTexto = cualTexto.replace(/:-\C/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons358.gif" />');
// :-X
cualTexto = cualTexto.replace(/:-\X/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons390.gif" />');
// :-E
cualTexto = cualTexto.replace(/:-\E/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons305.gif" />');
// :-F
cualTexto = cualTexto.replace(/:-\F/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons290.gif" />');
// :-G
cualTexto = cualTexto.replace(/:-\G/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons504.gif" />');
// :-H
cualTexto = cualTexto.replace(/:-\H/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons340.gif" />');
// :-I
cualTexto = cualTexto.replace(/:-\I/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons374.gif" />');
// :-J
cualTexto = cualTexto.replace(/:-\J/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons281.gif" />');
// :-K
cualTexto = cualTexto.replace(/:-\K/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons325.gif" />');
// :-L
cualTexto = cualTexto.replace(/:-\L/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons253.gif" />');
// :-M
cualTexto = cualTexto.replace(/:-\M/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons180.gif" />');
// :-N
cualTexto = cualTexto.replace(/:-\N/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons303.gif" />');
// :-O
cualTexto = cualTexto.replace(/:-\O/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons336.gif" />');
// :-P
cualTexto = cualTexto.replace(/:-\P/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons393.gif" />');
// :-Q
cualTexto = cualTexto.replace(/:-\Q/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons451.gif" />');
// :-R
cualTexto = cualTexto.replace(/:-\R/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons292.gif" />');
// :-(
cualTexto = cualTexto.replace(/:-\(/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons415.gif" />');
// :-T
cualTexto = cualTexto.replace(/:-\T/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons413.gif" />');
// :-a
cualTexto = cualTexto.replace(/:-\a/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons324.gif" />');
// :-e
cualTexto = cualTexto.replace(/:-\e/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons403.gif" />');
// :-i
cualTexto = cualTexto.replace(/:-\i/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons294.gif" />');
// :-o
cualTexto = cualTexto.replace(/:-\o/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons419.gif" />');
// :-w
cualTexto = cualTexto.replace(/:-\w/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons285.gif" />');
bodyText.innerHTML = cualTexto;
}
//]]>
</script>

Neste código abaixo, troque o código que está em verde


<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>


Por este:


<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
cual = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonComentario(cual);
</script>



Agora procure pelo seguinte trecho

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

 E abaixo dele cole o código abaixo.



<center>
<table bgcolor='white' border='1'>
<tbody>
<tr>
<td colspan='10'/>
<td colspan='3'>
</td>
</tr>
<tr>
<div style='text-align: center; color: rgb(204, 0, 0);'><span style='font-size:130%;'><span style='font-weight: bold;'>Copie o código referente a imagem e cole</span></span></div>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons387.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons505.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons358.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons390.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons305.gif'/></td>
</tr>
<tr>
<td>:-A</td>
<td>:-Z</td>
<td>:-C</td>
<td>:-X</td>
<td>:-E</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons290.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons504.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons340.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons374.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons281.gif'/></td>
</tr>
<tr>
<td>:-F</td>
<td>:-G</td>
<td>:-H</td>
<td>:-I</td>
<td>:-J</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons325.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons253.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons180.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons303.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons336.gif'/></td>
</tr>
<tr>
<td>:-K</td>
<td>:-L</td>
<td>:-M</td>
<td>:-N</td>
<td>:-O</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons393.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons451.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons292.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons415.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons413.gif'/></td>
</tr>
<tr>
<td>:-P</td>
<td>:-Q</td>
<td>:-R</td>
<td>:-(</td>
<td>:-T</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons324.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons403.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons294.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons419.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons285.gif'/></td>
</tr>
<tr>
<td>:-a</td>
<td>:-e</td>
<td>:-i</td>
<td>:-o</td>
<td>:-w</td>
</tr>
</tbody>
</table>
</center><div style="text-align: right;">
<a href="http://templateseacessorios.blogspot.com/2010/04/colocando-emoticons-nos-comentarios-do.html" style="color: red;"><span style="font-size: x-small;"><b>Table emoticons pegue a sua</b></span></a></div>


Crédito pelas imagens:Mundo dos Emoticons
Post original: Gem@



18 de abr de 2010

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

Um comentário:
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

17 de abr de 2010

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

Nenhum comentário:


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

15 de abr de 2010

Marquee com bordas

3 comentários:
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

Blog com kits de scrapbooking grátis

Um comentário:



Encontrei este blog com kits para scrapbooking digital grátis, e como sabemos "digrátis" é mais gostoso ;-)



Entre, salve-o em seus favoritos, agradeça, baixe os kits e faça muita arte

13 de abr de 2010

Widget com postagens recentes com efeito slide

19 comentários:
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>


Sidebar em forma de menu accordion

3 comentários:



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.


</head>

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

12 de abr de 2010

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

Um comentário:
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:

]]></b:skin>


 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:

</body>








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

'data:label.url'



Substitua então por:

'data:label.url + &quot;?&amp;max-results=7&quot;'



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.

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

Um comentário:
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="http://4.bp.blogspot.com/_FXIne2ZDJII/S8O3sw7rkgI/AAAAAAAACEE/faesiAgz5ws/s320/se+gostou.png"/>
<img border='0' height='122' src='http://1.bp.blogspot.com/_WlrpZ6HxL6s/S7ChWwKjC4I/AAAAAAAAJZ0/SkfI01XJjzI/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.

Data nos posts em forma de calendário

2 comentários:
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>

11 de abr de 2010

Template Prata

4 comentários:
Refiz este template acrescentando vários hacks. Template em 3 colunas, menu horizontal/vertical, botões sociais, tradutor incorporado, leia mais automático, menu de navegação, 5 colunas no footer. salve em seu bloco de notas, faça as modificações para os seus links nos locais destacados com cores e depois instale-o em seu blog.



10 de abr de 2010

Teste

Nenhum comentário:
Escreva aqui seu texto:

Tam: Fonte:


Visualização


Código em HTML - Copie e cole sempre nessa opção



7 de abr de 2010

Template Café

Nenhum comentário:


Template em 2 colunas, estilo revista, leia mais automático. Sidebar oculta, menu com imagens no footer do blog.

Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube