Onde tem o link do Tuner Create você adiciona o seu link.
E onde tem o link do Dropbox você adiciona o banner de quem você quer fazer parceria o anunciar.
Espero que gostem pessoal. Qualquer dúvida comentem...
Venho postar esse tutorial que pode ser muito util para os visitantes do seu site/ blog! ;)
Vamos então ao tutoria!
.
1 - Va ao seu painel do blog
.
.
2 - Nova postagem
3 - Editar HTML
4 - Copie o seguinte codigo para a postagem:
<br /> <script style="text/javascript" src="http://100rede.com/mapablogger.js"></script><br /> <script src="http://seublog.blogspot.com/feeds/posts/default?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
5 - Substitua o "http://seublog.blogspot.com" pelo seu blog, E onde esta "results=1000" vc pode mudar o numero de posts que apareçam no mapa do site.
6 - Guarde a postagem e pronto! - Tutorial testado e aprovado ;)
se você gostou comente...
Primeiro você vai precisar de dois codigos:
O primeiro codigo você adiciona antes de :
]]></b:skin>
1º codigo
/* Slide*/
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:500px; /*ALTURA DAS IMAGENS-- */
width: 380px; /*LARGURA DAS IMAGENS-- */
border:1px solid #04272D;
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
.paging {
position: absolute;
bottom: 30px;
right: -1px;
width: 200px;
height:40px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(#);
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {
font-weight: bold;
}
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:500px; /*ALTURA DAS IMAGENS-- */
width: 380px; /*LARGURA DAS IMAGENS-- */
border:1px solid #04272D;
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
.paging {
position: absolute;
bottom: 30px;
right: -1px;
width: 200px;
height:40px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(#);
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {
font-weight: bold;
}
Onde esta de amarelo la em cima e a atura e largura das imagen você pode deixar do tamanho que você quiser.
Esse segundo codigo você adiciona onde você quer que fique o slide,no meu caso eu coloquei em html/javascript (mais você pode estar adicionando ele no html do blog).
para add o slide como widget vá no painel do sue blog >design>adicionar widget>html/javascrip e cola esse codigo:
<center>
<div id='slide'>
<div class='folio_block'>
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='aqui o endereço do link 1'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
<a href='aqui o endereço do link 1'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
<a href='aqui o endereço do link 2'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
<a href='aqui o endereço do link 2'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
</div></div>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
</div>
</div>
</div></div>
</center>
<div id='slide'>
<div class='folio_block'>
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='aqui o endereço do link 1'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
<a href='aqui o endereço do link 1'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
<a href='aqui o endereço do link 2'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
<a href='aqui o endereço do link 2'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
</div></div>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
</div>
</div>
</div></div>
</center>
onde está de amarelo e o link das imagens,os links q estão ai são das minhas imagens...
onde está de azul e os numeros que vão aparecer no slide.
"Para add mais imagens add esse codiga<a href='aqui o endereço do link 2'><img width="380px" src='LINK DA IMAGEM' heigth="500px" /></a>
acima de:
</div></div>
e almente a quantidade de numeros add esse codigo<a href='#' rel='5'>5</a>
abaixo de <a href='#' rel='4'>4</a>
PRONTO ESTÁ FEITO SEU SLIDE COMENTE NÃO CUSTA NADA!!!
Assinar:
Postagens