Sexy Sidebar

Caso queiram adicionar um widget como aquele que aparece neste blog, do lado esquerdo do ecrã, é muito simples:



- No vosso painel do blogger, vão a Esquema e cliquem em Adicionar uma Aplicação;
- Na janela pop-up que se abre, escolham HTML/Javascript;
- Copiem para o código seguinte para o conteúdo dessa Aplicação e Gravem.
E é tudo.
Tenham apenas o cuidado de alterar a última parte do código, colocando os vossos links, que podem dizer respeito a qualquer coisa: a vossa presença na web, o vosso blogrool, uma lista de posts do vosso blog, etc.

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
    font-size:75%;
}
a{
    outline: none;
}
a:active{
    outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
    color:#FFFFFF;
    font-size:110%;
    font-family:arial;
    margin:10px 10px 10px 10px;
    font-weight:bold !important;
}
#sideBar h2 span{
    font-size:125%;
    font-weight:normal !important;
}
#sideBar ul{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
#sideBar li{
    margin:0px 10px 3px 10px;
    padding:2px;
    list-style-type:none;
    display:block;
    background-color:#DA1074;
    width:177px;
    color:#FFFFFF;
}
#sideBar li a{
    width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
    color:#FFFFFF;
    font-family:verdana;
    font-size:100%;
    text-decoration:none;
    display:block;
    margin:0px 0px 0px 0px;
    padding:0px;
    width:100%;
}
#sideBar li a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}
#sideBar{
    position: fixed;
    width: auto;
    height: auto;
    top: 140px;
    left:0px;
    background-image:url(http://i49.tinypic.com/121abrq.jpg);
    background-position:top right;
    background-repeat:repeat-y;
}
#sideBarTab{
    float:left;
    height:137px;
    width:28px;
}
#sideBarTab img{
    border:0px solid #FFFFFF;
}
#sideBarContents{
    float:left;
    overflow:hidden !important;
    width:200px;
    height:320px;
}
#sideBarContentsInner{
    width:200px;
}</style>
<div id="sideBar">
        <div id="sideBarContents" style="display:none;">
        <div id="sideBarContentsInner">
            <h2>side<span>bar</span></h2>
                    <ul>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                  </ul>
                </div> </div>
    <a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>
</div>

Ok, repararam que a minha barra não tem links de texto mas imagens.
Eis o meu código. Copiem-no e alterem a última parte para os vossos links e imagens.
Se, eventualmente, quiserem usar botões como os meu, visitem o Brilliant Button Maker e criem-nos de uma penada.
Boa sorte!

Widget recolhido de Best Blogger Widgets. Obrigado!

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
    font-size:75%;
}
a{
    outline: none;
}
a:active{
    outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
    color:#FFFFFF;
    font-size:110%;
    font-family:arial;
    margin:10px 10px 10px 10px;
    font-weight:bold !important;
}
#sideBar h2 span{
    font-size:125%;
    font-weight:normal !important;
}
#sideBar ul{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
#sideBar li{
    margin:0px 10px 3px 10px;
    padding:2px;
    list-style-type:none;
    display:block;
    background-color:#DA1074;
    width:177px;
    color:#FFFFFF;
}
#sideBar li a{
    width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
    color:#FFFFFF;
    font-family:verdana;
    font-size:100%;
    text-decoration:none;
    display:block;
    margin:0px 0px 0px 0px;
    padding:0px;
    width:100%;
}
#sideBar li a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}
#sideBar{
    position: fixed;
    width: auto;
    height: auto;
    top: 140px;
    left:0px;
    background-image:url(http://i49.tinypic.com/121abrq.jpg);
    background-position:top right;
    background-repeat:repeat-y;
}
#sideBarTab{
    float:left;
    height:137px;
    width:28px;
}
#sideBarTab img{
    border:0px solid #FFFFFF;
}
#sideBarContents{
    float:left;
    overflow:hidden !important;
    width:200px;
    height:320px;
}
#sideBarContentsInner{
    width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>
Eu na<span>Web</span></h2>
<ul>
<li><a href="http://www.profelectro.info/"><img src="http://www.profelectro.info/Uploads/luisj/ligadoscorrente.png" /></a></li>
<li><a href="http://esasrenovaveis.blogspot.com"><img src="http://www.profelectro.info/Uploads/luisj/renovaveis.png" /></a></li>
<li><a href="http://www.cpeacomandoesas.blogspot.com"><img src="http://www.profelectro.info/Uploads/luisj/automacao.png" /></a></li>
<li><a href="http://musicaesquisita.blogspot.com"><img src="http://www.profelectro.info/Uploads/luisj/musicaesquisita.png" /></a></li>
<li><a href="http://www.profelectro.info/fm"><img src="http://www.profelectro.info/Uploads/luisj/fm-1958-2005.png" /></a></li>
<li><a href="http://fmstereo.awardspace.com"><img src="http://www.profelectro.info/Uploads/luisj/fm.png" /></a></li>
<li><a href="http://webdoispontozeroplus.blogspot.com"><img src="http://www.profelectro.info/Uploads/luisj/WEB20.png" /></a></li>
<li><a href="mailto:mig.pand@gmail.com"><img src="http://www.profelectro.info/Uploads/luisj/gmail.png" /></a></li>
</ul>
</div>
</div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar" /></a>
</div>

                         

Mensagens relacionadas (por Tags)

widgets

• Posts Relacionados com Imagens Miniatura (Thumbnails) - Widget para Blogger -
• Widget: Recomendações Facebook
• Surpreenda os visitantes do seu blog com uma Caixa de Boas-Vindas
• Mostre o número de visitas dos seus posts
• Social Bookmarking Widget for Blogger, com função de autoscroll
• Deixe os visitantes Tuitar a partir do seu blogue
• Widget para Citação/Mensagem Aleatória
• Word/Tag Cloud Makers
• Quanto vale o seu blog / site?
• Google native search para Blogger
• Colocar a timeline do seu Google Buzz num blog
• Spell with Flickr
• Google Profile
• Scribble Maps
• Conversor de Unidades
• Widget para exibição de posts aleatórios (com excerto)
• TouchGraph, A Nossa Teia
• Gadget Google para eventos (c/ Screencast)
• Corrija o seu Inglês
• Gadgets Educacionais a partir do Google Docs (Excel) - c/ Screencast
• O mundo maravilhoso dos Treemaps
• Google Books: nova funcionalidade e Widget (com screencast)
• O maravilhoso mundo dos mashups
• Blogroll em Ajax - Animado -

menus

sidebar

• Imagens como Títulos
• Adicionar fontes ao gimp
• Como construir um mini blog na sua barra lateral