Slide de notícias da Capricho

|

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 (morta), mas vamos começar?
Procure por ]]></b:skin> e cole abaixo este código gigante:
#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://lh3.googleusercontent.com/-ARpnpRekZXk/UVyrhc-BZ_I/AAAAAAAAHog/OadNCpSpNgE/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(){$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 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

10 comentários:

  1. Que tuto divo, não conhecia *u* Talvez eu use no próximo lay!

    htmlandresources.blogspot.com

    ResponderExcluir
  2. Amei o tutorial, tipo, o slide de lá é lindo, e ainda não conhecia quem ensinasse a usar :3 belo tuto <3
    Férias *-* <3
    Kiss
    With You

    ResponderExcluir
    Respostas
    1. Férias*u*, muito obrigada florzinha, desculpe a demora pra responder

      Excluir
  3. O novo layout ta Divo <3
    Que tutorial legal , não conhecia *u*

    Kisses , amore >3<
    Espero sua visita || Senhorita Liberdade

    ResponderExcluir
  4. Lindo slide, meu Deus a diwa da Ari no novo lay *ooo*

    diamond-resources.blogspot.com
    h-worlds.blogspot.com

    ResponderExcluir
  5. Que slide lindo! Adorei o tutu.. *-* *w*

    pimentacommenta.blogspot.com

    ResponderExcluir
    Respostas
    1. Obg, eu também achei lindo, quem sabe eu usar em outro dia?, da até preguiça de configurar tudo isso :P

      Excluir

Oláaaa sinta-se a vontade pra comentar qualquer dica, crítica bacana ou elogios ♥ aceito afiliação e também sigo de volta u~u