sábado, 29 de outubro de 2011

Novas colunas para seu blog em abas e com efeito de transição

Colunas em abas DEMO

Quando falamos em abas, falamos em organização e espaço. Um blog que possui menus em abas, aparenta mais organização e muito mais espaço para colocar seus gadgets sem problemas. Mas neste tutorial, não irei ensinar como colocar um simples menu em abas, mas sim, acrescentar novas colunas em seu blog, separados por abas e ainda por cima, um belíssimo efeito de transição.

Clique aqui para ver uma demo

Quer deixar seu blog mais espaçoso com esta ? Então siga os passos abaixo:

1. Entre no “Editar HTML” do seu blog.

2. Procure por </head>

3. Acima dela cole:

<script src='http://codigosblogger.webs.com/Gadgets/jquery-1.2.1.pack.js' type='text/javascript'/>
<script src='http://codigosblogger.webs.com/Gadgets/jquery-easing.1.2.pack.js' type='text/javascript'/>
<script src='http://codigosblogger.webs.com/Gadgets/jquery-easing-compatibility.1.2.pack.js' type='text/javascript'/>
<script src='http://codigosblogger.webs.com/Gadgets/coda-slider.1.1.1.pack.js' type='text/javascript'/>

3. Agora procure por <div id='content-wrapper'>

4. Acima dessa linha cole:

<noscript>
    <p>Unfortunately your browser does not hava JavaScript capabilities which are required to exploit full functionality of our site. This could be the result of two possible scenarios:</p>
    <ol>
        <li>You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of <a href='http://www.getfirefox.com'>Firefox</a>.</li>
        <li>You have disabled JavaScript in you browser, in which case you will have to enable it to properly use our site. <a href='http://www.google.com/support/bin/answer.py?answer=23852'>Information on enabling JavaScript</a>.</li>
    </ol>
</noscript>

<div class='slider-wrap'>
    <div class='csw' id='slider1'>
        <div class='panelContainer'>
            <div class='panel' title='Panel 1'>
                <div class='wrapper'>
                    <h3>Panel 1</h3>
                    <p>
<b:section class='sidebar' id='sidebar50' preferred='yes'>
</b:section>
</p>
                    <p><a class='cross-link' href='#5' title='Go to Panel 5'>&#171; Previous</a> | <a class='cross-link' href='#2' title='Go to Panel 2'>Next &#187;</a></p>
                </div>
            </div>
            <div class='panel' title='Panel 2'>
                <div class='wrapper'>
                    <h3>Panel 2</h3>
                    <p>
<b:section class='sidebar' id='sidebar51' preferred='yes'>
</b:section>
</p>
                    <p><a class='cross-link' href='#1' title='Go to Panel 1'>&#171; Previous</a> | <a class='cross-link' href='#3' title='Go to Panel 3'>Next &#187;</a></p>
                </div>
            </div>       
            <div class='panel' title='Panel 3'>
                <div class='wrapper'>
                    <h3>Panel 3</h3>
<b:section class='sidebar' id='sidebar52' preferred='yes'></b:section>                    <p>
</p>
                    <p><a class='cross-link' href='#2' title='Go to Panel 2'>&#171; Previous</a> | <a class='cross-link' href='#4' title='Go to Panel 4'>Next &#187;</a></p>
                </div>
            </div>
            <div class='panel' title='Panel 4'>
                <div class='wrapper'>
                    <h3>Panel 4</h3>
                    <p>
<b:section class='sidebar' id='sidebar53' preferred='yes'>
</b:section>
</p>
                    <p><a class='cross-link' href='#3' title='Go to Panel 3'>&#171; Previous</a> | <a class='cross-link' href='#5' title='Go to Panel 5'>Next &#187;</a></p>
                </div>
            </div>
            <div class='panel' title='Panel 5'>
                <div class='wrapper'>
                    <h3>Panel 5</h3>
                    <p>
<b:section class='sidebar' id='sidebar54' preferred='yes'>
</b:section></p>
                    <p><a class='cross-link' href='#4' title='Go to Panel 4'>&#171; Previous</a> | <a class='cross-link' href='#1' title='Go to Panel 1'>Next &#187;</a></p>
                </div>
            </div>
        </div><!-- .panelContainer -->
    </div><!-- #slider1 -->
</div><!-- .slider-wrap -->

