Slide de Publicidade

Olá Pessoal, hoje estarei ensinando a vocês como adicionar um slide de anúncios em seu blog no tamanho 468x60 que é o mais comum, esse slide tem um efeito bem legal e pode ser usado até para outros fins. Confesso que eu não sou muito fã de slides em blogs pois a maioria deles pesa muito no carregamento do blog, mas esse slide é super leve e pode ser adicionado no blog sem preocupação nenhuma, eu mesmo estou usando aqui no PB em nossa sidebar, o código é simples e fácil de instalar, vamos ao tutorial.
Demonstração
Vamos la, procure por :

]]></b:skin>
Antes da tag cole o codigo :

#slider { width: 300px; /* Largura das as imagens */
height: 250px; /* Altura das as imagens */
position: relative;
overflow: hidden;
}
#sliderContent {
width: 300px; /* Largura das as imagens */
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
.sliderImage img{
width:300px; /* Largura das as imagens */
height: 250px; /* Altura das as imagens */
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 1px 13px;
width: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {clear: both;}
.sliderImage span strong {font-size: 14px;}
.top {top: 0px;left: 0px;}
.bottom {bottom: 0px;left: 0px;}
ul { list-style-type: none;}

Depois procure por:
</head>

Antes da tag cole o codigo :
<script src='http://dl.getdropbox.com/u/1659986/jquery.js' type='text/javascript'></script>
<script src='http://dl.getdropbox.com/u/1659986/s3Slider.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 10000 /*Representa em milesimos de segundo o tempo de troca de imagem*/
});
});
</script>Agora basta colar este código onde deseja que o menu apareça:


<div id="slider"> <ul id="sliderContent">
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<li class="sliderImage">
<a href="LINK DA PUBLICIDADE" target='_blank'"><img src="URL DA IMAGEM DE PUBLICIDADE" border="0"/>
<span class="top">DESCRIÇÃO DA PUBLICIDADE</span></a>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
Não esqueça de fazer as alterações nas partes destacadas em vermelho. LINK DA PUBLICIDADE: Link que vai abrir ao clicar no banner. URL DA IMAGEM DE PUBLICIDADE: Endereço do banner. DESCRIÇÃO DA PUBLICIDADE: Escreva sua descrição sobre o anúncio.

Créditos Claudio Luiz

Menu Esplosion

Eaew gente preguiçosa õ/, hoje vim publica um menu que achei ate e legal *--*, esse menu é um efeito de sombras que parece que “explode” o menu quando você passa o mouse.
Live preview:
Demonstração
Vamos la, procure por :

]]></b:skin>
Antes da tag cole o codigo :

/** MENU EXPLOSION - BY NEAR **/
.menuexp {
display:inline-block;
width: 0px;
font-family: ARIAL;
font-size: 0px;
text-align: center;
background-color: #000;
color: #FFF;
height: 0px;
padding: 4px; /** ESSE SE QUISER MUDE **/
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-webkit-box-shadow: inset 0 0 0px 0px #000,0 0 0 #000;
}
.menuexp:hover {
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-webkit-box-shadow:inset 0 0 55px 35px transparent, 0 0 25px 15px transparent;
opacity:0.8}
}

Agora basta colar este código onde deseja que o menu apareça:
<a href="LINK" class="menuexp">Seu Link</a>
Pronto seu Menu Turns esta feito \õ/,personalize como quiser,

Menu Scroll

Eea galera *--*, bom apesar que na imagem esta iscrito "menu roda' o nome verdadeiro e Menu Scroll, achei esse codigo na net e dei umas editadas, agora pouco que fui descobrir o nome dele.

Demonstração
Vamos la, procure por :

]]></b:skin>
Antes da tag cole o codigo :

.menur{
float:left;
padding:6px;
text-align:center;
height:auto;
width:auto;
margin:1px;
webkit-transition-duration: .90s;
font:11px georgia;
background:#eee;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
border-radius:10px;
color:555;
}

.menur:hover{
background:#ddd;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
-o-transform: rotateX(360deg);
}

Agora basta colar este código onde deseja que o menu apareça:
<a href="LINK DO MENU" class="menur">nome do link</a>
Pronto seu Menu Scroll esta feito \õ/

Menu Turns

Olá gente *—* então, esse menu é muito simples de fazer, vocês dissidem em que vão usar *--*.
Para ver como ele é:

Demonstração
Vamos la, procure por :

]]></b:skin>
Antes da tag cole o codigo :

