» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

OBSERVATÓRIO







O Observatório, é um blog criado para incentivar a divulgação de novos blogs (e de blogs que estão fora dos rankings e listas convencionais de divulgação).
Foi criado pela minha amiga Ariane e tem tudo para dar certo!
Funciona assim:
É feita uma seleção de links diários (de posts/artigos) enviados pelos próprios leitores e blogueiros. Separados em categorias, os links permanecem por 72hs na página principal e depois são arquivados. Os melhores da semana (*mais acessados) ganham destaque na coluna lateral.

Para enviar seus links, basta preencher o formulário de cadastro de link. Os links não precisam ser necessariamente do seu próprio blog, mas não há nada de errado em querer divulgar os seus textos.
Todo mês, o blogueiro que tiver enviados mais links selecionados, terá um post publicado divulgando seu blog.

O QUE VOCÊ ESTÁ ESPERANDO!
CORRE LÁ!
MANDE O LINK DO SEU POST, AQUELE QUE VOCÊ GOSTA , QUE É ÚTIL E INTERESSANTE!
DIVULGUE O SEU BLOG E O OBSERVATÓRIO!


TEMPLATE ANIME-01





Clique na imagem para ampliar.

»FAÇA O DOWNLOAD AQUI«

►Para alterar os links da barra de navegação e configurar a busca:

→Encontre o código
<div class='red'>
<div id='slatenav'>
<ul>
<li><a href='#' title=''>Home</a></li>

<li><a href='#' title=''>About Us</a></li>

<li><a href='#' title=''>Services</a></li>

<li><a href='#' title=''>Our Work</a></li>

<li><a href='#' title=''>Contact Us</a></li>

<div style='float: right; margin:10px 10px;'><form action='http://ENDEREÇO DO SEU BLOG/search' id='searchthis' method='get' style='display: inline;'>
<table cellpadding='0' cellspacing='0' style='width: 200px; height: 100%;'>
<tbody>
<tr>
<td valign='middle'>
<input id='b-query' name='q' type='text'/>
</td>
<td class='navbutton' valign='middle'>
<input id='submit' name='submit' tabindex='1' type='submit' value='Busca'/>
</td>
</tr>
</tbody>
</table></form></div>
</ul>
</div>

1º →Altere # pelo endereço do Link e as palavras Home, About Us, Services, Our Work, Contact Us pelos títulos correspondentes aos links.
2º →Na linha: <form action='http://ENDEREÇO DO SEU BLOG/search' id='searchthis' method='get' style='display: inline;'>
→ Coloque o Endereço do seu blog onde está indicado.


TEMPLATE FAIRY





Clique na imagem para ampliar.

»FAÇA O DOWNLOAD AQUI«


►Para alterar os links da barra de navegação!

Encontre o seguinte código:

<div id='tabsE'>
<ul>
<li><a href='#' title='Link 1'><span>Link 1</span></a></li>
<li><a href='#' title='Link 2'><span>Link 2</span></a></li>
<li><a href='#' title='Link 3'><span>Link 3</span></a></li>
<li><a href='#' title='Link 5'><span>Link 5</span></a></li>
<li><a href='#' title='Link 6'><span>Link 6</span></a></li>
</ul>
</div>

1- Substitua '#' pelo endereço do Link que você quer colocar;
2- Em title='' → coloque entre as aspas '____' o título do link substituindo as palavras Link 1, Link 2, Link 3...;
3- Links → Substitua os Link 1, Link 2, Link 3... pelo título do link para que apareça na barra de navegação.

ESTE TEMPLATE ESTÁ NUM ARQUIVO ZIP ACOMPANHADO DAS IMAGENS QUE ELE CONTÉM. DESCOMPACTE-O E INSTALE O ARQUIVO XML, ELE JÁ CONTÉM AS IMAGENS HOSPEDADAS NO SITE TINYPIC, SE HOUVER QUALQUER PROBLEMA VOCÊ JÁ TEM AS IMAGENS DELE PARA HOSPEDAR ONDE QUISER E SUBSTITUIR NO HTML DO BLOG.

Dicionário de Termos Blogueiros




Estive visitando o blog da Minha Amiga Juliana do Dicas Blogger e encontrei uma pérola de post!
Um DICIONÁRIO DE TERMOS BLOGUEIROS!
Todos estes termos são muito úteis para nos localizarmos e aprendermos como nos virar na blogosfera!
Clique aqui abaixo e confira o Dicionário que minha amiga bolou consultando o "HD mental" dela e a Wikipédia

ADSENSE - É o sistema de anúncios do Google.

BANNER:a forma publicitária mais comum na internet, muito usado em propagandas para divulgação de sites na Internet que pagam por sua inclusão. É criado para atrair um usuário a um site através de um link.

BLOG: é uma página da Web cujas atualizações (chamadas posts) são organizadas cronologicamente de forma inversa (como um diário). Estes posts podem ou não pertencer ao mesmo gênero de escrita, referir-se ao mesmo assunto ou ter sido escritos pela mesma pessoa.O weblog conta com algumas ferramentas para classificar informações técnicas a seu respeito, todas elas são disponibilizadas na internet por servidores e/ou usuários comuns. As ferramentas abrangem: registro de informações relativas a um site ou domínio da internet quanto ao número de acessos, páginas visitadas, tempo gasto, de qual site ou página o visitante veio, para onde vai do site ou página atual e uma série de outras informações.Os sistemas de criação e edição de blogs são muito atrativos pelas facilidades que oferecem, pois dispensam o conhecimento de HTML, o que atrai pessoas a criá-los.

BLOGBLOGS - É um diretório de blogs brasileiro que se auto-intitula o maior agregador de blogs do país considerado por muitos um Technorati nacional.

BLOGUEIRO - A pessoa que cria um blog.

BLOGOSFERA - É o universo virtual dos blogueiros.

BLOGGER - A ferramenta mais simples para se criar e manter um blog.

FEEDS e RSS - Na prática, Feeds são usados para que um usuário de internet possa acompanhar os novos artigos e demais conteúdo de um site ou blog sem que precise visitar o site em si. Sempre que um novo conteúdo for publicado em determinado site, o "assinante" do feed poderá ler imediatamente.

PAGERANK - Pontuação dada pelo Google aos sites e blogs.

POST/POSTAGEM - Sua forma substantivada, "postagem", refere-se a uma entrada de um texto num blog. As postagens são organizadas de forma cronologicamente inversa na página, de forma que as informações mais atualizadas aparecem primeiro.

PROBLOGGER - Blogueiro que ganha dinheiro com o seu blog.

TECHNORATI - É um motor de busca de Internet especializado na busca por blogs

TEMPLATE - De acordo com a Widipédia um template (ou "modelo de documento") é um documento sem conteúdo, com apenas a apresentação visual (apenas cabeçalhos por exemplo) e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação - por exemplo conteúdos que podem aparecer no início e conteúdos que só podem aparecer no final.É o modelo, layout do blog.

WIDGETS - Em poucas palavras widget pode ser definido como sendo um componente de software que viabiliza a interação com o usuário.São os brinquedinhos dos blogueiros. Coisinhas que a gente coloca na barra lateral. Aproveitem para conhecerem os posts do Blosque.com:

HACK PARA POSTS EXPANDÍVEIS




Vocês já devem ter visto que nos 2 últimos posts/tutoriais sobre os MENUS SOBREPOSTOS COM 4 E 8 ABAS usei o artifício Continue lendo... para não deixar o blog muito comprido, uma vez que os tutos eram bem grandes.

Para isso usei o Hack para posts expandíveis (1º) que aprendi no Blog-Memories da minha amiga Cláudia, lá tem também outra dica para este mesmo Hack(2º), do Blog Diário do Barão só que com outra forma de fazer.

Fica aqui a dica! Você pode usar aquele que achar mais fácil. É só clicar no link (1º ou 2º) que quiser para aprender a esconder seus posts longos e deixar seu blog mais apresentável!

Editando o CSS dos Menus Sobrepostos com 4 ou 8 Abas




Você pode também editar o conteúdo seu menu de abas a partir de um código CSS e fazer as alterações que achar necessário.
Para que o conteúdo do meu menu ficasse da forma que eu queria criei um código CSS para ele.

Aqui vai um modelo de código CSS para os conteúdos dos menus.
Você pode alterá-lo como quiser. Basta ter um conhecimento básico de CSS para entender estes códigos, para isso sugiro o site CSS para Webdesign. Se quiser aprender é só dar uma estudada no site.
/*-------Exemplo de Tabcontents---------*/
#tabcontent1, #tabcontent2, #tabcontent3, #tabcontent4 {
background:#fff;
margin:0px 0px 15px 0px; /*Margem externa*/
border-left:1px solid #666666;
border-bottom:1px solid #666666;
border-right:1px solid #666666;
padding:5px; /*Margem interna*/
height:180px; /*Altura do seu conteúdo fixa, aumente ou diminua de acordo com sua necessidade*/
}
#tabcontent1 ul, #tabcontent2 ul, #tabcontent3 ul, #tabcontent4 ul {
list-style:none;
margin:0px;
padding:0 0 0;
}
#tabcontent1 li, #tabcontent2 li, #tabcontent3 li, #tabcontent4 li {
background: url("http://i8.tinypic.com/6lip3c7.gif") no-repeat 2px .40em;
padding:0 0 2px 23px;
border-bottom:1px dotted #666;
text-indent:-10px;
line-height:1.4em;
}


