Templates e Acessórios: Menu em abas

Postagens Recentes

Mostrando postagens com marcador Menu em abas. Mostrar todas as postagens

25 de jan. de 2014

Widgets dentro de menu em abas

Organização e economia de espaço é tudo em nosso blog. Um bom widget a se instalar é esse, de menu em abas onde se instala os posts populares, os útimos posts, os últimos comentários e os marcadores.
Da um puquinho de trabalho e é necessário ter um sidebar mais largo, de pelo menos 380px para que fique bem estruturado e não embole os títulos dos widgets.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Hack para o template do Blogger, implementado em abril de 2013.

Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.

Procure por </head>

Acima dele cole este próximo código.

Salve !

Agora vamos procurar por um código e preste atenção.

Se a sidebar de seu blog fica do lado direito, procure por:

<div class='column-right-outer'>

Se a sidebar de seu blog fica do lado esquerdo procure por:

<div class='column-left-outer'>

Abaixo dele, cole

<div id='tabber'>

       <ul class='tabs'>
           <li><a class='selected' href='#popular-posts'>Popular</a></li>
           <li><a href='#recent-posts'>Recente</a></li>
            <li><a href='#recent-comments'>Comentário</a></li>
           <li><a class='border-right-none' href='#tag-cloud'>Tags</a></li>
       </ul> 

       <div class='clear'/>

       <div class='inside'>

<div id='popular-posts' style='display: block;'>
               <ul>
<b:section id='tab_pop'>
<b:widget id='PopularPosts11' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
   <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail-center'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
               </ul>
            </div> 

            <div id='recent-posts' style='display: none;'>
                <ul>
        <ul>
                   <script>
                            document.write("<script src=\"/feeds/posts/default/?max-results="+numpostsf+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
                   </script>
</ul>

               </ul>
            </div> 

            <div id='recent-comments' style='display: none;'>
               <ul>

               
                                          <script type='text/javascript'>
//<![CDATA[
    // Recent Comments Settings
    var
   numComments    = 5,
   showAvatar    = true,
   avatarSize    = 60,
   roundAvatar   = true,
   characters    = 40,
   showMorelink   = false,
   moreLinktext   = "More",
   defaultAvatar    = "http://www.gravatar.com/avatar/?d=mm",
   hideCredits   = true;
//]]>
</script>
<script src='http://spicemag.googlecode.com/svn/trunk/spicemag/spicytricks_comments.js' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json&callback=spicytricks_recent_comments&max-results=5' type='text/javascript'/>

               </ul>
            </div> 

           <div id='tag-cloud' style='display: none;'>
<b:section id='tagsd'>
   <b:widget id='Label2' locked='false' title='Labels' type='Label'>
     <b:includable id='main'>

      <b:loop values='data:labels' var='label'>

            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

       </b:loop>

</b:includable>
   </b:widget>
</b:section>
</div> 

           <div class='clear' style='display: none;'/>

       </div> 

       <div class='clear'/>

   </div> 

<div class='widget rece_cat_spicytricks'>
   <div class='widget-title'><script type='text/javascript'>
    document.write(" <h3>"+side_cat1_title+"</h3> ");
                                       </script></div>
       <ul class='widget-content'>
               <script type='text/javaScript'>
        document.write("<script src=\"/feeds/posts/default/-/"+side_cat1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
               </script>
       </ul>
<div class='clear'/>
</div>

<div class='widget rece_cat_spicytricks'>
   <div class='widget-title'><script type='text/javascript'>
    document.write(" <h3>"+side_cat2_title+"</h3> ");
                                       </script></div>
       <ul class='widget-content'>
                   <script type='text/javaScript'>
        document.write("<script src=\"/feeds/posts/default/-/"+side_cat2+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
               </script>
       </ul>
<div class='clear'/>
</div>

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código abaixo e cole no local indicado.

/*Widget tabs------------------------------------------ */
#tabber {
   background: #fff;
   display: block;
   height: auto;
   margin: 0 0 25px 0;
   clear:both;
}

#tabber ul.tabs {
   background: #fff;
   padding: 0 0;
}
#tabber ul.tabs li {
   background: none;
   border-bottom: 0;
   color: #fff;
   cursor: pointer;
   display: inline;
   float: left;
   font-size: 11px;
   font-weight: bold;
    padding: 0 0 0 0;
}
#tabber ul.tabs li a.selected, #tabber ul.tabs li a:hover {
   background: #cc0000; /*Cor de fundo selecionada título*/
   color: #fff;
   text-decoration: none;
}
#tabber ul.tabs li a {
background: #443A3A; /*Cor de fundo título*/
color: #fff;
display: block;
float: left;
line-height: 22px;
padding: 8px 20px;
text-transform: uppercase;
}
#tabber #tag-cloud, #tabber .inside li {
   padding: 10px 10px 10px 0;
}
#tabber .inside li {
   background: none;
