29 abril 2015

Tutorial HTML: Resumo do post - Javascript

Olá, pessoas!
Como estão? Eu estou ótima, apesar dos ocorridos :P
Enfim, não vou me concentrar nesse assunto, pois já é passado e, para mim, não teve relevância nenhuma na minha vida.
Então, muitas (muitas mesmo) pessoas vieram me pedir para ensinar como fazer o post dos blogs ficarem resumidos, sabe? Afinal, isso não estava no código disponibilizado, pois se trata de uma personalização, e eu tinha avisado que as personalizações seriam por conta de vocês. Entretanto, recebi muitas dúvidas a respeito desse tema em particular, por isso irei fazer um mini tutorial explicando como resumir os posts ^^
Let's go?

Primeiro passo:

Antes de qualquer coisa, faça o backup do seu blog, assim caso algo dê errado (o que eu espero que não aconteça), você tem backup :)
Para fazer o backup do seu blog:

OBS: Se for um blog de teste, faça somente o download do Template.

Backup do Template:

>> Acesse seu Blogger e vá em "Modelo"
>> Clique em "Fazer backup/Restaurar", que fica no canto superior direito da página.
(http://i.imgur.com/Qn2C7q6.png)
>> Irá abrir uma janela (http://i.imgur.com/b8huZbK.png), clique na opção "Fazer download do modelo completo".

Feito isso, baixará o arquivo XML do template para a pasta de download do seu PC.

Backup do conteúdo:

>> No menu lateral do seu Blogger (o mesmo onde tem "Modelo"), clique em "Configurações" e depois "Outro".
>> Você poderá notar a opção "Exportar Blog" à direita. Clique nela. (http://i.imgur.com/zfvUVET.png)
>> Irá abrir uma pequena janela, e nela você clicará na opção "Fazer download do blog".
(http://i.imgur.com/9BzjZFv.png)
>> Nesse momento começará a ser baixado um arquivo com todo o conteúdo do blog, por isso o processo pode levar mais tempo do que o anterior.
>> Depois de ter baixado o arquivo, o seu backup está completo!

Agora, vamos começar com o bendito tutorial ^^

>> Acesse o blogger novamente, clique em "Modelo" e depois "Editar HTML"

1° Passo: Inserindo o Javascript.


Clique no código do seu template e pressione "Ctrl+F". Depois, digite na caixa de pesquisa </head> e dê um enter. ACIMA dessa tag, você irá colar esse código:

<!-- Javascript Resumo Automático de Postagens-->
<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 180;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+' [...]';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Fim Javascript Resumo Automático de Postagens-->


Explicando as partes destacadas:

  • Em summary_noimg = 330; está a quantidade de caracteres do resumo para as postagens que não contenham imagens.
  • Em summary_img = 300; está a quantidade de caracteres do resumo para as postagens que contenham imagens.
  • Em img_thumb_height = 180; é a altura da imagem.
  • Em img_thumb_width = 200; é a largura da imagem.


2° Passo: incluindo o código no HTML


Agora, abra a mesma caixa de pesquisa do passo 1, e pesquise agora por <data:post.body/>
ATENÇÃO: Você poderá encontrar 3 trechos como esse, use o segundo.

Substitua SOMENTE esta tag pelo seguinte código:

<!-- Html Resumo Automático de Postagens-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);</script>
<span class='reslink' style='float:right'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>
</b:if>
<!-- Fim Html Resumo Automático de Postagens-->

*Caso queira substituir o "Leia Mais" por uma imagem, vá para o 3° passo, caso contrário, pule para o 4° passo.

3° Passo: Substituindo o "Leia Mais" por uma imagem.



Substitua o trecho grifado (em amarelo) do código anterior (2° passo) pelo código a seguir:

<span class='reslink' style='float:right'><a expr:href='data:post.url'><img src="URL-DA-SUA-IMAGEM" /></a></span>

Em "URL-DA-SUA-IMAGEM", substitua pela url (link) da imagem que irá ocupar o lugar do link de "Leia Mais".

4° Passo: Salvando



Clique em "Visualizar", caso não encontre nenhum erro, clique em "Salvar".
Para você saber se deu certo ou não, o blog tem que ter pelo menos uma postagem.


Enfim, gente, é isso aí.
O tutorial ficou um pouquinho extenso, porém ele não é de difícil entendimento, e logo logo vocês irão perceber que codificação não é um bicho de 7 cabeças haha
Bem, se foi útil para você, por favor comente! O dedo não vai cair não, HAHA
É isso :)
Beijocas!


Continue lendo ►

28 abril 2015

Tutorial: Salvando um GIF no PS


Oi oi pessoal.
Depois de bastante tempo, eu voltei. 
Bom, é tutorial bem fácil, mas tem  gente que tem dúvidas, então vamos lá.


Primeiro vá em ARQUIVO > SALVAR PARA WEB E DISPOSITIVOS...



Depois abrirá uma janela:


E depois é só clicar em SALVAR, e escolher a pasta desejada.




Continue lendo ►

25 abril 2015

Resources: Modelo para personagem


Cá estou eu novamente trazendo mais modelos para personagens com o mesmo objetivo proposto no outro post, tentar deixar sua Fic mais original com personagens novos. Desta vez fiz questão de encontrar personagens que poderiam virar o adolescente de sua Fic em dois toques (porque vamos combinar que a Palvin é linda mas não aguentamos mais ver estórias dela como uma menina de 16-17 anos -q)...Espero que gostem ^-^

PS: Todas as modelos onde está indicando referência ao site vk.com são ucranianas 








...







Continue lendo ►

21 abril 2015

Tutorial: HTML - Personalizando a seleção de texto.


Hey, gente!
Bem, hoje eu vim com um tutorial BEM diferente do usual, porque ele é pra quem quer dar uma personalizada no blog ^^
Nesse tutorial eu estarei ensinando a personalizar a seleção de texto do blog, mudando a cor.
Ok, let's go!

1. Vá em Modelo > Editar HTML > Clique na caixa de códigos e dê Ctrl + F ou F3, procure por ]]></b:skin>, acima, cole:



::-moz-selection {
background: #COR; /*-- Cor do fundo --*/
color: #COR; /*-- Cor da fonte --*/
}
::selection {
background: #COR;/*-- Cor do fundo --*/
color: #COR; /*-- Cor da fonte --*/
Substitua a palavra "COR" pelo código da cor desejada (você pode procurar o código de cores nesse site aqui), repetindo a mesma ação com a parte debaixo.
Atenção: As cores tem que ser as mesmas, ou seja, se a cor da fonte em "moz-selection" é "FFF", a cor da fonte de "selection" será "FFF" (pra quem não sabe, "FFF" é o código para a cor branca.)

É isso. 
É um tutorial bem fácil de fazer, acredito que todos consigam fazer sem problemas ^^
Qualquer dúvida, por favor me contate na ask ou então pergunte nos comentários mesmo :)
Beijocas!


Continue lendo ►

19 abril 2015

Resources: Pack Enfeites Vintage


Como vocês gostaram do Pack anterior de enfeites (reunido pela Mi, eu e a Queen <3) eu resolvi fazer uma versão 2.0 dele com enfeites diferenciados. Todos são vintage, ou seja, com cartas, flores, anúncios, laços, Tvs, relógios e etc... Espero que gostem :)



*Regrinhas para baixar:

- NÃO REPASSAR -
- COMENTAR SE BAIXAR -

...








Continue lendo ►

18 abril 2015

NOVO LAY + AVISOS!


Olá pessoal!
Bem, espero que gostem desse layout da Miley, foi uma sugestão de vocês, o que me leva a um dos tópicos dessa postagem: as sugestões.
Elas são muitas. Tipo, muitas mesmo. Enfim, eu vou TENTAR fazer de todos, porém existem séries que vocês mandaram que eu nunca assisti, então fica difícil elaborar um layout quando eu não sei do que se "trata" a série. Isso além do fato de que, em alguns casos, não existem bons png's da série, aí fica extremamente difícil fazer algo realmente bom.

O assunto layout me leva a outro ponto: o tutorial de layout. 
Todos estão muito ansiosos por ele, não é mesmo? Então eu preciso contar: ele já está pronto e editado, porém eu estou com uma extrema dificuldade de hospedá-lo no youtube (levaria 4312 minutos, o que dá 3 dias ou mais!), por isso resolvi compactá-lo e hospedá-lo no MediaFire, assim vocês baixam e assistem com calma :)
Ele ainda está fazendo o upload, ok? Quando ficar pronto, vocês serão os primeiros a saber <3

Agora, outro comunicado, dessa vez para as nossas lindas e divas meninas da Staff: eu preciso que vocês me mandem um e-mail, para eu compartilhar com vocês algo que eu fiz especialmente para o WP (por favor, ao me mandarem o e-mail, coloquem no assunto "Wonderful Photoshop - Postagens").

Enfim, é só isso :)
Não é nada muito grave, são só avisos mesmo >.<
Beijocas!



Continue lendo ►

16 abril 2015

ESCOLHA NOSSO PRÓXIMO LAYOUT! [Fixo]




Hello, gente!
Então, ultimamente eu estou com várias ideias de layout na cabeça, MAS não sai nada que preste T-T
Graças a Deus o layout do WD já está pronto a meses, porém o do WP ainda não.
Por isso, eu pensei: quero sugestões!
E nada melhor do que os clientes sugerirem feats, não?
Bem, só tem um porém: para sugerir você tem que seguir o blog.
Afinal, pensem comigo: você segue o blog, acompanha e tudo o mais, e sugeriu um layout. Infelizmente, a sua sugestão não foi a escolhida da vez, contudo a sugestão de outra pessoa que nem segue o blog foi! Como você se sentiria? Se fosse eu, eu me sentiria injustiçada.
Por isso, se você gostaria de nos dar a sua sugestão, eu peço que siga o blog ^^
Enfim, sem mais delongas, aqui está o formulário para as sugestões:


Beijocas!

Continue lendo ►

14 abril 2015

Resource: Modelo para personagem



Oi pessoal, como vão vocês? Eu resolvi fazer esse post justamente porque sei que é um perrengue a hora de escolher o personagem ideal para a fanfic; há diversos já sendo usados e todos queremos que nossas Fics se destaquem dentre as demais. Bom, visando o objetivo de ser original eu escolhi a dedo alguns modelos que não são muito populares que dariam ótimas características e até personagens principais (quem sabe?) para sua Fanfic. Escolhi focando já nos artistas mais usados como: Bárbara Palvin, Selena, Candice, Benson, Shailene, Holland Roden, Amber Heard, Scarlett johansson, Cher Lloyd, Cara Delevingne e muitas outras....Espero que gostem :)
PS: Aceito sugestões para procurar adolescentes ou adultos, homens ou mulheres...etc.






Não se esqueçam de comentar se lhes foi útil e dar sugestão para o próximo post ^-^




Continue lendo ►

13 abril 2015

Resource: Png's de 5 Seconds Of Summer

Oi cupcakes <333
Hoje eu trouxe uns png's dos dlç's do 5SOS u.u
O Luke e o Calum são meus okay? Okay.
Então são uns 6 png's por conta das fotos sem qualidade......
Ah tava me esquecendo e.e
Dedicado para meu amorzinho <33 dlç minha SafeGirl, que ficou me enchendo 
pra fazer esses png's (TE AMO TÁ?).
Então era só isso mesmo.
Regras básicas:
- Nada de repassar
- Comente se pegar
- Use e abuse deles u.u
- Se não fizer isso, eu vou estar de baixo da sua cama, okay?
Beijos
Continue lendo ►

10 abril 2015

Resources: Png's Taylor Swift


Oi cupcakes <3
 E sim Taylor vai ser sempre a minha queen por isso png's dela e nem venha dona Safe u.u
TOMA NA CARA DONA FÊNIX SEI FAZER PNG (ignorem isso u.u)
Foram feitas com muito amor e paixão ao som de Ed Sheeran <33
E dedicado a pessoa mais paciente do mundo, que me ensinou a fazer png's e que me ouviu reclamar Dr. Alê, que é o amor da minha vidinha e do meu core <333
São uns 20 png's se não me engano....
Download
Regrinhas básicas:
- Nada de repassar
- Comente se pegar
- Use e abuse (MENTIRA SÓ USE MESMO SÓ EU ABUSO DELA U.U)
- Se não seguir essas regras dona Pan vai fazer uma visitinha pra vocês >.<
Se vocês quiserem de outra pessoa, minha ask: ask.fm/Nathy_Horlik
Beijos

Continue lendo ►

Resources: Pack Png's Selena Gomez


Oi gente, como vão vocês? Aproveitei que estamos com o WD estampando a Selena para resolver fazer um pack com os MEUS MELHORES (e preferidos) pngs dela. Uma overdose de quase 100 pngs inteiramente dela em um pack....espero realmente que gostem, usem e abusem hehe
 Ah, se quiserem um pack de um tal artista ou série é só pedir que eu faço ^-^
