quinta-feira, 6 de outubro de 2011

Menu fixo estilo Mac Dock

Se você é fanático pela tecnologia Apple e possui um blog relacionado , instale este belíssimo menu no maior estilo Mac Dock.  Encontrei o menu do blog Webexpedition18 e o original por ser visto clicando neste link. Como você pôde perceber, o menu que vamos disponibilizar aqui é meio diferendo do original, pois fiz algumas modificações nos ícones, trocando por botões como Início, Feed, contato e três grandes redes sociais, além de tê-lo adaptado para o blogger.

Menu Mac Dock
Ver demonstração

Agora vejamos como colocar em seu blog. Primeiramente entre no “Editar HTML” do seu blog e procure por </head>. Acima dessa tag cole o código abaixo:

<link rel="stylesheet" type="text/css" href="http://labs.simonedamico.com/projects/macdock/dashboard.css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://labs.simonedamico.com/projects/macdock/theme.default/default.css" media="all" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery.fn.center = function () {
            this.css("left", ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + "px");
            return this;
        }

        //document ready
        $(function(){
            $('#dashboard').center();
        });
        //window resize
        $(window).resize(function() {
            $('#dashboard').center();
        });
    </script>

Agora procure por <body>, abaixo dessa tag cole o seguinte código:

<div id="dashboard" style="position: fixed; z-index: 999999999;">
   <div id="left_shelf"></div>
        <div id="shelf">
            <ul id="menu_dashboard">
                <li><a href=URL DO SEU BLOG/><img src="http://icons.iconarchive.com/icons/iconshock/vista-general/96/house-icon.png" alt="Inicio" /></a></li>
                <li><a href="URL DO SEU FEED"><img src="http://icons.iconarchive.com/icons/emey87/social-button/96/rss-icon.png" alt="Assinar Feed" /></a></li>
                <li><a href="URL DA PÁGINA PARA CONTATO"><img src="http://icons.iconarchive.com/icons/emey87/social-button/96/mail-icon.png" alt="Contato" /></a></li>
                &lt;li class=&quot;separator&quot;&gt;&amp;nbsp;&lt;/li&gt;
                <li><a href="URL DO SEU PERFIL TWITTER"><img src="http://icons.iconarchive.com/icons/emey87/social-button/96/twitter-icon.png" alt="harddrive" /></a></li>
<li><a href="URL DO SEU PERFIL FACEBOOK"><img src="http://icons.iconarchive.com/icons/emey87/social-button/96/facebook-icon.png" alt="harddrive" /></a></li> <li><a href="URL DO SEU PERFIL GOOGLE PLUS"><img src="http://icons.iconarchive.com/icons/creativenerds/google-plus/72/google-plus-3-icon.png" alt="harddrive" /></a></li>
            </ul>
        </div>
        <div id="right_shelf"></div>
    </div>

Agora é só alterar as partes destacadas no código conforme o que se pede e em seguida visualizar, se estiver tudo certo, salve.

Marcadores: , , ,

1 Comentários:

Às 7 de outubro de 2011 11:14 , Blogger Caio disse...

Olá, Tem como colocar ele em forma de gadget. Obrigado

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial