Encontramos um código para mostrar as postagens recentes do blog em forma de apresentação de slides. Isso pode ajudar a gerar mais pageviews fazendo seus visitantes conhecerem mais postagens do seu blog e assim dando mais chances das pessoas gostarem do seu blog ou recomendarem seu blog em redes sociais.
Esse código de slides é simples de usar, mas você precisa ter cuidado na hora de fazer as alterações para não apagar nada por engano no código. Entre na pagina modelo clique para adicionar um gadget e escolha a opção html/javascriptentão coloque esse código:
Agora veja aqui as alterações que pode fazer para personalizar os slides no seu blog:
Imagem para o thumbnail (miniatura da imagem) quando a postagem não tem imagem:
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
Largura total do slide:
#spylist ul{
width:320px; altere o valor 320 neste trecho do estilo CSS.
Tempo para trocar cada slide: intervalspy=4000
Tamanho da imagem no slide:
thumbwidth = 70; - largura
thumbheight = 70; - altura
Se quando alterar o tamanho da imagem os slides aparecer cortados no seu blog então faça o ajuste no CSS do slide alterando o valor 350 neste trecho:
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
Mudar o tamanho da fonte do título da postagem no slide:
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:16px; - altere o valor 16
Quantidade de postagens mostradas nos slides e endereço do seu blog:
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";
Depois que terminar só precisa salvar as alterações no gadget e pronto já tem slides dos posts recentes no seu blog, veja nos links abaixo outras dicas relacionadas a postagens recentes e slides para seu blog:
Fazer Pagina com Atualizações mais Recentes do Blog
Lista aleatória das postagens recentes do blog
Colocar Slides ( Power Point) no blog
Como fazer Apresentação de Slides com Banners
Lembramos que você não precisa alterar todos esses itens antes de usar os slides, alias nós sugerimos que altere somente o endereço do seu blog e faça um teste para ver os slides com suas postagens recentes funcionando no seu blog e depois personalize como quiser aos poucos, ou seja, faça uma alteração, salve e visualize o blog, pois desta forma que cometer algum erro será fácil identificar qual foi o trecho que errou.
Esse código de slides é simples de usar, mas você precisa ter cuidado na hora de fazer as alterações para não apagar nada por engano no código. Entre na pagina modelo clique para adicionar um gadget e escolha a opção html/javascriptentão coloque esse código:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>
Agora veja aqui as alterações que pode fazer para personalizar os slides no seu blog:
Imagem para o thumbnail (miniatura da imagem) quando a postagem não tem imagem:
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
Largura total do slide:
#spylist ul{
width:320px; altere o valor 320 neste trecho do estilo CSS.
Tempo para trocar cada slide: intervalspy=4000
Tamanho da imagem no slide:
thumbwidth = 70; - largura
thumbheight = 70; - altura
Se quando alterar o tamanho da imagem os slides aparecer cortados no seu blog então faça o ajuste no CSS do slide alterando o valor 350 neste trecho:
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
Mudar o tamanho da fonte do título da postagem no slide:
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:16px; - altere o valor 16
Quantidade de postagens mostradas nos slides e endereço do seu blog:
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";
Depois que terminar só precisa salvar as alterações no gadget e pronto já tem slides dos posts recentes no seu blog, veja nos links abaixo outras dicas relacionadas a postagens recentes e slides para seu blog:
Fazer Pagina com Atualizações mais Recentes do Blog
Lista aleatória das postagens recentes do blog
Colocar Slides ( Power Point) no blog
Como fazer Apresentação de Slides com Banners
Lembramos que você não precisa alterar todos esses itens antes de usar os slides, alias nós sugerimos que altere somente o endereço do seu blog e faça um teste para ver os slides com suas postagens recentes funcionando no seu blog e depois personalize como quiser aos poucos, ou seja, faça uma alteração, salve e visualize o blog, pois desta forma que cometer algum erro será fácil identificar qual foi o trecho que errou.
Nenhum comentário:
Postar um comentário