Espero que gostem desse layout, fiz com base em um layout free do blog We Heart HTML, mais não retire meus créditos :)
-----------------
O layout contém:
Clique em leia mais e saiba como usar o slide e o blogrollNegrito, sublinhado,tachadoe itálico personalizados em hover (sem hover transição)Seleção coloridaBarra de rolagem personalizadaMenu ExpressData personalizadaNavbar retiradaAssinar postagens 'atom' retiradoBlockquote personalizado em hoverBarra de créditosPaginação em hoverLeia mais em hoverTítulo de gadget personalizadoTítulo de postagem PersonalizadoEfeito WOW em afiliados e blogrollMenu de AbasSlide no cabeçalhoDois backgroundsÁrea de comentários personalizadaEfeito turvo nas imagens de post (automático)
- Como usar o slide:
Cole isso em um gadget HTML / Javascript:
Vocês podem perceber que logo no início do código, tem uns números em itálico e negrito, irei explicar, o que está em negrito determina a altura do slide, e o itálico, a largura do slide entre a barra lateral.
<div style="position: absolute; margin-top: -305px; left: -580px;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNHInIMUcUcV0fvJwbBKEU10H_vGH-WJwC9idLSwRoPvBIbpPxkyg5MqwHftI8j-TllPG6vRAkeN8mAUXRU-MoFyE0TAALW0En_AlxmDRoNXpvVhcyVaaJh-2UxhNddaTyxRHm4ovbbL84/s1600/Kim2.png"] //plain image syntax
fadeimages[1]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0bUiU_ydqkm6DHrOZ6FwN27qUQf-3arMmE6-akJyO0kkZq-qXA7Pb8u519DporoIuqeN-e8CB57EfIz4GNVrPR4Au4CpbcuOX9VrtTJI1PhHILlTWB1lozO87PXjYbLN_zKeb0VIfZ3B/s1600/Kim1.png"] //image with link syntax
fadeimages[2]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHE0siEsT8HV2DaL7aoeZBKP03QgFZziXYInY2hssjnjdgKHg32EYucJu3iEkeT79izLsZ45qSbkHBAd9j22iXmokGXmegurhiGricdx2q-nIta4grKK9R7rQGBitrGVpLJBudWuriv3LF/s1600/Kim3.png"] //plain image syntax
fadeimages[3]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIplAXZm-AEllMUXlcDzmkhwVkjfDHl88pgT8UaQ2qDmgJncO8tijNZEm4gX5O2-PJTrLV8NdUT6MuduqwBzEP2OhcvawC5WktXFwgn_wrhrOm1a0NTWUdPerffJ7rRBbohsBlCn02ac0L/s1600/Kim4.png"] //plain image syntax
var fadebgcolor="white"
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.3 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="http://www.google.com" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
</script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
<td background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIplAXZm-AEllMUXlcDzmkhwVkjfDHl88pgT8UaQ2qDmgJncO8tijNZEm4gX5O2-PJTrLV8NdUT6MuduqwBzEP2OhcvawC5WktXFwgn_wrhrOm1a0NTWUdPerffJ7rRBbohsBlCn02ac0L/s1600/Kim4.png" width="200" height="274" alt="">
<script type="text/javascript">//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 200, 274, 0, 2000, 1, "R")</script></td></div>
E para usar o blogroll cole isso em um gadgets Html / Javascript:
Vocês podem perceber que logo no início do código, tem uns números em itálico e negrito como no slide, irei explicar mais uma vez, pois não tem segredo, funciona da mesma forma, o que está em negrito determina a altura do blogroll, e o itálico, a largura do blogroll entre a barra lateral.
<div style="position: absolute; margin-top: -390px; left: +26px;"><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmQYfGA5c_MnFivQ3XSOyomh6nbGeGD2Lu5VrdUuCcCSeMH2imcoUqKCNmqutFyClFtHw8qtmZLlGMhbEmWda0YuAuGRXlO6JGMr4uNyWBZA6Qukq7kWxwG-HpQXN3V1Kp_VdUSEDnHg/s1600/33.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmQYfGA5c_MnFivQ3XSOyomh6nbGeGD2Lu5VrdUuCcCSeMH2imcoUqKCNmqutFyClFtHw8qtmZLlGMhbEmWda0YuAuGRXlO6JGMr4uNyWBZA6Qukq7kWxwG-HpQXN3V1Kp_VdUSEDnHg/s1600/33.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmQYfGA5c_MnFivQ3XSOyomh6nbGeGD2Lu5VrdUuCcCSeMH2imcoUqKCNmqutFyClFtHw8qtmZLlGMhbEmWda0YuAuGRXlO6JGMr4uNyWBZA6Qukq7kWxwG-HpQXN3V1Kp_VdUSEDnHg/s1600/33.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmQYfGA5c_MnFivQ3XSOyomh6nbGeGD2Lu5VrdUuCcCSeMH2imcoUqKCNmqutFyClFtHw8qtmZLlGMhbEmWda0YuAuGRXlO6JGMr4uNyWBZA6Qukq7kWxwG-HpQXN3V1Kp_VdUSEDnHg/s1600/33.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmQYfGA5c_MnFivQ3XSOyomh6nbGeGD2Lu5VrdUuCcCSeMH2imcoUqKCNmqutFyClFtHw8qtmZLlGMhbEmWda0YuAuGRXlO6JGMr4uNyWBZA6Qukq7kWxwG-HpQXN3V1Kp_VdUSEDnHg/s1600/33.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZQWLMuS3V-re7uRob485oSiGTcr-o_hWQ9nTu2jb1CNCqcYLe4NonsG-cDe8V8dHtX1u1XRC-ry25mmAaEFzCDCjkIB20wD89ZjG3uy-JPpeJ4uIU_M9S0ESbnZQnYbqFMsYrhbB0nRg/s1600/37.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZQWLMuS3V-re7uRob485oSiGTcr-o_hWQ9nTu2jb1CNCqcYLe4NonsG-cDe8V8dHtX1u1XRC-ry25mmAaEFzCDCjkIB20wD89ZjG3uy-JPpeJ4uIU_M9S0ESbnZQnYbqFMsYrhbB0nRg/s1600/37.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZQWLMuS3V-re7uRob485oSiGTcr-o_hWQ9nTu2jb1CNCqcYLe4NonsG-cDe8V8dHtX1u1XRC-ry25mmAaEFzCDCjkIB20wD89ZjG3uy-JPpeJ4uIU_M9S0ESbnZQnYbqFMsYrhbB0nRg/s1600/37.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZQWLMuS3V-re7uRob485oSiGTcr-o_hWQ9nTu2jb1CNCqcYLe4NonsG-cDe8V8dHtX1u1XRC-ry25mmAaEFzCDCjkIB20wD89ZjG3uy-JPpeJ4uIU_M9S0ESbnZQnYbqFMsYrhbB0nRg/s1600/37.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZQWLMuS3V-re7uRob485oSiGTcr-o_hWQ9nTu2jb1CNCqcYLe4NonsG-cDe8V8dHtX1u1XRC-ry25mmAaEFzCDCjkIB20wD89ZjG3uy-JPpeJ4uIU_M9S0ESbnZQnYbqFMsYrhbB0nRg/s1600/37.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvn_NQ-gcMk95cV_abhog0T041i2AOFubEA14fkfDgT2Gm7mUJ-UVnf86hBSW4jKEZv6o-ecIPJF0Xynkxfj_j6Ai8_JDgoyQNr2w-5iXklOD26ajYWuFZfdVY86Sm15EQ3eue7d6rZ3w/s1600/41.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvn_NQ-gcMk95cV_abhog0T041i2AOFubEA14fkfDgT2Gm7mUJ-UVnf86hBSW4jKEZv6o-ecIPJF0Xynkxfj_j6Ai8_JDgoyQNr2w-5iXklOD26ajYWuFZfdVY86Sm15EQ3eue7d6rZ3w/s1600/41.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvn_NQ-gcMk95cV_abhog0T041i2AOFubEA14fkfDgT2Gm7mUJ-UVnf86hBSW4jKEZv6o-ecIPJF0Xynkxfj_j6Ai8_JDgoyQNr2w-5iXklOD26ajYWuFZfdVY86Sm15EQ3eue7d6rZ3w/s1600/41.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvn_NQ-gcMk95cV_abhog0T041i2AOFubEA14fkfDgT2Gm7mUJ-UVnf86hBSW4jKEZv6o-ecIPJF0Xynkxfj_j6Ai8_JDgoyQNr2w-5iXklOD26ajYWuFZfdVY86Sm15EQ3eue7d6rZ3w/s1600/41.png" class="efeitowow" /></a><a href="LINK DO BLOG AFILIADO" title="NOME DO BLOG AFILIADO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvn_NQ-gcMk95cV_abhog0T041i2AOFubEA14fkfDgT2Gm7mUJ-UVnf86hBSW4jKEZv6o-ecIPJF0Xynkxfj_j6Ai8_JDgoyQNr2w-5iXklOD26ajYWuFZfdVY86Sm15EQ3eue7d6rZ3w/s1600/41.png" class="efeitowow" /></a></div>
tst
ResponderExcluirRÇRÇ
ExcluirTeste?
ResponderExcluirResposta do Teste
Excluiruahguheua' vlw gente >.<
ExcluirEstou com problemas com o cabeçalho =c Ao invés de estar o cabeçalho, estão os posts, você pode me ajudar? http://dudaahs-place.blogspot.com
ResponderExcluirok
ExcluirPerfeito ^^ obrigada por fazer esse lay divo *-*
ResponderExcluirUsaando ^^
Bjos!
kk de nada :3
ExcluirAMEI, obg >..<
ResponderExcluirDe nada flor, que bom que amou, por que eu achei que vocês não iriam gostar tanto... :l
ExcluirUsando ^^
ResponderExcluirSério?! que HON-RA, valeu!
ExcluirOiee, amei o layout, mas eu estou tendo alguns problemas pra instalar ele :(
ResponderExcluirO cabeçalho não aparece, e nem o "welcome"
Acho que foi por que uma mulher se ofereceu para colocar um layout feito por ela no meu blog, e ela começou a arrumar mas nunca terminou, ai eu não sei no que ela mexeu, mas eu acho que foi no html da estrutura do blog, e ai nenhum layout que eu tento colocar da certo e fica
com algumas partes do tal layout dela!
Se puder me ajudar, agradeço :**
Me manda um e-mail se puder: juh6545@gmail.com
ou julinha_unai@hotmail.com
Ok, irei te falar, mais acho que é só você colocar para reverter pra modelo padrão, se quiser eu mexo pra vc ;)
ExcluirAmei o layout, vou usar, ok?
ResponderExcluirOk obg
ExcluirPor favor me ajuda!
ResponderExcluirVou baixar mas abre uma pagina no Internet Explorer que diz ''ERROR''
por favor me responde?
Entre em contato no pelo email gabrielascooby@hotmail.com. Por favor, beeijos
http://girlswithstyles.blogspot.com.br/
Aí eu não sei, deve ser erro de seu computador ou internet.
ExcluirNo meu deu certo: http://www.4shared.com/document/864-MpDh/template-6263391334420977003.html? vê se dá agr :l
Megan,adoro seu blog.
ResponderExcluirEstou levando este Layout ,não sei se vou conseguir configurar.
Meu blog está tão feio...kkk...
Parabéns sucesso para vocês,bjs
www.gracatricoecroche.com
rç
ExcluirIrei usar em meu blog novo, adorei. :)
ResponderExcluirok obg
ExcluirPeguei e fiz algumas alterações. Tipo não consegui colocar slide e tudo mais. Ai só deixei meu cabeçalho com o restante desse blog. Creditos lá. Espero que não tenha problema. Beijos
ResponderExcluirUHUH' isso aqui ficou bugadão com o tempo ><
ExcluirPeguei.Mais fiz algumas alterações té ^ ^
ResponderExcluirKissus :*
ok vlw
ExcluirO que eu mais gostei foi o efeito das imagens ficou show :3
ResponderExcluirhaha
ExcluirVou usar! Comentei na página de layouts free (http://adolescentenerd.blogspot.com.br/p/layout-free.html) espero que não se importe. Amei seu blog, abraços :)
ResponderExcluirtestando
Excluiré.. obg
ExcluirPgayy :3 Pfto! :3
ResponderExcluirokay
ExcluirPeguei
ResponderExcluir/;3
ExcluirPeguei
ResponderExcluir