MENU HORIZONTAL COM IMAGEM ANIMADA E DESCRIÇÃO PARA O BLOGGER

copie este código abaixo e cole no HTML/Javascript colando depois o endereço do arquivo jquery no local indicado.

.link1,
.link2,
.link3,
.link4,
.link5,
.link6{
    width:64px;
    height:74px;
    display:block;
    left:40px;
    top:220px;
    position:absolute;
}
.link1{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_nFXSjcmb0rt1_WaarbUKlFHjcP7YqPuK4YUbaWJ4UxW8sqFM_RlK_xU4zd1xMK8AjWKrQ8zRCnxHB1jP3xGBHkZCCZlTHik5qLe0b9virVEreMQtNi85hX5VyOyNbnnF7GxZu1Mqb2BW/s320/home.png) no-repeat top left;
}
.link2{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5fe-OYXCwX6-LApH2hoi3Wjb2HTxq_yqmtlDs-sfwHZt8rnKpcObBey8_4AKvR8Nisol_VE2P-jLX9apTD8dVC_1rId5EnNxWFsUyDuWw9vB2PX7CcKxU0qvIl82fWa-2Yjs_E-GODo6L/s320/folder.png) no-repeat top left;
}
.link3{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWv8nnT98KW-R7T-jjAzTxu58tQ_mF3ISfugAlvHPCugE1pLe29LezAn1SAqZplDmCgClTvKpjrgindwX3Xs2JvN-vuuACfmkAHzJE3SjA9_nh-pcpXE3oYLH_rW8xxZuRkPkZwK6VZRvh/s320/warning.png) no-repeat top left;
}
.link4{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisWVbn36AzWW3_fS2RdAlinDjkMnxXT41sbHWfwBV_-QpUBbIAzFbq-Fe4Gqu180B9S4rBbdet0xcRR94UMMOlJtCHAnphsytsG2-gXocwznoxOM7N8aEFfzCYXK-AfIEnAZxUmhaLnwkB/s320/rss.png) no-repeat top left;
}
.link5{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjclG1PA5XYn1pVJZJhxf03Z9XrBseNYLb6L7oA8SL4dHqMLwx7S4VukeUgmk3gH2KENIcBfhuMMi66zPvce2cw7ZHGvGWipF9VVyg1YII7QqhjaTCvFBOlbNkGnum_kQ1p6viHf6q42gDt/s320/tag.png) no-repeat top left;
}
.link6{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzJCQPTABNXXqZQm82ScneAQhXZAmIlyHOCpdnuxdmbV_jLe6e-B79qTheu2Dor33rubNqdubIKisAtY-3w_acqd2V0Gf7LDnp6jUe8iiUyB8ZAfBB7vZq7TODXlVHExhmivg_plqeMnba/s320/mail.png) no-repeat top left;
}
ul#menu span.title{
    display:block;
    height:26px;
    text-shadow:1px 1px 1px #000;
    color:#B7B7B6;
    text-indent:10px;
}
ul#menu span.description{
    width:100px;
    height:80px;
    background-color:#B7B7B6;
    border:3px solid #fff;
    color:#fff;
    display:block;
    font-size:14px;
    padding:5px;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    box-shadow:1px 1px 6px #000;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

ul#menu a:hover span.description{
    background-color:#808080; color: #cc0000;
}
ul#menu a:hover span.title{
    color:#cc0000;
}

</style>

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-95px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});
 </script>

Agora vá até o HTML de seu blog e procure pelo seguinte código (para ficar acima da header)

<div id='header-wrapper'>

e cole o próximo código.

MENU HORIZONTAL COM IMAGEM ANIMADA E DESCRIÇÃO PARA O BLOGGER

quinta-feira, 17 de julho de 20140 comentários

Postar um comentário

Mais Acessadas

Parceiros