Postagens Recentes

31 de ago de 2009

Cada assombração

6 comentários:
É

cada


uma


que


me


aparece !!!


Devo

ter

jogado

pedra

na

cruz !





Pois é, está oficialmente inaugurado neste espaço a seção:
É cada assombração que aparece...
Agora estes emails lindos, meigos, educados virarão posts, assim poderei compartilhar com vocês um pouco da alegria que sinto ao ler essas pérolas.


E para mostrar que meu humor mesmo depois de ler esta pérola continua, posto aqui um vídeo muito significativo, mostrando o quanto de fato isso me aborrece.

30 de ago de 2009

Faça a sua própria barra de ferramentas para seu pc

2 comentários:



Facilitei minha vida 300% baixando uma barra de ferramentas para o meu pc. Linkei nela meu blog, meu Twitter, Technoraty, email, Skype, BlogBlogs, temperatura e até uma rádio.


Agora é só clicar na barra e já leio meus emails, sem precisar fazer login. Escuto minha rádio favorita e se estiver entediada, ainda escolho entre as mais de 100 opçoes.Bom, se vc quer facilitar sua vida, faça a sua barra de ferramentas também clicando AQUI

Agora, se vc quer baixar a minha barra de ferramentas, clique AQUI e faça bom proveito.

29 de ago de 2009

Criar barra de ferramentas para o footer do Blogger 3

2 comentários:
Bom, agora vamos para a segunda parte do código, a parte onde ocultaremos os elementos.


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 encontre o código:

]]></b:skin>

agora acima dele cole o próximo código.

*Preste atenção ao número correspondente aos htmls. Estes são os que ficarão ocultos PORTANTO, o número deles deverá corresponder ao número dos HTMLs dos elementos 'OCULTOS'.



/* conteudo Feed */
#HTML6 {display: none; width: 400px;}
/* conteudo Comentarios */
#HTML4 {display: none; width: 240px;}
/* conteudo Twitter */
#HTML2 {display: none; width: 260px;}

body#layout #footer-tools #HTML6 {display: block;}
body#layout #footer-tools #HTML4 {display: block;}
body#layout #footer-tools #HTML2 {display: block;}


Agora veja como está o seu template. Se fez tudo certo, você verá os ícones com as imagens. Clique então nas imagens de ferramentas , essa do Blogger( ) e cole então os códigos dos respectivos ícones.
Ex: Ícone do Feed cole o código do feed, do Twitter, com o código do Twitter e assim por diante.


O resultado deverá ser este.



Se quiser colocar um buscador na barra, coloque o próximo código antes de:

]]></b:skin>



#CustomSearch1 { background: transparent url(URL_imagen) no-repeat left top; height: 35px !important; padding: 15px 0 0 60px; width: 180px;}


Agora copie este próximo código e cole em uma HTML/Javascript, na última barra, em "Elementos de página".





<div class="widget-content">
<form action="http://search.blogger.com/" name="b-search">
<input id="b-query" placeholder="Procurar" name="as_q" type="text"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input class="b-query" value="AQUI O NOME DE SEU BLOG.blogspot.com/" name="bl_url" type="hidden"/>
<input border="0" alt="Buscar" src="AQUI O ENDEREÇO DE SUA IMAGEM" type="image"/>
</form></div>

Criar barra de ferramentas para o footer do Blogger 2

7 comentários:
Agora vamos colocar os elementos na barra. Você já viu a primeira parte Aqui, e viu que apareceram duas barras em "Elementos de página"







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.

1-Na barra de cima ficarão os elementos ocultos, os elementos que só aparecerão quando o visitante clicar.

2-Na barra de baixo ficarão os elementos onde o visitante irá clicar, PORTANTO, você deverá colocar 2 vezes cada elemento como no exemplo.

Clique em "Adiconar um gadget" e adicione o que quiser nas duas barras como mostra a imagem em HTML/Javascript.








O primeiro widget a colocar (e esse é obrigatório) é o de nome "ICO TOLLS", note que este só será colocado 1 vez, e na na barra de baixo.


Depois vá colocando os outros widgets, mas sempre assim, em cima e em baixo. O de cima escreva "Conteúdo" antes da palavra.





Pronto, acrescentou tudo o que queria ? Então a aparência deverá ser mais ou menos assim.