<style type='text/css'>

        .stripNavR {
            background: url(&quot;images/arrow-right.gif&quot;) no-repeat center;
        }
        .stripViewer .panelContainer .panel ul {
            text-align: left;
            margin: 0 15px 0 30px;
        }
        .slider-wrap { /* This div isn&#39;t entirely necessary but good for getting the side arrows vertically centered */
            margin: 20px 0;
            position: relative;
            width: 100%;
        }

        /* These 2 lines specify style applied while slider is loading */
        .csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
        .csw .loading {margin: 200px 0 300px 0; text-align: center}

        .stripViewer { /* This is the viewing window */
                        box-shadow: 0px 0px 5px #000;
            position: relative;
            overflow-x: hidden; overflow-y: auto;
padding-right: 15px;
text-align: left;
            border: 1px solid #000; /* this is the border. should have the same value for the links */
            margin: auto;
            width: 700px; /* Also specified in  .stripViewer .panelContainer .panel  below */
            height: 460px;
            clear: both;
            background: #fff;
        }
        .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
            position: relative;
            left: 0; top: 0;
            width: 100%;
            list-style-type: none;
            /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
        }
        .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
            float:left;
            height: 100%;
            position: relative;
            width: 700px; /* Also specified in  .stripViewer  above */
        }
        .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
            padding: 10px;
        }
        .stripNav { /* This is the div to hold your nav (the UL generated at run time) */
            margin: auto;
        }

.stripNav li a {

font-size: 16px;
        }
        .stripNav ul { /* The auto-generated set of links */
            list-style: none; display: inline;
        }
        .stripNav ul li {
            float: left;
            margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
        }
        .stripNav a { /* The nav links */
border-top-right-radius: 15px;
border-top-left-radius: 15px;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
            line-height: 32px;
            background: #c6e3ff;
            color: #fff;
            text-decoration: none;
            display: block;
            padding: 0 15px;
        }
        .stripNav li.tab1 a { background: #60f }
        .stripNav li.tab2 a { background: #60c }
        .stripNav li.tab3 a { background: #63f }
        .stripNav li.tab4 a { background: #63c }
        .stripNav li.tab5 a { background: #00e }
        .stripNav li a:hover {
            background: #333;
        }
        .stripNav li a.current {
            background: #000;
            color: #fff;
        }
        .stripNavL, .stripNavR { /* The left and right arrows */
            position: absolute;
            top: 230px;
            text-indent: -9000em;
        }
        .stripNavL a, .stripNavR a {
            display: block;
            height: 40px;
            width: 40px;
        }
        .stripNavL {
            left: 0;
        }
        .stripNavR {
            right: 0;
        }
        .stripNavL {
            background: url(&quot;images/arrow-left.gif&quot;) no-repeat center;
        }
    </style>
    <!-- Initialize each slider on the page. Each slider must have a unique id -->
    <script type='text/javascript'>
        jQuery(window).bind(&quot;load&quot;, function() {
            jQuery(&quot;div#slider1&quot;).codaSlider()
            // jQuery(&quot;div#slider2&quot;).codaSlider()
            // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
        });
    </script>

Agora modifique as partes em vermelho no código colocando um nome para os painéis, em seguida salve.

E para acrescentar gadgets é fácil, apenas acesse a guia “Layout” e acrescente gadgets normal mente. Cada local para adicionar um novo gadget corresponde a uma aba.

Layout

Marcadores: , , , , ,

4 Comentários:

Às 29 de outubro de 2011 15:02 , Blogger Propretario do Link disse...

Equipe do Cblogger, eu não consegui achar o segundo código e gostaria que vocês pudessem me ajudar.

 
Às 30 de outubro de 2011 21:51 , Blogger Códigos Blogger disse...

Tente procurar por...

<div class="column-center-outer">

ou

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

 
Às 6 de dezembro de 2011 22:31 , Blogger Kenshin Hiamamoto disse...

eu preciso de um desse dentro do post tem como?

 
Às 7 de dezembro de 2011 09:21 , Blogger Códigos Blogger disse...

Kenshin, Dentro da própria postagem não, mas da de você colocar acima das postagens, e fazer com que essas novas colunas só apareçam nas páginas de postagens.

Veja mais: (copie e cole no navegador + enter)

http://www.cblogger.net/2010/06/ocultando-widgetsgadgets-no-blogger.html

 

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