Avatar nas postagens

- Va em Editar HTML>>Expandir Modelo de Widgets e Procure por:


<b:if cond='data:post.title'>
2- Agora cole acima dela o codigo:

<div style='width: 100px; height: 100px; float:right; margin-right:6px; margin-top:7px; display:inline;'>

Nota, edite as seguintes tags:

-----------------------------------------------------------------
width: 100px;/*--- largura do avatar ---*/
height: 100px;/*--- altura ---*/
float:right;/*--- flotação ---*/
margin-top:7px;/*--- distancia entre o topo e o rodape ---*/
margin-right:6px;/*--- distancia partindo da direita ---*/
----------------------------------------------------------------------
Abaixo do código dado acima adicione o seguinte:

<b:if cond='data:post.author == "Seu Nome no Blogger"'>&limg src="Link do seu Avatar"/></b:if>

 

Ex.:Onde vc colocou "Seu Nome do Blogger" coloque o nome que vc usa no blogger tipo "ѕєρнιяσтн" (Que e o meu nome no blogger) e onde esta "link do seu avatar" vc coloca a img desejada, lembrando que a img precisa ser upada.

3- Posicionando o Avatar:

A parte mais facil, ou seja, e so vc usar margin ou padding para posicionar o avatar ate o local desejado


Obrigado e ate mais...

Efeito Marquee Vertical

Eae galera to eo aqui postando mais uma vez xD hoje vou estar ensinando como fazer um efeito
de Banners de parceria seja oque for fica andando pra cima é bem xD!! é pra blog/site
que tem muita parceria, e fica mais organizado não fica aquele menu de parceria grande de mais então



DOWNNLOAD CODIGO
Para Multiplica a Quantidade de Banners basta Multiplica o codigo.

Texto Piscando no Blog

tutorial de Como Colocar o texto piscando no Blog... Confiram aí Abaixo:

Entre em Nova postagem >> Editar HTML, Depois, Basta digitar seu texto entre as tags:

<blink> Seu texto </blink>

Obs.: O texto só é visualizado piscando no navegador Mozilla Firefox ou Google Chrome.
Obs²: Se quiser usar esse texto no HTML do Blog, use (Vai funcionar do mesmo jeito).

Comentem!

Creditos ao site Design Brasil Game

Mensagem ao entrar no blog

Ola Pessoal Hoje vou postar um tutorial muito fácil  e Simples Mensagem Ao Entrar No blog

Você só vai pegar esse código java script abaixo e colar Antes da Tag</body>
______________________________

<script>
alert('Seja Bem Vindo!');
</script>

______________________________
 
E só Pessoal Espero Que Gostem

Esconder textos

Fala aí gente, aqui é o Henrique e hoje venho trazer mais um tutorial pra vocês! E dessa vez venho trazer um script bem bacana.. até o momento consegui fazer um menu expansível e consegui esconder textos. É só usar a cabeça pra fazer coisas legais com ele, enfim, vamos la!


DEMONTRAÇÃO




 Vamos começar inserindo o script no seu HTML, acima de "</head>" cole o seguinte código:

