Neste tutorial venho mostrar um SlideShow para que você possa divúlgar ainda melhor o seu trabalho colocando nesse slide coisas como propagandas de terceiros, anúnciar seu próprio trabalho como um E-book, ou um curso ou até mostrar seus melhores posts.
Então vamos começar, entre no seu blog e vá em design, agora vá em editar html e clique na caixinha editar modelos de widgets. De um ctrl+f no seu teclado e procure ela por: </head> e acima dela cole o seguinte código.
Script
Links
jQuery 1.2.6
scripts. js
Salve e vamos a próxima parte.
Agora procure pelo código: ]]></b:skin> e acima dele cole o seguinte código.
Css
Então vamos começar, entre no seu blog e vá em design, agora vá em editar html e clique na caixinha editar modelos de widgets. De um ctrl+f no seu teclado e procure ela por: </head> e acima dela cole o seguinte código.
Script
Agora onde está marcado código dos scripts você trocará pelo seguinte código que se encontra nos links abaixo.
<script type='text/javascript'>
//<![CDATA[
Código jQuery 1.2.6
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
Código scripts. js
//]]>
</script>
Links
jQuery 1.2.6
scripts. js
Salve e vamos a próxima parte.
Agora procure pelo código: ]]></b:skin> e acima dele cole o seguinte código.
Css
{Feito salve e vamos ou código html que é onde você escolherá onde vai ficar o seu Slide. Primeiro desmarque a caixinha editar modelos de widgets e vamos lá.
margin : 0;
padding : 0;
}
html {
height : 100%;
}
a:link, a:visited {
color : #06a506;
text-decoration : none;
}
a img {
border : 0;
}
div.wrap {
width : 550px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 550px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 550px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 550px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 298px;
background : url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/imagem%20de%20postagem/header-bg1.png) no-repeat 50% 0;
margin-bottom:10px;
}
div#header div#slide-holder {
z-index : 40;
width : 550px;
height : 300px;
position : absolute;
float:left;
margin: 0 auto;
}
div#header div#slide-holder div#slide-runner {
top : 10px;
left : 0px;
width : 550px;
height : 278px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 0px;
width : 550px;
height : 36px;
display : none;
position : absolute;
background : url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float: right;
height : 24px;
display : inline;
margin : 11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/alternativa%20extreme%20menu/slidenave.png);
}
div#nav ul li a {
background : url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/imagem%20de%20postagem/nav-bg.png) no-repeat;
}
Para que seu slide apareçá no mesmo local que o meu o código que você deve procurar é:
<div class='column-center-outer'> e abaixo dele você deve colar o código html.
Para colocar abaixo do cabeçalho o código a ser encontrado é o seguinte:
<div class='header-cap-bottom cap-bottom'> e ai fica a seu critério onde ficará melhor o Slide pra você
Html
<div id='header'><div class='wrap'>Azul: Link da página a ser aberto.
<div id='slide-holder'>
<div id='slide-runner'>
<a href='http://alternativawebmasters.blogspot.com'><img alt='' class='slide' id='slide-img-1' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/propalt-webmasters.png'/></a>
<a href='http://alternativawebmasters.blogspot.com'><img alt='' class='slide' id='slide-img-2' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/imagem%20de%20postagem/anuncieaqui.gif'/></a>
<a href='http://alternativawebmasters.blogspot.com'><img alt='' class='slide' id='slide-img-3' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/propalt-webmasters.png'/></a>
<a href='http://alternativawebmasters.blogspot.com'><img alt='' class='slide' id='slide-img-4' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/imagem%20de%20postagem/anuncieaqui.gif'/></a>
<a href='http://alternativawebmasters.blogspot.com'><img alt='' class='slide' id='slide-img-5' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/propalt-webmasters.png'/></a>
<a href='http://alternativawebmasters.blogspot.com'><img alt='' class='slide' id='slide-img-6' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/imagem%20de%20postagem/anuncieaqui.gif'/></a>
<a href='http://alternativawebmasters.blogspot.com'><img alt='' class='slide' id='slide-img-7' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/propalt-webmasters.png'/></a>
<div id='slide-controls'>
<p class='text' id='slide-client'><strong>Aviso: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>
</div>
<!--content featured gallery here -->
</div>
<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"","desc":"Para Conferir Clique na Imagem"},
{"id":"slide-img-2","client":"","desc":"Para Conferir Clique na Imagem"},
{"id":"slide-img-3","client":"","desc":"Para Conferir Clique na Imagem"},
{"id":"slide-img-4","client":"","desc":"Para Conferir Clique na Imagem"},
{"id":"slide-img-5","client":"","desc":"Para Conferir Clique na Imagem"},
{"id":"slide-img-6","client":"","desc":"Para Conferir Clique na Imagem"},
{"id":"slide-img-7","client":"","desc":"Para Conferir Clique na Imagem"}];
</script>
</div></div>
Verde: Link da imagem que será mostrada no slide.
Vermelho: Texto do slide
Laranja: texto ou descrição do que está sendo mostrado.
Depois de terminado salve e veja como ficou, não dei muitos detalhes para editar o slide para não estender muito o post é que pra quem já entende um pouco de html e css fica mais facil editar o próprio, mas se você for iniciante não exite em comentar suas dúvidas pois farei sempre o possivel para atende-las.
