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

Três Modelos de Área de Postagem

08 julho 2015

Nenhum comentário:
Alô brothers , tudo bem com vocês ?! Aqui ta tudo "BEM" . Hoje estarei trazendo um tutorial de como personalizar a área de posts. É um tutorial um tanto básico , mas eu me lembro que no início do blog ( desse não , quando comecei esse já era mais cascudo ) seria muito interessante e útil se alguém me desse isso grátis.

Pensando nisso e na necessidade de abastecer o blog resolvi vim fazer este post , apontando os códigos de personalizações na área das postagens . São coisas muito básicas como já disse , geralmente se você já entende um pouco de HTML os modelos serão mamão com açúcar .

LET'S ? Ah , e antes que eu me esqueça este tutorial serve apenas para pessoas que utilizam o modelo viagem . Talvez você ache os códigos se souber , mas aviso logo para você não ficar que nem um louco procurando o código no editor. Então somente viagem. Vamos lá ?

Abra seu editor HTML ( indo em Modelo > Editar HTML ) pressione Ctrl+F e procure por /* Posts Depois selecione desde h3.post-title { até .post-body { e substitua por um dos códigos dos modelos que preferir , são três então tem bastantes opções. Tudo que pode ser alterado , estará em negrito. Se pintar alguma dúvida , é só comentar que eu respondo . Nos códigos há explicações , só para constar.

Modelo 1




Procure por <head> e cole o código abaixo :
    <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'/>

Código :
/*personalização da área de posts por bigodeaparte.blogspot.com*/ /* Posts
h3.post-title { border-bottom: 1px solid #A8DBA8; } /*borda , defina espessura , forma e cor*/
h3.post-title a { font-family: Poiret One; font-size: 36px; color: #033649; } /* parte referente a postagem na página iniciao */
h3.post-title a:hover { text-decoration: none; color: #A8DBA8;} /*hover*/
.post-outer { background: #fff; padding-left: 5px; padding-right: 5px;
 padding-top: 5px; padding-bottom: 5px; color: #031634; } /*referente ao "corpo" do post*/
.post-outer a:link { color: #3B8686; } /*links presentes no post*/
.post-body { } /*deixa vazio*/


Procure por <head> e cole o código abaixo , em baixo de <head>
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'/>

Modelo 2
Código :
/*personalização da área de posts por bigodeaparte.blogspot.com*/
/* Posts h3.post-title { font-family: 'Grand Hotel', cursive; text-transform: capitalize; font-size: 24px; color: #fff; text-align: center; background:#542437;} /*borda , defina espessura , forma e cor*/
h3.post-title a {font-family: 'Grand Hotel', cursive; text-transform: capitalize; font-size: 24px; color: #fff; text-align: center;}
h3.post-title a:hover {text-decoration: underline;}
.post-outer {background: #fff; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; color: #2e151f; }
.post-outer a:link { }
.post-body { }

 Para instalar a fonte no blog , procure por <head> e cole o código abaixo , em baixo de <head>
<link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'/>

Modelo 3

/* Posts /*personalização da área de posts por bigodeaparte.blogspot.com*/ h3.post-title {font-size: 18px; color: #fff; text-align: left; padding: 5px; background:#000; }
h3.post-title a { font-family: 'Arvo', serif; text-transform: uppercase; font-weight: 300; font-size: 18px; color: #fff; text-align: left;}
h3.post-title a:hover {text-decoration: underline;}
.post-outer { background: #fff; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;}
.post-outer a:link {}
.post-body {}

Para instalar a fonte no seu blog , procure por <head> e cole o código abaixo em baixo de <head>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>

Espero que usem os modelos , e que tenham gostado "

editar e personalizar o menu padrão do blogger

02 julho 2015

Nenhum comentário:
Oi gente , como está os sentimentos today ? Eu to bem , preguiça de editar alguns vídeos e criar as capas das redes sociais para o blog , mas ENFIM vou me encorajar a fazer isso amanhã ( aproveitando que não tem aula , amo muito tudo isso ) . Eu parei a este mês inteiro , porque sei lá estava sem inspiração e o blog não estava funcionando. Assim como as redes sociais não eram mais atualizadas , enfim voltei com tudo.

Parando as enrolações , no post de hoje eu estarei ensinando como programar o menu padrão do blogger. Vou confessar que , quando criei meu primeiro blog não sabia mexer em nada na interface , então resolvi vim fazer este post ensinando tintim por tintim . Para os mais casca grossa , role a página um pouco mais a baixo e vá direto para a parte CSS coisa. Enfim vamos lá ?
ANTES DE COMEÇAR GOSTARIA DE AVISAR QUE ESTE É UM TIPO DE TUTORIAL QUE MEXE COM PARTES IMPORTANTES NO TEU LAYOUT , ENTÃO SEMPRE VISUALIZE ANTES DE SALVAR

Primeiro vá em Layout > Adicionar um Gadget > Páginas 

Depois selecione todas as páginas que você quer que apareça no gadget , e clique em salvar ( O próprio gadget explica tudo , dúvidas etc.. ) Demostração na imagem
Agora que o gadget está adicionado , vamos aprender há colocar páginas ? Há , antes que eu me esqueça , a parte + Adicionar Link Externo . Ali você pode colocar o link de por exemplo categorias. Criar páginas é muito simples. Com seu blog selecionado , vá em Páginas > Nova página. Coloque o título e o conteúdo , depois é só publicar e fazer o processo dito acima .







Depois de saber como adicionar o Gadget e as opções que eles fornecem seria mais interessante dar um estilo ao teu menu , personalizar é profissionalizar. O menu ficará igual ao dessa imagem abaixo :
Abra o editor HTML ( indo em Modelo > Editar HTML ) pressione as teclas Ctrl+F e procure por /* Tabs selecione todo conteúdo até a chavinha , e substitua pelo código abaixo :
/* Tabs
----------------------------------------------- */
/*menu feito pelo blog bigodeaparte.blogspot.com não tire os créditos*/
.tabs-inner {
  padding: 0;
  margin-top: -0px; /*para subir o menu*/
  margin-left: -0px; /*para virar para a esquerda ou direita*/
}
.tabs-inner .section {
  margin: 0;
}
.tabs-inner .widget ul {
  padding: 0;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
  border: none;
}
.tabs-inner .widget li a {
  display: inline-block; padding: 1em 1.5em; border-radius:55px;
  -moz-border-radius: 55px; -webkit-border-radius: 55px;
  background: #D6C0B3; padding: 12px; margin: 6px; color: #FFF;
  font-family: Arial; line-height: 6px; font-size:18px;
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  color: #FFF; position: relative; font-family: Arial; border-radius:55px;
 -moz-border-radius: 55px; -webkit-border-radius: 55px; background: #359788;
  padding: 12px; line-height: 6px; font-size:18px;}
Entendendo o Código
Para ficar mais fácil de vocês mudarem de acordo com o layout do teu blog . Confira a legenda de cores :
Vermelho : Numero de arredondamento . Quanto maior , mas parecido com um círculo
Laranja : Cor de Fundo ( Em cima normal , embaixo hover e selecionado )
Amarelo : Nome da tua fonte
Verde : Espaçamento interno
Azul : Espaço entre cada 'icone'
Azul Claro : Tamanho da fonte
Roxo : Cor da Fonte

Ficou tudo bem explicado né ? Se colar alguma dúvida é só comentar , Abraços !

emojis para facebook

12 maio 2015

Nenhum comentário:
Oi pessoal , como cês tão ? Tomara que estejam ótimos. Quadro novo aqui no blog , o nome é 'Posts Express' e vou estar fazendo posts rápidos , a grande maioria com dicas e tal. Não tem dia certo para eles , mas sempre que tiver um post que ajuda bastante e é bem rápido eu estarei trazendo nessa Tag.

Hoje estarei ensinando como ativar os emojis para os aparelhos ios ( iPhone , iPad e iPod Touch ) e também uma lista de todos os emojis do Facebook , pois infelizmente no PC não dá para utilizar os emojis;

Tutorial 

O tutorial é bem simples , é só ativar os caracteres no teclado de definição ios
1. Vá em > Definições > Geral > Teclado
2. Depois toque em teclados
3. Novo Teclado
4. Procure e escolha 'Emojis'
E pronto ! Seus emojis estaram prontos para serem usados , fácil né ?

Lista de Todos os Emojis do Facebook

 C😄😃😊😉😍😘😚😜😝😳😁😔😌😒😞😣😢😂😭
 F
 C😪😥😰😓😩😫😨😱😠😡😤😖😆😷😵😲👿😏👲👳
 F
 C👮👷💂👶👦👧👨👩👴👵👱👼👸💀👽💩🔥🌟💢
 F
 C💦💧💤💨👂👀👃👅👄👍👎👌🎩👑👒👟👡👠👢👕
 F
 C👔👗👘👙💼👜🎀🌂💄💛💙💜💚💔💗💓💖💞💘
 F
 C💌💋💍💎🐶🐺🐱🐭🐹🐰🐸🐯🐨🐻🐷🐮🐗🐵🐒🐴
 F
 C🐑🐘🐧🐦🐥🐔🐍🐛🐙🐚🐠🐟🐬🐳🐎🐡🐫🐩🐾💐
 F
 C🌸🌷🍀🌹🌻🌺🍁🍃🍂🌾🌵🌴🌱🌙
 F
 C🌀🌈🌊🎍💝🎎🎒🎓🎏🎐🎃👻🎅🎄🎁🎉🎈🎌🎥📷
 F
 C📼💿📀💽💾💻📱📞📠📡📺📻🔈🔔📢📣🔓🔒🔏
 F
 C🔐🔑🔎💡🔍🛀🚽🔨🚬💣🔫💊💉💰💴💵📲📩📨
 F
 C📫📪📬📭📮📝📖🎨🎬🎤🎧🎼🎵🎶🎺🎷🎸👾🀄
 F
 C🎯🏈🏀🎾🎱🏁🏆🎿🍵🍶🍺🍻🍸🍴🍔🍟
 F
 C🍝🍛🍱🍣🍙🍘🍚🍜🍲🍢🍡🍳🍞🍦🍧🍰🍎🍊🍉🍓
 F
 C🍆🍅🏠🏡🏫🏢🏣🏥🏦🏪🏩🏨💒🏬🌇🌆🏯🏰
 F
 C🏭🗼🗻🌄🌅🌃🗽🎡🎢🚢🚤🚀💺🚉🚄🚅🚃
 F
 C🚌🚙🚗🚕🚚🚓🚒🚑🚲💈🚏🎫🚥🚧🔰🎭
 F
 C🆙🆒📶🎦🈁🈯🈳🈵🉐🈹🈺
 F
 C🈶🈚🚻🚹🚺🚼🚾🚭🈷🈸🈂🔞💟
 F
 C🆚📳📴💠🏧💲🔱
 F
 C🔲🔳🔴🔵🔶🔷🔸🔹👏
Bem gente este foi o post , espero que todos fiquem bem e até amanha o//