<style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write(&#39;<style>.texthidden {display:none} </style>&#39;);</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className==&quot;shown&quot;) {whichpost.className=&quot;texthidden&quot;;}else {whichpost.className=&quot;shown&quot;;}}</script>
<style type='text/css'>
#dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
font-weight:bold;background:#F06214 url() repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none;
padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#000000;
background:transparent url() repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6;
background:#ffffff url() no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
background:#805E5E url() no-repeat top right;height:33px;}
</style>

 Pronto, agora vou passar o código para "esconder" os textos. Você pode usá-lo no HTML das postagens ou em um gadget.

<a href="javascript:void(0);" onclick="expandcollapse('esconder01')">Clique para expandir!!</a>
<div id="esconder01" class="texthidden">
SEU TEXTO AQUI
</div>

 Note as partes tem negrito. Elas indicam que tem de serem iguais, mas se for usar mais de uma vez o código, é importante que troque-as, por exemplo:

<a href="javascript:void(0);" onclick="expandcollapse('esconder01')">Clique para expandir!!</a>
<div id="esconder01" class="texthidden">
SEU TEXTO AQUI
</div>

<a href="javascript:void(0);" onclick="expandcollapse('esconder02')">Clique para expandir!!</a>
<div id="esconder02" class="texthidden">
SEU TEXTO AQUI
</div>

 Ao deixar dois ou mais códigos com a mesma ID apenas um irá funcionar.

 Você também pode usar uma imagem ao invés de uma frase indicando o trecho escondido. O código fica assim:

<a href="javascript:void(0);" onclick="expandcollapse('esconder01')"><img src='LINK DA IMAGEM'/></a>
<div id="esconder01" class="texthidden">
SEU TEXTO AQUI
</div>

Se gostou, COMENTE :D

Fonte e creditos ao site design on Brasil

Como Colocar Caixa de Curtir no blog

O processo é bem simples, o Facebook tem uma página cheia de ferramentas para colocar no seu website, como somente o botão curtir, caixa de atividades do seu perfil do e muito mais neste link: http://developers.facebook.com/?ref=pf.

 

Mas vamos ao que interessa, primeiro você precisa criar uma Página no facebook, esta página será o perfil do seu blog no Facebook.

Clique no link abaixo:

http://www.facebook.com/pages/learn.php

Clique no link Cria uma página.

?Na próxima página você irá escolher a categoria da sua página, escolha a que mais se adaptar com seu blog.

Depois de escolher a categoria e digitar o nome, que deve ser o nome do seu Blog, você chegará na página de personalização do perfil do seu blog no Facebook.

Depois de personalizar sua página no facebook, vamos para a segunda parte, que é adicionar a caixa de curtir no seu blog.

Clique neste link:

http://developers.facebook.com/docs/reference/plugins/like-box/

Em Facebook Page URL você deverá colar a URL da sua página do facebook, a que fica na barra de endereço quando você está personalizando ela.

Depois só clicar em Get Code para obter o código da sua caixa de curtir, escolha uma das opções e cole em uma área apropriada do seu blog, recomendamos a sidebar (coluna).

Futuramente publicaremos um tutorial de como personalizar a página do seu blog no Facebook com recursos de monetização, como publicar os posts do seu blog automaticamente na página e criar enquetes, fiquem ligados.

 

-----------------------------------------------

Fonte & creditos ao site design luccas

Menu Drop Down CSS

Primeiro Vá em Model >> Editar HTML >> Expandir Widgets >> Procure por: 

]]></b:skin> 

Logo acima dessa tag cole o seguinte código:

/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPXX_Yo-wUo6cT5RzAALCW-PLIzP8yDZ5ZEYKZ_0We1YA5aZokckIbCxOaNChxohRmFzaRj_uM9IzFjZ_GAF0HK2U4UEQn-XcUvkoSoFQdyk92nO8t7n4_4pK_zfeT54-QbhK2WhE3Lww/s1600/navbar.png);
width: 100%;height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;/*--cor do link--*/
font-weight: bold;margin: 0;padding: 0;text-transform: capitalize;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 16px;/*--tamanho da fonte do link--*/
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHGeDw3BJvh1o6DOFcovFzVWmBafpdR46hVmgyssnmP_CzToJKumEqhyGAVTlSt46HO5kYJANdSjvzLbTKzcZojuoc6ng1cAro-jKLVN4yRcZH8p-xZE02-IQTV-27dR1VRDxK4V95v2w/s1600/navhov.png);
color: #FFF;  /*--edite cor do link hover--*/
margin: 0;padding: 9px 15px 8px;text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;/*--cor de fundo--*/
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;/*--cor de fundo hover--*/
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}

Agora para instalar é facil, adicone um gadget HTML/JavaScript, e cole editando os nomes e os links

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='ENDEREÇO DO SEU LINK AQUI'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.5</a></li>
</ul>

Créditos a Design on Storm*

Menu Salto

Irei por o código form e como personalizar o menu.

Código Form (Blogger > Nova Postagem > Editar HTML):

<form>

<select>

<option>Meu Menu de Salto</option><!--Título do Menu-->

<option>-----------------</option><!--Separador-->

<option>TUTORIAIS CSS</option><!--Subtítulo-->

<option value="#">Sintaxe </option><!--Link-->

<option value="#">Fontes</option><!--Link-->

<option value="#">Bordas</option><!--Link-->

<option value="#">Fundos</option><!--Link-->

<option value="#">Menus</option><!--Link-->

<option>------------------</option><!--Separador-->

<option>TUTORIAIS HTML</option><!--Subtítulo-->

<option value="#">

Estrutura do documento</option><!--Link-->

<option value="#">As metatags</option><!--Link-->

<option value="#">O uso da tag <title></option><!--Link-->

<option value="#">Entendendo <acronym></option><!--Link-->

<option value="#">O que é XHTML</option><!--Link-->

<option value="#">Normas HTML 4</option><!--Link-->

<option>-----------------</option><!--Separador-->

<option>TUTORIAIS JAVASCRIPT</option><!--Subtítulo-->

<option value="#">Relógio</option><!--Link-->

<option value="#">Barra de status</option><!--Link-->

<option value="#">Efeito neve</option><!--Link-->

<option value="#">Handlers de evento</option><!--Link-->

<option value="#">Janela pop up</option><!--Link-->

</select>

</form>

Como Personalizar o Menu (Blogger > Design > HTML):
- Procure por: ]]></b:skin>


Coloque o seguinte código:

<style type="text/css">

#meuselect { 

width:135px; /* Largura da janela do menu */

background:#F0FFF0; /* Cor do fundo do menu

em repouso */

font:11px arial, helvetica,

sans-serif; /* Tamanho e tipo das letras */

color:#36648B; /* Cor das letras do Título do menu */

}

#meuselect option.stit {

width:135px; /* Largura da janela do menu para NN */  

background-color:#C1CDCD; /* Cor do fundo dos

Subtítulos */

color:#003366; /* Cor das letras dos Subtítulos */

}

#meuselect option.sep {

width:135px;  /* Largura da janela do menu para NN */

background-color:#FFFFFF; /* Cor do fundo dos

separadores */

color:#000000; /* Cor dos traços dos separadores */

}

#meuselect option.impar {

width:135px; /* Largura da janela do menu para NN */ 

background-color:#E0EEE0; /* Cor do fundo dos

links impares */

color:#00008B; /* Cor das letras dos links impares */

}

#meuselect option.par {

width:135px;  /* Largura da janela do menu para NN */

background-color:#F0FFF0; /* Cor do fundo dos

links pares */

color:#009ACD; /* Cor das letras dos links pares */

}

</style>

 Creditos ao blog design luccas

Configurar dados dos posts completos

E ai galera! Estou aqui para ensinar como ajustar os dados, posicionar cada coisa em seu devido lugar. Então vamos começar:

Abra o Blogger > Design > HTML > Expandir Modelos de Widget

Vou colocar por partes...


1) Título da Postagem:

Para ajustar o título da postagem vá em:

.post h3 { 

e coloque padding:0px 0px 0px 0px; (Coloque valores para mover o Título.)


2) Link de Comentários: (Mude os Dados.)


.comment-link {
  font-size:0px;
  margin-top:0px;
  margin-right:0px;
  float:right;
}

3) Nome do Autor: (Mude os dados.)


.post-author {
  color:#ffffff;
  float:left;
  margin-top:0px;
  font-size: 0px;
  margin-left:0px;
}

4) Data do Post: (Mude os Dados.)


h2.date-header {
  color:#ffffff;
  float:left;
  margin-top:0px;
  font-size: 0px;
  margin-left:0px;
  }


Creditos Design Project

efeito de pokebolas

Criei um efeito de pokebolas  caindo no seu blog efeito e fácil  e simples vamos  la

Vai em Nova postagem >> Editar HTML

primeiro procure (Ctrl + F) por ]]></b:skin>
Abaixo dela add esse codigo

<script type="text/javascript"> endereco = "http://img222.imageshack.us/img222/7460/nevej2.png"; </script><br /> <script type="text/javascript" src="https://sites.google.com/site/pokemontsukyomi/script/text.js"></script>

Colocar efeito zoom nas imagens

vou ensinar a como colocar aquele efeito de zoom na imagem, quando você passa o mouse a imagem fica com um efeito zoom é bem legal, vamos lá.


Vá em design >> Editar HTML >>, e procure por: ]]></b:skin> 

E logo acima da tag procurada, cole o código abaixo:

/*--Zoom-Imagens-- */

a:hover img {

transform: translate(0px, -4px);

-moz-transform: scale(1.1) translate(0px, -4px);

-webkit-transform: scale(1.1) translate(0px, -4px);

-ms-zoom: 1.1;

opacity: 1 !important;

-moz-opacity: 1 !important;

-webkit-transition: all 0.2s ease-in;

-moz-transition: all 0.2s ease-in;

transition: all 0.2s ease;

}

É isso,espero que tenha ajudado. Valeu.

como colocar Xat na lateral do blog/site

como colocar  Xat na lateral do blog/site

 

Primeiro passo , vamos adicionar o código css no template , procure pela linha:

]]></b:skin>

Logo acima dessa linha adicione o código mas lembrando de trocar a imagem da seta e o fundo do xat.

/* Chat

----------------------------------------------- */

#gb{

position:fixed;

top:340px;

z-index:+1000;

right:-610px;

}

* html #gb{position:relative;}

.gbtab{

height:164px;

width:51px;

float:left;

cursor:pointer;

background:url('IMAGEM DO BOTÃO PARA ABRIR O CHAT') no-repeat;

}

.gbcontent{

float:left;

border:1px solid #000;

background: url(IMAGEM DE BACKGROUND PARA O CHAT)repeat;

padding:10px;

}

Agora procure por:

</body>

Depois de encontrar copia o código abaixo e cole logo acima.

<script type='text/javascript'>

function showHideGB(){

var gb = document.getElementById(&quot;gb&quot;);

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById(&quot;gb&quot;);

var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;

var dir = xf&gt;x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + &quot;px&quot;;

if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}

}

</script>

<div id='gb'>

<div class='gbtab' onclick='showHideGB()'> </div>

<div class='gbcontent'>

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div style='line-height:0;background-position:center;width:590px;height:310px;'>

COLE AQUI O CÓDIGO DO SEU CHAT 

</div>

</div>

</div>

Espero que tenham gostado. ^^

Plagio

 Olá hoje vim trazer alguns dos métodos Plágio mais usados pele WebMasters na atualidade, por que manter um site sem sofrer plágio é difícil pois sites com bastante conteúdo e de ótima qualidade.

Bloqueando Seleção de Imagens e Textos

  

Primeiro vá em Modelo >> Editar HTML >> e procure pela tag:

</head>

Acima da tag, cole o seguinte script:

<script language='JavaScript'>function bloquear(e){return false}function desbloquear(){return true}document.onselectstart=new Function (&quot;return false&quot;)if (window.sidebar){document.onmousedown=bloqueardocument.onclick=desbloquear}</script>

Depois procure por:

<body>

Troque-a por:

<body onselectstart='return false'>

Barra de Rolagem (Colorida)

Ola galera, venho ensinar como deichar sua barra de rolagem da cor que vocês gosta.

Primeiramente faça o backup do seu template, depois de ter feito isso vá em Modelo>Editar Html, aperte Ctrl+F e procure pela tag:

]]></b:skin> 


::-webkit-scrollbar {
width: 9px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background: #ZZZZZZ;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color:  #ZZZZZZ;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color:  #ZZZZZZ;
}
.post p {
margin:0 0 0;
}

No lugar de #ZZZZZZ cole os códigos das Cores

Créditos: Fernando Silver

como personalizar os parceiros

Ola galera, venho ensinar como personalizar os parceiros(usamos aqui).

Primeiramente vá em Modelo >> Editar HTML >> Click Ctrl+f >> e procure por:

]]></b:skin>


E acima dessa Tag cole o seguinte Código CSS:

/* Parceiros WS--------------------------------- */

#parceirosws img{opacity: .3;

filter:alpha(opacity=30);

-moz-opacity: 0.6;

-khtml-opacity: 0.6;

border: 1x #fff;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

background:#fff;

}

#parceirosws img:hover{opacity:5.0;

filter:alpha(opacity=500);

-moz-opacity: 5.0;

-khtml-opacity: 5.0;

box-shadow: 1px 1px 1px 1px #000;

-moz-box-shadow: 1px 1px 1px 1px #000;

-webkit-box-shadow: 1px 1px 1px 1px #000;

border-radius:7px;

-moz-border-radius:7px;

-webkit-border-radius:7px;

-webkit-transition: all 0.7s linear;

