Nivo slider

Podem comemorar, porque hoje eu vou ensinar como colocar esse slide divo que eu uso no seu blog. O nome dele é Nivo e vários sites profissionais usam ele. O que eu acho mais legal no Nivo é os diferentes efeitos de transição que ele tem (15 no total). Mas chega de enrolar, vamos ao tão esperado tutorial.

O resultado final será semelhante a este:

Imagem do site Isabela Freitas

O script

Cole esse código abaixo de </head>

<style type="text/css">
/* <![CDATA[ */
#w2bSlideContainer           {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider              { position:relative;
width:640px  !important; /*largura do slide*/height:300px  !important; /*Altura do slide*/
background:  #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiUalsAOguHDeZWqy3zqD_9Y-B6VXaK_7aTYZ2HijBRYdod4tuz2NUw7pRISqXngFCY6mmFCiMwwuOCbBxQzacJTq0J4TooDtMhqG7IF1InYYwYyyaP6vYD33VKTsO748LIBFo1O0smEQD/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*Coloque borda se quiser*/ }
#w2bNivoSlider img           {position:absolute; top:0; left:0;  display:none}
.nivoSlider                  {position:relative;width:100%;height:auto;}
.nivoSlider img              {position:absolute;top:0;left:0}
.nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img                {display:block}
.nivo-caption                {padding: 5px;
font-family: Arial,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p              {padding:2px;margin:0}
.nivo-caption a              {display:inline!important}
.nivo-html-caption           {display:none}
.nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("URL_IMG_SETA") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav                {left:10px}
.nivo-nextNav                {background-position:-30px 0!important;right:10px}
.nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("URL_IMG_BULLETS") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect           : 'random',
slices           : 10,
boxCols          : 8,
boxRows          : 4,
animSpeed        : 500,
pauseTime        : 4000,
startSlide       : 0,
directionNav     : true,
directionNavHide : true,
controlNav       : true,
keyboardNav      : false,
pauseOnHover     : true,
captionOpacity   : 0.8
});
});
/* ]]> */
</script>

Eu destaquei em negrito as partes que você irá precisar alterar para ficar mais fácil de encontrar. No fim do post tem algumas imagens de setas e das bolinhas de navegação para vocês usarem. Depois de fazer as alterações, visualize se está tudo ok e salve.

Os Slides

Agora para o slide aparecer, basta colar o código abaixo em um gadget de HTML/Javascript ou onde quiser que o slide apareça:

<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>

Substitua o endereço das imagens, os links e a legenda e pronto! Um slide lindo estará no seu blog. Agora as imagens que eu prometi:

Setas

  

Bolinhas
 

Espero que tenham gostado. Se usarem em seus blogs, creditem. E se quiser postar esse tutorial no seu blog, peça permissão primeiro.

Personalizar o link leia mais

Olá! Resolvi trazer um tutorial depois de tanto tempo sem postar um. Eu já mostrei aqui como colocar uma imagem no lugar do link leia mais, mas existe outra forma de personalizar esse link tão importante em nossos blogs. Com este tutorial, você poderá mudar a cor, fonte, e até colocar uma imagem de fundo. Confira!

Antes do tutorial, queria dar alguns recados para vocês. Devem ter percebido que não tenho postado com muita frequência não é? Isso é resultado da combinação Pouco tempo + Internet lenta + livro viciante. Meu tempo já é pouco, aí a internet me faz demorar muito para postar e ás vezes perco a noção do tempo lendo um livro incrível que assim que eu terminar de ler vai ser assunto de resenha aqui.

Minha solução para não deixá-los sem post: Programar as postagens. Eu não gosto de fazer isso, mas vi que vocês estão reclamando da minha ausência, então o farei. O único problema é que responderei menos comentários ainda, mas prometo que vou ler todos e responder os que eu puder. 
Agora vamos ao assunto principal:

Tutorial

Vá no modelo HTML do seu blog, e procure pelo seguinte código: ]]></b:skin>
Cole logo acima, o seguinte código:

.jump-link {
float: right; /*Escolha para ficar alinhado á direita (right) ou esquerda (left)*/
line-height: 18px; /*Altura da linha, mude de acordo com o tamanho da fonte*/
background: url('link-da-imagem-de-fundo') no-repeat;
width: 200px; /*Largura da imagem*/
height: 32px;/*Altura da imagem*/
margin-right: -20px; /*Margem direita*/
margin-bottom: 30px; /*Margem inferior*/
padding-left: 0px; /*Ajuste para posicionar o texto*/
padding-right: 0px; /*Ajuste para posicionar o texto*/}
.jump-link a {
font-family: Arial;
font-size: 14px;
font-weight: normal;}
.jump-link a:hover {
color: #000;
text-decoration: none;}

Entendendo

As partes do código que estão em negrito são importantes para alinhar a imagem que você usar no fundo. As margin right e bottom vão determinar a posição do link como um todo, puxando mais para a direita e colocando um espaço abaixo dele. Já os padding right e left vão ajudar a alinhar o texto dentro da imagem. Basta modificar os valores para ver a diferença que eles fazem, e logo você entenderá :)

Extra

Como bônus, trouxe algumas imagens para vocês usarem como fundo. Creditem tanto se usarem as imagens, como só o tutorial.




Espero que tenha sido útil para vocês, Kissus!








http://fazendoblogspot.blogspot.com.br/2013/02/como-alinhar-imagens-lado-lado-na.html

Caixa de pesquisa personalizada - Cherry Bomb

Todo blog precisa de uma caixa de busca não é mesmo? Afinal ela é ótima para seus leitores encontrarem posts antigos do seu blog que merecem atenção também. Hoje trouxe dois modos para você deixar a caixa de pesquisa do seu blog muito fofa e combinando com o resto do lay. Pra variar, todos os dois são bem fáceis, basta entender o mínimo de css e ter algum programa ou site que te mostre o código HTML das cores.

1º Modo

Usando o gadget do próprio blogger

Antes de tudo vá em layout e adicione no seu blog o gadget de pesquisa do blogger.

Agora vá em modelo > editar HTML

Aperte ctrl+F e procure por ]]></b:skin> 

Cole isso acima do código que você procurou: 

/*Para remover o logo do google*/
.gsc-branding-text, .gsc-branding-img-noclear {display:none;}
/* Personalização do Campo de texto */
td.gsc-input input {border: 2px solid #e7e7e7; background:#fff; color:#ff0048; font-family:verdana; font-size:11px; } /* Fim da personalização do Campo de texto */
/*personalização do botão*/
input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#ff0048; border:0px; font-weight:normal;  -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
input.gsc-search-button:hover {background:#b779db; color:#fff;} /*fundo e cor do texto quando passa o mouse*/
/*fim da personalização do botão*/

Agora é só fazer as modificações de acordo com seu gosto. Se não quiser bordas arredondadas, apague o trecho em roxo.

2º Modo

Adicionando um gadget de HTML 

Nesse outro modo você pode colocar uma imagem fofa no lugar do botão, que nem é aqui no CB.
Vá em layout e cole o código abaixo em um gadget de html/javascript:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>

 Você pode substituir o texto em roxo pela frase que quiser.
Agora vá em modelo > editar html e cole antes de ]]></b:skin> o código abaixo:

.search{
float: left;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:#fff;
text-align:center;
color:#ff048c !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('Url da imagem do botão');
width:30px; /*Largura do botão*/
height:30px; /*altura do botão*/
border: 0;
padding:7px;
}

Agora é só personalizar como quiser e salvar! Créditos á Htmhelen e Trashy Girl.
Espero que tenham gostado do tuto. Agora tenho um avisinho procês (o clima de festa junina já me contagiou): Voltei a responder no forms e no twitter, então vocês tem mais dois jeitos de falar comigo!

Slide de imagens com numeração

