Tutorial - Imagem ajustada na barra lateral

Yoo ~

A gente, como sempre ficamos sumida. Eu não tenho tanto ânimo pra postar como antes, mais vou juntando forças e fazendo o melhor possível. Agora, vamos parar com o drama. Hoje, trouxe um tutorial que a Nicka me pediu nos comentários que foi de, como deixar as imagens ajustadas na barra lateral, pelo menos eu entendi isso. Vou fazer o post bem rapidinho. Se não for isso que você quer, é só me avisar. Espero estar ajudando !

1- Antes de tudo você precisa ter a imagem salva no seu PC, ou o link dela. Vá em Layout. E clique em Adicionar Gadget, na parte da barra lateral. 

2- Adicione um gadget com o nome Imagem.

3- Clique em um quadradinho com o nome Reduzir para ajustar, caso ele não esteja selecionado. 

4- Se a imagem estiver salva no seu PC clique em Escolher Arquivo, mas se for um link, é só colar no último espaço.

5- Agora mexendo nas outras coisas, em Título você escreve o nome do gadget. Em Legendas é o que irá aparecer abaixo da imagem. E em Link é pra onde o leitor será direcionado, se clicar na imagem. 

6- Clique em Salvar e posicione onde quiser.

Só lembrando que na legenda é possível adicionar códigos de HTML. Essa é a única maneira que eu conheço, Nicka se você quiser de outro jeito, vou ver o que posso fazer.

Tutorial - Borda entre a barra lateral e a área de postagem

Desculpem, eu ter sumido novamente. Estava pensando em parar de postar aqui por um tempo, ta me faltando ânimo, inspiração, mas não se preocupem, até o final do mês de agosto, estarei de volta.

Yoo ~

Antes de eu deixar o blog, por um tempo, resolvi postar um tutorial, para compensar o tempo, em que eu não postei. Parando de blá blá blá, o tutorial é de como colocar borda entre a área da postagem e a barra lateral, esse será o resultado :

Vá em Modelo > Editar HTML, tecle F3 e procure por :

.main-inner .column-center-inner {

Abaixo do código encontrado, cole :

 border-left: 1px dashed #000000;

Entenda o código:
left: Se a sua barra lateral for do lado direito, substitua por right .
1px: largura da borda
#000000: cor da borda.

Então era só isso, até mais tarde, vou sentir saudades ♥

Tutorial- Efeito areia iluminada no Photoscape

Milhões de desculpas eu sei que o blog está muito desatualizado mas semana de provas globais não é fácil e acabo de sair de uma!Mas vamos tentar postar mais, até porque a minha escola emendou o feriado então estou com tempo de sobra!

Hooy

Vocês devem estar se perguntando ~o que é efeito areia iluminada ?~ bem é basicamente um efeito que eu inventei no photoscape eu achei ele bem legal então resolvi postar aqui, ensinando vocês a fazer ele eu usei como exemplo uma foto da Selena Gomez agente não fala muito dela aqui no blog e eu acho ela linda então vamos usar a imagem dela aqui vão os passos:

Tutorial - Substituir o leia mais por uma imagem

Yoo ~

Eu demorei postar nesse tempo, porque eu estava muito ocupada ontem, e hoje a energia tinha acabado, parcialmente na maioria das casas, e demorou pra voltar ~ percebemos isso ~. Enfim, eu trouxe um tutorial hoje, que é de como substituir o leia mais por uma imagem, quem pediu foi a Babi, espero que gostem !

Vá em Editar HTML > clique na caixinha onde tem Expandir modelos de Widget, tecle F3 e procure por:

 <data:post.jumpText/>

Apague o código acima, e substitua por esse : 

<p align='right'><a expr:href='data:post.url'><img src='URL DA IMAGEM'/></a></p>

Substitua o URL DA IMAGEM, pela url de uma imagem ~ sério tia ? não sabia disso ~ . Fiz algumas imagens para vocês nesse tempo.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Depois eu trago mais imagens, talvez no próximo post. Agora um tutorial extra, mais com esse mesmo tema, se você quiser só mudar o link, porque geralmente tem escrito Mais Informações, sem colocar imagem e tal. Segue o tuto ai.~

Vá em Layout > No gadget Postagens do Blog - o maior que tem -, clique em editar. Irá abrir uma nova página, e lá vai ter escrito Texto do link da página da postagem, bem no inicio, o segundo. Na frente terá algo escrito, então edite para o que você quiser, e salve. Prontinho, super simples, não ?

Espero ter ajudado, se precisarem de alguma coisa é só pedir !

Tutorial - Negrito, itálico, sublinhado e riscado automático

Hooy

Aliens, pandas , humanos , plantas e seres de todas as espécies hoje eu trago a vocês um tutorial ~a não me diga nem percebi o título ali~ ta bem pessoinha imaginária hoje estou pedindo por favor que fique só um pouquinho quietinha ok? ~ta bem ta bem mas é só por que eu quero ver o tuto~ muito obrigada pessoinha imaginária então agora é melhor parar de enrolar vocês e ir logo para esse tuto

1°: Vá em disigne--> editar HTML--> tcle F3 ou ctrl F e procure por 

 ]]></b:skin> 

2°: Acima dessa tag cole o seguinte código:

 b{color: #DA70D6; text-decoration: none;} /* Estilo do negrito */
i {color:  #DA70D6 ; text-decoration: none;} /* Estilo do itálico */
u {color: #1C1C1C; text-decoration: none; border-bottom: 1px dashed #7CFC00;} /* Estilo do sublinhado */
strike {color: #009900  ; text-decoration: strike;  } /*estilo do riscado */

3°: Explicando:

#DA70D6: é a cor do negrito

#DA70D6: é a cor do itálico

#1C1C1C: é a cor da letra do sublinhado

#7CFC00: é cor da linha do sublinhado

#009900: é a cor do riscado

E clicando aqui você vai encontrar uma tabela com os códigos das cores para você substituir e deixar do seu jeito!

Espero que tenham gostado do tutorial!Ah, vocês devem ter notado o novo layout do blog ~a que isso imagina isso é o que agente menos nota ironia~ então você decidiu voltar né pessoinha imaginária? Pois continue quietinha ai no seu lugar! Então como eu ia dizendo... o que acharam do novo layout? É uma obra de arte da nossa postadora linda tia pixel  eu amei apesar de que o outro eu também amava tirei um print de lembrança depois vou tirar desse também  não liguem pras minhas bobeiras. 

É isso beijos e até mais!

Tutorial Duplo - Personalizar a Data

Yoo ~

Trouxe um tutorial, ou melhor dois, que a Nicka pediu, na realidade ela pediu só um, mas estou trazendo dois só pra prevenir. Os dois tutoriais, são de como personalizar a data, no primeiro a data, fica para fora do corpo da postagem, e com uma imagem como fundo, aqui está um exemplo :

1 - Vá em Configurações > Idioma e formatação > Formato de data, e modifique como na imagem abaixo :

2 - Vá em Modelo > Editar HTML,e clique em um quadradinho, onde está escrito Expandir modelos de widgets, tecle F3 e procure por :

 <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

3 - Se você encontrar dois códigos desse, vá no segundo, quando encontrado, apague todo o código acima, e substitua por esse :

  <div id='Data'>
<script>trocarData(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Data'>
<script>trocarData(&#39;&#39;);</script>
</div>

4 - Procure por  </head>, e acima desse código cole esses :

<script type='text/javascript'>

//<![CDATA[var DataCalendario;function trocarData(d){if (d == "") {d = DataaCalendario;}var da = d.split(' ');dia = "<strong class='data_dia'>"+da[0]+"</strong>";mes = "<strong class='data_mes'>"+da[1].slice(0,3)+"</strong>";ano = "<strong class='data_ano'>"+da[2]+"</strong>";
document.write(mes+dia+ano);DataCalendario = d;}//]]></script>

<style type='text/css'>
/* Data tipo calendario
----------------------------------------------- */
#Data {
background: transparent url(URL da imagem) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.data_mes {
display: block;
font-size: 15px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-1px;
text-align:center;
color:#ffc4f4; /* Cor do mês */
}

.data_dia {
display: block;
font-size: 28px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do dia */
}

.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>
.data_mes {
display: block;
font-size: 15px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-1px;
text-align:center;
color:#ffc4f4; /* Cor do mês */
}
.data_dia {
display: block;
font-size: 28px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do dia */
}

.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>
.data_dia {
display: block;
font-size: 28px; /* Tamanho da fonte */
font-weight:bold; /* Data em Negrito */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do dia */
}
.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>
.data_ano {
display: block;
font-size: 10px; /* Tamanho da fonte */
margin-top:-8px;
text-align:center;
color:#ffc4f4; /* Cor do ano */
}
</style>
</b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

5 - Modifique o código:

 background: transparent url(URL da imagem) no-repeat;=Acrescente o endereço da imagem que você irá usar como plano de fundo da data ou não acrescente nada para aparecer só o texto. 

width:60px e height:60px= Altere os números de acordo com o tamanho da imagem de plano de fundo.

float: left= posição esquerda ou direita (right).

margin: 5px 2px 0 -70px= Altere -70px por 0px se quiser que a data apareça dentro da postagem ou altere -70px para outros números posicionando a data para mais perto ou mais longe das postagens.

6 - Visualize se deu tudo certo e salve !

Aqui estão algumas imagens que vocês podem usar:

      

      

Créditos: Kawaii World

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Agora, com vocês o segundo tutorial, ele é um pouco mais fácil, e fui eu que o criei ** aplausos para mim **, a data fica pra fora do corpo da postagem, com um fundo de uma imagem, ele é um pouco diferente. Um exemplo de como ele irá ficar :

1 - Vá em Configurações > Idioma e formatação > Formato de data, e modifique como na imagem abaixo :

2 - Vá em Modelo > Editar HTML, tecle F3 e procure por :

.main-inner h2.date-header {

Você vai encontrar algo parecido com isso:

 .main-inner h2.date-header {  font: $(date.font);  color: $(date.text.color);

3 - Apague todo o código acima, e cole esse :

.main-inner h2.date-header {
font: century gothic;  /* Fonte da Data */
color: #000000;  /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da data , troque left por right se quiser na direita  */
background: url(LINK DA SUA IMAGEM) repeat; /* Cor do fundo */
float: left; /* Se você mudou acima para right , mude aqui tambem */
font-size: 11px;  /* Tamanho da Fonte */
padding: 4px;/
}

4 - Modifique como você preferir, visualize se deu tudo certo, e salve.

Espero ter ajudado, se precisarem de mais alguma coisa, é só pedir. 

Tutorial - Colocar novas Páginas

Amores, me desculpem pelo meu sumiço, meu PC, parou de trabalhar, e ele estava no concerto. Eu gostaria de avisar que eu estou fazendo um sorteio no FD, de um design, estilo o daqui do blog, se alguém quiser participar, clique aqui. Conto com a ajuda de vocês ! 

 

Yoo ~

Já faz muito tempo, que a Ingrid pediu esse tutorial, então vou postá-lo hoje. Comemoremos a volta da Tia Pixel ** aplausos e gritos **, o tutorial é de como colocar mais páginas no blog, a gente não usa esse recurso aqui no blog, por falta de opção de páginas, e preguiça que feio, mas no FD, como eu mudei o design ontem, eu estou usando um menu, ele é bem simples, e é de link, não sei explicar. Para quem não entendeu, essa coisa de adicionar novas páginas, aqui está uma imagem para vocês :

Ignorem a imagem feia, é só para vocês terem uma ideia.

Muita gente utiliza, as páginas na parte de cima, eu prefiro usá-las na minha barra lateral, mas cada um tem o seu gosto. Paremos com enrolação e vamos ao tutorial.

Adicionar uma página escrita.

Nem eu entendi o que escrevi, nesse título. Adicionar uma página escrita, seria adicionar, uma página onde você escreveu alguma coisa, estou meio sem ideia para explicar isso, então aqui está uma imagem para vocês entenderem, ignorem o que está escrito.

Para adicionar uma página como essa só que com uma escrita melhor, né tia ? , vá em Páginas ( ela fica na mesma barra, onde você vai para mexer no layout, modelo ), vai ter uma guia onde está escrito Nova Página , clique nessa barrinha, e irão aparecer mais duas barrinhas, clique na primeira onde está escrito Página em Branco, vai aparecer uma página igual a de quando estamos postando, então escreva nela o que você quiser, igual eu fiz na imagem Sobre o blog, depois de terminado, não esqueça de colocar o título, clique em Publicar, e ela será adicionada na sua barrinha, fiz um gif para vocês entenderem, só lembrando que essas páginas podem ser excluídas e editadas :

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Adicionar uma página como link

Esse recurso é bom para adicionar páginas, com os links dos marcadores, ou seja, você escolhe um link, que ficará na página, e quando alguém clicar será redirecionado, para esse local. Os passos iniciais são os mesmos do anterior, mas ao invés de clicar em Página em Branco, clique em Endereço da Web, irá abrir uma pequena página, escreva o título da página, e coloque o link, depois clique em Salvar, novamente fiz um gif para vocês entenderem melhor  :

Só vou postar essas duas partes, pois é o que mais tem haver com o pedido, que era de como adiciona novas páginas, se precisarem de mais alguma coisa é só pedirem !

Tutorial - Usando os Marcadores

Yoo ~

Pandas, pandos, crianças e crianços, novamente trago mais um tutorial, quem pediu foi a Ingrid ** aplausos para ela **. Bem, ela fez três pedidos, um deles foi de como colocar os gadget de afiliados, a Macarroni já postou um tutorial desses, você pode ver clicando aqui, eu espero que ele ajude. Agora vou postar, o tutorial de como usar os marcadores, é bem simples, e novamente eu vos digo, não precisa mexer em HTML ainda bem, tia.

Na sua postagem, pode ser antes de começar, eu depois de terminada, vá em Configurações de postagens, é uma barra que fica ao lado da área onde você esta postando, clique em Marcadores, e escreva algo, como se fosse uma palavra-chave para esse post, em seguida clique em Concluir. Tente sempre usar os mesmos marcadores, os mais simples, e que você poste mais sobre o assunto, para não ficar cheio de coisas, tudo bagunçado, só lembrando que você pode adicionar mais de um marcador, nas postagens. Com o seu post terminando, é só postar.  Aqui está um print :

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Como coloco os marcadores no final da postagem ?

Para colocar os marcadores no final da sua postagem, vá em Layout, você vai encontrar uma janela, onde está escrito Postagens no blog, como se fosse um gadget isso é um gadget, clique em Editar, ele está bem no final, para você não se confundir aqui está um print :

Irá abrir uma página, e você encontrará algo parecido com isso: Opções da página de postagem, onde terá várias caixinhas, algumas poderão estar marcadas. Procure por uma onde está escrito algo parecido com isso Marcado em, clique no quadradinho que está na frente, para marcá-lo, você pode colocar outra palavra, alguma coisa que tenha haver com o seu blog, no nosso caso, aqui é Pandalisado. Um print para vocês entenderem melhor o que eu quero dizer :

Pronto, ele já está no final da sua postagem. Logo abaixo, nessa mesma janela, tem algo parecido com isso Organizar itens, aqui você pode posicionar, esse e os demais itens, no local que você quiser, depois clique em Salvar. Para quem ainda não entendeu, aqui está um print de como irá ficar no final da sua postagem, só avisando que a sua barra provavelmente não ficará igual a nossa, com o fundo cinza e tal, há não ser que você use o mesmo tutorial no HTML, que a gente  é claro que sabemos disso, tia :

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Como coloco os marcadores na minha barra lateral ?

É super simples, vá em Layout, nas barrinhas ao lado da área que você acabou de modificar, e clique em Adicionar Gadgets, irá abrir uma nova página, então procure um gadget de nome, Marcadores, clique no sinal de +, localizado logo atrás do nome desse gadget, clique em salvar, posicione no local onde você quiser, eu aconselho que não seja o primeiro, você pode posicioná-lo em um local parecido com o do blog, depois clique em Salvar Organização, e prontinho. Aqui está um gif que eu fiz para vocês entenderem melhor, não dá pra entender tudo direitinho, mas ajuda um pouco:

Espero que tenha ajudado, se vocês não conseguiram ou não deu certo algum desses passos, comuniquem aqui nos comentários, que vamos tentar ajudar ! Se precisarem de alguma coisa, nos avisem !

Tutorial Duplo - Como usar Bloquote + Um estilo para você

Meus amores, me desculpem por ter sumido, eu estava meio que cheia de obrigações esses dias, e a minha internet não estava uma das melhores, mas, estou voltando, e desta vez com dois tutoriais para vocês.

 

Yoo ~

Sempre quis ter o meu nome na calçada da fama. Enfim, recebemos nosso primeiro pedido de tutorial, a Carla, só não postou ele, porque ela disse que não sabia esse, então eu estou postando pra vocês. Quem pediu foi a Nicka, ela queria saber como a gente usa o bloquote ( para quem não sabe o que é isso, é aquela barrinha que eu usei no texto, antes da imagem, serve mesmo para destacar alguma coisa ), então vou ensinar, é muito simples, não precisa mexer em HTML. 

Faça o seu post normalmente, então selecione a parte do texto, onde você quer que o bloquote fique, depois clique no símbolo de '' aspas '', com o nome de Quote, que tem na barrinha, onde você muda a fonte, o tamanho, a cor, da fonte e outras coisas. Aqui está um print para vocês entenderem :

Bem simples, né ? Caso você não tenha um bloquote personalizado isso usa HTML, ele irá ficar simples, sem nenhuma cor, nenhum estilo, branco, e apenas com o texto mais centralizado. Então eu trouxe um tuto, que serve para personalizá-lo, e ficar igual o do blog, com os lados com cores diferentes, no caso daqui, um é rosa e o outro verde, sigam os passos abaixo.

Vá em Modelo > Editar HTML, tecle F3 e procure por:

]]></b:skin>

Em cima desse código, cole o seguinte: 

/* Blockquote EUA por : Keep Calm and eat Nutella */
.post blockquote {
background: #f5f5f5;
 -webkit-border-radius: 10px 10px 10px 10px;
border-left: 8px solid #FFA07A;
border-right: 8px solid #BDB76B;
color:  #000000;
font-family:Tahoma;
font-size: 12px;
text-align: center;
padding: 5px;}

Agora você pode fazer as modificações, de acordo com as cores do seu blog, ou do seu gosto, aqui estão as informações, que eu aconselho mudanças :


#FFA07A - essa é a cor da barrinha do lado direito, que no caso do blog é rosa.
#BDB76B - essa é cor da barrinha do lado esquerdo, que no caso do blog é verde

Essas são as mudanças fundamentais, eu não aconselho que vocês mudem, os tamanhos, nem as outras coisas, porque senão você terá um resultado diferente, mas, aí é você que escolhe. Eu não sei o link do blog onde eu achei, porque esse eu peguei no HTML do Goodies, mas como vocês podem ver, o nome do blog tá no inicio do código, então caso foi você que o criou, me avise nos comentários para que eu possa dar os créditos ! Enfim, espero que tenha ajudado Nicka, qualquer coisa podem pedir, que tentaremos postar aqui.

Tutorial - Efeito no Gadget de Afiliados

Hoooy

Como eu disse no post anterior vou recompensar vocês com mais posts e agora estou aqui para .....tam tam tam tam.... Ensinar vocês a por efeito no Gadget de Afiliados do seu blog! **aplausos** bom como eu sou muito enrolada se deixar eu fico aqui o dia inteiro falando então é melhor começar logo nosso tutorial:

1°: Vá em designe--> Editar HTML--> expandir modelos de widgets--> aprte ctrl F ou F3 e procure por:

]]></b:skin>

2°: Logo acima desse código cole  o seguinte:

.afiliados {opacity: 0.7; -webkit-transition: 0.5s;border-radius:15px;width: 50px;height: 50px;text-align: center;
}.afiliados:hover {opacity: 1.0;}

3°: Salve vá em disigne--> layout-->clique em adicionar um gadget-->Escolha a opção HTML/javascript cole nele o seguinte código:

<a href="http://URL.com" title="Título da imagem"><img src="LINK_DA_IMAGEM" class="afiliados"/></a>

 Aqui estão as informações, para vocês modificarem o código acima, quando for colocá-lo no gadget:
http://URL.com - coloque aqui a URL / link do blog afiliado.
Título da imagem - O nome do blog afiliado.
LINK_DA_IMAGEM - Link / URL da imagem que você vai usar, aqui no blog a gente sempre posta algumas imagens para afiliados, vocês podem usá-las.


Para acrescentar  outras imagens é só você ir duplicando o código, fazendo as modificações! Espero que tenha ajudado vocês beijos ;**

Tutorial- Como por Sombra no Título da Postagem

Hooy

Pandas, crianças, aliens, animais, seres humanos e qualquer ser blogueiro ou não hoje pra você que sempre quis saber como por sombra no título eu trouxe um tutorial fresquinho pra vocês aprenderem!**aplausos ele tem um resultado muito fofo ~eu uso no Flor Do Deserto rsrsrs vocês vão amar:

1°-Vá em Designe --> Editar HTML-->Expandir modelos de Widgets-->aperte F3 ou ctrl F e procure por: h3.post-title a {

você vai achar algo parecido com isso:

h3.post-title a {  font: $(post.title.font);  color: $(post.title.text.color);}

2°-Depois de todas as linhas mas antes da } cole o código: text-shadow: 0px 0px 5px #000;

Deve ficar assim:

h3.post-title a {  font: $(post.title.font);  color: $(post.title.text.color);text-shadow: 0px 0px 5px #000;}

Visualize antes de salvar para ver se deu certo e curta seu titulo com sombra!
Beijos e não deixem de avisar se algo der errado!

Tutorial - Separando as Postagens

Oii amoores!

Hoje para estrear o blog com o meu primeiríssimo post eu trouxe um tutorial de como separar as postagens é bem legal e fácil de fazer o resultado fica ótimo e eu acho muito fofo as postagens separadas aqui vai:

1- Vá em Design > Editar HTML > Aperte CTRL + F e pesquise por :

.main-inner .column-center-outer {

Deve aparecer algo assim : 

.main-inner .column-center-outer {    background: $(post.background.color)$((post.background.url) repeat scrool top left; _background-image:none;}

2- Apague todo o trecho acima, e substitua pelo seguinte código : 

.post-outer{margin: 3px 2px 10px;background: #fff;padding: 25px 10px;}

Não se esqueça de visualizar e conferir se deu tudo certo antes de salvar, qualquer coisa é só avisar! Espero que tenham gostado beijocas ;*