/** MENU TURNS - BY NEAR **/
.menuturns {
background-image: url('SUA IMAGEM');
width: 110px;
height:60px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

.menuturns:hover {
background-image: url('SUA IMAGEM');
-webkit-transform: scale(0.7);
padding-up: 50px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
Agora basta colar este código onde deseja que o menu apareça:
<a href="/"><div class="menuturns"></div></a>

Pronto seu Menu Turns esta feito \õ/

Box: Botões Redes Sociais (Fixo)

Olá galera, o tutorial de hoje ensinará a como inserir botões de compartilhamento do seu blog ou site em redes sociais. Iremos inserir os botões dentro de um box (quadrado) que ficará fixo em sua tela do blog.

Veja uma demonstração em nosso blog de testes:

Demonstração

Muito útil néh? Vamos ao tutorial:
#Primeiro passo: entre em painel > layout > adicionar um gadget > HTML/ JavaScript e adicione o seguinte código:

<div style="background-color: #XXXXXX; border-right:1px solid #XXXXXX;border-top:1px solid #XXXXXX;position:fixed; bottom:0px; left:0px;padding:2px">Gostou? Compartilhe !!!<br/>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script></div>
</div>

Salve e visualize.

ALTERAÇÕES NO CÓDIGO

Trecho vermelho: cor de fundo do box;
Trecho azul: cor da borda do box;
Trecho roxo: cor da borda do topo do box;
Trecho amarelo: Texto que aparecerá dentro do box;

 Só isso galera!

Adicionar páginas numeradas no blog

Uma coisa que ajuda bastante no crescimento e desenvolvimento de um blog é a forma como o blogueiro costuma tratá-lo, criar um blog é muito fácil, mas cuida da aparência e ainda por cima escrever conteúdo relevante não é nada fácil. Porem você pode começar a dar mais atenção para seu blog introduzindo alguns recursos que poderão ajudar a melhorar a navegabilidade de seus leitores em seu blog.
Demonstração

1º Acesse o painel do seu blog e vá até Modelo, editar HTML, clique em expandir modelos de widgets,  (De um CTRL + F ) para abrir uma barra de localização, tendo aberto a barra de localização cole este código. 

]]></b:skin>

Tendo encontrado o código acima dele cole este outro código:

.showpageArea {
font-family:Verdana, Geneva, sans-serif;
color: #FFF;
font-size:12px;
margin:15px; }

.showpageArea a {
margin: 2px;
padding: 7px 7px 7px 7px;
font-weight: 700;
text-decoration: none;
color:#fff; /* COR DA FONTE DO LINK PRÓXIMA */
border-radius: 7px 7px 7px 7px; /* Edite a Borda */
background:#000; /* COR DE FUNDO DO LINK PRÓXIMA */ }

.showpageNum a {
padding: 7px 7px 7px 7px;
margin:0 4px;
text-decoration: none;
border-radius: 7px 7px7px 7px; /* Edite a Borda */
background:#000; /* COR DE FUNDO DO LINK PRÓXIMA */ }

.showpageNum a:hover {
font-size:13px
border-radius: 7px 7px 7px7px; /* Edite a Borda */
background: #000; /* COR DE FUNDO DO LINK PRÓXIMA */ }

.showpageOf{ margin:0 8px 0 0; }

.showpagePoint {
text-decoration: none;
padding: 7px 7px 7px 7px;
margin: 2px;
font-weight: 700;
border-radius: 5px 5px 5px 5px; /* Edite a Borda */
background: #000; /* COR DE FUNDO DO LINK PRÓXIMA */ }
color:#fff; /* COR DA FOONTE DA NUMERAÇÃO ATIVA */ }

2 Agora vamos para a segunda parte.
Copie este código e cole na barra de localização

</body> 

tendo encontrado cole este outro código acima dele:

<script style='text/javascript'> var pageCount=5;var displayPageNum=5;var upPageWord=&quot;Anterior&quot;;var downPageWord=&quot;Próxima&quot;;</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>

Agora visualize e modifica do jeito que seja seu agrado, se não deu nenhum erro você salva e confere como ficou.

Retirando espaço em branco após comentários

 Olá pessoal hoje estarei mostrando um tutorial de como retirar o espaço que ficam embaixo dos comentários que ficam entre os links de navegação (posts anterior,  Inicio  ,posts recente) alguns tem o tamanho grande, outros médios ou pequenos ai depende do template.

Abaixo veja um exemplo:

Agora vamos retirar esse espaço, entre em painel > modelo > editar html > marque a opção "expandir modelos de widget" > e procure por:

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post'


Abaixo vocês encontrarão um trecho parecido com esse:
frameborder='0' height='420' id='comment-editor'

OBS: É claro que o seu código de height (trecho em vermelho) pode estar maior ou menor, mas o importante é ter localizado esse trecho, agora basta você alterar a altura e visualizar até que esse espaço suma por completo.

- Caso encontre 3 linhas, altere as 3.

Se você tentou fazer isso e não funcionou, comente e eu ajudarei;
Esse tutorial foi testado!