![[TUTORIAL]- Menu social com barra de rolágem Buddy_Group](https://2img.net/h/cdn1.iconfinder.com/data/icons/df_On_Stage_Icon_Set/128/Buddy_Group.png){kind=icon}
Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas![[TUTORIAL]- Menu social com barra de rolágem Theme](https://2img.net/i/fa/admin/icones/theme.png) | - Menu social com barra de rolágem |
1º - Widget
Painel de Controle-Modulos-Gestão dos Widgets-Criar Widget Personalizado
O codigo e esse:
- Código:
<style>
/*---/ Menu social /---*/
#menu-pro1{margin: -10px 0 0 0;
}
div.sc_menu_wrapper {
position:absolute; top:15%; left:0; z-index:9999; overflow:hidden; width: 80px; position: fixed;
height: 270px; /* modifique o número para diminuir a altura */
width: 200px; /* modifique o número para modificar a largura */
overflow: auto;
}
div.sc_menu {
padding: 3px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 164px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* color y fondo efecto hover */
color: #fff;
}
.sc_menu a:hover {
background: #fff;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading { /* estilos de carga */
position: absolute;
top: 40px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid #63B0B4;
background: #022A4A;
}
.sc_menu_tooltip { /* estilos tooltip */
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: #08044E;
}
</style>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'><div class='sc_menu_wrapper'><div class='sc_menu'>
<a href='https://www.google.com/accounts/Login?service=blogger' title='Login'><img alt='' height='120px' src='http://3.bp.blogspot.com/_fN8wBWylUn8/TQ0waJqAGiI/AAAAAAAACrs/-t4Sb285MhE/s1600/blogger-webtreats.pn' width='115px'/></a>
<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' height='120px' src='http://1.bp.blogspot.com/_fN8wBWylUn8/TQ0wZHUZXdI/AAAAAAAACro/RLgpKHq7Lkw/s1600/facebook-logo-webtreats.png' width='115px'/></a>
<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' height='120px' src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQ0wjRrgPzI/AAAAAAAACr4/WKJQSv-KGpM/s1600/twitter-bird3-webtreats.png' width='135px'/></a>
<a href='ENDEREÇO DO YOUTUBE' title='Assista ao meu canal'><img alt='' height='120px' src='http://4.bp.blogspot.com/_fN8wBWylUn8/TQ0xdduFNLI/AAAAAAAACsA/NefQg7oBrX4/s1600/you-tube1-webtreats.png' width='115px'/></a>
<a href='ENDEREÇO DO FLICKER' title='Minhas imagens'><img alt='' height='120px' src='http://3.bp.blogspot.com/_fN8wBWylUn8/TQ0x1RQpwTI/AAAAAAAACsE/MlkYtMkidas/s1600/flickr-webtreats.png' width='115px'/></a>
<a href='ENDEREÇO DO DIGG' title='Digg'><img alt='' height='120px' src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQ0wbcME6pI/AAAAAAAACrw/zysdEaMe3bY/s1600/digg-logo-webtreats.png' width='115px'/></a>
<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' height='120px' src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQ0wfjJVFJI/AAAAAAAACr0/DPYmMT0HrTE/s1600/orkut-webtreats.png' width='115px'/></a>
<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' height='120px' src='http://4.bp.blogspot.com/_fN8wBWylUn8/TQ0xa9nLwRI/AAAAAAAACr8/vrWxQ7bFbuM/s1600/rss-basic-webtreats.png' width='115px'/></a>
</div></div>
</b:if>
</b:if>
2º - Resultado
![[TUTORIAL]- Menu social com barra de rolágem Sem_ta15](https://i.servimg.com/u/f15/17/71/75/73/sem_ta15.png)
© VirtualDesign/STAFFGROPS
