Get the latest updates from us for free

Páginas

Pesquisar aqui
Mostrando postagens com marcador Popular Post widget. Mostrar todas as postagens
Mostrando postagens com marcador Popular Post widget. Mostrar todas as postagens

terça-feira, 30 de agosto de 2011

Mensagem popular para Blogger com Slider Easy












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 ..
The following is how it looks :

Popular Post for Blogger with Easy Slider

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-farhan

Mensagem 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 ..
A seguir é o que parece:

Mensagem popular para Blogger com Slider Fácil

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>
Leia Mais ►
Postado por flo às 18:50 0 comentários
Marcadores: , , , ,
Assinar: Postagens (Atom)

indicar...!...


Share

S