fonte e creditos:
abu-farhan.
Popular Post for Blogger with Easy Slider (Featured Content Slider)
Bismillah,..
Easy Slider.. why I chose this slider because it is simple and easy in the installation …
last time I used Easy Slider is when I make a content slider based on recent or random posts..Awesome Automatic Easy Slider for Blogger using jQuery Part 1
This time I used the Easy Slider for Popular Posts ..
last time I used Easy Slider is when I make a content slider based on recent or random posts..Awesome Automatic Easy Slider for Blogger using jQuery Part 1
This time I used the Easy Slider for Popular Posts ..
The following is how it looks :
This script very easy to install, you only have to put the script to the new Gadget
- Login to Blogger Dashboard and navigate to Design – Page Elements
- Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
- After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
- Put all script bellow to the “Content” of HTML/Javascript Gadget
- Done- your popular post now with animation
<style type="text/css" media="screen">
<!--
#PopularPosts1{
height:263px;
}
.item-content {
height:263px;
position:relative;
width:560px;
}
.slider {
height:263px;
margin-left:25px;
width:560px;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:263px;
}
.item-snippet {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
width:560px;
font-size:9px;
font-style:italic;
}
.item-title{
color:#FFFFFF;
font-size:10px;
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}
.item-title a:link,.item-title a:visited{
color:#FFFFFF;
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:560px;
height:263px;
overflow:hidden;
}
.item-thumbnail img{width:560px;height:263px}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:582px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:100px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
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>
Alhamdulillah… by Catur
Traduzido:
fonte e créditos:
abu-farhanMensagem popular para Blogger com Slider Easy
(Content Slider Destaque)
Bismillah, ..
Slider fácil .. porque eu escolhi esse controle deslizante porque é simples e fácil na instalação ...
última vez que usei Slider Fácil é quando eu faço uma barra de conteúdo com base em posts recentes ou aleatórias .. Slider automática impressionante Fácil para o Blogger usando jQuery Parte 1
Desta vez eu usei o Slider fácil para Posts Popular ..
última vez que usei Slider Fácil é quando eu faço uma barra de conteúdo com base em posts recentes ou aleatórias .. Slider automática impressionante Fácil para o Blogger usando jQuery Parte 1
Desta vez eu usei o Slider fácil para Posts Popular ..
A seguir é o que parece:
Este script muito fácil de instalar, você só tem que colocar o script para o novo Gadget
- Acesso ao Painel do Blogger e navegue até Design - Elementos da página
- Clique em "Adicionar Gadget" e escolha "Popular Posts" ( Se você já tem esse gadget pule esta etapa )
- Depois de ter Gadget Mensagem Popular "Adicionar Gadget" novamente e selecione "HTML / Javascript"
- Coloque todos abaixo script para o "Conteúdo" do HTML / Javascript Gadget
- Feito o seu post-popular agora com animação
<style type="text/css" media="screen">
<! -
# {PopularPosts1
height: 263px;
}
. Item de conteúdo-{
height: 263px;
position: relative;
width: 560px;
}
. Deslizante {
height: 263px;
margin-left: 25px;
width: 560px;
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 263px;
}
. Itens snippet-{
background: url transparente (http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repetir rolagem 0 0;
color: # FFFFFF;
padding: 5px 5px 10px 5px;
position: absolute;
bottom: 0;
text-align: left;
width: 560px;
font-size: 9px;
font-style: italic;
}
. Item de título-{
color: # FFFFFF;
font-size: 10px;
font-weight: bold;
font-style: normal;
margin-bottom: 5px;
}
. Item de título-a: link, item título-a:. Visited {
color: # FFFFFF;
text-decoration: none;
fronteira: não importante;
padding:! 0 importante;
}
. Item de miniaturas-img {
padding:! 0 importante;
}
. Item de miniaturas a {
padding:! 0 importante;
}
.. Crosscol widget-content {position: relative;}
. Deslizante ul,. Deslizante li,
# Slider2 ul, # slider2 li {
margin: 0;
padding: 0;
list-style: none;
}
# Slider2 {margin-top: 1em;}
. Deslizante li, li {# slider2
width: 560px;
height: 263px;
overflow: hidden;
}
. Item de miniaturas-img {width: 560px; height: 263px}
# PrevBtn, # nextBtn,
# Slider1next, # {slider1prev
display: block;
width: 30px;
height: 77px;
position: absolute;
left: 30px-;
text-indent:-9999px;
top: 71px;
z-index: 1000;
}
# NextBtn, # {slider1next
à esquerda: 582px importante;
}
# PrevBtn, nextBtn #, # slider1next, # {slider1prev
display: block;
height: 77px;
left: 0;
position: absolute;
top: 100px;
width: 30px;
z-index: 1000;
}
# PrevBtn a, # nextBtn a,
# Slider1next a, # slider1prev a {
display: block;
position: relative;
width: 30px;
height: 77px;
background: url (http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
# NextBtn a, # slider1next a {
background: url (http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
ol controles # {
margin: 1em 0;
padding: 0;
height: 28px;
}
# controles ol li {
margin: 0 10px 0 0;
padding: 0;
float: left;
list-style: none;
height: 28px;
line-height: 28px;
}
# ol controles li a {
float: left;
height: 28px;
line-height: 28px;
border: 1px solid # ccc;
background: # DAF3F8;
color: # 555;
padding: 0 10px;
text-decoration: none;
}
ol # controles li.current a {
background: # 5DC9E1;
color: # fff;
}
# ol controles li a: foco, # prevBtn a: foco, # nextBtn a: focus {outline: none;}
. {Teste
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>
Alhamdulillah ... por Catur
<style type="text/css" media="screen">
<!--
#PopularPosts1{
height:263px;
}
.item-content {
height:263px;
position:relative;
width:560px;
}
.slider {
height:263px;
margin-left:25px;
width:560px;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:263px;
}
.item-snippet {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
width:560px;
font-size:9px;
font-style:italic;
}
.item-title{
color:#FFFFFF;
font-size:10px;
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}
.item-title a:link,.item-title a:visited{
color:#FFFFFF;
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:560px;
height:263px;
overflow:hidden;
}
.item-thumbnail img{width:560px;height:263px}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:582px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:100px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
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>
