Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!! Anuncie Aqui!!

Postagens populares em forma de slide com setas

Clique em Adicionar um Gadegt
Ao abrir, clique em  HTML/Javascript
Cole então o próximo código fazendo as modificações necessárias.
<style type="text/css" media="screen">
<!--
#PopularPosts1{
height:300px;
margin-bottom: 50px;
}

.item-content {
width:900px;/*Comprimento do slide*/
height:300px;/*Largura do slide*/
position:relative;
}

.slider {
width:900px;/*Comprimento do slide*/
height:300px;/*Largura do slide*/;
margin: 10px auto;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
}

.item-snippet {
background: #647A8C;
width:900px;/*comprimento da faxixa da inscrição*/
font-size:12px;/*Tamanho da fonte da inscrição*/
color:#fff;/*Cor da letra*/
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
font-style:italic;
}

.item-title{
font-size:20px;/*Tamanho da fonte do título*/
color:#fff;/*Cor do título*/
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}

.item-title a:link,.item-title a:visited{
color:#fff;
text-decoration:none;
border:none !important;
padding:0 !important;
}

.item-thumbnail img{
padding:0 !important;
}

.item-thumbnail a{
padding:0 !important;
}
.crosscol .widget-content {position:relative;}
.slider ul, .slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

#slider2{margin-top:1em;}
.slider li, #slider2 li{
width:900px;
height:300px;
overflow:hidden;
}

.item-thumbnail img{
width:900px;/*Comprimento da imagem*/
height:300px; /*Largura da imagem*/
}

#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:140px;
z-index:900;
}

#nextBtn, #slider1next{
left:870px !important;/*Posição seta direita*/
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:200px; /*posição seta quanto a altura*/
width:30px;
z-index:800;
}

#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:70px;
height:127px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3EF86SrGsH9PYYN5scqi5ZsmAR1lvHHEcSji9TJnPZEbY73TnAxwKauR7mDumF7H_i8bsrya1TzAns4jbm8_tQbIj__WDgE3egPmzBLdfgRfrsVIO5v3oHEUceljZ23Ctbw-Q0kv-O_Q/s1600/8395_64x64.png) no-repeat 0 0;/*imagem seta ESQUERDA*/
}

#nextBtn a, #slider1next a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwp5AuZ6hzBXQg18zxjHm0046MprWVioG8StQfwFq6UAiejsupv_53RfWQHmWqcZ1SfdK_Lj9Nb0NV3z5KBmB5kOgZiCDkdAShLg9RMXnFujuNyTyeaIIINWFjwi1lW2IrNYAJM8weQHo/s1600/8415_64x64.png) no-repeat 0 0;/*imagem seta DIREITA*/
}

ol#controls{
margin:1em 0;
padding:0;
height:38px;
}

ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}

ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}

ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
.test{margin:30px;}
-->
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-for-blogger.googlecode.com/svn/trunk/easysliderpopular.js' type='text/javascript'></script>

Sem comentários »
Bolo 10

0 comentários:

Postar um comentário