slide perere

09/12/11

Template Papai Noel

. Templates Acessorios | 10:59 2 comentários


Template em 3 colunas, cursor animado, leia mais e páginas internas maiores.
Leia Mais ►
.:. , ,

08/12/11

Template Bonequinhos de Natal Azuis

. Templates Acessorios | 15:35 4 comentários
Template para o novo Blogger com  3 colunas, imagem de fundo animada, leia mais, postagens internas maiores, cursor animado.




Leia Mais ►
.:. , , ,

06/12/11

Com instalar os meus templates

. Templates Acessorios | 15:41 12 comentários


Tenho notado que com as novas mudanças no Blogger, os códigos de meus templates não estão mais sendo aceitos simplesmente copiando e colando como fazia antigamente. Por isso, refaço essa tutorial.



A primeira coisa a fazer é aceitar a nova interface do Blogger.

Clique AQUI e aprenda como fazer.(Se você já usa a nova interface do Blogger, implementada em agosto de 2011, pode pular esta etapa)


Entre em um dos links abaixo e escolha o modelo de template que você quer instalar em seu blog.




Templates modelo novo    Templates modelo antigo



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 abra o bloco de notas que temem seu computador. Para isso, clique no botão INICIAR, que está do lado esquerdo de sua tela, em baixo no monitor.






Agora clique em PROGRAMAS, depois em ACESSÓRIOS e então em BLOCO DE NOTAS.



Pronto, com o bloco de notas aberto, cole então o código do template que você escolheu.




Assim que tiver colado o código, clique em ARQUIVO e depois em SALVAR COMO...





 Abrirá uma janela, escreva então o nome do template, em letra minúscula e tudo junto, depois coloque .xml  (ponto xml) no final da inscrição. Vai ficar assim:

templateespace.xml


Observe o modelo, as configurações devem ficar assim: DOCUMENTO DE TEXTO(*.TXT) e ANSI




 Pronto, agora vamos subir o código para seu Blogger



Ao entrar no painel do Blogger, clique na pequena seta ao lado do ícone que parece duas folhinhas.



Abrirá uma janela, clique então em "modelo"








Na próxima página, observe que você verá o modelo original de seu template. Role a página, e clique em APLICAR AO BLOG, no modelo Simples






Prontinho, agora vamos fazer o upload do template.
Clique em FAZER BACKUP/RESTAURAR






Vai abrir uma janela, clique então em ESCOLHER ARQUIVO

Abrirá então uma janela no browser do seu computador, procure o código do template e depois clique sobre o código do template e  em abrir.





Você verá então o nome do template, clique em FAZER UPLOAD e aguarde um instante




Pronto, o template já está instalado em seu blog




Entenda que a partir de agosto de 2011 todos os modelos de template que fiz são baseados no Simples, modelo novo do Blogger.




Leia Mais ►
.:. ,

05/12/11

Lâmpadas coloridas de Natal no Blogger

. Templates Acessorios | 16:40 2 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(http://3.bp.blogspot.com/-yEFQsUw1xM0/Tt0ViCuRd6I/AAAAAAAAGV4/tB3Toj6ELmE/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

. Templates Acessorios | 12:07 1 comentários



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;http://4.bp.blogspot.com/-QWPvDvGKDIk/Tty11bGVWNI/AAAAAAAAGT4/9Kow9t3JdB8/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 ►
.:.

01/12/11

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

. Templates Acessorios | 21:21 3 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

. Templates Acessorios | 21:10 2 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

. Templates Acessorios | 15:43 1 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

. Templates Acessorios | 15:06 2 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 ►
.:. ,
Assinar: Postagens (Atom)
Templates e Acessórios / baseado no Simple | por © Templates e Acessórios ©2011