Postagens Recentes

30 de set de 2011

Template Night and Day

7 comentários:
Template em 2 colunas, leia mais, slide,header dividida...
















HABILITAR SLIDE 

Copie o código abaixo, cole no HTML/Javascript acima da header, coloque o endereço de seu blog e salve.



<div class="slider-wrapper theme-orman">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 270; //image height
 var image_width = 930;  //image width
</script>
<script src="ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>


ARQUIVO EM FORMA DE MENU SUSPENSO



QUANTIDADE DE POSTAGENS


Template Espaces

2 comentários:
Este template possui sidebar dentro de scroller, menu com efeito jquery, 3 colunas abaixo da header.











 HABILITAR MENU


Copie o código abaixo, cole no bloco de notas. Coloque os links nos locais onde se pede. Depois, cole no HTML/Javavascript que fica ao pé do blog. (códigos em vermelho sáo onde você deverá colar os endereços dos links, em azul, endereço das imagens caso queira trocar. Em laranja, título dos links e em verde, inscrição do menu.


<ul id="sdt_menu" class="sdt_menu">

<li><a href="ENDEREÇO DO LINK 1"><img src="http://2.bp.blogspot.com/-0l1IrMTho4w/TmgqnYZGUfI/AAAAAAAAAyM/w0q8F2vB6DY/s1600/MENU1.png" alt=""/><span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 1</span>
<span class="sdt_descr">BLÁ 1</span></span></a></li>
<li><a href="ENDEREÇO DO LINK 2">
<img src="http://1.bp.blogspot.com/-qk1VO5etPyk/TmgqnqIV5cI/AAAAAAAAAyQ/bH8NYilj6M0/s1600/MENU2.png" alt=""/>
<span class="sdt_active"></span>

<span class="sdt_wrap">
<span class="sdt_link">LINK 2</span>
<span class="sdt_descr">BLA 2</span>
</span>
</a>
<div class="sdt_box">
<a href="ENDEREÇO DO LINK 1-A">LINK 1-A</a>
<a href="ENDEREÇO DO LINK 2-A">LINK 2-A</a>
<a href="ENDEREÇO DO LINK 3-A">LINK 3-A</a>
</div>
</li>
<li>
<a href="ENDEREÇO LINK 3"><img src="http://3.bp.blogspot.com/-UmhQ7Ewq8-E/TmgqoJMA6aI/AAAAAAAAAyU/mG9_yiVTW8w/s1600/MENU3.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 3</span>
<span class="sdt_descr">BLA 3</span>
</span>
</a>
</li>
<li>
<a href="ENDEREÇO LINK 4">
<img src="http://1.bp.blogspot.com/-5qKaJFTlKO4/TmgqogXXwSI/AAAAAAAAAyY/g_iV22dcsqg/s1600/MENU4.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 4</span>
<span class="sdt_descr">BLA 4</span>
</span>
</a></li>
<li>
<a href="ENDEREÇO LINK 5">
<img src="http://4.bp.blogspot.com/-VbzlF88hYvo/Tmgqo0zqEBI/AAAAAAAAAyc/v7GrQHD-qC4/s1600/MENU5.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 5</span>
<span class="sdt_descr">BLA 5</span>
</span>
</a>
</li>
<li>
<a href="ENDEREÇO LINK 6">
<img src="http://3.bp.blogspot.com/-TZHvBQYSFFg/Tmgrug524UI/AAAAAAAAAyg/I4-XRzwXhr4/s1600/MENU6.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 6</span>
<span class="sdt_descr">BLA 6</span>
</span>
</a>
<div class="sdt_box">
<a href="ENDEREÇO DO LINK 6-A">LINK 6-A</a>
<a href="ENDEREÇO DO LINK 6-B"> LINK 6-B</a>
<a href="ENDEREÇO DO LINK 6-C">LINK 6-C</a>
</div>
</li>
</ul>


ARQUIVOS EM FORMA DE MENU SUSPENSO:


6 POSTAGENS



29 de set de 2011

Malware no Blogger

5 comentários:



Nossos blogs, hospedados no Blogger desde a semana passada tem sofrido com ataques de Malware afastando leitores, passando susto em todos, deixando até os donos do blog sem poder acessa-los. Mas por que isso está acontecendo ?

 Isso pode acontecer simplesmente por termos o link em nosso blog de algum blog contaminado, ou termos em nosso blog algum código contaminado como por exemplo, caixinhas com contadores, reloginhos, algum chat, enfim, códigos e gadgets que não sejam provenientes do Blogger.

Este aviso é típico do blog infectado por ter um link para um blog com problemas. Basta deletar o link


Mas o que é o tal de "malware" ? Segundo o Wikipedia, "O termo malware é proveniente do inglês malicious software; é um software destinado a se infiltrar em um sistema de computador alheio de forma ilícita, com o intuito de causar algum dano ou roubo de informações (confidenciais ou não). Vírus de computador, worms, trojan horses (cavalos de troia) e spywares são considerados malware. Também pode ser considerada malware uma aplicação legal que por uma falha de programação (intencional ou não) execute funções que se enquadrem na definição supra citada."


Para tentar resolver seu problema, primeiro veja o que está escrito na mensagem ao tentar abrir o blog. Veja se o que está havendo com o seu blog não é simplesmente o link de algum blog, se for isso, basta deletar o link e aguardar que dentro de 24 horas seu blog voltará ao normal.
Se não houver nenhuma mensagem, vamos ver o que há em seus gadgets, ou seja, retire contadores externos, relóginhos, chats, enfim, tudo que tenha colocado nas colunas do blog. Retire T U D O pois é por aí que seu blog está sendo invadido.

Tendo feito isso, entre neste endereço

http://www.google.com/support/webmasters/bin/answer.py?answer=35843

 Clique em "Pedido de reconsideração do seu site"








Você verá uma caixa. Clique para aparecer o menu. Depois basta clicar no endereço do blog que estiver com problema.






Selecione o blog, deixe a caixa que envia a solicitação selecionada, escreva um pequeno texto e envie o pedido.






 Se tiver dado tudo certo, você verá uma página como essa. Agora é ter paciência e aguardar.

28 de set de 2011

Dynamic Views, implementado no Blogger

3 comentários:


O Blogger já está disponibilizando, para quem usa a nova interface, templates em Dynamic Views, ou seja,  maneira dinâmica de vir o blog. O blog fica com aparência de slide. Possui 7 modelos a escolher.

Mas atenção, se quiser testar os modelos, antes salve uma cópia de seu modelo original, de preferencia clique antes em "Expandir modelos de widgets" ou você perderá T U D O.

Vamos lá, faça o teste e me diga o que achou.



 

22 de set de 2011

Template Three Colors

5 comentários:
Template em 3 colunas, slide com as postagens mais vistas, menu horizontal...
















Habilitar o menu horizontal


Procure por:

<div id='colormenu'>

Coloque então os endereços de seus links



Habilitar o menu social



Procure por:

<div class='menu-social'>

Faça então as modificações

13 de set de 2011

Template Interativo

4 comentários:


Template com as colunas e os posts ocultos (claro que não funciona no IE)Menu de navegação, menu horizontal colorido, slide com últimas postagens...



 


HABILITAR MENU HORIZONTAL

Procure por:

<div id='menu-colorido'>

E então insira os endereços dos links nos locais onde se pede



HABILITAR MENU SOCIAL

Procure por:

<div id='menu-social'>

E abaixo dele substitua:

AQUI O ENDEREÇO DO FACEBOOK , ENDEREÇO TWITTER, etc pelos endereços de suas páginas



HABILITAR SLIDE

Vá até o Layout de seu blog



Clique em Editar no widget ao lado do nome de seu blog

Cole então o próximo código colocando o endereço de seu blog no local em vermelho.


<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script><script style="text/javascript">
 var numposts_gal = 6;
 var random_posts = false;
</script>
<script src="http://templateinterativo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

11 de set de 2011

Template Pink Pinup

Nenhum comentário:



Este template não possui coluna lateral. Slide com as últimas postagens, posts relacionados, menu horizontal, menu social...
Habilitar o menu


 Procure por:

<ul class='left clearfloat' id='menu-horizontal'>


E abaixo deste código você verá os locais para fazer as modificações inserindo seus links



Habilitar o menu social do perfil


Clique em "Expandir modelos de widget"

Procure então por:

<div class='menu-social'>

Faça então as modificações inserindo os links nos locais indicados


Habilitar o slide


Agora clique em Layout


Clique em Adicionar um Gadget


Ao abrir, clique em  HTML/Javascript

Cole então o próximo código colocando o endereço de seu blog no local indicado.


<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 246; //image height
 var image_width = 618;  //image width
</script>
<script src="http://templatepinkpinup.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

Dando estilo ao menu de páginas do novo Blogger

5 comentários:
Mais três modelos para você mudar o estilo de seu menu de páginas no novo Blogger


Vá até o Modelo de seu blog, clique em Editar modelo
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por todo este trecho abaixo:


/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}