-moz-transition: all 0.7s linear;

-o-transition: all 0.7s linear;

transition: all 0.7s linear;

}

para usar esse efeito vá em Layout>Adicionar Gadjet>Html / Javascript> e adicione este código:

<div id="parceirosws">

Código dos banners aqui!

</div>

Bom pessoal é só isso espero que tenham gostado a e não poderia esquecer de dá os créditos ao Fernando Silver.

Como colocar Slide no blog

Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.


Para instalar este Slider,siga os passos a seguir:
1.Instalar o arquivo Javascript:
Vá em "Editar HTML" e procure pela tag </head>
e cole logo ACIMA dela o conteúdo:

<!-- JavaScript Slider Horizontal - Inicio-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});

</script>
<!-- JavaScript Slider Horizonta - Fim--> 

2.Aplicar estilos ao Slide:

Agora volte em Design >> Editar HTML , e procure pela tag ]]></b:skin>

e cole ANTES dela:

/*--Container geral--*/ .main_view { float: left; position: relative; } /*--Estilos do containert das imagens--*/ .window { height:289px; /*-- as imagens devem ter a mesma altura ou mais-- */ width: 800px; /*-- as imagens devem ter a mesma largura ou mais-- */ border:1px solid #610000; overflow: hidden; position: relative; }.image_reel { position: absolute; top: 0; left: 0; } .image_reel img { float: left; } /*--Estilos do container da numeração--*/ .paging { position: absolute; bottom: 40px; right: -1px; width: 220px; height:41px; z-index: 100; text-align: center; line-height: 40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiniHAEMks3UK7wJZ7Abhn3DN2ZoUTihrZyFsECCMY6_nm-lERQb18UjGE-QiP06zHbfl5UcZADXJX-SJb9LO6uzoBKtDeU6zUyXScknww_1nM7FaNMl449MAK4PCoc-XnA6_GHbJsFTjO6/s0/transparencia.png); -moz-border-radius-topleft: 15px; -moz-border-radius-bottomleft: 15px; -webkit-border-radius-bottomleft: 15px; -webkit-border-radius-topleft: 15px; border:1px solid #000; display: none; } /*--Estilos do link da numeração--*/ .paging a { outline:none; padding: 5px 10px; text-decoration: none; color: #999; background: #000;border: 1px solid #000; -moz-border-radius: 17px; -khtml-border-radius: 17px; -webkit-border-radius: 17px; } /*--Estilos do link ativo da numeração--*/ .paging a.active { font-weight: bold; border: 1px solid #000; color: #fff; background: #920000; -moz-border-radius: 17px; -khtml-border-radius: 17px; -webkit-border-radius: 17px; } /*--Estilos do link hover da numeração--*/ .paging a:hover { font-weight: bold; }

3.Editando cores de fundo, bordas, altura e largura do Slide:

Em .window , edite os valores de height(altura) e widht (largura) total do seu slide. Personalize de acordo com o tamanho de seu template (Coloque o mesmo valor para largura que possuir a sua Header)

Lembrando que as imagens utilizadas devem ter a mesma largura ou mais!

Edite as cores de bordas em "border".

Edite cor de fundo em "background".

4.Escolhendo local que ficará o slide: Agora escolha o local onde quer posicionar o seu slide. Um excelente local para instalar este slide é em crosscol, que fica logo abaixo do cabeçalho. Antes de mais nada, você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget nesta área, através de "Elementos de Página". Se não houver um campo para "Adicionar Gadget" abaixo do cabeçalho, você terá que fazer algumas modificações no código do template.

Vá para a aba "design" >> "elementos de página".

Clique em "adicionar um gadget", escolha o modo HTML/javascript e cole o seguinte código:

<div class="main_view"> <div class="window"> <div class="image_reel"><img src="url-imagem-1" alt="" /> <img src="url-imagem-2" alt="" /> <img src="url-imagem-3" alt="" /> <img src="url-imagem-4" alt="" /> </div></div> <div class="paging"> <a href="insira-seu-link-1" rel="1">1</a> <a href="insira-seu-link-2" rel="2">2</a> <a href="insira-seu-link-3" rel="3">3</a> <a href="insira-seu-link-4" rel="4">4</a> </div></div>

Créditos: Seto Pablo