border-bottom: 1px solid #E9E9E9;
display: block;
clear: both;
min-height: 70px;
}
#tabber .inside li a {
   color: #555;
line-height: 19px;
font-size: 16px;
}
#tabber .inside li a:hover,#sidebar h2 a:hover{color:#FFC600;}
#tabber .inside li div.info {
   display: table;
   margin: 0 !important;
   padding: 0 !important;
   top: 0 !important;
}
#tabber .inside li span.meta {
   color: #999;
   display: block;
   font: 11px/20px Arial;
}
#tabber .inside li span.meta a {
   color: #999;
}
#tabber .inside li span.meta a:hover {
   text-decoration: none;
}
#tabber .inside li img.avatar, #tabber .inside li img.thumb {
   float: left;
   margin: 0 10px 10px 0;
}
#tabber .tab-thumb {
   float: left;
   margin: 0 10px 10px 0;
}
.avatarImage.avatarRound {
float: left;
height: 60px;
margin-right: -120px;}

#tagsd a {
padding: 3px;
font-size: 15px;
}
.item-thumbnail-center {
float: left;
margin-right: 5px;
}

#PopularPosts11{max-width:300px; margin: 0 0 0 -50px;}
#PopularPosts11 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts11 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#FF3E96), color-stop(0.5, #FF3E96), c#4F94CDolor-stop(0.5, #FF3E96), to(#aaa));background: -moz-linear-gradient(top, #ffffff, #ddd 50%, #FF3E96 50%, #ffffff);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts11 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }
.Label a:hover{
color:#000 !important;
background:#ff0; }

.slides img {
width: 80px;
height: 80px;
float: left;
margin: 2px 1px 6px -70px;
}
.slides h2 {
border: none !important;
margin: 2px 1px 2px 24px;
}

#footer .slides img{
border: 1px solid #777676;
padding: 3px;
display:none;
}
.flexslider .slides h2 {padding:15px 0;}

.slides h2 a {
color: #cc0000;
font-size: 16px;
}
.slides h2 a:hover {
color: #FFC600;
}

.spicytricks-related-posts{clear:both;overflow:hidden;}
.spicytricks-related-posts h3{
margin-bottom: 10px;
padding-bottom: 10px;
}
.avatarImage {margin: 0 0 0 -40px}

.avatarImage .avatarRound{margin: 0 0 0 -30px}

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;margin-right:36px;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; height:100%;margin:0;display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}

Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

»»Leia mais...

17 de jul. de 2011

Colocar sidebar em forma de menu em abas com efeito jquery no novo Blogger

. Elke di Barros | 04:24 11 comentários:

DEMO

Para quem usa o novo modelo do Blogger ou abriu a conta depois de julho de 2010, muitos dos hackes e dicas deste blog não funcionam, mas conforme comentei, devagar vou refazendo as dicas. Trago agora pra vocês a maneira certa de aplicar o menu em abas para o novo Blogger, desde que o seu template seja o Simple, se não for, mude-o para este modelo.

Aconselho que antes salve uma cópia de seu blog. Para isso, em modelo, clique em editar modelo, depois Expandir modelos de widget, copie tudo que estiver lá e guarde, colando no bloco de notas, ok ? Não me responsabilizo por erros.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

A primeira coisa a fazer é entrar no Blogger, clicando AQUI

Feito isso, vá seguindo as imagens.

Clique na setinha para abrir a janela

Ao abrir a janela, clique em Modelo

Clique em personalizar

Clique em Layout----->Selecione como a imagem------>Aplicar blog---------> Voltar para o blog

Agora no pé da página, clique em Editar modelo

Agora procure por:

]]></b:skin>

E substitua (TROQUE!) por este código abaixo:(para trocar cores e imagens, basta modificar os códigos em azul e rosa)

/*Sidebar table---------------------------------*/
.widget-wrapper2 {
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
    }
    .widget-tab {
     margin:0 0 -1px 0;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-radius-bottomleft:5px;
    -webkit-border-radius-bottomright:5px;
    -webkit-border-radius-topright:5px;
    background:#FFFFFF url(http://www.blogblog.com/1kt/transparent/white80.png) repeat-x scroll left bottom !important;
    border:1px solid #CFCFCF;
    font-family:Arial,Helvetica,sans-serif;
    padding:10px !important;
    }
    .widget-tab ul {
    margin: 10px;
    padding:0px 5px 0px 5px;
    }
    .widget-tab ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom: 10px;
    font-size:13px;
    }
    .widget-tab ul li:last-child {
    border-bottom:none;
    }
    .widget-tab ul li a {
    text-decoration:none;
    color:#3e4346;

    }
    .widget-tab ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;

    }
    .tab-content ul li a:hover {
    color:#a59c83;

    }
    .tab-content ul li a:hover small {
    color:#baae8e;
    }
    .active-tab{
    background:#FFFFFF url(http://www.blogblog.com/1kt/transparent/white80.png) repeat-x scroll left top !important;
    border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
    border-style:solid !important;
    border-width:1px 1px 2px !important;
    color:#282E32 !important;

    }
    ul.tab-wrapper {
    margin:0px;
     padding:0px;
    margin-top: 26px;/*chega o widget para baixo*/

    }
    ul.tab-wrapper li {
   bottom: -8px;
    -webkit-border-radius-topleft:5px;
    -webkit-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    background:#191919 url(http://www.blogblog.com/1kt/transparent/white80.png) repeat-x scroll left top;
    color:#fff;
    cursor:pointer;
    display:inline;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:bold;
    line-height:2em;
    list-style-image:none !important;
    list-style-position:outside !important;
    list-style-type:none !important;
    margin-right:1px;
    padding:18px 14px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    }
]]></b:skin>

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

Salve !

Agora procure por:

</head>

E abaixo dele colo o código abaixo:

<script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname="sidebar-right-1";
    </script>
<script type='text/javascript'>
//<![CDATA[
var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+" .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("widget-tab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .widget-tab").slideUp();$jtab1("#widg"+$jtab1(this).attr("id")).slideDown();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});

//]]>
</script>

Pronto.

Agora vá em Layout e arraste os widgets que você quer no menu

»»Leia mais...

28 de dez. de 2010

Menu em abas para widget no Blogger

. Elke di Barros | 19:09 3 comentários:

Outra forma de instalar o menu em abas em seu Blogger.

DEMO

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

Vá até o HTML de seu blog e troque:

]]></b:skin>

pelo código abaixo(ajuste a largura indicado na cor vermelha)

/* Tabs
----------------------------------------------- */
#tabs {
   width: 370px !important;
   height: auto !important;
        margin: 2px 0px 6px 8px;
   padding: 5px 9px 5px -2px;
   border: 1px solid #ddd;
   float: left;
   display: block;
   background: #eee;
}
#tabs h2 {
   display: none;
}
.inside {
   width: 348px !important;
   padding: 5px 5px 10px 5px!important;
   border: 1px solid #ddd !important;
   margin: 5px 4px 10px !important;
   background: #FFF;
}
ul.wooTabs {
   width: 100%;
   padding: 0 0 20px 6px;
}
ul.wooTabs li {
   float: left;
   display: inline;
   font-size: 11px;
   line-height: 14px;
   background: #fff;
   color: #000;
   border: 1px solid #ddd;
   font-weight: bold;
   margin: 0 2px 0 0px !important;
   cursor: pointer;
}
ul.wooTabs li a {
   line-height: 31px;
   color: #000 !important;
   display: block;
   float: left;
   padding: 0 6px;
}
ul.wooTabs li a.selected, ul.wooTabs li a:hover {
   text-decoration: none;
   color: #fff !important;
   background: #C00;
}
#tagcloud {
   padding: 10px;
}
#sub img {
   float: right;
   margin: 0 0 8px 8px;
}
.inside li {
   background: ;
   border-bottom: 1px solid #EEE;
   padding: 8px 0 0 2px;
   margin: 0 0 0 -30px;
        list-style-type: none;
}
.inside li img.avatar, .inside li img.thumbnail {
   border: 1px solid #ddd;
   padding: 3px;
   float: left;
   margin: 0 8px 0 0;
   background: #fff;
}

]]></b:skin>


<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){

        // UL = .wooTabs
        // Tab contents = .inside

       var tag_cloud_class = '#tagcloud';

              //Fix for tag clouds - unexpected height before .hide()
            var tag_cloud_height = jQuery('#tagcloud').height();

       jQuery('.inside ul li:last-child').css('border-bottom','0px') // remove last border-bottom from list in tab conten
       jQuery('.wooTabs').each(function(){
           jQuery(this).children('li').children('a:first').addClass('selected'); // Add .selected class to first tab on load
       });
       jQuery('.inside > *').hide();
       jQuery('.inside > *:first-child').show();
       jQuery('.wooTabs li a').click(function(evt){ // Init Click funtion on Tabs
        var clicked_tab_ref = jQuery(this).attr('href'); // Strore Href value    jQuery(this).parent().parent().children('li').children('a').removeClass('selected'); //Remove selected from all tabs
            jQuery(this).addClass('selected');
            jQuery(this).parent().parent().parent().children('.inside').children('*').hide();

            /*
            if(clicked_tab_ref === tag_cloud_class) // Initiate tab fix (+20 for padding fix)
            {
                clicked_tab_ref_height = tag_cloud_height + 20;
            }
            else // Other height calculations
            {
                clicked_tab_ref_height = jQuery('.inside ' + clicked_tab_ref).height();
            }
            */
             //jQuery('.inside').stop().animate({
            //    height: clicked_tab_ref_height
            // },400,"linear",function(){
                    //Callback after new tab content's height animation
                    jQuery('.inside ' + clicked_tab_ref).fadeIn(500);
            // })

             evt.preventDefault();
})
    })
//]]>
</script>

Agora acima de:

<div id='sidebar-wrapper'>

Cole o código abaixo. (Note que para as abas funcionarem os elementos precisam corresponder a grafia no endereço, no id e no class. Fiz esse esqueminha de cores para vc entender)

<div id='tabs'>
<ul class='wooTabs tabs'>
<li><a href='#pop'>Popular </a></li>
<li><a href='#perfil'>Perfil </a></li>
<li><a href='#feed'>Feed </a></li>
<li><a href='#marcadores'>Marcadores </a></li>
<li><a href='#seguidores'>Seguir </a></li>
</ul>

<div class='fix'/>
<div class='inside'>

<div id='pop'>
<b:section class='pop' id='pop' maxwidgets='1'>
<b:widget id='PopularPosts2' locked='true' title='Postagens populares' type='PopularPosts'/>
</b:section></div>

<div id='perfil'>
<b:section class='perfil' id='perfil' maxwidgets='1'>
<b:widget id='Profile1' locked='true' title='Quem sou eu' type='Profile'/>
</b:section></div>

<div id='feed'>
<b:section class='feed' id='feed' maxwidgets='1'>
<b:widget id='Subscribe1' locked='true' title='Inscrever-se' type='Subscribe'/>
</b:section></div>

<div id='marcadores'>
<b:section class='marcadores' id='marcadores' maxwidgets='1'>
<b:widget id='Label1' locked='true' title='Labels' type='Label'/>
</b:section></div>

<div id='seguidores'>
<b:section class='seguidores' id='seguidores' maxwidgets='1'>
<b:widget id='Followers1' locked='true' title='Seguir' type='Followers'/>
</b:section>
</div>

