Menu social de bandeirolas

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.

<style>
#menu-social {
  margin: 40px 1px 0 10px;
  float: right;
}
</style>

<div id="menu-social">

<a href="ENDEREÇO DO BLOGGER" imageanchor="1"><img border="0" src="http://3.bp.blogspot.com/-uEv4cql3hdA/T54qSGOTvlI/AAAAAAAABRU/9Hs-vWeB1sU/s1600/Blogger.png" width="60px" /></a>
<a href="ENDEREÇO DO FACEBOOK" imageanchor="1"><img border="0" src="http://1.bp.blogspot.com/-dP10w6we8i0/T54qTwG9DgI/AAAAAAAABRc/dWnxodY0Ay0/s1600/Facebook.png" width="60px" /></a>
<a href="ENDEREÇO DO TWITTER" imageanchor="1"><img border="0" src="http://2.bp.blogspot.com/-kpWl8sO2LS8/T54qWrI4wqI/AAAAAAAABRk/h_YowmLHjl8/s1600/Twitter2.png" width="60px" /></a>
<a href="mailto:ENDEREÇO DO EMAIL" imageanchor="1"><img border="0" src="http://4.bp.blogspot.com/-XLZIJYjfETU/T54qZacItpI/AAAAAAAABRs/EaURWA8gzFk/s1600/GMail.png" width="60px" /></a>
<a href="ENDEREÇO DO FEED" imageanchor="1"><img border="0" src="http://1.bp.blogspot.com/-yDnRdJJq9EU/T54qap-IUzI/AAAAAAAABR0/IbDyiyQAPMc/s1600/RSS.png" width="60px" /></a></div>

»»Leia mais...

Modelos de marcadores em forma de menu horizontal

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:

<div class='marcadores-menu'> <b:section class='marcadores-menu' id=' marcadores-menu ' preferred='yes' showaddelement='no'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div class='clear'>&#160;</div>

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(http://4.bp.blogspot.com/-FHQ4SAFDMmc/T54Tz2ES4SI/AAAAAAAABQk/qhj0sanE5Eg/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(http://1.bp.blogspot.com/-ss2BJ07KRvA/T54T0CFkqUI/AAAAAAAABQs/rhH7InHzE1M/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(http://2.bp.blogspot.com/-l-H7Ny_XOKI/T54T25ozyOI/AAAAAAAABQ8/5kKrr_4o_so/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

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:

<div class='marcadores-menu'> <b:section class='marcadores-menu' id=' marcadores-menu ' preferred='yes' showaddelement='no'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>
<div class='clear'>&#160;</div>

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(http://4.bp.blogspot.com/-2-JnKvJQm-0/TiB_LhLKDZI/AAAAAAAAFtA/o3cqG8fD6sI/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...

Colocar no Blogger widget para seguir no Twitter

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 @)

<!-- Twitter Follower Box -->
<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>
<!-- End Twitter Follower Box -->

»»Leia mais...

Ícones Blogger

Os ícones desta página não foram feitos por mim. São frutos de pesquisa na internet.

»»Leia mais...