Tutorial-Layout Simples e Personalizado [repost]

Estou postando esse tutorial de novo porque o outro ficou ruim, muito bagunçado! Então, resolvi postar novamente mais organizado e patatipatatá. 

Créditos: Cherry Bomb!

Para ver o tutorial, clique em Leia mais!

Tutorial-Retirando o fundo das imagens

Oi, pessoal! Hoje, volto com um tutorial no Photofiltre meio complicado, mas você pega o jeito. Lembra que eu postei dois brushes que eu disse que eu mesma que tinha feito, com um tutorial do Cherry Bomb? Agora eu ensinarei como fazer isso! "Ô Geronda, mas é muito fácil, é só clicar no botão de transparência, dur!" Se você pensou nisso, está errado. O botão de transparência muitas vezes deixa falhas, como um ponto da imagem estar transparente e etc, por isso é mais fácil tirar o fundo da imagem. Leia mais.

Estou de volta+Fazendo diversos desenhos no Photoscape

Estou de volta! Para os que leram o gadget update, sabem que eu estava em épocas de provas e tinha que estudar muito embora eu entrasse no blogspot praticamente todo santo dia, mas estou de volta com um tutorial. Ou melhor, diversos tutoriais! Hoje, ensinarei a fazer vários desenhos no Photoscape, como gatinhos, ursos, balões, etc.

Tutorial-Cupcake no Photoscape

Ninguém pediu e to nem aí, to postando um tutorial de como fazer cupcakes no santo Photoscape. Brincadeira (não a 2ª parte), espero que gostem! Para começar, vocês tem de baixar o Photoscape, no baixaki tem download seguro e é bem leve! =)

Materiais

-Fundo branco de qualquer tamanho

Tutorial

-Abra o fundo branco.

-Na aba Objeto, pegue a Ferramenta Polígono e escolha a opção "5 sides".

Faça um pentágono.

-Pegue a ferramenta Círculo e faça uma bolinha.

-Clique no modo seleção de objeto, clique na bolinha que você acabou de fazer e clique no sinal de mais. Vá multiplicando as bolinhas e posicionando-as assim:

-Faça 2 bolinhas da mesma cor, só que maiores e posicione-as em cima. Pegue uma do tamanho que você fez na primeira fez e coloque ela em cima das grandes, como se fosse uma pirâmide. Se quiser, adicione detalhes. Veja como o meu ficou:

Gostaram? Dúvidas?

Comentem!

Geronda

PS: Para visualizar as imagens melhor, clica nelas

Tutorial-Personalizar o Google Chrome

Esse tutorial é para quem usa o Google Chrome! Sabe aquela fundo cinza sem graça que você queria que ficasse de outro jeito e acha que não dá? Pois dá, sim! Mas como? Oh, mama mia! calma, eu vou ensinar! 

1-Clique naquele ícone de ferramenta no canto da tela do Google Chrome.

2-Clique em Opções.

3-Vá na aba Coisas pessoais.

4-Na seção Temas, clique em Obter temas

5-Clique no qual você preferir e depois vai abrir uma janelinha ou algo assim, clique no botão azul Escolher Tema

Feito!

Dúvidas? Gostou?

Comente!

Geronda

PS: Lembrando que se for reblogar, dê os devidos créditos!

Tutorial-Como fazer uma divisória

Olá, pessoal! Eu vi um tutorial muito fácil de como fazer uma divisória no blog Jackie Dream, então os créditos são todos para ela. O tutorial é rápido e não precisa de nenhum super-programa-de-edição, só o Photoscape. Download (o download é bem leve, não deixa o PC lento!)

Fazendo no Photoscape

Materiais: Fundo Branco|Mini Gifs/Brushes

-Abra o fundo branco. Se não quiser salvar, clique em em copiar imagem e clique em colar no espaço vazio do Editor do Photoscape.

-Faça como mostra a imagem abaixo:

Imagem do blog Jackie Dream

Se quiser, clique no ícone Fotografia (um que é uma montanha um solzinho atrás) e adicione um mini-gif ou um brushe no fim ou no começo da barrinha. Para salvar, clique na ferramente cortar, selecione a sua divisória e clique em Salvar a Área Recortada.

Veja algumas divisórias que eu fiz:

Essas duas primeiras também são muito simples de fazer! Querem aprender? Comentem se querem!

Geronda

Tutorial-Como fazer uma pasta invisível no Windows7

E aí, pessoal? Então, eu estava passeando na blogosfera até que eu vi um tutorial muito legal no blog Curioso Mundo Interessante e o dono do blog me deixou postar aqui! Lembrando que os créditos são todos dele! Ah, se você usa um Windows Vista ou um laptop e não o Windows7, no tutorial mostra como fazer isso nesses dois. É só clicar aqui.

Para quem não entendeu o termo pasta invisível, eu explico: a pasta vai ficar invisível, não vai aparecer! Vamos lá?

Tutorial

Clique com o botão direito em um espaço vazio da área de trabalho.

Clique em Novo>Pasta. Apague o nome da pasta e aperte Alt. Ainda apertando Alt, digite 255 no teclado numérico da direita.

Clique na pasta com o botão direito do mouse e em Propriedades>Personalizado>Alterar Ícone e vá procurando pelos ícones, até que vai aparecer um espaço em branco entre dois ícones. Escolha este. Aperte OK.

(www)

Está feito agora! 

PS:Se você é meio esquecido de onde você deixa sua pasta, digite no nome uma letra, deixe no cantinho da tela e coloque um gadget em cima, como mostra a imagem:

Espero que tenha dado para entender! Lembrando: Todos os créditos são do Curioso Mundo interessante!

Geronda

Tutorial-Como programar posts

Uma amiga blogueira está muito feliz, sabe por quê? Porque o aniversário do blog está chegando! Mas uma coisa em parte ruim aconteceu: ela vai estar viajando no aniversário do blog e não vai poder comemorar! Então, eu falei para ela programar um post, mas ela não sabe, então eu fiz esse tutorial muito, muito simples.

1-Faça seu post

2-No canto direito da tela, há um botão escrito programar. Clique nele e depois, em Definir data e hora

3-Escolha a hora e a data para o post publicar.

Pronto! Quando chegar a hora, o post publicará automaticamente!

Tutorial-Background na Barra lateral

Um seguidor me pediu no chat como se coloca background na sidebar como aqui do blog.  Lembrando que esse tutorial só funciona no template viagem e não sei se funciona em todos os navegadores, eu só testei no Google Chrome. 

Agora, triturando o spaghetti!

Se quiser background na barra lateral da direita:

Clique em Modelo>Editar HTML e aperte Ctrl+F e procure por esse código:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Se quiser colocar na sidebar da esquerda, procure por este:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Após achar esses códigos, apague essa parte grifada do código:

Imagem do blog Cherry Bomb

No lugar do código apagado (depois de background:) coloque esse código:

url(LINK DA IMAGEM) repeat;

Onde está escrito LINK DA IMAGEM, substitua pela URL do background. Para fazer isso, entre no site ImageSchack  e se não tiver conta, cadastre-se. Clique em browser e escolha seu background (escolha um clarinho para facilitar a leitura.) e espere carregar. Vai aparecer "link direto". Dê Ctrl+C nele e Ctrl+V no lugar de LINK DA IMAGEM no código. Clique em visualizar, se estiver tudo certo, salve.

Tutorial-Mensagem de Boas-Vindas

Olá, mortais! Eu sou o Pônei Maldito... O dito cujo que raptou a Geronda! Tenho visto que muitos comentários irritantes tem vindo pedindo para a minha prisioneira como colocar essa mensagem... Quando fui EU que coloquei a mensagem! Porém, para que esses comentários miseráveis parem de vir a tona, montarei um... Tudorail... Tutorail... Como se fala? Ah, sim, vocês, mortais, chamam de TUTORIAL! Ensinando como colocar uma mensagem de "boas-vindas" no blog. Caham. Okay.

Lembrando que é muito fácil fazer isso!

Primeiramente, devo os créditos ao Blog das Meninas, porque elas que disponibilzaram esse tutorial.

-Entre em layout>adicionar gadjet>HTML/Java Script (o nome do gadjet).

-Cole nele o seguinte código:

<script>alert ('MENSAGEM')</script>

-Não coloque título nem nada!

Agora, vamos modificar a mensagem...

ROSA CLARO= a tal mensagem de boas vindas, tipo... Bem vindo! Não retire as aspas, se retirar, não vai dar certo!

Salve, visualize e se estiver tudo bem, seja feliz com a sua nova mensagem. Quando quiser retirar, é só excluir o gadjet.

Tutorial-Marcador de livro personalizado

É melhor fechar o Photoshop, o Photofiltre, o Paint, o Photoscape e todos os editores de imagens e fechar também a página da HTML do seu blog! Esse tutorial é bem diferente. Nesse, eu vou ensinar como fazer um marcador {de verdade} de livro. Chega dos marcadores das livrarias que sinto muito, mas na minha sincera opinião, são feios de doer e fazer o seu próprio marcador, do jeito que você quer! E... Eu vou ensinar! Eu fiz um agorinha há pouco mesmo, e ficou "bonitinho" na minha opinião. Tudo que você precisa é:

1 papel sulfite A4/cartolina

1 régua (recomenda-se usar de 30cm ou mais!)

1 rolo de papel compact

1 lápis grafite

1 estojo de canetinhas

1 caneta permanente (recomenda-se ponta fina)

1 estilete

*Opcional:1 fitinha da cor que quiser.

Agora que você já sabe os materiais, clique em Leia + para ver o tutorial.

Tutorial-Barra de Rolagem Personalizada

Algumas pessoas me perguntaram como é que faz essa barra de rolagem aí do lado que eu coloquei no blog! O modelo é do blog Cherry Bomb, mas eu vi o tutorial no Ecleticu's, então os créditos vão para ele!

1-Clique em Modelo>Editar HTML. Aperte Ctrl+F e procure por  ]]></b:skin>.
2-Acima desse código, cole ESTE código:

::-webkit-scrollbar-thumb:vertical {

background: #e7b3c2;

height:50px;

border: 2px solid #fff;

box-shadow: 2px 2px 4px #bebdbd;

-moz-box-shadow: 2px 2px 4px #bebdbd;

-webkit-box-shadow: 2px 2px 4px #bebdbd;

-khtml-box-shadow: 2px 2px 4px #bebdbd;

-moz-border-radius: 10px; /* Para Firefox */

-webkit-border-radius: 10px; /*Para Safari e Chrome */

border-radius: 10px; /* Para Opera 10.5+*/

}

::-webkit-scrollbar-thumb:horizontal {

background-color:#f26d92; height:10px;

border: 1px dashed #fff;

-webkit-box-shadow:0 0 1em #eee; }

::-webkit-scrollbar {height:10px; width:20px; background: url(FUNDO DA BARRA DE ROLAGEM) repeat;

box-shadow: -3px -2px 10px #bebdbd;

-moz-box-shadow: -3px -2px 10px #bebdbd;

-webkit-box-shadow: -3px -2px 10px #bebdbd;

-khtml-box-shadow: -3px -2px 10px #bebdbd;}

3-Agora, vejamos a legenda.


Roxo-Cor da barra.
Vermelho-Cor da borda da barra
Azul-Url do background


4-Veja como personalizar!


Nesta tabela você encontra o código das cores para o texto em roxo e vermelho. Desse jeito: Escolha uma cor, copie o código HTML dela, que aparece logo na frente e substitua o código da cor. (deu para entender?)


Para o texto em azul, ache um background legal para a sua barra, hospede no Image Shack (precisa fazer conta ou login) e copie o link direto da imagem. Cole o link direto no lugar do texto em azul.


Espero ter ajudado! Boa sorte! =)

Tutorial-Reações

Uma amiga minha blogueira me pediu para colocar reações no blog dela, mas não dava, então eu vou ver se com ela dá... E to ensinando aqui como faz! É uper-super fácil.

1-Abra seu blog em Layout. Clique em editar no gadjet Postagens do Blog.

2-Vai aparecer uma janelinha. Procure Reações e marque a caixinha. se quiser editar as reações, clique em Editar.

Eu disse que era fácil, não disse? ;) Boa sorte!

PS: Se não encontra o Reações, tá aqui a imagem que mostra onde ele tá.

Tutorial-Chat Box

Tem bastante gente que sempre quis uma Chat Box, mas nunca conseguiu uma, porque no geral, sempre tem aquelas que são podres ou que tem vírus. Eu conheço três tipos de Chat Box's que são muito boas!!! 

C-Box

É o tipo de chat-box que a maioria usa! O problema são umas propagandas muito chatas do Blogobo e é muito fácil ter fakes! 

Para adquirir uma, acesse um blog que tem uma C-Box (esse tem!) e clique em um botão na lateral da C-Box onde tá escrito Get a C-Box. Aí, faz o cadastro, usa o modelo que quer (eu recomendo o simple blue) e quando acabar, lá em cima tem um botão escrito Look & Feel. Clica nele e edita do jeito que você quer! Aí, lá em cima tem um botão escrito Publish! e copia o código que vai aparecer. Vá no seu blog, Design>Layout>Adicionar Gadjet>HTML/Java Script e cola o código da C-Box em um gadjet.

Xat

Não, o nome não está errado! É assim mesmo. Nesse acho que não tem propaganda do blogobo, não sei se pode ter fakes... Eu não sei muita coisa mesmo! (Risos)

Acessa o Xat, clica em home e clica em Make a Chat Box. Aí você escolhe o bakground ou pega um do seu computador em Update & Get Code. Copia o código de HTML que aparecer e cola em um gadjet chamado HTML/Java Script.

 

Foi isso, espero ter ajudado de alguma maneira! =D

Tutorial-Comentários Facebook

Não sei se alguém percebeu, mas eu acabei de colocar a opção Facebook nos comentários! Se você quiser um também e tem uns seguidores que não tem Facebook, tá tudo bem! Esse tutorial vai ter a opção do blogger e facebook. 

1-Vá para Design>Editar HTML>Clique na caixa expandir modelo de widgets.

2-Aperte Ctrl+F>Procure por esse código:

<div class='comments' id='comments'>

3-Abaixo desse código cole esse:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comentários no Facebook'>

<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comentários</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comentários no Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='2' width='400'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>

4-Depois disso, Aperte Ctrl+F>Procure por esse código:

<head>

5-Abaixo desse código, cole esse:

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='YOUR_FB_ID' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}
</script>

6-Salve e vá em Designer do Modelo>Avançado>Adicionar CSS e cole esse código:

.comments-page {  background-color: #f2f2f2;}
#blogger-comments-page {  padding: 0px 5px;  display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

7-Clica em Aplicar ao Blog>Visualizar Blog.

PS: Não vai dar para moderar os comentários do facebook.  

Tutorial-Personalizar o Título dos Gadgets

No meu blog Histórias Diversas o título dos gadgets são diferentes, ó (esse retângulo vermelho é só pra prestar atenção no coiso):

                                   

Para ter um título do jeito que você quer...

1-Faça imagens (pode ser no Paint) com o título do  gadget, por exemplo:

Tem que ser imagens da largura da barra lateral para dar certinho!

2-Depois de fazer TODAS as imagens, clique em Postagem>Nova postagem>Inserir imagem e insira todas as imagens dos gadjets.

3-Em uma outra aba, clique em Design>Elementos da Página. Escolha um gadjet e clique em editar e apague o título, faça isso com todos os gadjets da barra lateral.

4-Quando tiver feito tudo isso, clique em adicionar gadjet>texto>naquele post com as imagens, clique em copiar e cole a imagem nesse gadjet.

Salve o gadjet e coloque acima do gadjet que você quer que esse gadjet seja o título. No meu caso, seria em cima do gadjet texto, que seria o bem vindo.

Repita isso com todas as imagens e está pronto!

(Peguei o tutorial do Trechy Teen)

Tutorial-Barra de Rolagem Colorida

Sabe aquela barra de rolagem cinza que não tem muita graça e você vê um blog que tem uma colorida? Você fica procurando o tutorial e não acha, mas eu achei um tutorial no Menina Nerd!

Então mãos á obra!!!

1-Vá em editar HTML>Aperte ctrl+F (vai aparecer uma barra de busca) e procure por:

]]></b:skin>

2-Antes dele, cole:

*{

scrollbar-face-color:#FF69B4;

scrollbar-highlight-color:#FF69B4;

scrollbar-3dlight-color:#343434;

scrollbar-darkshadow-color:#343434;

scrollbar-shadow-color:#FF69B4;

scrollbar-arrow-color:#343434;

scrollbar-track-color:#343434;

}

::-webkit-scrollbar {width: 12px; height: 4px; background: #343434; }::-webkit-scrollbar-thumb { background: #FF69B4; }

O que tá escrito em roxo é a cor da barra e o que tá escrito em verde é a cor do plano de fundo. Para mudar, veja a tabela de cores e pegue o código que aparecer, substituindo-o pelas cores que estão aí! 

Deve ficar assim (a parte em amarelo é o código):

Com as minhas alterações de cores

Salve e visualize. A barra de rolagem vai ficar com esse visual:

Tutorial-Adicionar autores para o blog

Sabe, eu fiz um blog de encomendas para layout de blog e uma pessoa já fez uma encomenda. Mas, ela ão sabia como me fazer administradora! Eu ensinei ela, mas para que todo mundo saiba, eu vou fazer um tutorial.

1º-Vá para "Detalhes" e depois para "Permissões".
2º-Clique em "Adicionar Autores".
3º-Escreva o e-mail da pessoa que você quer que seja autor do blog. (O meu é gerondagerondina@hotmail.com)
4º-No caso de ser uma encomenda, clique em "conceder privilégios de administrador".

Prontinho!!! :D