Você deverá substituir o trecho acima pelo código do modelo que deseja instalar em seu blog.

MODELO HOVER PESTANA



/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
background: transparent;
margin: 12px 0;
}

.tabs-inner .widget li  {
width: 120px;
text-shadow: 0.1em 0.1em 0.2em black; margin: 2px 2px;
padding: 14px 2px;
position:relative;
text-align: center;
text-decoration:none;
}
.tabs-inner .widget li a  {
display: block;
 border-top:6px solid #e6ab07;
color: #ccc; text-shadow: #000 0.1em 0.1em 0.2em;
font-size: 18px;
font-weight: bold;
padding: 3px 2px;
}

.tabs-inner .widget li.selected a {
color: #000;
 text-shadow: #ccc 0.1em 0.1em 0.2em;
 background-color:#e6ab07;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
 .tabs-inner .widget li a:hover {
color:#fff;
    background-color:#e6ab07;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}

MODELO NEON HOVER




/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
background: #000;
border-bottom: 0px dashed #ccc;
}

.tabs-inner .widget li a  {
color: white; text-shadow: black 0.1em 0.1em 0.2em;
font-size: 18px;
font-weight: bold;
}
.tabs-inner .widget li  {
text-shadow: 0.1em 0.1em 0.2em black;color:#fff; padding:28px 23px; position:relative; text-decoration:none;
}

.tabs-inner .widget li.selected a {
color: #cc0000; text-shadow: #ccc 0.1em 0.1em 0.2em; padding: 20px 20px;
}
 .tabs-inner .widget li a:hover {
-moz-box-shadow: 0 0 10px 15px #cc0000, 5px -10px #cc0000, 10px 10px 10px#cc0000, 10px 10px #cc0000, 10px -10px 10px #cc0000;
-webkit-box-shadow: 0 0 10px 15px #cc0000, 5px -10px #cc0000, 10px 30px 50px #cc0000, 10px 10px #cc0000, 10px -10px 10px #cc0000;
box-shadow: 0 0 10px 15px #cc0000, 5px -10px #cc0000, 10px 10px 10px #cc0000, 10px 10px #cc0000, -10px -10px 10px #cc0000;
text-decoration: none;
padding: 20px 20px;
}
 .tabs-inner .widget li:hover {
text-align: center;
}



MODELO CLEAN


/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
background: transparent;
border-bottom: 0px dashed #ccc;
}

