Template Costumizavel

Visualizar

Este template te dá a opção de mudar as cores que estão nos detalhes.

Possui um menu horizontal expansivel onde você poderá linkar até 17 itens.

Layout clean em 3 colunas.

Muito bom !

Clique nas imagens para amplia-las e ver o template em outras cores.

amarelo

rosa

azul

vermelho

Download

Ou pegue o código AQUI

Clique para ler mais...

Janela Popup

Clique-me

<center><a href="AQUI O ENDEREÇO DO SEU BLOG" onMouseover="alert('ESCREVA AQUI O QUE VC QUER QUE APAREÇA NA JANELA')"> ESCREVA AQUI ONDE A PESSOA TEM QUE PASSAR O MOUSE PARA QUE A JANELA SE ABRA</a><br></center>

Este outro código também é para janela popup mas este é para quando a pessoa entre em seu blog. Copie e cole em HTML/Javasript e depois coloque sua mensagem.

<script>
msg = "ESCREVA AQUI A SUA MENSAGEM"; //
alert(msg);
</script>

Este outro código também é de uma janela popup mas mais elaborada. Com ela é possível colocar a imagem que quiser ou só uma mensagem escrita.
Para colocar imagem copie o código abaixo e coloque no local indicado.

<img src="AQUI O ENDEREÇO DA IMAGEM"/>




Código da janela abaixo

<!--Começo --->
<script language="JavaScript1.2">
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
//drag drop function for IE 4+////
/////////////////////////////////
var dragapproved=false
function drag_dropie(){
if (dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false
}
}
function initializedragie(){
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie
}
if (document.all){
document.onmouseup=new Function("dragapproved=false")
}
function hidebox(){
if (document.all)
showimage.style.visibility="hidden"
else if (document.layers)
document.showimage.visibility="hide"
}
</script>
<div id="showimage" style="position: absolute; width: 374; left: 384; top: 55; height: 118"><table border="0" width="372" cellspacing="0" cellpadding="2" bgcolor="#CCCCCC">
<tr>
<td width="268">
<table cellspacing="0" border="1" bordercolor="#000000" bordercolordark="#000000" cellpadding="0" height="91" bgcolor="#ffffff" bordercolorlight="#000000" width="369"
>
<tr>
<td style="cursor:hand" width="337" onmousedown="initializedragie()" height="2" bgcolor="#FFFFFF">
<font color="#000000"><ilayer onselectstart="return false" width="100%"><layer width="100%" onmouseover="dragswitch=1;drag_dropns(showimage)" onmouseout="dragswitch=0">
<p align="center"><font face="tahoma"><strong><small>
LEIA-ME</small></strong></font></p>
</layer></ilayer></font>
</td>
<td valign="top" style="cursor:hand" width="26" height="2" bgcolor="#CCCCCC">
<p align="center"><b><a href="#" onclick="hidebox();return false">
<font face="Tahoma" color="#CC0000" size="6">X</font></a></b></p></td>
</tr>
<tr>
<td bordercolor="#000000" bordercolordark="#000000" height="90" colspan="2" bgcolor="#FFFFFF" bordercolorlight="#000000" style="padding:4px" width="357">
<p align="center">
<font face="tahoma" color="#000000" size="1"><small>ESCREVA AQUI O QUE QUISER, OU COLOQUE O ENDEREÇO DA IMAGEM</small></font>
</p></td>
</tr>
</table>
</td>
</tr>
</table>
</div><!--Fim --->

Clique para ler mais...

Efeito Link

Para ter um menu como este, copie o código e cole no HTML/Javascript no seu blog. Querendo modificar as cores é só mudar os números que estão na cor verde.

menu

link 1

link 2

link 3

link 4