Na linha: #tabcontent1 li, #tabcontent2 li, #tabcontent3 li, #tabcontent4 li → os comandos são para a aparência dos links do conteúdo do seu menu.

MENUS EM ABAS COM CLIQUE




No post anterior ensinei como fazer o menu em abas onde as abas são ativadas quando passamos o mouse em cima delas.
Para que as abas sejam ativadas com um clique é muito fácil:
<li><a href="#" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3');blendoff('tabcontent4');blendoff('tabcontent5');blendoff('tabcontent6');blendoff('tabcontent7');blendoff('tabcontent8');swichtabs('1');"  onclick="return false;" title="" class="tabactive" id="tablink1">Título 1 </a></li >

Onde está escrito onmouseover substitua por onclick e apague as palavras onclick="return false;"

Assim sua aba será ativada quando você clicar nela.

Fiz isto aqui no Templates para Você no meu menu de abas.

Menus Sobrepostos com 8 Abas




Houveram alguns pedidos de como fazer mais menus em abas / sobrepostos além dos 4 que ensinei.

Não tem como fazer isso no site fonte de onde traduzi o tutorial, mas pela lógica eu o alterei e deu certo.
» Essas configurações são um pouco complicadas e demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.


Vamos lá:

Este código será para 8 ABAS:


1º Você deve copiar o código Javascript abaixo e colar acima da tag </head> do seu blog:

<script type="text/javascript">
/*Important Function to blend the tabs in and out*/
function blendoff(idname) {document.getElementById(idname).style.display = 'none';}
function blendon(idname) {document.getElementById(idname).style.display = 'block';}
</script>

<script type="text/javascript">
/*Function for our Tabmenu with 8 Tabs*/
function swichtabs(wert) {
if (wert=='1'){
document.getElementById('tablink1').className='tab1 tabactive';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='2'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2 tabactive';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='3'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3 tabactive';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='4'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4 tabactive';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='5'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5 tabactive';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='6'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6 tabactive';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8';
}else if (wert=='7'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7 tabactive';
document.getElementById('tablink8').className='tab8';
}else if (wert=='8'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
document.getElementById('tablink5').className='tab5';
document.getElementById('tablink6').className='tab6';
document.getElementById('tablink7').className='tab7';
document.getElementById('tablink8').className='tab8 tabactive';
}
}
</script>
2º Coloque acima do código ]]></b:skin> na parte CSS do seu blog este código abaixo:
/*Example for a Menu Style*/
.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold; position:relative;}


Este é o código CSS do menu onde você passa o mouse. Você pode alterá-lo da maneira que quiser. Também criar um CSS para o conteúdo.

O comando .menu li a.tabactive é aquele que se sobressai quando o mouse está em cima.

3º Copie e cole este código em uma widget que você criar na parte Elementos da página do seu blog e edite-o para os conteúdos e títulos.
Você pode também colar este código na parte html do seu blog na localização que quiser.
<!--Start of the Tabmenu -->
<div class="menu">
<ul>
<li><a class='tabactive' href='http://templatesparavoce.blogspot.com' id='tablink1' onclick='return true;' onmouseover='blendon("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("1");' title=''> TÍTULO 1 </a></li>

<li><a href='#' id='tablink2' onclick='return false;' onmouseover='blendon("tabcontent2"); blendoff("tabcontent1"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("2");' title=''> TÍTULO 2 </a></li>

<li><a href='#' id='tablink3' onclick='return false;' onmouseover='blendon("tabcontent3"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("3");' title=''> TÍTULO 3 </a></li>

<li><a href='#' id='tablink4' onclick='return false;' onmouseover='blendon("tabcontent4"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent5"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("4");' title=''> TÍTULO 4 </a></li>

<li><a href='#' id='tablink5' onclick='return false;' onmouseover='blendon("tabcontent5"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent6"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("5");' title=''> TÍTULO 5 </a></li>

<li><a href='#' id='tablink6' onclick='return false;' onmouseover='blendon("tabcontent6"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs("6");' title=''> TÍTULO 6 </a></li>

<li><a href='#' id='tablink7' onclick='return false;' onmouseover='blendon("tabcontent7"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff('tabcontent6'); blendoff('tabcontent8'); swichtabs("7");' title=''> TÍTULO 7 </a></li>

