Postagens populares em forma de slide com efeito accordeon

 DEMO

»»Leia mais...

Postagens populares em forma de slide com setas

 DEMO
Há um tempo devendo essa postagem, onde é possível colocar os posts mais vistos de seu blog em forma slide com setas, trago agora para vocês. Quem  adaptou para o Blogger foi Abu Farhan, portanto, todos os aplausos e agradecimentos a ele.
O que é necessário é que você tenha em seu blog o widget com as postagens populares e que cole o código em um widget HTML/Javascript. Estando implementado, deixe como mostra o exemplo.
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/AVvXsEj4v79sjadwYxQbguc9WBtAe1Xkzr8iYt4Er0pkZ6YsA3a4Em7bmP5gd7kQPRbp-AdUz1CR8eLQ2eSY5X5tX6Mwb8OOo_3GK9UFxTAg8aLcP0KjRxfOcZCpm5In6j1-UJn8fnuLGUpPJ2w/s1600/8395_64x64.png) no-repeat 0 0;/*imagem seta ESQUERDA*/
#nextBtn a, #slider1next a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-YAH3oQPX-6jFa-21071VruMn2Z_ctF0JyKHYfO_ErvS9JlWE_BIecbwrGeQG8uaGq3f9Fb9T8xUrz6DXrYUruA4UNuLk_9CLKToBkkmAGsX9MfVBvLPfVX9iny03EKwfRTH_I6DxHHM/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>

»»Leia mais...

Colocar o novo Blogger com fundo transparente

 DEMO
Esta dica é baseada em cima do template Simple, um dos templates do novo modelo, implementado a partir de agosto de 2010, portanto, observe se há este código em seu blog para implementar a dica :-)
Vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por:  
.main-outer {
 
Coloque então o código abaixo depois dele
 opacity:0.8;
Para o antigo blog, teste ESTE código

»»Leia mais...

Visitante troca imagem de fundo do seu blog

DEMO

»»Leia mais...

Menu social embutido com efeito j.query

 

»»Leia mais...

Colocar apresentação de power point no Blogger

Hoje vou ensinar como colocar uma apresentação de Power Point nas páginas do Blogger. É necessário que hospede o dito cujo em um site que aceite esse formato. Indico o site Slide Share
A aparência será como esta abaixo
O melhor presente
View more presentations from elainebucci
A primeira coisa a fazer, é obvio, é entrar no site. Clique AQUI para entrar.
Agor é necessário fazer um cadastro, gratuito.
Preencha o formulário conforme o modelo abaixo.
Clique agora em UPLOAD
Abrirá uma janela com o browser de seu computador. Procure onde está seu arquivo PPS
Agora aguarde até fazer o upload
Pronto ! Agora clique no botão SHARE, copie o código e...
Cole em seu editor de postagem no modo HTML. Dê um título e publique.

»»Leia mais...