.tabs-inner .widget li a  {
color: white; text-shadow: black 0.1em 0.1em 0.2em;
font-size: 18px;
font-weight: bold;
}
.tabs-inner .widget li  {
text-align: center;
background:transparent;
margin:3px 12px 3px 5px;
padding: 12px 12px;
}


.tabs-inner .widget li.selected a {
color: #cc0000; text-shadow: #ccc 0.1em 0.1em 0.2em;
}
 .tabs-inner .widget li a:hover {
color: #cc0000; text-shadow: #ccc 0.1em 0.1em 0.2em;
}
 .tabs-inner .widget li:hover {
text-align: center;
}

10 de set de 2011

Costumize o modelo de menu de páginas do novo Blogger

Nenhum comentário:
Que tal dar uma aspecto diferente ao menu de páginas de seu novo Blogger ? Claro que é preciso primeiro você ter o menu implementado em seu blog.



Abaixo 3 modelos diferente, em forma de botão, círculos e abas.

Vá até o Modelo de seu blog, clique em Editar modelo
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por todo este trecho:


/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}




Você deverá substituir o trecho acima pelo código do modelo que deseja instalar em seu blog.



MODELO BOTÕES


/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
margin: -10px -26px  -23px -26px;
padding: 6px 0;
background: #eee;
}

.tabs-inner .section:first-child ul {
}

.tabs-inner .widget ul {
margin: 2px auto;

}

.tabs-inner .widget li a {
 background: #808080;
 font-size: 18px;
 display: inline-block;
 margin: 1px 2px;
 border: 1px solid #ccc;
  padding: .6em 2em;
 color: white; text-shadow: black 0.1em 0.1em 0.2em
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #000;
  background-color: #ccc;
  text-decoration: none;
}



MODELO ABAS