<li><a href='#' id='tablink8' onclick='return false;' onmouseover='blendon("tabcontent8"); blendoff("tabcontent1"); blendoff("tabcontent2"); blendoff("tabcontent3"); blendoff("tabcontent4"); blendoff("tabcontent5"); blendoff('tabcontent6'); blendoff('tabcontent7'); swichtabs("8");' title=''> TÍTULO 8 </a></li>
</ul>
</div>
<!--End of the Tabmenu -->

<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
CONTEÚDO 1
</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div style="display:none;" id="tabcontent2">
CONTEÚDO 2
</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div style="display:none;" id="tabcontent3">
CONTEÚDO 3
</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div style="display:none;" id="tabcontent4">
CONTEÚDO 4
</div>
<!--End Tabcontent 4-->

<!--Start Tabcontent 5-->
<div style="display:none;" id="tabcontent5">
CONTEÚDO 5
</div>
<!--End Tabcontent 5-->
<!--Start Tabcontent 6-->
<div style="display:none;" id="tabcontent6">
CONTEÚDO 6
</div>
<!--End Tabcontent 6-->
<!--Start Tabcontent 7-->
<div style="display:none;" id="tabcontent7">
CONTEÚDO 7
</div>
<!--End Tabcontent 7-->
<!--Start Tabcontent 8-->
<div style="display:none;" id="tabcontent8">
CONTEÚDO 8
</div>
<!--End Tabcontent 8-->
VISUALIZE O MENU EM ABAS »AQUI

4º Edite onde está indicado:

Título 1, Título 2, Título 3, Título 4... → Coloque os títulos dos conteúdos do seu menu substituindo as palavras Titulo 1, Título 2 .....
Ex: Meu menu acima do lado direito: LiINKS, COMO INSTALAR OS TEMPLATES, DICAS e VALE UM CLICK.

CONTEÚDO 1, CONTEÚDO 2, CONTEÚDO 3, CONTEÚDO 4... → Coloque no lugar das palavras o conteúdo dos seus menus.
Exemplos:
·Em LINKS coloquei alguns links da seguinte forma:
Substituindo o Conteúdo 1
<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
<ul>
<li><a href="#"/>LINK</a></li>
</ul>
</div>
<!--End Tabcontent 1-->

No lugar de # coloque o endereço do link e em LINK o título. Repita esta linha quantos links quiser colocar.

·Em COMO INSTALAR OS TEMPLATES coloquei um texto com a explicação de como instalar os templates.

·Em DICAS coloquei links expandíveis (que já ensinei aqui no blog) e neles os links de sites que contém Dicas que acho importantes para blogs e edição de templates.

·Em VALE UM CLICK coloquei links de blogs amigos que contém conteúdo interessante e de qualidade.

►Para aqueles que entendem um pouco de linguagem CSS ficará bem mais fácil, para os que não entendem sugiro que estude um pouco principalmente para editar o aspecto do menu. Sugiro o site:
CSS para Webdesign

Menus Sobrepostos com 4 Abas




Estive procurando este hack por muito tempo até que achei e já apliquei aqui no Templates.

» Vou ensinar aqui como fazer o do lado direito superior daqui do Templates onde você passa o mouse e aparece o conteúdo:
Encontrei este meu no site do Austríaco Jürgen Koller - Kollermedia.at
Este é o menu simples, lá tem outras opções de menus mais complexos que pretendo traduzir e postar aqui.
» Essas configurações são um pouco complicadas e demandam certo conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
Vamos lá:

1º Você deve copiar o código Javascript abaixo e colar acima da tag </head> do seu blog:
<script type="text/javascript">
/*Important Function to blend the tabs in and out*/
function blendoff(idname) {document.getElementById(idname).style.display = 'none';}
function blendon(idname) {document.getElementById(idname).style.display = 'block';}
</script>

<script type="text/javascript">
/*Function for our Tabmenu with 4 Tabs*/
function swichtabs(wert) {
if (wert=='1'){
document.getElementById('tablink1').className='tab1 tabactive';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
}else if (wert=='2'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2 tabactive';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4';
}else if (wert=='3'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3 tabactive';
document.getElementById('tablink4').className='tab4';
} else if (wert=='4'){
document.getElementById('tablink1').className='tab1';
document.getElementById('tablink2').className='tab2';
document.getElementById('tablink3').className='tab3';
document.getElementById('tablink4').className='tab4 tabactive';
}
}
</script>


2º Coloque acima do código ]]></b:skin> na parte CSS do seu blog este código abaixo:
/*Example for a Menu Style*/
.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold; position:relative;}

Este é o código CSS do menu onde você passa o mouse. Você pode alterá-lo da maneira que quiser.
O comando .menu li a.tabactive é aquele que se sobressai quando o mouse está em cima.

3º Copie e cole este código em uma widget que você criar na parte Elementos da página do seu blog e edite-o para os conteúdos e títulos.
Você pode também colar este código na parte html do seu blog na localização que quiser.
<!--Start of the Tabmenu -->
<div class="menu">
<ul>
<li><a href="#" class="tabactive" id="tablink1" onclick="return false;" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); swichtabs('1');" title="" >Título 1 </a></li>
<li><a href="#" id="tablink2" onclick="return false;" onmouseover="blendon('tabcontent2'); blendoff('tabcontent1'); blendoff('tabcontent3'); blendoff('tabcontent4'); swichtabs('2');" title="" >Título 2 </a></li >
<li><a href="#" id="tablink3" onclick="return false;" onmouseover="blendon('tabcontent3'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent4'); swichtabs('3');" title="" >Título 3 </a></li>
<li><a href="#" id="tablink4" onclick="return false;" onmouseover="blendon('tabcontent4'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); swichtabs('4');" title="" >Título 4 </a></li>
</ul>
</div>
<!--End of the Tabmenu -->

<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
CONTEÚDO 1
</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div style="display:none;" id="tabcontent2">
CONTEÚDO 2
</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div style="display:none;" id="tabcontent3">
CONTEÚDO 3
</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div style="display:none;" id="tabcontent4">
CONTEÚDO 4
</div>
<!--End Tabcontent 4-->

4º Edite onde está indicado:

Título 1, Título 2, Título 3 e Título 4 → Coloque os títulos dos conteúdos do seu menu substituindo as palavras Titulo 1, Título 2 .....
Ex: Meu menu acima do lado direito: LiINKS, COMO INSTALAR OS TEMPLATES, DICAS e VALE UM CLICK.

CONTEÚDO 1, CONTEÚDO 2, CONTEÚDO 3 e CONTEÚDO 4 → Coloque no lugar das palavras o conteúdo dos seus menus.
Exemplos:
·Em LINKS coloquei alguns links da seguinte forma:
Substituindo o Conteúdo 1
<!--Start Tabcontent 1 -->
<div style="display:block;" id="tabcontent1">
<ul>
<li><a href="#"/>LINK</a></li>
</ul>
</div>
<!--End Tabcontent 1-->

No lugar de # coloque o endereço do link e em LINK o título. Repita esta linha quantos links quiser colocar.

Veja em TEMPLATES

·Em COMO INSTALAR OS TEMPLATES coloquei um texto com a explicação de como instalar os templates.

·Em DICAS coloquei links expandíveis (que já ensinei aqui no blog) e neles os links de sites que contém Dicas que acho importantes para blogs e edição de templates.

·Em VALE UM CLICK coloquei links de blogs amigos que contém conteúdo interessante e de qualidade.

►Para aqueles que entendem um pouco de linguagem CSS ficará bem mais fácil, para os que não entendem sugiro que estude um pouco principalmente para editar o aspecto do menu. Sugiro o site:
CSS para Webdesign

HACK PARA MEDIDAS NO IE 7




Aprendi no blog da Ariane-Templates para Novo Blogger- o hack para IE onde você colocava um _ (underline) na frente da propriedade que você gostaria que só o IE entendesse.

Porém, tenho tentado fazer isso para o IE7 mas ele não estava funcionando.

Então, hoje, procurando como resolver isso encontrei no Tableless a dica que diz: "Se trocarmos o _ (underline) por * (asterísco) ele passa funcionar!"Ex:
div {
background:green;
*background:red; /* essa linha funciona no IE7 */
}
Realmente funciona, já testei neste blog para que ele fique alinhado no IE7 e funcionou.
Ufa! Finalmente achei a resposta deste problema.
Acredito que o underline ainda funcione nos IEs anteriores, não sei mesmo.

TROCA DAS IMAGENS DOS TEMPLATES




Como eu já disse anteriormente, estou trocando os endereços das imagens dos templates do photobucket para o tinypic para não ocorrer o problema que tive onde as imagens foram bloqueadas pelo photobucket por ter ultrapassado o limite de 25GB disponíveis para uma conta gratuita e eles bloquearem de novo as imagens que hospedo lá.

Os Templates:

* BLACK A2 A3 A4 A5 E A6
* BLACK-RED A2
* GREEN-A1
* PINK-A1
* PURPPLE-A1

Já foram corrigidos e suas imagens estão disponíveis neste endereço: http://tempsvc.blogspot.com/ em seus respectivos posts.

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger