quarta-feira, 8 de junho de 2016

Sidebar Accordion blogger

accordion-sidebar-blogger


Hoje vamos mostrar um efeito bem interessante no Blogger isso também ajuda para economizar espaços em widgets em sua sidebar e influencia para a interatividade trazendo um efeito legal no Blogger é muito usado por profissionais 



Para adicionar isso ao Blogger siga os passos.

Então faça login no Blogger e vá no menu modelo >> então Editar Html/JavaScript
Com as teclas combinadas CTRL+F busque por  ]]></b:skin>  e logo acima disso vamos colocar o CSS então copie e cole o seguinte código.

 .sidebar-wrapper h2 {
    position: relative;
    color: #BBB;
    margin: 1px 0 0;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:4px;
    background-color:#003366;
    cursor:pointer;
    background-image: url('data:image/gif;base64,R0lGODlhEAAKAHAAACH5BAEAAAIALAAAAAAQAAoAgQAAAJ6engAAAAAAAAIVlI9pob3sUpgRTVrFxXFnzVWh+BkFADs=');
    background-repeat: no-repeat;
    background-position: right center;
    }
    .sidebar-wrapper h2.headactive {
    background-image: url('data:image/gif;base64,R0lGODlhFAAGAHAAACH5BAEAAAIALAAAAAAUAAYAgQAAAC+k0wAAAAAAAAIPlI+pwd26HINQUvou1qgAADs=');
    }


Agora busque pelo código </body>  então acima disso copie e cole o seguinte código.

$(function () {
        $('.sidebar-wrapper .widget-content').hide();
        $('.sidebar-wrapper h2:first').addClass('headactive').next().slideDown('slow');
        $('.sidebar-wrapper h2').click(function () {
            if ($(this).next().is(':hidden')) {
                $('.sidebar-wrapper h2').removeClass('headactive').next().slideUp('slow');
                $(this).toggleClass('headactive').next().slideDown('slow');
            }
        });
    });


Verifique se seu template já possui Jquery caso não possua copie o código abaixo e cole antes da tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Salve e pronto.

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner