Créditos: Uspring Teen
Olá Romeus e Julietas, tudo bom? u.u, eu estou tão contente, amanhã vai começar as férias, último dia de aula, eu to esperando por esse dia desde que faltava 100 dias pra acabar a aula, e sim, eu queria que fosse uma brincadeira, estou anciosa pro Natal, eu não sei porque eu gosto tanto, talvez seja porque eu não tenha aquela familia e só passo o natal com minhas duas tias, que acho que uma não vai poder vir, e faz muita falta não ter uma fámilia grande, mas isso não tem problema, porque continua muito boa as festas, ano passado até fizemos um karaoke
#featured{width:250px;position:relative;height:333px;background:#fff;}#featured ul.ui-tabs-nav{position: absolute;top:0;left:460px;list-style:none;padding:0;margin:0;width:103px;}#featured ul.ui-tabs-nav li{padding-left: 13px;}#featured .ui-tabs-panel{max-width:470px;height:320px;background:#transparent;}#featured .ui-tabs-hide{display:none;}#featured li.ui-tabs-nav-item a{/*On Hover Style*/display:block;height:59px;background:#transparent;}#featured li.ui-tabs-selected {background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeiOaux0lHqbPoMJy7hLvmszcg9YO2tuBNewG31fwuhSax4aERd4YCeAxgGrBk6_Y9WzKVbJj8uodAsXh5mF18cI0XvckW_iFDDHEtJiZwbw8CPnrpeY5XhztZQ-xzBJIayJ85G2uzRvBR/s103/Tabs_Selected.png') top left no-repeat;}#featured ul.ui-tabs-nav li img{float:left;margin: 0px 2px 2px 2px;padding:2px;max-width: 120px;}#featured .ui-tabs-panel .info{position:absolute;top:240px;left:10px;height:60px;width: 360px;background: #330033;opacity: 0.9;}#featured .info h2{font-size:14px;font-family:arial;color:#ff0066;padding:5px;margin:0;margin-left:5px;overflow:hidden;}#featured .info p {margin: 0 5px;font-family:arial;font-size:12px;line-height:15px;color:#fff;font-weight: bold;margin-left: 10px;}#featured .info a{text-decoration:none;color:#ff0066;text-transform:uppercase;}#featured .info a:hover{text-decoration:underline;}
DICA: Não altere nada por enquanto, pra não dar uma bugada.
Agora que o CSS está pronto, vamos botar ele pra funcionar com os scripts, cole acima de </head>
<script src='http://uprisingteen.webs.com/jquery-1.3.2.js' type='text/javascript'/><script src='http://uprisingteen.webs.com/jquery-1.5.3-ui.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);});</script>
Depois de salvar, vamos colocar ele no blog, cole esse código em um HTML JAVASCRIPT
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="URL_DA_IMAGEM_1" width="80" height="50" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="URL_DA_IMAGEM_2" width="80" height="50" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="URL_DA_IMAGEM_3" width="80" height="50" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="URL_DA_IMAGEM_4" width="80" height="50" /></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="URL_DA_IMAGEM_5" width="80" height="50" /></a></li>
</ul>
<!-- PRIMEIRA IMAGEM -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_1" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div>
<!-- SEGUNDA IMAGEM -->
<div id="fragment-2" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_2" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div>
<!-- TERCEIRA IMAGEM -->
<div id="fragment-3" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_3" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div>
<!-- QUARTA IMAGEM -->
<div id="fragment-4" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_4" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div>
<!-- QUINTA IMAGEM -->
<div id="fragment-5" class="ui-tabs-panel" style="">
<img src="URL_DA_IMAGEM_AQUI_5" width="470" height="320" alt="" />
<div class="info" >
<h2><a href="#" >TÍTULO D0 POST AQUI</a></h2>
<p>DESCRIÇÃO DO POST AQUI</p>
</div>
</div>
E está prontinho seu slide da Capricho, espero que tenham gostado, e como eu disse, vamos ficar mais atualizados u3u
Que tuto divo, não conhecia *u* Talvez eu use no próximo lay!
ResponderExcluirhtmlandresources.blogspot.com
Obaa *-*
ExcluirAmei o tutorial, tipo, o slide de lá é lindo, e ainda não conhecia quem ensinasse a usar :3 belo tuto <3
ResponderExcluirFérias *-* <3
Kiss
With You
Férias*u*, muito obrigada florzinha, desculpe a demora pra responder
ExcluirO novo layout ta Divo <3
ResponderExcluirQue tutorial legal , não conhecia *u*
Kisses , amore >3<
Espero sua visita || Senhorita Liberdade
Gostou mesmo? oba :3, verdade, bem diferente
ExcluirLindo slide, meu Deus a diwa da Ari no novo lay *ooo*
ResponderExcluirdiamond-resources.blogspot.com
h-worlds.blogspot.com
Meu deus você gosta da Ari?, bate o/
ExcluirQue slide lindo! Adorei o tutu.. *-* *w*
ResponderExcluirpimentacommenta.blogspot.com
Obg, eu também achei lindo, quem sabe eu usar em outro dia?, da até preguiça de configurar tudo isso :P
Excluir