<style>
.menulines{
border:2.5px solid #7ECECD;
}
.menulines a{
text-decoration:none;
color:black;
}
</style>
<script language="JavaScript1.2">
function over_effect(e,state){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}
</script>
<table onmouseout="over_effect(event,'solid')" cellspacing="0" border="0" cellpadding="0" onmouseover="over_effect(event,'outset')" style="background-">B0E0DF" width="150" onmousedown="over_effect(event,'inset')" onmouseup="over_effect(event,'outset')">
<tr><td width="100%" bgcolor="#DFF3F3"><font face="Arial" size="2"><b>menu</b></font></td></tr>
<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 1</a></font></td></tr>
<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 2</a></font></td></tr>
<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 3</a></font></td></tr>
<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="ENDEREÇO DO SEU LINK AQUI">link 4</a></font></td></tr>
</table>

Clique para ler mais...

Template costumizável

9/11/2007

Template Costumizável 3

Faça o seu Template do seu Gosto!!

Clique para ampliar.

As cores que estão neste template são para que vc se guie, elas representam os locais de mesma cor dos código abaixo.

• Coloque imagens pequenas para cair, ou ficará muito pesado o blog

• Os últimos itens em roxo, é onde vc colocará os endereços do que quiser linkar no menu horizontal que fica em cima no blog.

• O primeiro ítem em azul no código é onde vc colocará a imagem que cai, atenção, coloque imagem pequena ou poderá pesar muito o blog

• Para diminuir o tamanho do recuo da imagem principal, troque os números que estão em verde, note que o primeiro é maior, conserve-o sempre 20 números a mais.

• As imagens deverão estar hospedadas em algum site na internet

  

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<script language='JavaScript1.2'>
<!--
var snowsrc=" AQUI O ENDEREÇO DA IMAGEM QUE VOCÊ QUER QUE CAIA "
var no = 9;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;

if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"></a></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"></a></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"></div>");
}
}
}

function snowNS() {
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}
function snowIE() {
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", 10);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
//-->
</script>

<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<b:skin><![CDATA[/*
--------------------------------------------------------
* Estilo Blogger Template
* Título do template: Bonecos de Neve
* Design: Elke di Barros
* Origem: http://templateseacessorios.blogspot.com/
* Date: 06 de novembro 2007
----------------------------------------------------------
*/
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#999999" value="#000000">
<Variable name="linkcolor" description="Link Color"
type="color" default="#FF3577" value="#cc0000">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#fff" value="#ffffff">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#FFFFFF" value="#78B749">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#6d8051" value="#2BA94F">
<Variable name="bordercolor" description="Border Color"
type="color" default="#9ED838" value="#cc0000">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#ccc" value="#000000">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#226E8A" value="#000000">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#2B8CB4" value="#7f7f7f">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 95% Arial, sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 113% Georgia, Times, serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% ' Curlz MT ',Trebuchet,Verdana,Sans-serif" value="normal bold 279% Curlz MT, sans-serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 86% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/
body {

background: url(" AQUI O ENDEREÇO DE SUA IMAGEM DE FUNDO ") repeat;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: lcenter;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;

}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:853px;
height:464px;
margin:0 auto 0px;

}
#header {
margin: 0px;
width:850px;
height:442px;
background: url(" AQUI O ENDEREÇO DE SUA IMAGEM PRINCIPAL ") center no-repeat;
text-align: center;
color: $descriptionfont;
border: 2px dotted $bordercolor;
}
#header h1 {
margin:30px 0px 0;
padding-left:90px;
padding-top:1px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:130 104px 0px;
padding-left:160px;
max-width:500px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.2em;
font: $descriptionfont;
color: $pagetitlecolor;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 856px;
margin:0 auto;
padding: 0px;
text-align:left;
font: $bodyfont;
background: $bgcolor;
border: 2px solid $bordercolor;
}
#main-wrapper {
background: url(" AQUI O ENDEREÇO DE UMA IMAGEM PARA SER FUNDO NO POST ") center repeat;
border: 2px dotted $bordercolor;
border-top: 2px dotted $bordercolor;
border-bottom: 2px dotted $bordercolor;
margin-left: 5px;
width: 444px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
border: 2px dotted $bordercolor;
border-top: 2px dotted $bordercolor;
border-bottom: 2px dotted $bordercolor;
margin-right: 4px;
width: 190px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
border: 2px dotted $bordercolor;
border-top: 2px dotted $bordercolor;
border-bottom: 2px dotted $bordercolor;
margin-left: 4px;
width: 190px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
------------------------------------------------ */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin: 5px;
}
.post {
margin: 5px;
padding-bottom:1.2em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
background: url(" AQUI O ENDEREÇO DE SUA IMAGEM PARA O TÍTULO DO POST ") repeat;
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
padding-left: 5px;
border-top:2px solid $bordercolor;
border-bottom:2px solid $bordercolor;
}
.post h3 strong, .post h3 a:hover {
background: url(" AQUI O ENDEREÇO DE SUA IMAGEM PARA O TÍTULO DO POST ") repeat;
color:$textcolor;
padding-left: 5px;
border-top:0px dashed $bordercolor;
border-bottom:0px dashed $bordercolor;
}
.post p {
margin:10 0 .75em;
line-height:1.1em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
padding-left: 5px;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
font-weight:bold;
line-height: 1.1em;
border-top:0px dashed $bordercolor;
border-bottom:2px solid $bordercolor;
}
.comment-link {
margin-left:.6em;
background:.;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
padding-left: 5px;
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
padding-left: 5px;
margin:1em 0 1.5em;
line-height:1.3em;
}
#comments-block .comment-author {
padding-left: 5px;
margin:.5em 0;
}
#comments-block .comment-body {
padding-left: 5px;
margin:.25em 0 0;
}
#comments-block .comment-footer {
padding-left: 5px;
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
padding-left: 5px;
margin:0 0 .75em;
}
.deleted-comment {
padding-left: 5px;
font-style:italic;
color:gray;
}
.feed-links {
padding-left: 5px;
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
padding: 5px;
float: left;
}

#blog-pager-older-link {
padding: 5px;
float: right;
}

#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.3em;
margin:5px;
}
.sidebar h2 {
margin: .5em 0 1.7em;
padding: 2px 10px;
background: url(" AQUI O ENDEREÇO DE SUA IMAGEM PARA O TÍTULO DAS COLUNAS ") repeat;
font-size: 85%;
color: $sidebartextcolor;
border-top: 2px solid $bordercolor;
border-bottom: 2px solid $bordercolor;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.2em;
}
.sidebar .widget, .main .widget {
margin:0 0 0.9em;
padding:0 0 0.9em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: center;
margin: 0 2px 0px 0;
padding: 4px;
border: 0px dashed $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.2em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
------------------------------------------------ */
#footer {
width:850px;

clear:both;

margin: auto;
padding-top:180px;
background: url(" AQUI O ENDEREÇO DE SUA IMAGEM DO FINAL DO POST ") center no-repeat;
line-height: 2.1em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 10px;
margin-right: 10px;
}

#navbar {
display:none;
margim:none;
padding:none;
}
#navlist
{
position: relative;
width: 100%;
height: 1.05em;
margin: 0;
padding: 0;
border-bottom: 3px solid $bordercolor;
white-space: nowrap;
}

#navlist li
{
float: left;
margin: 0 0 0 2px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #aaa #555 #f63 #999;
list-style-type: none;
}

#navlist li a
{
position: relative;
width: 6em;
display: block;
margin: 0;
padding: 1px 0.4em;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: $bordercolor;
background-color: #eee;
color: #666;
font: normal 0.7em/120% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
}

#navlist li a:hover
{
color: #00c;
text-decoration: underline;
}

#navlist li#active a
{
font-weight: bold;
background-color: $bordercolor;
color: #fff;
border-color: $bordercolor;
}

#navlist li#active a:hover { color: #fff; }

#navlist ul#subnavlist
{
position: absolute;
width: 100%;
left: 0;
top: 1.25em;
height: 0.75em;
margin: 0;
padding: 0;
border-bottom: 3px solid $bordercolor;
white-space: nowrap;
}

#navlist ul#subnavlist li
{
width: 14ex;
margin: 0;
border: 0;
}

#navlist ul#subnavlist li a
{
width: auto;
padding: 0.06em 1em 0;
border: 0;
background-color: $bgcolor;
color: #000;
font: normal normal 0.66em/110% Verdana, Arial, sans-serif;
}