/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-bottom: 10px solid #cc0000;
margin: -4px -26px  0 -26px;
padding: 0 0;
}
.tabs-inner .section:first-child ul {
}

.tabs-inner .widget ul {
margin: 0;
}

.tabs-inner .widget li a {
text-shadow: #fff 0.1em 0.1em 0.2em;
 font-size: 16px;
 display: inline-block;
 margin:  0 2px -2px 2px;
background: -webkit-linear-gradient(#cc0000, #fff);
background: -moz-linear-gradient(#cc0000, #fff);
background: -o-linear-gradient(#cc0000, #fff);
 border-right: 2px solid #cc0000;
border-top: 2px solid #cc0000;
border-left: 2px solid #cc0000;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
  padding: .8em 3em;
  color: #000;
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a{
text-shadow: #fff 0.1em 0.1em 0.2em;
border-right: 2px solid #cc0000;
border-top: 2px solid #cc0000;
border-left: 2px solid #cc0000;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
}
.tabs-inner .widget li a:hover {
  color: #000;
  background-color: #ccc;
  text-decoration: none;
background: -webkit-linear-gradient(#fff, #cc0000);
background: -moz-linear-gradient(#fff, #cc0000);
background: -o-linear-gradient(#fff, #cc0000);
border-right: 2px solid #cc0000;
border-top: 2px solid #cc0000;
border-left: 2px solid #cc0000;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
}


MODELO CÍRCULOS



/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
background: transparent;
}

.tabs-inner .widget li a  {
color: white; text-shadow: black 0.1em 0.1em 0.2em;
font-size: 16px;
font-weight: bold;
}
.tabs-inner .widget li  {
text-align: center;
-moz-box-shadow: 0 0 4px 4px #888;
-webkit-box-shadow: 0 0 4px 4px #888;
box-shadow: 0 0 4px 4px #888;
background: #65667D;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
behavior: url(border-radius.htc);
width: 90px;
height: 60px;
margin:16px 12px 14px 16px;
padding: 27px 0 0 0;
}

.tabs-inner .widget li.selected {
background: #5C5FCA;
}

 .tabs-inner .widget li:hover {
text-align: center;
-moz-box-shadow: 0 0 8px 8px #4040FF;
-webkit-box-shadow: 0 0 8px 8px #4040FF;
box-shadow: 0 0 8px 8px #4040FF;
background: #83F9F8;
}
 .tabs-inner .widget li:hover {
text-align: center;
-moz-box-shadow: 0 0 5px 5px #ccc;
-webkit-box-shadow: 0 0 4px 4px #ccc;
box-shadow: 0 0 4px 4px #ccc;
background: #83F9F8;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
behavior: url(border-radius.htc);
width: 90px;
height: 60px;
margin:16px 12px 6px 12px;
padding: 27px 0 0 0;
}

Fundo em degrade de cores com CSS

Nenhum comentário:
Você pode fazer efeito em degradê de cores em várias áreas de seu blog como os widgets, o fundo, a sidebar, os posts, o fundo dos títulos das postagens. E tudo usando apenas código CSS. Basta para isso copiar o código e colar na parte que deseja o efeito.


Vá até o Modelo de seu blog, clique em Editar modelo
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011



 
 
Cole então o código abaixo onde quiser fazer o efeito.


background: -webkit-linear-gradient(#808080, #eee);
background: -moz-linear-gradient(#808080, #eee);
background: -o-linear-gradient(#808080, #eee);




Para fazer o efeito nas postagens:

Procure por:

.post {


E cole então o código depois dele.

Para fazer o efeito nos títulos das postagens

Procure por:

h3.post-title, h3.post-title a{

E depois dele cole o código.

2 de set de 2011

Colocar três colunas abaixo da header do novo Blogger

6 comentários:


As vezes falta espaço no blog para tanta informação, tanto widget, gadget, firulinhas, coisinhas que queremos colocar. Então, porque não colocar 3 colunas abaixo da header do novo Blogger ? Pode dar um toque legal ao blog.



Vá até o Modelo de seu blog, clique em Editar modelo
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011


Agora procure por:  

]]></b:skin>  

 
 
Substitua então pelo código abaixo:


/*Colunas header-------------------------------------------------------*/

#header-wid-1 { width: 33%; text-align: left; margin: 2px 1px 2px 1px;float: left;}
#header-wid-2 { width: 32%;text-align: left;margin: 2px 2px 2px 2px;float: left;}
#header-wid-3 { width: 33%;text-align: left; margin: 2px 1px 2px 1px;float: right;}

#header-wid-1 .widget, #header-wid-2 .widget, #header-wid-3 .widget{
  background: #cc0000;
  color: #000;/*cor da letra*/
  line-height: 1px;
  padding: 2px;
  margin:0 auto;
height: 50px;
}

#header-wid-1 .widget-content, #header-wid-2 .widget-content, #header-wid-3  .widget-content {
border-top: none;
margin: 0 0 0;
padding:3px;
}
#header-wid-1 h2, #header-wid-2 h2, #header-wid-3 h2{/*títulos*/
text-shadow: 0.1em 0.1em 0.2em black;
display: none;
  margin: 2px 0 0 0;
  padding: 8px 0px;
  text-align: center;
  float: center;
  font-size: 22px;
  color:#fff;/*cor da letra*/
  text-shadow:0 1px 0 #f9f9f9;
}

#header-wid-1 ul, #header-wid-2 ul, #header-wid-3 ul{
  list-style:none;
  margin:2px 0 2px 0;
  padding: 2px  0 1px 0;
}

#header-wid-1 ul li a:link, #header-wid-2 ul li a:link, #header-wid-3 ul li a:link{/*link cinza*/
 background:url(http://2.bp.blogspot.com/_fN8wBWylUn8/THzjLMAHw9I/AAAAAAAACWQ/yBI9AaHfysk/s1600/5s.gif) no-repeat 2px;
  color:#000;/*cor da letra cinza claro*/
  border-bottom:1px dashed #000;/*borda cinza claro*/
  margin: 1px 0 1px 10px;
  padding: 1px 0 5px 12px;
  display:block;
}

#header-wid-1 ul li a:visited, #header-wid-2 ul li a:visited, #header-wid-3 ul li a:visited{ /*links visitados cinza escuro*/
background: url(http://2.bp.blogspot.com/_fN8wBWylUn8/TH0rY7jnx6I/AAAAAAAACXw/rCX_tcjFh-w/s1600/2z.gif) no-repeat 2px;
  color:#808080;/*cor da letra cinza escuro*/
  border-bottom:1px dashed #808080;/*borda cinza escuro*/
  margin: 2px 0 1px 3px;
  padding: 2px 0 5px 12px;
  display:block;
}

#header-wid-1 ul li a:hover, #header-wid-2 ul li a:hover, #header-wid-3 ul li a:hover{ /*ao passar o mouse em cima vermelho*/
background: url(http://2.bp.blogspot.com/_fN8wBWylUn8/TH0quK5KIPI/AAAAAAAACXo/unzMhDZouho/s1600/4we.gif) no-repeat 4px;
  color: #cc0000;
  border-bottom:1px dashed #cc0000;
}

#BlogArchive12_ArchiveMenu{
background: #eee;
color:#000;
font-size:12px;
font-weight: bold;
margin-left:0px;
margin-top:5px;
padding:10px;
width:100%;
}

]]></b:skin> 


Salve !

Agora procure por:

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='AQUI DEVERÁ ESTAR O NOME DE SEU BLOG (Cabeçalho)' type='Header'/>
</b:section>


Abaixo dele, cole este código abaixo.

<b:section class='header-wid-1' id='header-wid-1' maxwidgets='1' showaddelement='yes'>
<b:widget id='FollowByEmail12' locked='false' title='Seguir por email' type='FollowByEmail'/>
</b:section>

 <b:section class='header-wid-2' id='header-wid-2' maxwidgets='1' showaddelement='yes'>
<b:widget id='BlogArchive12' locked='false' title='Arquivo' type='BlogArchive'/>
</b:section>

<b:section class='header-wid-3' id='header-wid-3' maxwidgets='1' showaddelement='yes'>
<b:widget id='Label11' locked='false' title='Labels' type='Label'/>
</b:section>


Para ficar igualzinho ao exemplo, você precisará configurar o widget de arquivos e o de marcadores. 

Configurar o arquivo, vá até o layout.





Clique em "Editar" e depois marque em "Menu suspenso" como a imagem. Salve e pronto.




Para configurar os marcadores:

Clique em "Expandir modelos de widget.

Procure por este trecho abaixo: (para facilitar, procure pela primeira linha que está em azul)


<b:widget id='Label11' locked='false' title='Labels' 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 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 class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>


Troque-o por este:



<b:widget id='Label11' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%; background: #eee; padding: 10px 0;'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

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

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