Escondendo imagens

Conheça o blog que fiz em homenagem a obra de Eça de QueirosEu amei muito esta minisérie
Se quer um assim, vá até o HTML do seu blog procure pelo código:
]]></b:skin>
Cole acima dele o código abaixo
Pegar código
a.tooltip: hover span {
display: block;
position: absolute;
top: 2em;
left: 2em;
width: 140px;
border: groove #000000;
background-color: #F8F8E0;
color: #ffffff;
text-align: center;
font-family: Arial;
font-size: 15px;
padding: 5px;
Agora sempre que quiser fazer este efeito, cole este código abaixo e cole onde quiser. depois aumente o tamanho das letras.
<a href="COLOQUE AQUI O ENDEREÇO DO QUE QUERES LINKAR" class="tooltip">ESCREVA AQUI O QUE VOCÊ QUER QUE APAREÇA ESCRITO <span><img src="ENDEREÇO DA IMAGEM">TEXTO QUE VAI DENTRO JUNTO COM A IMAGEM</span></a>

»»Leia mais...

Menu animado

Quer um menu como este abaixo ?

»»Leia mais...

Menu vertical costumizável

Com este tipo de menu, você poderá colocar o tipo de botão de sua preferencia, fazer efeitos diferentes, bem facinho. Você precisará de um modelo de botão, ou até dois caso queira fazer efeito em seu menu.
Vá até o HTML do seu blog e procure pelo seguinte código:
]]></b:skin>
Cole acima dele o código abaixo:
list-style:none;
margin:0px;
padding:0px;
}#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
#menu li a:link, #menu li a:visited {
color: #FFFFFF;
display: block;
background: url('http://img341.imageshack.us/img341/4782/image1lu2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
#menu li a:hover {
color: #cccccc;
background: url('http://img205.imageshack.us/img205/4131/12uw2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
#menu li a:active {
color: #666666;
padding: 8px 0 0 50px;
*ATENÇÃO: o selecionado na cor verde representa o botão, caso não goste, troque por outro de sua escolha, não retire as aspas, ok ?
O selecionado na cor azul são as cores das letras que aparecerão no botão, caso precise, mude-os para a cor desejada
depois em "Elementos de página", clique em "Adicionar . Ao abrir a tabela clique em HTML/Javascript, e cole o código abaixo, depois acrescente os links que quiser nos locais indicados. ( em cor verde é o endereço do que vai linkar e em verde, é o que vc irá esscrever que aparecerá escrito no botão)
<div id='menu'>
<ul>
<li><a href='ENDEREÇO DO LINK'>LINK 1</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 2</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 3</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 4</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 5</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 6</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 7</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 8</a></li>
</ul>
</div>
Para acrescentar mais links, é só ir acrescentando,
<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>
antes de
</ul>
</div>
Clique AQUI e escolha seu buttom

»»Leia mais...

Menu vertical costumizável

Com este tipo de menu, você poderá colocar o tipo de botão de sua preferencia, fazer efeitos diferentes, bem facinho. Você precisará de um modelo de botão, ou até dois caso queira fazer efeito em seu menu.

»»Leia mais...

Buttons

Para salvar os buttons, clique sobre ele com o botão direito do mouse. Ao abrir a tabela clique em "Salvar imagem como...". Depois hospede-os em algum site de hospedagem.
Abaixo um site de hospedagem.
Image Shack

»»Leia mais...

Feliz Natal

»»Leia mais...

Feliz Natal

Amigos, música é o melhor presente. Selecionei esses vídeos pra vocês. Espero que gostem. Feliz Natal a todos.

»»Leia mais...

Menu horizontal com botões diferentes

Quer um menu horizontal como este em seu blog ?
Clique então em "Modelo", depois em "Editar HTML". Procure pelo código:
]]></b:skin>
E cole acima dele o códiga abaixo.
#navlist
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
#navlist li
list-style: none;
margin: 0;
display: inline;
#navlist li a
padding: 0.25em 0.5em 0.25em 0.75em;
text-decoration: none;
Agora procure pelo código:
<div id='outer-wrapper'>
e cole abaixo dele o código abaixo fazendo as modificações necessárias
<div id='navcontainer'>
<ul id='navlist'>
<li><a class='current' href=' ENDEREÇO DE SEU BLOG AQUI /' title='Volte a página'><span><img src='http://img522.imageshack.us/img522/5295/217639187tn9.gif'/></span></a></li>
<li id='active'><a href=' LINK AQUI O QUE QUISER ' id='current'><img src='http://img205.imageshack.us/img205/8670/817342743pj2.gif'/></a></li>
<li><a href='MAILTO: ENDEREÇO DO SEU EMAIL '><img src='http://img297.imageshack.us/img297/9845/emailac3.gif'/></a></li>
<li><a href='obrigada' onclick='window.external.AddFavorite("AQUI O ENDEREÇO DE SEU BLOG/","AQUI O NOME DE SEU BLOG");'><img src='http://img205.imageshack.us/img205/1205/favoritosis8.gif'/></a></li>
</ul>
</div>

»»Leia mais...

Data no blog costumizada