#navlist ul#subnavlist li a:hover
{
color: #00c;
text-decoration: underline;
font-weight: 400;
/* IE5/Mac disappearing item fix */
}

#navlist ul#subnavlist li#subactive a
{
background-color: $bordercolor;
color: #000;
}

* html &gt; body #navlist, * html &gt; body #navlist ul#subnavlist
{
width: 600px;
/* IE5/Mac fixed width fix */
}

]]></b:skin>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = &#39;inline&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;none&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;inline&#39;;
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = &#39;none&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;inline&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;none&#39;;
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
spans[i].style.display = &#39;none&#39;;
}
}

</script>
</b:if>

</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>

<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href=' ENDEREÇO DE SEU LINK AQUI ' id='current'>Item 1</a>
<ul id='subnavlist'>
<li id='subactive'><a href=' ENDEREÇO DE SEU LINK AQUI ' id='subcurrent'>Subitem 1</a></li>
<li><a href=' ENDEREÇO DE SEU LINK AQUI '>Subitem 2</a></li>
<li><a href=' ENDEREÇO DE SEU LINK AQUI '>Subitem 3</a></li>
<li><a href=' ENDEREÇO DE SEU LINK AQUI '>Subitem 4</a></li>
</ul>

</li>
<li><a href=' ENDEREÇO DE SEU LINK AQUI '>Item 2</a></li>
<li><a href=' ENDEREÇO DE SEU LINK AQUI '>Item 3</a></li>
<li><a href=' ENDEREÇO DE SEU LINK AQUI '>Item 4</a></li>
</ul>
</div>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Título do seu Blogger aqui ! (Cabeçalho)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Perfil' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Postagens no blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
<div align='center'>&#169;2007 <a href='http://elkedibarros.spaces.live.com/' target='_blank'>Elke di Barros</a> Por <a href='http://templateseacessorios.blogspot.com/' target='_blank'>Templates e Acessorios</a> </div>
</body>
</html>

"Nao Retire os Creditos Obrigada!!!"

Obs: TODAS IMAGENS QUE FOR COLOCADAS EM SEU TEMPLATE TEM QUE ESTAR HOSPEDADAS

É claro, as imagens deverão estar hospedadas em algum site, se não sabe fazer isso, clique AQUI e aprenda a hospedar suas imagens. E pegue AQUI imagens mini para o efeito de imagens que caem pelo blog...

BY:JUGIFS

Clique para ler mais...

Como fazer sua caixinha SCROOLL barra de rolagem com borda ***** o significado de cada palavra do código esta: dentro da caixinha. é so abrir uma entrada no HTML colar o código. Faça a mudança de cores do seu gosto, pulse o HTML novamente e veja como ficou.

significado de cada palavra border right - borda direita border left - borda esquerda border top - borda de cima border bottom - borda de baixo scroolbar - é a barra de rolagem WIDTH - largura da caixinha HEIGHT - altura da caixinha BACKGROUND - é o fundo Código

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: green; FONT-SIZE: 8pt; SCROLLBAR-HIGHLIGHT-COLOR: white; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 372px; SCROLLBAR-SHADOW-COLOR: white; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: ariel; SCROLLBAR-DARKSHADOW-COLOR: black; HEIGHT: 229px; BACKGROUND-COLOR: green"></DIV><P>

JuGifs..

Clique para ler mais...

Borda em Imagens

*colocar Borda na sua Imagem*

Coloque o codigo: abra uma entrada no seu blog clic em HTML coloe o código abaixo coloque o endereço da sua imagem e salve. você pode mudar a cor em "BORDER"

código

<IMG style="BORDER: red 2.5pt double" height=150 src="endereço da imagem" width=200>

VEJA A TABELA DE CORES NA LISTA DE CATECORIA

Como fazer sua borda

para imagem...

<img src="URL" style="border: 1px solid #000">

como editar sua borda

1px: o tamanho da borda, pode ser qualquer um
solid: o estilo da borda, o padrão é o sólido
#000: a cor da borda, confira a tabela de cores completa

- Veja as principais bordas em ação. Confira os estilos de bordas mais usadas:

