Menu vertical Hover no Blogger(BlogSpot) 0

Olá pessoal! Embalado na onda dos botões de compartilhamento do AddThis, vou tentar "traduzir" para vocês,  o Menu vertical Hover, que também é do Addthis,  para que vocês possam entender o que é e como funciona trata-se de "uma coluna de menu único mínima torna a partilha de pequeno porte, focado e escorregadio. jQuery poderes do efeito hover." É assim, quando bem instalo funciona da seguinte forma, ao invés de ficar exposta irá ficar um link com algo assim "Hover over me" ou "Passe o mouse sobre mim" e quando seus leitores passarem o mouse por cima, um menu que até então não aparecia, desce.

Veja o Demo

Chega de papo vamos a prática?

Logado no Blogger, vá em Design, Editar HTML, faz o backup do seu template, marque a caixa Expandir modelos de widgets e procure por ]]></b:skin> e imediatamente Antes/Acima cole todo o código abaixo:

/* AddThis Vertical Hover Menu */
  
.addthis_toolbox .custom_hover {
position: relative;
}
.addthis_toolbox .custom_hover .custom_button {
font-weight: bold;
padding: 6px 12px 6px 12px;
color: #00bff3;
cursor: pointer;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}
.addthis_toolbox .custom_hover .custom_button.active {
background-color: #eee;
}
.addthis_toolbox .hover_menu {
display: none;
position: absolute;
background: #fff;
}
.addthis_toolbox .custom_hover .tower {
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius-topleft: 0;
}
.addthis_toolbox .hover_menu {
width: 136px;
padding: 1px;
border: 3px solid #eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.addthis_toolbox .hover_menu a {
position: relative;
display: block;
width: 102px;
padding: 4px 0 4px 34px;
text-decoration: none;
color: #00bff3;
}
.addthis_toolbox .hover_menu a:hover {
background: #f5f5f5;
color: #027999;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.addthis_toolbox .hover_menu span {
position: absolute;
left: 14px;
top: 4px;
}
.addthis_toolbox .hover_menu .more {
border-top: solid 1px #eee;
padding: 10px 0 0 0;
margin: 10px 10px 0 10px;
text-align: center;
}
.addthis_toolbox .hover_menu .more a {
padding: 4px 0;
margin: 0;
}
.addthis_toolbox .hover_menu .more a:hover {
background: none;
}
.addthis_toolbox .hover_menu .more span {
display: none;
}

Não mexa em nada, incluir o arquivo de Script abaixo em qualquer lugar do seu template, geralmente antes do fechamento da tag </body>.

Atenção!: No código abaixo tem que fazer alteração para o seu perfil do AddThis lá onde está em vermelho, coloque o seu ID, para que as pessoas possam compartilhar SEU conteúdo.

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function() {
    var delay = 400;
   
    function hideMenu() {
        if (!$('.custom_button').data('in') && !$('.hover_menu').data('in') && !$('.hover_menu').data('hidden')) {
            $('.hover_menu').fadeOut('fast');
            $('.custom_button').removeClass('active');
            $('.hover_menu').data('hidden', true);
        }
    }
   
    $('.custom_button, .hover_menu').mouseenter(function() {
        $('.hover_menu').fadeIn('fast');
        $('.custom_button').addClass('active');
        $(this).data('in', true);
        $('.hover_menu').data('hidden', false);

Agora vem o HTML,  eu fiz em duas versões a 1ª fica no template  direto e as posições onde você irá postar o código HTML abaixo estão AQUI,  a segunda adicionando um gadget HTML/JavaScript. Eu aconselho para quem não simpatiza muito com HTML a segunda opção é bem melhor e bem mais fácil de aplicar.

<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Hover over me</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <a class="addthis_button_email">Email</a>
        </div>
        <div class="column2">
            <a class="addthis_button_print">Print</a>
        </div>
        <div class="clear"></div>
        <div class="top"></div>
        <div class="column1">
            <a class="addthis_button_twitter">Twitter</a>
            <a class="addthis_button_facebook">Facebook</a>
            <a class="addthis_button_myspace">MySpace</a>
        </div>
        <div class="column2">
            <a class="addthis_button_delicious">Delicous</a>
            <a class="addthis_button_stumbleupon">Stumble</a>
            <a class="addthis_button_digg">Digg</a>
        </div>
        <div class="clear"></div>
        <div class="more">
            <a class="addthis_button_expanded">More...</a>
        </div>
    </div>
</div>    

Fica atento, mude se quiser o titulo que está em vermelho para o que você preferir, algo que vá chamar a atenção de seus leitores.

Qualquer dúvida, não deixe de me contatar.

 Até a próxima!