</div></div>
<div class='fix' style='height:15px !important;'/>

»»Leia mais...

1 de dez. de 2010

Menu em abas com botões diferentes e efeito JQuery

. Elke di Barros | 16:28 12 comentários:

DEMO

Para colocar sua sidebar em forma de tabela com efeito vá até o HTML de seu blog e antes de:

]]></b:skin>

Cole o código abaixo.

Código em vermelho representa a largura do menu

/*Tab-Sidebar --------------------------------------------------*/
.widgets{
background: #ccc;
float:left;
margin: 10px 0px 0 10px;
width:318px;
}

ul.tabnav{
margin:0;
padding:0;
width:318px;
}

.tabnav li{
background: #fff;
display:inline;
float:left;
list-style:none;
margin: 1px 0px 1px 1px;
padding: 2px 0px;
}

.tabnav li a{
color:#fff;
display:block;
font-size:88%;
font-family:Arial, Tahoma, Verdana;
font-weight:bold;
margin:2px 2px 0 2px;
outline:none;
padding:4px 3px 1px 3px;
text-transform:uppercase;
}
.tabnav li a:hover,.tabnav li a:active,.tabnav li.ui-tabs-selected a{
background:#ccc;
color:#333;
text-decoration:none;
}
.tabdiv{
border: 2px solid #ccc;
background: #fff;
padding:0 0 0 5px;
margim: 0 0 0 20px;}
.tabdiv h2{display:none;
}
.tabdiv ul{
list-style:none;
padding:5px 0px;
}
.tabdiv li{
border-bottom:1px dashed #808080;
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 2px 3px}

.tabdiv li a:link,.tabdiv li a:visited{
overflow: hidden;
font-size: 15px;
color:#808080;
}

.tabdiv li a:hover {
text-decoration:none}

.ui-tabs-hide{
display:none}

Agora depois de:

]]></b:skin>

Cole este próximo código

<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.1");
google.load("jqueryui", "1.5.3");
</script>
<script type='text/javascript'>
//<![CDATA[
// 
$(document).ready(function() {
$('#tab-sidebar> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]>
</script>

Agora procure por:

<div id='sidebar-wrapper'>

E antes dele cole:

»»Leia mais...

Blog Archive

março (1)
julho (6)
junho (1)
dezembro (1)
julho (3)
junho (1)
maio (4)
janeiro (7)
dezembro (4)
novembro (2)
outubro (5)
setembro (4)
agosto (6)
julho (1)
junho (11)
maio (25)
abril (24)
março (26)
fevereiro (9)
janeiro (23)
dezembro (11)
novembro (4)
outubro (30)
setembro (8)
agosto (2)
julho (2)
junho (3)
maio (8)
abril (41)
março (2)
fevereiro (1)
janeiro (1)
dezembro (9)
novembro (6)
outubro (3)
setembro (11)
agosto (40)
julho (39)
junho (5)
maio (7)
abril (4)
março (17)
fevereiro (3)
janeiro (4)
dezembro (22)
novembro (18)
outubro (2)
setembro (10)
agosto (27)
julho (6)
junho (16)
maio (31)
abril (19)
março (8)
fevereiro (4)
janeiro (7)
dezembro (6)
novembro (14)
outubro (21)
setembro (29)
agosto (19)
julho (11)
junho (21)
maio (24)
abril (8)
março (1)
janeiro (5)
dezembro (9)
novembro (8)
outubro (16)
setembro (6)
agosto (27)
julho (34)
junho (21)
maio (42)
abril (85)
março (9)
fevereiro (12)
janeiro (12)
dezembro (22)
novembro (47)
outubro (71)
setembro (14)
agosto (14)
julho (5)

Templates e Acessórios

25 de jan. de 2014

Widgets dentro de menu em abas

17 de jul. de 2011

Colocar sidebar em forma de menu em abas com efeito jquery no novo Blogger

28 de dez. de 2010

Menu em abas para widget no Blogger

1 de dez. de 2010

Menu em abas com botões diferentes e efeito JQuery

Quem Sou

Postagens populares

Posts aleatórios