Vou ensinar como se modificar o layot da data que temos no Blogger, para ficar assim como a que tenho aqui, mas é claro, no seu blog, ficará com o fundo que você escolher.
O primeiro passo é clicar em "Configurações"
Agora clique em "Formatação e depois clique na seta ao lado do "Formato da data", para abrir a tabela, conforme mostra a imagem abaixo. Clique na opção mostrada na imagem abaixo e depois salve.
Clique em "Modelo" e depois em "Editar HTML", procure pelo código:
]]></b:skin
e ABAIXO dele, cole o código:
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(mes+dia);
</script>
Clique em Salvar.
Agora clique em "Expandir Modelos de Windgets", procure pelo código:
<data:post.dateHeader/>
e substitua pelo código abaixo:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
Se você quer que a data apareça em todos os posts, coloque o código abaixo:
<b:if cond='data:post.dateHeader'> <h2 class='date-header'><div id='fecha'><script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div></h2>
<b:else/>
<h2 class='date-header'><div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script><script>remplaza_fecha(ultimaFecha);</script></div></h2>
</b:if>
Procure por:
]]></b:skin>
E cole acima todo o código abaixo, fazendo suas substituições. (Em verde cor da letra, em vermelho endereço de sua imagem, em azul, cor da borda)
#fecha {
height: 60px;
width: 60px;
background: #fff;
border: 2px solid #000;
color: #808080;
text-align: center;
padding: 0 2px 0 0;
line-height: 100%;
float: left;
.fecha_dia {
display: block;
font-size: 18px;
font-weight:bold;
.fecha_mes {
height: 16px;
display: block;
font: normal 11px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
padding-top: 3px;
.fecha_anio {
display: block;
font-size: 10px;
Créditos: Blog and Web

»»Leia mais...

Memes

Bom, aqui vão dois memes. O primeiro de minha amiga a Teca, do blog Devaneios e Desatinos.

»»Leia mais...

Meus trabalhos

Ana, aqui está uma pequena amostra dos meus trabalhos.

»»Leia mais...

Template Livro Mágico

Visualizar
Download
Pegue o código AQUI

»»Leia mais...

Menu horizontal com mini gifs

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.
Copie este código, vá até o HTML do seu Blogger, procure pelo seguinte código:
]]></b:skin>
e cole acima dele o código abaixo.
(código em verde representa as cores das letras, mude-as se quiser.
ul#navlist { font-family: sans-serif; }
ul#navlist a
font-weight: bold;
text-decoration: none;
ul#navlist, ul#navlist ul, ul#navlist li
margin: 0px;
padding: 0px;
list-style-type: none;
ul#navlist li { float: left; }
ul#navlist li a
color: #000000;
padding: 3px;
border: 1px #ffffff outset;
ul#navlist li a:hover
color: #ffffff;
ul#navlist li a:active
color: #cccccc;
border: 1px #cccccc inset;
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
padding: 0px;
margin: 0px;
ul#navlist li:hover ul#subnavlist
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
ul#navlist li:hover ul#subnavlist li a
display: block;
width: 10em;
border: none;
padding: 2px;
ul#navlist li:hover ul#subnavlist li a:before { content: &quot; &gt;&gt; &quot;; }
Agora clique em "Elemento de página", clique em "Adicionar um elemento de página" Ao abrir a tabela, clique em HTML/Javascript, cole ai este segundo código, faça as suas modificações e salve. Depois arraste o módulo para cima, de modo que ele fique acima da imagem de seu blog.
<div id="navcontainer">
<ul id="navlist">
<li><img src="http://img146.imageshack.us/img146/9690/logo86ky7.gif%22/%3E%3Ca href="ENDEREÇO DE SEU BLOG/" class="current" title="Volte a página"><span>Home</span></a></li>
<li><img src="http://img45.imageshack.us/img45/9231/iconeorkutza4.gif%22/%3E%3Ca id="subcurrent" href="ENDEREÇO DO SEU ORKUT">Orkut</a></li>
<li><img src="http://img45.imageshack.us/img45/3300/emaildz9.gif%22/%3E%3Ca href="mailto:ENDEREÇO DE SEU EMAIL AQUI" title="Email"><span>Email</span></a></li>
<li> <img src="http://img525.imageshack.us/img525/6636/icon4lf5.gif%22/> <a href="" title="AQUI O QUE QUISER "><span>Leia-me</span></a></li>
<li><img src="http://img526.imageshack.us/img526/3914/listsiconns2.gif%22/>
<a href="AQUI O QUE QUISER/" title="ETC"><span>ETC</span></a></li>
<li><img src="http://img207.imageshack.us/img207/204/iconerssrd9.png%22/%3E%3Ca href="AQUI O ENDEREÇO DO SEU FEED" title="Assine este Feed"><span>Feed</span></a></li>
<li><img src="http://img213.imageshack.us/img213/192/blog00360vy7.gif%22/%3E%3Ca href="ENDEREÇO DO SEU GUESTBOOK" title="Mensagens"><span>Guestbook</span></a></li>
<li><img src="http://img526.imageshack.us/img526/8061/commentswd1.png%22/%3E%3Ca href="AQUI O ENDEREÇO DO SEU CHAT/">Chat</a></li>
<li><img src="http://img205.imageshack.us/img205/8688/strelaqm6.gif%22/> <a href="" onclick="window.external.AddFavorite('http://templateseacessorios.blogspot.com/',' NOME DO SEU BLOG AQUI ');">Favoritos</a></li>
<li><img src="http://img528.imageshack.us/img528/718/blog00350yq8.gif%22/%3E%3Ca href="ENDEREÇO DE SEU BLOG AQUI" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage
(' ENDEREÇO DE SEU BLOG AQUI /');">Página Inicial</a></li>
</ul>
</div>

»»Leia mais...

Mais música no blog

Com este windget da pra fazer uma playlist com até 100 músicas, é música pra car*** !Clique AQUI, cadastre-se e faça sua playlist.

»»Leia mais...

Template Baleia Cute

Visualizar
Download
Pegar código AQUI

»»Leia mais...

Template Bumbum

Desculpe, template retirado pois ficou obsoleto.

»»Leia mais...