Cor | Nome | Código |
███████████ | Salmão | #FA8072 |
███████████ | Laranja | #FFA500 |
███████████
| Vermelho | #FF0000 |
███████████ | Vermelho escuro | #8B0000 |
███████████ | Coral | #FF7F50 |
███████████ | Rosa | #FFC0CB |
███████████ | Rosa quente | #FF69B4 |
███████████ | Magenta | #FF00FF |
███████████ | Chocolate | #D2691E |
███████████ | Marrom | #A52A2A |
███████████ | Sienna | #A0522D |
███████████ | Amarelo | #FFFF00 |
███████████ | Ouro | #FFD700 |
███████████ | Ouro rod | #DAA520 |
███████████ | Verde | #00FF00 |
███████████ | Verde-amarelado | #7FFF00 |
███████████ | Floresta verde | #228B22 |
███████████ | Azul | #0000FF |
███████████ | Azul claro | #ADD8E6 |
███████████ | Turquesa | #40E0D0 |
███████████ | Ciano | #00FFFF |
███████████ | Branco | #FFFFFF |
███████████ | Preto | #000000 |
sexta-feira, 30 de dezembro de 2016
Lista de códigos de cores
sábado, 17 de dezembro de 2016
Como mudar a cor do texto
Este é um tutorial simples e prático de como fazer para mudar a cor do texto das postagens do seu blog.
Comece acessando o Modelo do blog, depois clique em Personalizar.
Agora, vá em Avançado e em Texto da página. Vai aparecer um quadro ao lado, contendo todos os detalhes que podem ser mudados, como por exemplo a fonte, a cor do texto, tamanho das letras, etc.
Escolha conforme sua preferência.
quinta-feira, 1 de dezembro de 2016
Como colocar caixa de pesquisa no Blogger
Oi gente! Dessa vez venho com um tutorial bem simples e que provavelmente a maioria já sabe. Porém, mesmo assim, espero ajudar os "perdidos". :)
MÉTODO 1
- Clique em "Layout" e depois em "Adicionar um Gadget".
- Selecione "Caixa de pesquisa" (ou "Pesquisa de blogs do Google") clicando no +.
- Coloque as informações ao seu modo e salve.
MÉTODO 2
- Clique em "Layout" e depois em "Adicionar um Gadget".
- Selecione "HTML/JavaScript" clicando no +.
- Na parte do "Conteúdo", coloque o código abaixo:
<center top=""><form name="input" action="/search" method="get"><a><br /> <input name="q" style="width: 120px; font-family: verdana; font-size: 12pt;" value="Assunto..." onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" /><input value="Pesquisar" type="submit" /></a></form></center><br />
- Salve!
Pronto! Agora seu blog possui a barra de pesquisa e os visitantes podem buscar diretamente pelos conteúdos que lhes interessam. Veja os resultados dos 2 métodos em http://www.testesdosos.blogspot.com.br/
terça-feira, 8 de novembro de 2016
Adicionando Like Box do Facebook no Blogger
Esse widget é bastante útil para quem quiser ligar seu blog com uma página do Facebook. Ele cria uma caixinha contendo as pessoas que curtiram a página do site.
Parte 1 - Clique aqui para acessar o link da página que cria a Like Box (é do próprio Facebook).
Parte 2 - Preencha todos os campos, em "URL da Página do Facebook" você coloca o link da sua página do Face, em "Largura" a largura da caixa, "Altura" a altura da caixa e em "Guias" pode deixar como timeline
OBS: Este é um exemplo, preencha como quiser. |
Parte 3 - Clique em "Obter código"
Parte 4 - Vai aparecer uma janela, acesse a aba IFRAME e copie o código mostrado.
Parte 5 - Acesse o painel do seu blog. Vá em Layout e depois em Adicionar um Gadget.
Parte 6 - Selecione "HTML/JavaScript" clicando no +.
Parte 7 - Cole o código em "Conteúdo" e salve. Pronto! A Like Box aparecerá na página do seu blog. :)
sábado, 17 de setembro de 2016
Usuários online no site em tempo real
Muita gente se pergunta como faz para colocar aquela barrinha com o número de usuários que estão acessando o site naquele momento. Existem vários contadores, mas recomendo o Who's Amung. Aprendendo:
=> Acesse este link.
=> Escolha o estilo de widget que preferir, eu escolhi o small. Aparecerá um código, copie-o. (print)
=> No painel do blog, vá em Modelo e após Editar HTML. (print)
=> Pesquise por <body> e abaixo cole o código que copiou.
Obs: a tag <body> poderá estar como <body expr:class='"loading" + data:blog.mobileClass'>.
=> Salve e veja seu resultado!
sexta-feira, 22 de julho de 2016
Como colocar slides no seu blog
Bom dia! Hoje resolvi fazer um tutorial ensinando a colocar slides no topo do seu blog, pois alguns leitores estavam pedindo. É muito fácil e simples de mexer. Vamos lá!
Acesse o painel do seu blog.
Clique em "Modelo" e depois em "Editar HTML", como mostra a imagem abaixo.
Agora, procure por </head> e cole acima dele o seguinte código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
var $nv4wp = jQuery.noConflict();
$nv4wp(window).load(function() {
$nv4wp('#slider').nivoSlider({
effect:'random',
slices:15, // For slice animations
boxCols: 4, // For box animations
boxRows: 2, // For box animations
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, //Next and Prev
directionNavHide:true, //Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav:true, //Use left and right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
O resultado será:
Em seguida, procure por </b:skin>. Provavelmente vai aparecer uma linha como na imagem que vai ser mostrada abaixo, mas é só clicar na setinha preta para aparecer todo o texto que tem dentro.
Quando aparecer todo o texto, pesquise novamente por ]]></b:skin> e coloque o próximo código acima dele:
/* The Nivo Slider styles */
#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px;
display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 400px; /* largura */ height: 200px; /* altura */ } .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: #ccc; /* Cor de fundo do título */ color: #fff; /* Cor do título */ text-transform: uppercase; width: 100%; z-index:50; border-right: 5px solid #;padding: 5px 0;}
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a
{position:absolute;top:45%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
.slider {width:100%;}
.slider img
{position:absolute;top:0px;left:0px;display:none;}
.slider a {border:0;display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a
{display:block;width:31px;height:34px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGCg5Oy0ezHs7rt5lFRKLwigkx0xh96M8w6VGnhpBBWFELqHRIPWjx7BSTmXRN6731R3OScU_5yCjCP49yaTrKIIotwA5PicfiakohGm4iGTbAEyr6S3MsstqeEgmXH4KrFsnV-6BkSZTe/s1600/s-12.png)
no-repeat; /* imagem das setinhas */ text-indent:-9999px;border:0; }
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav { left:15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial,
Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1; text-decoration:underline;}
Ficará assim:
Salve!
Para finalizar, vamos fazer o último passo. Acesse o "Layout" e clique em "Adicionar um Gadget".
Selecione a opção HTM/Javascript clicando no +.
Depois, copie e cole o seguinte código na área do "Conteúdo":
<div id="slide"><div id="slider">
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="400" height="200" /></a>
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="400" height="200" /></a>
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="400" height="200" /></a>
<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="400" height="200" /></a>
</div></div>
Salve!
Pronto, agora o slider estará em seu blog e para colocar imagens é só modificar as partes "Link do Post", "Link da Imagem" e "Título do Post". Veja como ficou em http://www.testesdoseparado.blogspot.com.br/
Até a próxima!