Continue lendo ►

08 abril 2015

Pack: 15 Bases Exclusivas

Heeeeeeeeey peoples, eu sei que faz um tempinho que não venho aqui.. prometi tanta coisa, né? Enfim, hoje eu trouxe um pack muito precioso com minhas 15 bases prediletas feitas por mim, TODAS FEITAS POR MIM então se você baixar comente e se for fazer pedidos com elas deixe os créditos okay? não precisa ser na assinatura em si, apenas informe que foi feita por mim e adaptada por você tá? bom é isso baixem e usem com moderação.. ou não kkk espero que goste, por favor comentem para que eu saiba que gostaram e ai eu faço mais um pack desses ;*



PS: Caso tenha algum erro no download me avisem, mas é totalmente seguro de vírus fiquem tranquilas :D
PS2: TODAS AS BASES ESTÃO EM PSD FORMATO.


Continue lendo ►

07 abril 2015

Tutorial: LockScreen (edição pelo celular).



Hellou gente, meu primeiro post aqui hahaha. Então, sou a SafeGirl e acho que alguns me conhecem do WD. Sou da área de texto, mas atuo em design na parte de LS. Resolvi fazer um tuto (nada de mais) de como criar um você mesmo, mas só que usando um editor pelo celular.
"Nossa, que coisa besta. Todo mundo sabe fazer um LS"
Não, tem gente que não sabe.
(Desculpem, vocês estão bem? Estou tão animada que nem perguntei)
Regrinhas:
Comente se foi útil para você.
Não dê créditos a você mesmo se quiser ensinar a alguém.
Não repasse
Dúvidas, sugestões e esclarecimentos >>> Ask <<<
O tutorial é por foto, então vou tentar deixar tudo bem explicadinho.
Muito bem, eu uso bastante o Piccolage, acho um dos melhores editores para o celular. Eu não sei usar o photoshop como a maioria, então uso mesmo o Piccolage. Ele tem mil e uma funções e você não precisa usar editores para depois mexer nele.
Exemplo do que se pode fazer neste editor:
Resultado de imagem para piccollage
Ok, sem mais delongas vamos ao tutorial.
Primeiro:
Após abrir seu editor, aperte em "criar nova colagem". Então você aperta na tela duas vezes e vai aparecer essas funções:
Você pode escolher se quer colocar uma foto que você já tem ou procurar por uma, caso queira uma que você não possua, aperte em "fotos da internet" e pesquise lá. Caso queira uma foto que já tem, aperte em "adicionar fotos". Eu peguei uma foto que já tenho do Cameron Dallas.
Assim que você adicionar a foto, aperte duas vezes em cima dela e aperte em "copiar". Vai duplicar a foto, você já vai entender o porquê disso.
Aperte em cima de uma das duas fotos que você duplicou e vai aparecer de novo a mesma função da foto acima, então você vai apertar em "editar foto".
Você vai passando as funções até aparecer essa, onde está escrito "foco".
Vai desfocar totalmente a foto e depois vai apertar em "pronto".
Você vai apertar de novo duas vezes na foto, mas na que você desfocou e agora você vai apertar em "definir como fundo".
Vai ficar assim:
Eu estou fazendo aqui o que o aplicativo "InstaSquare" faz, porém manualmente.
Bem, após isso você irá pegar a foto não editada e colocar ela onde quiser. Eu centralizei a minha, porque acho que fica mais bonito, mas você pode fazer de outro jeito.
Caso você tenha centralizado a imagem, mas não sabe se ela ficou bem centralizada mesmo, coloque uma borda nela.
Voltando pros paranauê de novo HSHSHSHS, aperte duas vezes de novo na foto e vai agora apertar em "editar borda". Eu resolvi deixar branco, porque é a cor mais clara e da pra ver bem.
Após ver se está bem centralizada você faz tudo aquilo de novo e tira a borda.
Agora está na hora de escrever algo (não é obrigatório).
Eu escrevi "My little desire", que significa "Meu pequeno desejo".
Usei essa letra aqui:

Aconselho a não colocar cor no plano de fundo do texto, ficaria feio.
Depois de posicionar TUDO, seu Ls estará pronto.
Resultado do meu LS:

Depois é só salvar e pronto.
Espero que gostem, fiz esse tutorial com maior carinho <3
Beijos.




Continue lendo ►
Tecnologia do Blogger.