22 de fev de 2013

HTML deste blog + Novo Lay


 E ae people, já estou aplicando o novo Layout (por isso vocês podem ver algumas coisas desconfiguradas, mas logo arrumaremos) e vou colocar aqui todos os códigos deste para aqueles que quiserem (antigo lay).
 Você pode ver nesses dois sites: Pastebin e 4Shared
 Agora, vamos aos gadgets:

UP! Com o Cabeçalho 



Status: (Tem que ser o 1º gadget pra não desconfigurar os que estão no cabeçalho, ok?)
As partes em itálico são as que você pode mudar, a 1º é sobre os slides.
2º é sobre a pesquisa.
3º é a imagem de status.
4º é o status
5º é a imagem de voltar ao topo
6º é o que vai aparecer ao passar o cursor na imagem de voltar ao topo

<div class='slidesline'><div id='topo'>
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://wwwloucosporanime.blogspot.com.br/2011/07/top-7-animes-de-magia.html" alt="" ><img src="http://img812.imageshack.us/img812/5459/umineko3post.jpg"/></a>
<a href="http://wwwloucosporanime.blogspot.com.br/2012/11/diabolik-lovers.html" alt=""><img src="http://img717.imageshack.us/img717/52/tumblrmd46eqnk981qhjoey.jpg"/></a>
<a href="http://wwwloucosporanime.blogspot.com.br/2012/06/ursos-de-pelucia-de-personagens-de.html" alt=""><img src="http://img854.imageshack.us/img854/7708/sisterprincessfig275.jpg"/></a>
<a href="http://wwwloucosporanime.blogspot.com.br/2011/01/o-significado-de-filler-e-caon.html" alt=""><img src="http://img402.imageshack.us/img402/2237/40204738.jpg"/></a>


<a href="http://wwwloucosporanime.blogspot.com.br/2013/01/recadinho-da-juju-revista-stm.html" alt=""><img src="http://img442.imageshack.us/img442/7241/tumblrmcw5d0i2cb1rj0c7m.jpg"/></a>


</div></div>
<div class="paging">
<a href="www.blogger.com" rel="1">1</a>
<a href="www.blogger.com" rel="2">2</a>
<a href="www.blogger.com" rel="3">3</a>
<a href="www.blogger.com" rel="4">4</a>
<a href="www.blogger.com" rel="5">5</a>
</div></div>
</div>
</div>

<div class='pesquise'><div id='topo'>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='pesquise' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
</div>
</div>



<center><img src="http://img831.imageshack.us/img831/5552/lipil.png"/></center>

<div class="midnight"> Desde: 28/01/11</div>
<div class="midnight"> Administradoras: Erica e Juh </div>
<div class="midnight"> Meta: 70 seguidores (Help?) </div>
<div class="midnight"> Meta: 500 Comentários (Help?) </div>
<div class="midnight"> Meta: 100.000 visualizações </div>
<div class="midnight"> Siglas: LPA </div>
<div class="midnight"> Tema: Watashi a Kawaii World </div>





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://4.bp.blogspot.com/-ygZ7NlI7bFw/T3D_aDd3hUI/AAAAAAAABzs/fjALzMrfkS8/s1600/sobeee2.png"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Voltar ao Topo'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Menu:

<div class="boxdestaque">
<span class="title">Aqui o nome
<a class="destaque" href="URL"></a>
</span>
</div>


<div class="boxdestaque">
<span class="title">Aqui o nome
<a class="destaque" href="URL"></a>
</span>
</div>


<div class="boxdestaque">
<span class="title">Aqui o nome
<a class="destaque" href="URL"></a>
</span>
</div>

Postadoras:

<div class="image_shine">
<img src="http://img28.imageshack.us/img28/2705/10308248.png"/>
<a href="url" title="nome"><div class="hover_shine"></div></a>
</div>

<div class="image_shine">
<img src="http://img526.imageshack.us/img526/3981/86040422.png"/>
<a href="url" title="nome"><div class="hover_shine"></div></a>
</div>

<div class="image_shine">
<img src="http://img855.imageshack.us/img855/7608/98727743.png"/>
<a href="url" title="nome"><div class="hover_shine"></div></a>
</div>

<div class="image_shine">
<img src="http://img822.imageshack.us/img822/1641/67528114.png"/>
<a href="url" title="nome"><div class="hover_shine"></div></a>
</div>

<div class="image_shine">
<img src="http://img203.imageshack.us/img203/944/54301638.png"/>
<a href="url" title="nome"><div class="hover_shine"></div></a>
</div>

Efeito do Divulgando:


<center><a href="URL" title="NOME"><img class="shake" src="URL da IMAGEM" /></a></center>


Efeito Afiliados e Mais Sites:

<a href="url" title="Pode ser Você"><img src="URL da IMAGEM" class="afiliados"/></a>



<div class="lista">
<img src="URL IMAGEM Mais/ Menos Site" class="l-top" />
<div class="l-corpo">
<center>
<a href="URL">Nome</a><br />
<a href="URL">Nome</a><br />
<a href="URL">Nome</a><br />
<a href="URL">Nome</a><br />
</center>
</div>
</div>

Cabeçalho:

clique para vê-lo maior


como é
para você editar


É ISSO GENTE, SE UTILIZAR DÊ UM AVISO ANTES PARA PODER CONTROLAR AQUI E TER UMA NOÇÃO DE QUEM USA e-e

2 comentários:

  1. Nossa o lay ta lindo, amei.
    adorei sua ideia de disponibilizar os efeitos usados no blog
    beijos

    ResponderExcluir

Não saia sem comentar!
Comentando vocês nos incentiva a continuar postando e podemos saber de sua opinião quanto ao post e/ou o blog!

OBS: Por favor. Vamos manter a postura.
Sem xingamentos com palavras de baixo calão