Finalmente consegui postar esse tuto! Essas ultimas semanas estão sendo muito corridas pra mim, os dias passam voando e não dá tempo de fazer nada! Mas enfim, vamos esquecer meus problemas e focar no tutorial de hoje. Com ele você vai aprender como fazer um slide igual ao do blog da finada revista CB. O slide é assim:

Ele tem a numeração de cada slide, e ao clicar no número vai para o slide correspondente *-*

Vamos ao passo a passo desse slide lindo!

1° -  Abra seu HTML, copie o imenso código abaixo e cole acima de </head>

<!-- 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° - Depois coloque esse código antes de ]]></b:skin> 

/*--Container geral--*/
.main_view {
float: left;
position: relative;
}
/*--Estilos do container das imagens--*/
.window {
height:200px; /*-- Altura do Slide (as imagens devem ter a mesma altura */
width: 550px;  /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */
overflow: hidden;
position: relative;
}.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
display: none;
}
/*--Estilos do link da numeração (Estilo dos numeros)--*/
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #fff;
background: #bad5d9;
-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;
color: #fff;
background: #b97ac9;
-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;
}.feed-links { 
 display: none; }

Nesse código você irá alterar as medidas e as cores da numeração do slide.

3° - Agora é só inserir o slide em seu blog. Para isso, vá em layout, adicione um gadget de HTML/Javascript onde você deseja que seu slide fique, e cole nele esse código:

<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="LINK_1" alt="" ><img src="URL_IMG_1"/></a>
<a href="LINK_2" alt=""><img src="URL_IMG_2"/></a>
<a href="LINK_3" alt=""><img src="URL_IMG_3"/></a>
<a href="LINK_4" alt=""><img src="URL_IMG_4"/></a>
</div></div>
<div class="paging">
<a href="www.blogger.com" rel="1">1</a>
<a href="www.blogger.com" rel="2">2</a>
<a href="www.blogger.com" rel="3">3</a>
<a href="www.blogger.com" rel="4">4</a>
</div></div>

Você só precisa mudar o link que cada imagem vai direcionar e o url da imagem. Não precisa alterar aqueles links www.blogger.com Eles não vão funcionar no slide, é só para aparecer a mãozinha do mouse em cima dos números.

Espero que o tutorial tenha sido útil para vocês. Só lembrando que esse slide foi feito pelo Mundo Blogger, e eu só estou mostrando como instalá-lo :) Ah amores, infelizmente não vai ter batalha de blogs essa semana, mas na próxima é sem falta!

Seta para o topo com efeito + Extra

Olá minhas cerejas açucaradas! Hoje tem tuto para vocês. Vou ensinar como se coloca uma seta para o topo com efeito deslizante e que só aparece quando se baixa um pouco a tela. Ou seja, é o efeito da setinha que tem aqui no CB. É bem mais fácil do que vocês podem imaginar!

Vá no layout do seu blog e adicione um gadget de HTML/Javascript em qualquer lugar do seu blog.
Nesse gadget cole o código que está aqui.
Neste código você deve substituir COLOQUE AQUI O URL DA IMAGEM pelo url da imagem que deseja colocar. Agora é só salvar o gadget e sua seta estará lá! Não disse que era fácil?

Para facilitar ainda mais a vida de vocês, vou colocar algumas imagens que eu fiz para serem usadas nesse tuto. Usem á vontade, podem até mudar a cor, mas creditem ok?

Ir ao topo com efeito deslizante

Retribuindo os comentários do blog, acesso o Love Tdixu (um blog super-hiper-mega fofo, com tutoriais ótimos) e vejo um tutorial super bacana que eu sempre quis aprender, pois ele é a famosa seta de voltar ao topo do Tumblr, com efeito deslizante. Sem mais blá blá blá, vamos ao tutorial? Relembrando que, o tutorial é do Lovetdixu, então, os devidos créditos.

Proucure pela tag </body> e antes dela, insira:

<script type="text/javascript">
    $(document).ready(function() {
       $('#subir').click(function(){
          $('html, body').animate({scrollTop:0}, 'slow');
      return false;
         });
     });
</script>

Agora, procure por </head> e como anteriormente, ANTES dessa tag insira:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Agora, insira o código do efeito deslizante aonde quiser.

<a href="#" id="subir"><img src="URL_DA_IMAGEM"/></a> 

Caso queira um texto no lugar da imagem, substitua o código em vermelho pelo texto desejado. É pessoal, por hoje é isso. Espero que tenham curtido o tutorial! Ah, e o Place Fame mudou de look, viram? 

Beijos, Emily. 

Estilos de bordas em CSS

Eu já postei tutoriais sobre menus, backgrounds, gadgets e etc em que a borda de tais elementos podia ser alterada. A maioria das pessoas altera somente a cor da borda, pois poucas sabem que existem vários estilos de bordas que podem ser aplicados de maneira fácil e que dão efeitos muito legais, basta usar a criatividade e brincar com os efeitos.

Pensando nisso, hoje vou mostrar para vocês os códigos de bordas que podem ser usados no seu layout. Para entender melhor os códigos, vou explicar como funciona:

Border: 1px solid #000000; -> Propriedade: espessura em pixels estilo cor;

Lembrando que você não altera a palavra "border" ok?

Borda Solid
Código: Border: 1px solid #000000;

Borda Dotted
Código: Border: 2px dotted #000000;

Borda Dashed
Código: Border: 1px dashed #000000;

Borda Groove
Código: Border: 3px groove #aa3cff;

Borda Inset
Código: Border: 3px inset #aa3cff;

Borda Outset
Código: Border: 3px outset #aa3cff;

Borda Double
Código: Border: 3px double #000000;

Você também pode usar bordas diferentes e de cores diferentes em cada um dos lados do elemento, ou usar borda apenas em determinado lado do elemento. Veja os exemplos:

Border-top: 1px solid #000000; Border-left: 3px double #000000; border-bottom: 1px dashed #000000; border-right: 2px dotted #000000;

Border-left: 3px solid #aa3cff;

Agora que você já sabe os códigos, é só adicioná-los aos elementos do seu layout, como na sidebar, no menu, no blockquote, etc.
Espero que tenha sido útil para vocês, comentem dizendo o que acharam e se tiverem alguma dúvida.
E se você ainda não se inscreveu no Blog vs Blog 2, corre porque as inscrições só vão até dia 16!


Pensando nisso, hoje vou mostrar para vocês os códigos de bordas que podem ser usados no seu layout. Para entender melhor os códigos, vou explicar como funciona:

Border: 1px solid #000000; -> Propriedade: espessura em pixels estilo cor;

Lembrando que você não altera a palavra "border" ok?

Borda Solid
Código: Border: 1px solid #000000;

Borda Dotted
Código: Border: 2px dotted #000000;

Borda Dashed
Código: Border: 1px dashed #000000;

Borda Groove
Código: Border: 3px groove #aa3cff;

Borda Inset
Código: Border: 3px inset #aa3cff;

Borda Outset
Código: Border: 3px outset #aa3cff;

Borda Double
Código: Border: 3px double #000000;

Você também pode usar bordas diferentes e de cores diferentes em cada um dos lados do elemento, ou usar borda apenas em determinado lado do elemento. Veja os exemplos:

Border-top: 1px solid #000000; Border-left: 3px double #000000; border-bottom: 1px dashed #000000; border-right: 2px dotted #000000;

Border-left: 3px solid #aa3cff;

Agora que você já sabe os códigos, é só adicioná-los aos elementos do seu layout, como na sidebar, no menu, no blockquote, etc.
Espero que tenha sido útil para vocês, comentem dizendo o que acharam e se tiverem alguma dúvida.
E se você ainda não se inscreveu no Blog vs Blog 2, corre porque as inscrições só vão até dia 16!