Primeiro você vai fazer seu cabeçalho e deixar um espaço para o slide. Atenção: as imagens terão que ser todas do mesmo tamanho. Por isso veja direitinho o espaço do cabeçalho e as medidas das imagens.
Agora, com as medidas das 4 imagens, dê Ctrl + F e pesquise no seu html por ]]></b:skin>
Acima disso, cole:
/*--Container geral--*/.main_view {float: center;position: relative;margin-top:-286px;margin-left:305px;}/*--Estilos do container das imagens--*/.window {height:200px;width: 337px;overflow: hidden;position: relative;}.image_reel {position: absolute;top: 0; left: 0;}.image_reel img {float: left;}/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/.paging {position: absolute;bottom: 40px;right: -1px;width: 220px;height:41px;z-index: 100;text-align: center;line-height: 40px;-moz-border-radius-topleft: 15px;-moz-border-radius-bottomleft: 15px;-webkit-border-radius-bottomleft: 15px;-webkit-border-radius-topleft: 15px;display: none;}/*--Estilos do link da numeração (Estilo dos numeros)--*/.paging a {outline:none;padding: 5px 10px;text-decoration: none;color: none;background: none;-moz-border-radius: 17px;-khtml-border-radius: 17px;-webkit-border-radius: 17px;}/*--Estilos do link ativo da numeração--*/.paging a.active {font-weight: bold;color: none;background: none;-moz-border-radius: 17px;-khtml-border-radius: 17px;-webkit-border-radius: 17px;}/*--Estilos do link hover da numeração--*/.paging a:hover {font-weight: bold;}.feed-links { display: none; display: none; }
Altere height:200px; pela altura da imagem e width: 337px; pela largura.
Visualize e salve. Para colocar o slide no cabeçalho, adicione um Gadgets Html/JavaScript e cole:
<div class="main_view"><div class="window"><div class="image_reel"><a href="LINK 1" alt="" ><img src="URL DA IMAGEM 1"/></a><a href="LINK 2" alt=""><img src="URL DA IMAGEM 2"/></a><a href="LINK 3" alt=""><img src="URL DA IMAGEM 3"/></a><a href="LINK 4" alt=""><img src="URL DA IMAGEM 4"/></a></div></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></div>
Altere apenas o que está em itálico. Quando terminar salve e deixe o Gadgets abaixo do Gadgets de cabeçalho desse jeito. Salve, visualize e pronto!
OBS: A largura e Altura do Slide, tem que ser a mesma largura e altura da imagem. Não sabe qual é o tamanho e a largura da imagem? ou como colocar a mesma largura e altura na imagem do Slide, basta ir no programa "PhotoScape" e clicar em cima do "Redimensionar", você pode colocar a largura e altura que você quiser na imagem, e depois colocar o mesmo número da largura e altura no html do Slide.
0 comentários:
Postar um comentário