solid: sólida
dashed: pontilhada
double: dupla

Clique para ler mais...

Caixinha link

Caixinha de Link

Use o código:

<p align=""center""> <a target=""_blank"" href="http://www.seusite.com">

Bom Aqui vou colocar akeles Mini Caixinhas

esse eu fiz manualmente!!

<textarea style="WIDTH: 83px; HEIGHT: 20px" rows="1" cols="8"> </textarea>

<textarea style="WIDTH: 48px; HEIGHT: 38px" cols="5"> </textarea>

<textarea style="WIDTH: 48px; HEIGHT: 38px" cols="5"> </textarea>

Bom qualquer coisa posto Mais!!!

Clique para ler mais...

efeito neon

Como criar efeito “neon” em seus gifs

Vamos aprender como fazer um gif como esse:

1) O primeiro passo é instalar o plugin Eye Candy 4000 que você pode baixar aqui . Descompacte o arquivo na pasta de filtros do seu Photoshop (ou de qualquer outro programa que você utilize…). A a sua instalalação do Photoshop está no local “padrão” o caminho deve ser:

C:\Arquivos de programas\Adobe\Photoshop 7.0\Módulos Complementares\Filtros

2) Se o seu Photoshop estava aberto, você precisará fecha-lo e abrir de novo para ele reconhecer o novo filtro que foi instalado.

3) Escolha a imagem que você deseja aplicar o efeito e abra no Photoshop. Nós usaremos esta aqui:

4) Agora clique no menu “Filtros” e escolha a opção “Eye Candy 4000″/ “Gradient Glow”:

5) Você verá a seguir um telinha com duas abas que são “Basic” e “Color”:

6) Em “Basic” Você altera o “tamanho”, a “expansão” e a “opacidade” do efeito. E em “color” além do óbvio que é alterar as cores você pode escolher o “tipo” de efeito que deseja. No nosso exemplo usei “Solid Blue” mas você tem várias opções. Agui tem outros modelos do que você pode fazer com esse efeito:

7) Se você já acompanhou outros tutoriais do site, sabe como que é o esquema agora. (Se não, dê uma olhadinha aqui ). Crie quantas imagens você quiser fazendo pequenas alterações em cada uma delas… Nesta que usei como exemplo, usei duas imagens e fiz alterações de cores (pink mais claro e mais escuro) e na dimensão do efeito (Glow Width 12px e 18px).

Beijinhos e até o próximo tutorial!!

Clique para ler mais...

Gifs com Brilhos

Como Criar Gifs com Brilho

Sabe aqueles gifs cheios de brilhinhos cintilantes que você vê por ai? Pois bem, vamos aprender como faze-lo! Vou ensinar como fazer no Photoshop (versão 7.0) mas o procedimento é basicamente o mesmo para qualquer outro programa que você utilizar. Nosso gif ficará assim:

1) Para fazer os efeitos de brilho, precisaremos de um plugin específico. Ele se chama VM Natural e você pode baixa-lo aqui. Na verdade o que você está baixando é um pacote de filtros. Mais tarde você pode ir experimentando e descobrindo novos efeitos com cada um deles. Depois te ter feito o download descompacte dentro da pasta filtros do seu Photoshop. Se a sua instalação foi “padrão”, provavelmente você encontrará esta pasta seguindo este caminho:

C:\Arquivos de programas\Adobe\Photoshop 7.0\Módulos Complementares\Filtros

2) Se a sua instalação deu certo, ao abrir o Photoshop e abrir o menu “Filtros” você verá a opção VM Natural lá.

3) Estando com o plugin instalado, vamos a criação! Eu utilizei uma imagem simples do Andy Panda para mostrar pra vocês.

4) Se foi você mesmo que fez a imagem e tem o arquivo PSD dividido em camadas, você conseguirá fazer como eu fiz, colocando o brilho em apenas uma imagem (no caso eu apliquei o filtro somente no Andy Panda) … Mas, como terão muitos casos de pessoas que não sabem mexer muito no Photoshop e pegarão uma imagem simples, vou ensinar como colocar na imagem toda.

