Template Bonequinhos de Natal Azuis

Template desativado devido  a atualização de novos recursos do  Blogger. Obrigada pela sua compreensão.
Conheça meus outros blogs:
http://festaesabor.blogspot.com http://tudodisney.blogspot.com http://redeliberdade.blogspot.com

»»Leia mais...

Com instalar os meus templates

Hoje, 03/10/2012 refaço este post após as inúmeras modificações que a plataforma Blogger disponibilizou para todos. Agora está mais fácil instalar meus templates.
Depois de ter escolhido o modelo de seu agrado, perceba que há nos posts um link escrito: "PEGAR CÓDIGO"clique então para pegar o código
Você será direcionado para uma página como essa abaixo:
Copie então todo esse código. Mas atenção, é um código enorme, copie-o até o fim ou não dará certo.
Agora vá até seu blog, lá por onde você entra.
Abrirá uma janela, clique então em "modelo"
Ao abrir a janela clique em "Editar HTML"
Apague agora tudo que estiver e cole o código de meu template. Salve.
Atenção, se aparecer alguma mensagem perguntando se deve excluir widgets, selecione "NÃO"

»»Leia mais...

Lâmpadas coloridas de Natal no Blogger

Mas uma dica para enfeitar seu blog com tema natalino. Que tal colocar luzinhas como esta acima ?
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:  
]]></b:skin>  
 
 
Substitua então pelo código abaixo:
.lampada-natal {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqnW4rT1TgkVB6PkQ_xlL9t7m2bXLvJww4GkoP967H-kPijp_60LzO-FGB-aI9pf7G39I7MS52nMloBkCOo0aQV6__EEvM82KKjGWZzZrfo9tP_ecaCPF8iLyKriSRtM8_YMCmNZpEXVs/s1600/lampadas-elke.gif);
background-repeat:repeat-x;
height:33px;
width:100%;
position:absolute;
top:0px;
left:0;
]]></b:skin>
Procure agora por:
<div class='header-outer'>
Troque-o então pelo código abaixo:
<div class='header-outer'>
<div class='lampada-natal'/>

»»Leia mais...

Enfeitar o blog para o Natal

Quer fazer mudanças em seu blog para o Natal mas não quer mexer no template ? Então coloque scripts para fazer algumas mudanças. Copie os códigos abaixo e cole em HTML/Javascript.

»»Leia mais...

Slide flip-page com atualizações automáticas de seu blog

 DEMO
Mais um slide adaptado por Abu Farhan, esse modelo tem um efeito de página foleada e é super-mega,power-fácil de instalar.
Vá até layout
Clique em Adicionar um Gadegt
Ao abrir, clique em  HTML/Javascript
Cole então o próximo código colocando o endereço de seu blog no local indicado, arrastando o widget para o local que você quer que apareça o slide.
<script type="text/javascript">
 // 7 variables to control behavior
 var Book_Image_Width    =450;
 var Book_Image_Height   =350;
 var Book_Border         =true;
 var Book_Border_Color   ="gray";
 var Book_Speed          =10;
 var Book_NextPage_Delay =1500; //1 second=1000
 var Book_Vertical_Turn  =0;
 // variables for content
 var random_posts        = true; // random posts
 var numposts_gal        = 10;   // number of posts
 </script>
 <script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galeryposts-bookflip.js" type="text/javascript"></script>
 <script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/bookflip.min.js" type="text/javascript"></script>
 <div id="Book" style="position:relative; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);">
 <img src="http://i1133.photobucket.com/albums/m596/abu-farhan/bookflip/placeholder.gif" width="450" height="350" />
 </div>
 <script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
 <script type="text/javascript">
 ImageBook();
 </script>
Código em rosa comprimento de cada imagem
Código em azul largura de cada imagem

»»Leia mais...

Slide com as últimas atualizações automaticas. Modelo Nivo

 DEMO

»»Leia mais...

Slide com as últimas postagens

 DEMO
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:  
]]></b:skin>  
 
 
Acima dele cole o código abaixo:
/* START
 Roundabout Content Slider using jQuery for blogger
 By http://www.abu-farhan.com
 Roundabout
#featured   {
margin:0px 0px 20px 0px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
#folio_scroller_container  {
margin-top:35px;
margin-bottom:40px;
height:auto;
#folio_scroller_container .roundabout-holder {
list-style:none;
height:400px;
margin:0px auto 20px auto;
.roundabout-holder {
list-style:none;
width:940px; /*Comprimento do slide*/
height:350px;/*largura do slide*/
margin:0px auto;
.roundabout-moveable-item   {
height:290px;/*comprimento da imagem*/
width:350px;/*largura da imagem*/
background:#f9f9f9;
font-size:14px!important;
cursor:pointer;
padding:5px 9px 20px 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-webkit-box-shadow:0px 0px 20px #787878;
-moz-box-shadow:0px 0px 20px #787878;
.roundabout-moveable-item img {
height:90%; width:100%;
background-color:#fff;
margin:0;
.roundabout-in-focus  {
cursor:auto;
.roundabout-in-focus:hover  {
-webkit-box-shadow:0px 0px 20px #000;
-moz-box-shadow:0px 0px 20px #000; 
font-size : 18px;/*Tamanho da fonte*/
border:1px solid #aaaaaa;
.roundabout-holder span {
display:none; font-size:12px;
.roundabout-in-focus:hover span   {
display:inline; position:absolute;
bottom:5px; right:5px; padding:8px 20px;
background:#f9f9f9; color:#000000; z-index:999;
-moz-border-radius: 0 8px 8px 0; border-top:1px solid #ccc;
.roundabout a:active, .roundabout a:focus, .roundabout a:visited  {
outline:none; text-decoration:none;
.roundabou li   {margin:0
a img   {
border:none; outline:0;
 Procure agora por:
</body>
E acima dele cole o próximo código
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script charset='utf-8' src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/jquery.roundabout-1.1.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 jQuery(document).ready(function($) {
 var interval;
 $(&#39;#featured ul&#39;)
 .roundabout({
 duration: 600 }
 )
 .hover(
 function() {
 // oh no, it&#39;s the cops!
 clearInterval(interval);
 },
 function() {
 // false alarm: PARTY!
 interval = startAutoPlay();
 }
 );
 // let&#39;s get this party started
 interval = startAutoPlay();
 });
 function startAutoPlay() {
 return setInterval(function() {
 jQuery(&#39;#featured ul&#39;).roundabout_animateToNextChild();
 }, 5000);
 }
 </script>
Salve. Agora clique em Layout
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, arrastando o widget para o local que você quer que apareça o slide.
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script><script style="text/javascript">
 var numposts_gal = 6;
 var random_posts = false;
</script>
<script src="AQUI IO ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

»»Leia mais...

Postagem popular em forma de slide animado

 DEMO
Mais um modelo de slide para usar nas postagens mais vistas em seu blog, e mais um dos modelos adaptada por Abu Farha.
É 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 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
#PopularPosts1 li {
 width:285px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
a img {
    border: 0;
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

»»Leia mais...

Postagens populares em forma de slide-cubo

 DEMO
Mais um modelo de slide para usar nas postagens mais vistas em seu blog. adaptada por Abu Farhan esse modelo o slide fica em forma de cubo.
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">
.cube {
width: 280px; /*Comprimento do cubo*/
height: 280px;/*largura do cubo*/
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
</script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script>

»»Leia mais...