No meu caso coloquei Twitter, Feed e Comentários. Note que há o mesmo conteúdo nas duas barras, porem, na barra de cima adicionei a palvra" CONTEÚDO" para diferenciar as duas na hora de colocar o código.


Agora no HTMl de seu blog procure pelo código:
]]></b:skin>
e depois dele cole o código abaixo trocando o código na cor verde pelo endereço de sua imagem.








<script type='text/javascript'>
//<![CDATA[
var toolOpen = "";
function ftool(cual) {
var cualmostrar = document.getElementById(cual);
if (cualmostrar.style.display == 'block') {
cualmostrar.style.display='none';
toolOpen = "";
} else {
if (toolOpen != "") { document.getElementById(toolOpen).style.display='none'; }
cualmostrar.style.display='block';
toolOpen = cual;
}
}
function togglebarra() {
var labarradiv = document.getElementById('footertools-barra');
var labarraimg = document.getElementById('icotoggle');
if(labarradiv.className == "footertools-barra-max") {
labarradiv.className = "footertools-barra-min"
labarraimg.src="ENDEREÇO DA IMAGEM MAIS";
} else {
labarradiv.className = "footertools-barra-max"
labarraimg.src="ENDEREÇO DA IMAGEM MENOS";
}
}
//]]>
</script>


Salve

Abaixo algumas imagens. Salve em seu pc e depois hospede-as em um site. AQUI outros botões.












Agora, procure o último código
</div> em seu blog. Acima você verá um código parecido com este, só que claro, com os títulos que você deu a seus widgets. Anote o número do HTML de cada um, você irá precisar.




*Código na cor azul representa o título dos widgets
*Código na cor vermelha representa o endereço do widget.


<div id='footertools-contenedor'>
<b:section id='tool-container'>
<b:widget id='HTML6' locked='false' title='Conteudo de feed' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Conteudo comentarios' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Conteudo Twitter' type='HTML'/>
</b:section>
</div>

<div class='footertools-barra-max' id='footertools-barra'>
<b:section id='footertools-barra-inner'>
<b:widget id='HTML5' locked='false' title='Feed' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Comentarios' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Twitter' type='HTML'/>
<b:widget id='HTML7' locked='false' title='Ico Tools' type='HTML'/>
</b:section>
</div>



Bom, agora o que você terá que fazer é ver o seu blog. Note que estará tudo aberto, as tabelas ocultas. Vá clicando no pequeno ícone de ferramentas do Blogger ( )e vá colando os códigos abaixo.




*Atenção: Não se esqueça de substituir os números do HTML pelos números dos HTML dos seus widgets, aqueles que vc escreveu a palavra "Conteúdo" antes.






No widget Feed colocamos este código:




<a id="feed" href="javascript:ftool('HTML6')"><img src="ENDEREÇO DA IMAGEM FEED" /></a>


No widget Comentários colocamos este código:


<a id="comentarios" href="javascript:ftool('HTML4')"><img src="ENDEREÇO DA IMAGEM COMENTARIOS" /></a>


No widget Twitter colocamos este código:


<a id="twitter" href="javascript:ftool('HTML2')"><img src="ENDEREÇO DA IMAGEM TWITTER" /></a>

No widget Icotools colocamos este código:


<a href="javascript:togglebarra()"><img id="icotoggle" src="ENDEREÇO DA IMAGEM MAIS" /></a>


Atenção, que no widget  "Ico Tools" depois de colocar este código dentro do  widget, volte no HTML do blog e acima de
]]></b:skin>
Cole este próximo código substituindo o número 7 pelo número do HTML do seu 'Ico Tools':



#HTML7{
position: absolute;
right: 0;
}

Agora vamos para a terceira e última parte, onde esconderemos o conteúdo.

Créditos: Vagabundia

Criar barra de ferramentas para o footer do Blogger

5 comentários:
Direto do blog do JMujir, vem essa dica quente. Colocar no Blogger uma barra de ferramentas no footer do Blogger que fica fixa e abre elementos ocultos. Veja o exemplo AQUI.

Vamos aprender ?



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 último código </div> do template e abaixo dela, cole o seguinte código :





<div id='footertools-contenedor'>
<b:section id='tool-container' />
</div>
<div class='footertools-barra-max' id='footertools-barra'>
<b:section id='footertools-barra-inner' />
</div>