5) No menu “Arquivo” clique em “Abrir” e localize a imagem que você quer usar.

6) Agora tudo que você tem que fazer é clicar em “Filtro” / “VM Natural” / “Sparkle…” Abrirá uma telinha semelhante a esta:

7) Agora vamos explicar pelos números da imagem aí de cima. 1* Max Size –> Corresponde ao tamanho dos brilhinhos… Se você quiser maior ou menor, ou como eu costumo fazer colocando de vários tamanhos… 2* Red Green Blue –> Aqui você altera a cor do brilho se você quiser… se vc deixar tudo no 255 eles ficarão branquinhos mesmo como no meu exemplo. Não coloquei na imagem pois não costumo utiliza-lo, mas Rdn Color On/Off serve para regular a intensidade do brilho. E finalmente 3* Random Seed –> É a posição dos brilhinhos na imagem. Vamos usar valores diferentes aqui para dar a idéia de movimento. Então basta clicar em “OK” e sua imagem já estará com o brilho.

8) Todo este processo que fizemos para colocar o brilho nesta imagem, você deve repetir mais duas ou três vezes sempre mudando o “Random Seed” (e “Max Size” se quiser…) para que o brilho fique num lugar diferente em cada imagem.

9) A partir daqui você precisará o tutorial de “Gif Animado” se não souber como fazer um.

10) Nosso gif brilhante está pronto! Espero que vocês tenham gostado! Qualquer dúvida entre em contato! Beijinhos =)

Clique para ler mais...

como fazer Gifs Animado

Neste tutorial vamos aprender a fazer um GIF ANIMADO bem simples, como este aqui embaixo.

Existem inúmeras formas de se fazer um gif animado. Vou ensinar aqui como utilizar o Gif Movie Gear 3.0 que você pode baixar aqui. Faça a instalação normalmente.

1) Antes de começar vou explicar como funciona. Um gif animado nada mais é do que uma sequencia de imagens com pequenas alterações que se repetem e dão a idéia de movimento. Sendo assim…

2) Utilize seu editor de imagem preferido (Photoshop, Fireworks, Pain, Pain Shop Pro, etc… ) para criar as “fases” da sua animação. No nosso caso, temos 2 imagens:

3) Como vocês podem perceber a diferença entre elas é mínima, mas já é o suficiente para passar a idéia de movimento. Bom, chega de enrrolação! Vamos a animação… (ih, rimou! rss)

4) Abra o Gif Movie Gear 3.0. A tela inicial é assim:

5) Clique em “ARQUIVO” / “ABRIR”. Localize a pasta onde você salvou as imagens já feitas anteriormente. Utilize o “ctrl” para clicar em todas as imagens ao mesmo tempo e abrir de uma vez só ou abra uma de cada vez. Elas ficarão assim na tela:

6) Seu gif já está pronto! Agora vamos aprender apenas a controlar a velocidade em que as imagens se alternam. Selecione a primeira imagem e procure por um relóginho na barra de ferramentas. Eu costumo colocar a velocidade “10″ que não é tão lenta nem tão rápida, mas depende do efeito que você quer… Enfim, altere para conseguir o efeito desejado (quanto menor o número, mais rápido é a mudança entre uma imagem e outra). Repita o processo selecionando todas as imagens pois ele só muda uma de cada vez.

7) Agora vamos salvar. Clique em “Arquivo” / “Salvar Gif Animada Como… “. Escolha a pasta onde você quer salvar, de um nome e “OK”. Pronto! Espero que tenham gostado! Qualquer dúvida é só deixar um recadinho ou e-mail! Beijos e até o próximo tuto!

Credito: Fairy Tales

Clique para ler mais...

texto reflexo photoshop c2

*abra um Novo documento *texto( escreva o que quizer) *clica com o botao direito na camada do nome ou texto *Opçao de mesclagem ( escolher efeito) *clica com o botao diteito no nome ou texto duplicar camada *pegue a ferramenta mover e buxe para baixo o texto *Vá em editar>transformaçao>virar verticalmente *clica com botaodireito na copia da camada> opçao meclagem opacidade 50% e pronto!!!

Clique para ler mais...