Templates e Acessórios: abril 2012

Postagens Recentes

Grade Lista

30 de abr. de 2012

Menu social de bandeirolas

. Elke di Barros | 10:40 3 comentários:

Tá aí, mais um modelo de menu social.

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

»»Leia mais...

Modelos de marcadores em forma de menu horizontal

. Elke di Barros | 02:13 Um comentário:

Continuando o post anterior, outros estilos para os marcadores em forma de menu horizontal pra quem tem blog com poucos marcadores, ou quer destacar os marcadores mais importantes do blog.

Já sabe ? A primeira coisa a fazer é deletar o widget de marcadores de seu blog. Vamos, delete-o.

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

Procure por:

<div id='content-wrapper'>

Se não encontrar, procure por:

<div class='tabs-outer'>

Abaixo do código cole este trecho:

Salve !

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

E acima dele cole o código do modelo escolhido.

Modelo 1

/*Label------------------------------------------------------------------------------------------------*/
#Label1 {margin: 20px 5px;}
#Label1 h2 {display:none;}
#Label1 li {margin: 0 0 0 0px;display: inline;}

#Label1 li a:link {
font-size: 16px;
text-shadow: 1px 1px 1px #000;
background: #FDE8B5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4TN-I4VU1KpNCymyW8MTuOvQvghnxe_TloHxECqXPKU0Jx1H0SE9xZ1JV4sXAjaCfBHvBJR85m0kZruT2CD8X6CPNn54eU14babyS6bWOsLuhp1tzmor4BFUCCPHlq0bx45-ig4FktI/s1600/tag%25281%2529.png) no-repeat 5px;
display: inline block; border: 2px outset #FDE8B5;padding:8px 3px 8px 21px;color: #F6C252;line-height:1.15em;
}
#Label1 li a:hover, #Label1 li a:active {
text-shadow: 1px 1px 1px #fff;
background: #CAE4EC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCEyTPIBgwWN9qQoV06lh-eRPNJuxjn9ZFhBgwHfZ7SToYsZIYiXBeJxLCrjxocZluboYx7ugnkNCYPZm07WSc4H0Y-D7zAon4lHXaFL9-HvDK15sEPqOyhmpz1B5LFtHfSjLEOKwZtQ8/s1600/tag_add.png) no-repeat 5px; display: inline block; line-height:1.15em;border: 2px intset #CAE4EC;
padding:8px 3px 8px 21px; color: #344CDA;
}
#Label1 li a:visited {
background: #FAD4D4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdHVjnFT3IoepjWbM7e4k9BJQMPgDJ0mAdWq0JZE7K9-m1rjFfaCvlqusheKXE1Do3sHS2T5mTeas__3I5fg6lpYOWNzqRT0ZM9Vuc4xfhx__upfd32U9p0BfwodCdl9uHy7ic3uS3EjU/s1600/tag_remove.png) no-repeat 5px; display: inline block; line-height:1.15em;border: 2px outset #FAD4D4;
padding:8px 3px 8px 21px; color: #cc0000;
}

Modelo 2

/*Label------------------------------------------------------------------------------------------------*/
#Label1 {margin: 20px 5px;}
#Label1 h2 {display:none;}
#Label1 li {margin: 0 0 0 0px;display: inline;}

#Label1 li a:link {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}
#Label1 li a:hover, #Label1 li a:active {
text-shadow: 1px 1px 1px #000;
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #000 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #B8B6B6) );
background: -moz-linear-gradient( center top, white 20%, #B8B6B6 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}
#Label1 li a:visited {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #cc0000 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cc0000) );
background: -moz-linear-gradient( center top, white 20%, #cc0000 100% );
font: 12px/18px sans-serif;
padding:2px 8px; margin-right:1px;
}

Depois abra o widget e desmarque os números e escolha os marcadores

»»Leia mais...

Marcadores em forma de menu horizontal

. Elke di Barros | 00:56 3 comentários:

Pra quem tem blog com poucos marcadores, ou quer destacar os marcadores mais importantes do blog, essa é uma dica bem legal. Colocar seus marcadores em forma de menu horizontal. Aí estão os códigos, para dois modelo diferentes. A primeira coisa a fazer é deletar o widget de marcadores de seu blog. Vamos, delete-o.

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

Procure por:

<div id='content-wrapper'>

Se não encontrar, procure por:

<div class='tabs-outer'>

Abaixo do código cole este trecho:

Salve !

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

E acima dele cole o código do modelo escolhido.

Modelo 1

/*Menu marcadores------------------------------------------------------------*/
.marcadores-menu {
height: 38px;
background: #ccc;
border:1px solid #808080;
margin: 0 auto;
padding:0px;
text-shadow: 0 1px 0 #fff;
text-transform: none;
width: 100%;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #808080;
}

.marcadores-menu h2 {
display: none;
}

.marcadores-menu a {
color: #000;
}
.marcadores-menu li {
border-right: 1px solid #666;
color: #000;
float: left;
font: bold 11px Arial;
margin: 0 2px 0px 0;
padding: 10px 4px;
}
.marcadores-menu li a:hover{
color: #fff; text-shadow: 0 1px 0 #000;
}

.marcadores-menu ul {
float: left;
list-style: none outside none;
margin-bottom: 0;
margin-left: 10px;
padding: 0;
}

Modelo 2

/*Menu marcadores------------------------------------------------------------*/
.marcadores-menu { height: 30px; background: transparent; margin: 10px 8px;}
.marcadores-menu h2 { display: none; }
.marcadores-menu li a{ font: $(tabs.font);color: #fff;}
.marcadores-menu ul { display: inline-block; margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);}
.marcadores-menu li {
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw7YotpIWRG_W-zGzMVQC8OZkzGXIJY159K4eoSTNhRuesgYJxUC3yDkvEXZIZdAfFbuM5GQfLeD4gGx5BAw_IhigF2r-xPLMpa5ekHCptIsZOsjvJUqEl9O523AcrzYC2d5CSy57l5kY/s1600/tag.png) no-repeat 3px; margin: 2px 2px;
display: inline-block;
padding: 8px 20px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #808080;
}
.marcadores-menu li.selected a, .marcadores-menu li a:hover { color: #000; }
.marcadores-menu li a:visited{ color: #cc0000;margin: 2px 2px; display: inline;}

Depois abra o widget e desmarque os números e escolha os marcadores

»»Leia mais...

27 de abr. de 2012

Colocar no Blogger widget para seguir no Twitter

. Elke di Barros | 21:30 13 comentários:

Dê a seus leitores a oportunidade de te seguir no Twitter.

Vá até Layout

Clique em Adicionar um Gadget

Ao abrir, clique em HTML/Javascript

Cole então o próximo código escrevendo seu nick do Twitter (sem o @)

<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 305px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("AQUI SEU NICK DO TWITTER");</script
type="text>

»»Leia mais...