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'>« Previous</a> | <a class='cross-link' href='#2' title='Go to Panel 2'>Next »</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'>« Previous</a> | <a class='cross-link' href='#3' title='Go to Panel 3'>Next »</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'>« Previous</a> | <a class='cross-link' href='#4' title='Go to Panel 4'>Next »</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'>« Previous</a> | <a class='cross-link' href='#5' title='Go to Panel 5'>Next »</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'>« Previous</a> | <a class='cross-link' href='#1' title='Go to Panel 1'>Next »</a></p>
</div>
</div>
</div><!-- .panelContainer -->
</div><!-- #slider1 -->
</div><!-- .slider-wrap -->
<style type='text/css'>
.stripNavR {
background: url("images/arrow-right.gif") no-repeat center;
}
.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}
.slider-wrap { /* This div isn'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("images/arrow-left.gif") no-repeat center;
}
</style>
<!-- Initialize each slider on the page. Each slider must have a unique id -->
<script type='text/javascript'>
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
// jQuery("div#slider2").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.
Nenhum comentário:
Postar um comentário