Slide de postagens populares - Instalação fácil | Quero Dicas | Tutoriais para seu blogs


Slide de postagens populares - Instalação fácil


Slide de postagens populares

Depois de alguns dias sem fazer postagens, hoje eu trago para vocês um slide de postagens populares muito fácil de instalar.
O ideal de sua visualização é em baixo do banner, para que o seu visitante, assim que entrar em seu blog veja as postagens mais acessadas.
Vou para de blá blá blá e começar =D


Ele fica como na imagem abaixo.
Claro, com o fundo do seu blog, pois o gadgets é transparente.

  TUTORIAL


1 - Primeiro você deverá ter o gadget padrão de postagens populares do blogger.

 

2 - Direcione ele para abaixo do seu cabeçalho


3 - Copie e cole o código abaixo em "HTML/Javascript"

<style>
#slider ol,#slider ul,#slider li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}

.popular-posts img {
margin: 0 !important;
padding:0 !important;
width:140px; /*---- altere ----*/ 
height:100px;/*---- altere ----*/ 
}

ol, ul {
list-style: none;
}

.wrapper {
width: 800px;/*---- altere ----*/ 
margin: 0 auto;
position:relative;
}

.clear {
clear: both;
}

.display-none {
display:none;
}

#slider {
position: relative;
top: -2px;
z-index: 1;
}

#slider .prev {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://1.bp.blogspot.com/-MN_BaFG7Agc/VeQVgUl63fI/AAAAAAAAMqE/IInbfwf-F6Q/s1600/navazulesc2.png) no-repeat center center;
top: 100px;/*---- altere ----*/ 
left: -31px;/*---- altere ----*/ 
}

#slider .next {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://1.bp.blogspot.com/-Ti250ud0L8E/VeQVgFiE5kI/AAAAAAAAMqA/nEdFookc0ok/s1600/navazulesc.png) no-repeat center center;
top: 100px;/*---- altere ----*/ 
right: -31px;/*---- altere ----*/ 
}

#slider #slider-wrapper {
width: 720px;
height: 300px;
padding-top: 10px;/*---- altere ----*/ 
overflow: hidden;
z-index: 999;
position: relative;
}

#slider #slider-inner {
width:9780px;
height:300px;
position:absolute;
}

#slider .article {
width: 160px;
height: 200px;
float: left;
margin-right: 30px;
}

#slider .article img {
margin-bottom: 15px; 
box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

#slider .article h2 {
margin-bottom: 50px; /*---- altere ----*/ 
line-height: 18px;
}

#slider .article h2 a {
font-size: 15px;/*---- altere ----*/ 
color: #404040;
font-weight: bold;
text-shadow: 0 1px 0 #fff; /*---- altere ----*/ 
line-height: 20px; 
}

#slider .article .meta-comments a {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}

#slider .article .item-snippet {
margin-left: 15px;/*---- altere ----*/ 
}

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/querodicasde/javascript_blog/accordion-for-blogger.googlecode.com_slidepopularpost.js"></script>
/*---- www.querodicasde.com.br ----*/ 



4 - Depois o direcione para abaixo do gadget "Postagens Populares". Ficando assim:


5 - Salve a organização, faça algumas alterações no código para que se ajuste ao seu gosto e pronto!

Brinde de imagens
Caso queira mudar a cor do cursor, é só trocar o endereço de imagem pela sua  própria ou
  pode usar uma das imagens abaixo:

 

 

  

  

 

 

 

 

Espero que tenham gostado e peço que deixem seu comentários. Beijinhos
Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.