Agora cole o próximo código antes de :
</head>





<style type='text/css'>

/* FOOTER TOOLS : Todas as definições de estilo serão feitas aqui */

/* aqui é a div da barra */
#footertools-barra {
background: transparent url(ENDEREÇO DA IMAGEM) repeat-x left top; /* aqui a cor da barra ou uma imagem*/
bottom: 0;
right: 0;
height: 50px; /* altura da barra */
margin: 0 auto; /* conteúdo ao centro */
padding: 0;
position: fixed;}
.footertools-barra-max {
width: 100%;}
.footertools-barra-min {
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
width: 3px;}
#footertools-barra-inner {
height: 50px;
margin: 0 auto;
width: 920px;}
#footertools-barra .widget {
float: left;
height: 50px;
margin: 0 5px;}
#footertools-barra h2 {
display:none;}
#footertools-contenedor {
bottom: 55px;
right: 0;
margin: 0 auto;
position: fixed;
text-align: left;
width: 100%;}
#footertools-contenedor .widget {
-moz-border-radius: 10px; /*apagando a linha a frente retira o arredondamento*/
background-color: #E4E4E4; /*cor de fundo da janela oculta*/
border: 2px solid #000000; /*cor da borda da janela oculta*/
margin: 0 auto;
padding: 10px;}
#footertools-contenedor h2 {
border-bottom: 1px dotted #999; /*cor da linha abaixo titulo*/
color: #BB0000;/*cor da letra titulo*/
font-family: Tahoma;
font-size: 17px;
font-weight: normal;
letter-spacing: -.01em;
line-height: 24px;
margin: 0;
text-align: right;}
</style>


*Se não quiser a barra fixa, apague os códigos que estão na cor azul.


Agora antes de ]]></b:skin> cole o próximo código:




body#layout #footertools-barra {position: static;}
body#layout #footertools-contenedor {position: static;}



Salve e veja como ficou em "Elementos de página", deverá ter 2 gadgets a mais.





Para ver a segunda parte, clique aqui

Créditos: Vagabundia

26 de ago de 2009

Marcadores com opções no Blogger

4 comentários:
Fazendo um blog descobri que agora o Blogger implementou algumas ferramentas nos marcadores. Agora com simples cliques é possível deixar os marcadores com numeração de postagens e nuvem de tags, mostrar apenas os marcadores que quiser, Para fazer as modificações basta clicar em "Marcadores" em "Elementos de página" e selecionar os itens de acordo com sua vontade.








Agora é possível colocar os marcadores em forma de nuvem de tags direto pelo Blogger, retirar a numeração dos marcadores, ecolher quais os marcadores serão mostrados


Selecionando "Marcadores selecionados" é possível esconder do visitante qualquer marcador que quiser

Modificando o aspecto dos links

2 comentários:

Uso em meu blog um código que modifica o aspecto dos links, assim que o mouse é colocado em cima. Então, para você que quer saber como faço isso, eis alguns exemplos abaixo.


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.







Então, se você quer usar algum efeito em seus links, basta copiar o código abaixo e colar antes de:
]]></b:skin>




a:link {
text-decoration: none;
}
a:visited {
text-decoration: none
}
a:hover {
margin: 5px;
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
}




Depois troque o código em verde pelo efeito que deseja no link e o código que está em vermelho é a cor da letra.


capitalize
  • com este efeito, os links ficarão com a primeira letra maiúscula.

-----------------------------------------------------------------------------

lowercase

  • com este código, os links ficarão com todas as letras minúsculas

-------------------------------------------------------------------------------

uppercase

  • com este código os links ficarão com todas as letras maiúsculas

--------------------------------------------------------------------------------

underline overline

  • com este código os links ficarão sublinhados e ao colocar o mouse, ficarão sobrelinhados

---------------------------------------------------------------------------------

underline

  • com este código os links ficarão sublinhados

--------------------------------------------------------------------------------

Para inserir códigos no código abaixo:

Para que a letra aumente de tamanho, coloque abaixo de:

a:hover {

o seguinte código:

font-size:130%;

Para que seu link fique com uma cor de fundo, coloque abaixo de:

a:hover{

o seguinte código:

background: #cccccc;

Para que seu link fique com uma imagem coloque abaixo de:

a:hover{

o seguinte código:

padding: 15px;
background: url(AQUI O ENDEREÇO DA IMAGEM) left no-repeat top;


14 de ago de 2009

Letra grande/ letra pequena

9 comentários:

Dê a seus visitantes a opção de ler seu blog com a fonte maior ou menor. Vá até "Elementos de página" clique em "Adicionar novo gadet" e clique em HTML/Javascript. Cole então o código abaixo.




<a href="javascript:ts('body',2)">A+</a> <a href="javascript:ts('body',-1)">a-</a>
<script type='text/javascript'>
//<![CDATA[
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
//]]>
</script>

Posts recentes com imagens

6 comentários:

Direto do blog Blogger Tricks vem essa dica. Copie o código, vá até "Elementos de página", clique em "Adicionar gadget" e em HTML/Javascript e cole o código abaixo. Coloque o endereço de seu blog no local indicado.



<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[5] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 368;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#000";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://ENDEREÇO DE SEU BLOG.blogspot.com/";
</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript">
</script>



Código em azul largura do widget
Código em laranja número de postagem
Código em verde, troque pelo endereço de seu blog

12 de ago de 2009

Marcador expandivel com imagens

14 comentários:

Para quem quer saber como fiz esta lista de marcadores que se expande, saibam que peguei a dica com a Ariane, no Templates para o Novo Blogger. O que fiz foi inserir as imagens e modificar um trecho do código original, sendo assim, ele se expande automaticamente, ao passar o mouse por cima. Se vc quer um marcador assim é claro que a primeira coisa a fazer é instalar o widget de "Marcadores" em seu blog.
Para isso, vá até Layout-->Elementos de página--> Adicionar um novo gadget--> Marcadores.

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.



Feito isso, vá até o HTML de seu blog e clique em "Expandir modelos de widget", depois clique em "F3" no seu teclado, ao abrir a janela, escreva "Marcadores"(deve ser o titulo de seu widget).

Agora, veja um código igual a esse.


<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>




Agora troque todo esse código por este próximo, fazendo as alterações onde se pede.


<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<script type='text/javascript'>
// <![CDATA[
home_page = 'ENDEREÇO DE SEU BLOG/';
max_rc_posts = 500;
function showentry(json){
var maxp = (max_rc_posts <= json.feed.entry.length) ? max_rc_posts : json.feed.entry.length;
var text = "<ul>";
for (var i = 0; i < maxp; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
text += "<li><img src='ENDEREÇO DA IMAGEM PASTA FECHADA'/><a href='"+posturl+"'>" + posttitle + "</a></li>";
}
text += "</ul>";
document.getElementById("showItemLabel").innerHTML = text;
}
function showPostLabel(sPL_label,e){
var isDOM = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
var check = document.getElementById("showItemLabel");
if(check) {
if(!isDOM) { check.removeNode(true); }
else {check.parentNode.removeChild(check);}
}
var elm;
if(e.target) elm = e.target;
else elm = window.event.srcElement;
var div = document.createElement('div');
div.innerHTML = "";
div.id = "showItemLabel";
if(!isDOM) { elm.insertAdjacentElement('afterEnd', div); } else { elm.parentNode.insertBefore(div, this.nextSibling); }
var elm2 = document.getElementById("showItemLabel");
elm2.style.display = "inline";
elm2.innerHTML = "<br/><img src='ENDEREÇO DA IMAGEM CARREGANDO'/>";
var script = document.createElement('script');
script.src = home_page+"feeds/posts/summary/-/"+sPL_label.replace(/ /g,"%20")+"?start-index=1&max-results="+max_rc_posts+1+"&alt=json-in-script&callback=showentry";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script);
}
// ]]>
</script>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <span dir='ltr'></span> <a expr:onMouseOver='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9660;</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><img src='ENDEREÇO DA IMAGEM PASTA FECHADA'/><data:label.name/></a>
<a expr:onMouseOver='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9660;</a>
</b:if>
</li>
</b:loop>
</ul>

</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


1-Escreva o endereço de seu blog
2-Coloque aí o endereço de sua imagem com a pasta fechada
3-Coloque aí o endereço da imagem de "Carregando"
4-Coloque aí o endereço da pasta aberta.
5-Endereço da pasta fechada



Abaixo algumas imagens para serem usadas em seu menu.
*Não copie, salve em seu PC e depois hospede em um site, como o Tiny Pic






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