Postagens Recentes
Grade Lista

8 de dez. de 2011

Template Bonequinhos de Natal Azuis

. | 5 comentários:


Template desativado devido  a atualização de novos recursos do  Blogger. Obrigada pela sua compreensão.

Conheça meus outros blogs:

»»Leia mais...

6 de dez. de 2011

Com instalar os meus templates

. | 34 comentários:
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...
.:. ,

5 de dez. de 2011

Lâmpadas coloridas de Natal no Blogger

. | 3 comentários:


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

. | Nenhum comentário:



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.

Clique em "Modelo" depois em "Adicionar um elemento de página" . Clique então em HTML/Javascript e cole um dos códigos abaixo.







Código Papai Noel 






<marquee><img src="http://petimage.bunnyherolabs.com/santa/sleigh/santapull.gif"/></marquee>

Código Cursores



    Árvore de natal 1

    Árvore de Natal 2

    Bola de Natal
    Boneco de neve

    Estrela

    Floco neve

    Papai Noel

    Caixa de presente

    Sininho

    Créditos: http://www.girlspt.com/cursores/cursoresnatal.html




Código Neve 




Vá até o HTML de seu blog e procure por:



</body>


Acima dele cole o código abaixo:



*Se quiser outra imagemde neve, substitua o código em vermelho pelo endereço de sua image. AQUI mais imagens

<script type='text/javascript'>
endereco = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu30cVKVmtNPh4FnTqrukzLint1P-KeEYh_vIvE8TWuAlpqW57nUzVXfObQL83iNhdAlW8Hhf5BbKOww9LNLGZVp9eDAyEisAq57FQxmxjdoEW3SyOVoiE-W7gprRwXGT8vyOtjHtI4KY/s1600/1128a_01.gif&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
// JavaScript Document

var snowsrc=window.parent.endereco
//how many snowflakes there will be (currently 12)
var no =40;
//How fast will the snow disappear (0 is never)
var hidesnowtime = 0;
//The height the snow will reach before it disappears ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////////////////////////End of Settings///////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest()
{
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 4600;

if (ns6up)
{
  doc_width = self.innerWidth;
  doc_height = self.innerHeight;
}
else
if (ie4up)
{
  doc_width = document.body.clientWidth;
  doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i)
{
  dx[i] = 0;
  xp[i] = Math.random()*(doc_width-50);
  yp[i] = Math.random()*doc_height;
  am[i] = Math.random()*20;
  stx[i] = 0.02 + Math.random()/10;
  sty[i] = 0.7 + Math.random();
  if (ie4up||ns6up)
  {
      if (i == 0)
      {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px;\"><a href=\"http://rftactical.darkbb.com/index.htm\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      }
      else
      {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
  }
}

function snowIE_NS6()
{
  doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
  doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
  for (i = 0; i < no; ++ i)
  {
      yp[i] += sty[i];
      if (yp[i] > doc_height-50)
      {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
  }
  snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow()
{
  if (window.snowtimer) clearTimeout(snowtimer)
      for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
  

if (ie4up||ns6up)
{
  snowIE_NS6();
  if (hidesnowtime>0)
      setTimeout("hidesnow()", hidesnowtime*1000)
}
document.write('<p style="text-align:center"></p>')
//]]>
</script>

»»Leia mais...
.:.

1 de dez. de 2011

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

. | 5 comentários:

 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

. | 7 comentários:


Mais um slide de Abu Farhan.

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
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/
/*-----START Default Theme ----------------------------------------*/
.theme-default .nivoSlider {
 position:relative;
 background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%;
 -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
 -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-20px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;border:0;
padding:0;margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
font-size: 22px;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:18px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin: 2px 3px 44px -19px;
 width:688px; /* Make sure your images are the same size */
 height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}
/* END
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/

 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 src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </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 colocando o endereço de seu blog no local indicado, arrastando o widget para o local que você quer que apareça o slide.


<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 246; //image height
 var image_width = 618;  //image width
</script>
<script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

»»Leia mais...
.:. ,

Slide com as últimas postagens

. | 6 comentários:



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

. | 7 comentários:

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

. | 2 comentários:
 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...
.:. ,
Assinar: Postagens (Atom)

Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube