Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens

03 abril 2015

Marcadores em duas colunas


Oiie gente,como é que vocês estão?Bem,sabe aqueles marcadores personalizados em duas colunas nesse lay?Então vou ensinar como coloca-lo em seu blog :)

Bom e sem mais delongas (Tá, parei!),ele fica assim:

Primeiramente,abra seu gadget de marcadores (Se não tiver ,adicione) e deixe assim:

Agora,vá no seu HTML e procure (F3 ou Ctrl + F) por ]]></b:skin> e acima dele cole:
/* Marcadores personalizados - goimagines.blogspot.com e aadocicadas.blogspot.com.br */ 
#Label1 ul li{ 
float: left;
width: 45%;
font-family: 'Dosis', sans-serif; /* fonte, se preferir troque */
text-transform: uppercase; /* letras em maiúsculo, se não quiser apague a linha */
font-size: 16px; /*tam. da fonte*/
background: #fff; /*fundo*/
border-bottom: 2px solid #ccc; /* borda de baixo do marcador */
margin: 5px;
font-weight: normal;
list-style-type:none;
}
#Label1 ul li:hover{ 
background: #EAEAEA; /*fundo hover*/
border-bottom: 2px solid #FF51A8; /* borda de baixo do marcador hover */
}

Visualize, se estiver tudo certo salve :)
Créditos:Go Imagines

14 março 2015

Caixa de texto personalizada




  Gente desculpa por ter sumido, eu tenho que manter o foco nos estudos,eu prometo que posto tutoriais aqui por enquanto

Esse tutorial eu acabei de aprender  já vou ensinar para vocês,na verdade nem é bem um tutorial rs.
Está vendo está caixinha rosa ali encima então vou ensinar como coloca-la em seu blog.
Primeiro copie este código:



Depois vá em HTML ao lado de escrever no post, e cole o código acima.
e fim,facinho e curtinho haha

22 fevereiro 2015

Gadgets Separados

Fonte: Go Imagine

Oiie gente,muitas pessoas me perguntaram como eu separei os gadgets em caixas (lembram do antigo Layort?),então eu resolvi mostrar pra vocês é bem simples.

Vá em Modelo/Editar HTML aperte Ctrl + F e procure por:
/* Widgets
E antes de fechar } cole o seguinte código:
background: #fff; /*---- cor do fundo da caixa ----*/ 
  padding-left: 20px; /*---- espaço à esquerda ----*/ 
  padding-bottom: 20px;  /*--- espaço de baixo ---*/ 
  padding-right: 20px; /*--- espaço à direita ---*/ 
  padding-top: 5px; /*---- espaço de cima ----*/ 
border-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/
box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/
 
 
Quando você for visualizar,certamente estará a cor do fundo original mais isso é fácil de resolver.
Vá em Design/Design de Modelo/Avançado/Plano de Fundo da Barra lateral e deixe transparente.
E pronto fácil né? Beijoss :*

21 fevereiro 2015

Cometários Personalizados

Fonte: Google Imagens
Oi oi gente,hoje vim mostrar para vocês como deixar a caixa dos comentários personalizados.Aprendi a fazer esse tuto lá no site Papo Garota.
para esse tutorial funcionar,seu comentários tem que estar 'incorpodos' na opção do blogger.Então vá no painel Configurações/Postagens e comentários/local do comentários e marque  opção incorpodo.
Em seguida em Modelo/Editar HTML,aperte Ctrl + F e procure por ]]>/b:skin>.
Copie o código abaixo e cole acima do trexo que você prourou:

O código é muito grande então clique em "Continue Lendo"

05 fevereiro 2015

Ado-Tutorial: Fazendo um layort estilo Sweet Princess

Fonte:Google Imagens

Hi princess, hoje vou ensinar pra vocês como fazer um layort Sweet Princess que fica muito bom pra quem quer ter um blog de moda haha.
Bom antes de tudo vou explicar porque o "Ado-Tutorial", é que como eu me inspirei pra fazer um tutorial completo pra vocês eu queria algo diferente,mais voltando para o tutorial de hoje preparadas?

Quer saber mais? Clique ali o cantinho escrito "Leia Mais" *-*

03 fevereiro 2015

Como colocar o botão de "Ir ao Topo" no blog


Olá amores,hoje trouxe para vocês um tutorial bem bacana,eu não uso ele no nesse blog porque eu acho que não ia combinar com o layort,mais eu usei ele no meu antigos blog,que não vem ao caso o nome dele agora,enfim ele é muito simples de fazer nem precisa mexer no HTML haha

Vou ensinar passo a passo como colocar <3

é bem simples vá em Layort >> Adicionar Gadget >> HTML JavaScrpit e cole o código abaixo:

<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="LINK DA IMAGEM
border="0" /></a></div>

E no lugar onde está escrito "Link da Imagem" é só você colocar o link,ou melhor URL da sua imagem :)

P.S: Se você não tem a imagem pronta procure na Internet,mais vá no blog em que você achou e comente qual imagem você pegou,e se tiver pronta hospede em algum site,eu quando coloquei no meu outro blog,postei primeiro o tutorial no blog e coloquei a imagem que eu iria usar e depois eu só peguei o URL da imagem haha.




30 janeiro 2015

Caixinha de Pesquisa Personalizada

                                                                               Fonte da imagem: Google Imagens
Eu acho a cainha de busco do blogger um pouco sem graça,então resolvi pesquisar um tuto pra vocês de como personaliza-la, achei esse tutorial no blog Go Imagine 

Ela fica mais ou menos assim:
Quer saber o tuto? clique em "Leia Mais" *-*

27 janeiro 2015

Como colocar uma imagem como título nos gadgets


Eu acho essas faixinhas muito legais,porque elas deixam o blog mais elegante,e é muito fácil.

Vá em Modelo/Editar HTML depois aperte Ctrl + F e procure por h2 {
Logo abaixo do texto que você procurou vai estar assim:

h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}


Apague esse código e subistitua por esse:


.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}

agora é só modificar as cores e a fonte como quiser.Se quiser colocar uma imagem,substitua esse código:

background: #fbfbfb; /*Cor de fundo*/
Por este:


background: url(link_da_imagem) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/



Visualize se está tudo certo e salve.
Exemplos de faixinhas:


Espero que tenham gostado do Tuto. :)