Explicações Sobre o Design Atual

Desculpem pelas vírgulas, mas eu tenho o hábito de pôr muitas :x . 

Eu sei que já tinha falado sobre o design atual, neste post; mas achei por bem dar umas últimas explicações. 

Bem, a base do tema em si, foi feita pela Débora, do tumblr Things To Help You; eu apenas fiz a edição da mesma, à minha maneira, dando-lhe os devidos créditos pela mesma. Já a parte dos códigos, foi feita pela Camila, do blog Camila's Designs, eu apenas alterei e codifiquei algumas partes. 

Depois de uma longa conversa, a Camila disse que podia manter os códigos dela, desde que creditados, portanto espero que não me acusem de plágio, pois tudo está devidamente explicado e creditado.

Mesmo assim, não penso em deixar o design online, por muito tempo.

Informações

Hey meus visitantes mais que fofos *-*. Tenho a dizer-vos, que desde ontem tenho estado a postar aqui no blog todos os posts que estavam no Designs, Html e Css, e já acabei. Todos os posts estão aqui no blog, e a partir de agora vou começar a postar coisas novas, incluindo um big tutorial de codificação.

Todos os posts que foram postados, foram revistos e melhorados, portanto, peço-vos que dêem uma vista de olhos, na página de tutoriais.

Como sabem, devido à mudança de design, tive que mudar o blog, para conseguir ativar os comentários, visto que o blogger não estava a deixar ativar. Por isso peço-vos que cliquem aqui e sigam novamente o blog, obrigado!

Botão "Voltar ao Topo"

Hey visitantes *-*; neste tutorial vou ensinar como aplicar aquele botão "Voltar ao Topo", no vosso blog. É muito fácil, por isso segue os passos abaixos.

Vai a modelo → editar HTML → procura pela tag “</body>”, usa o CRLT+F. Depois de a encontrares, cola acima dela o seguinte excerto de código:

<script type="text/javascript">

    $(document).ready(function() {

       $('#subir').click(function(){

          $('html, body').animate({scrollTop:0}, 'slow');

      return false;

         });

     });

</script>

Agora procura pela tag "</head>" e mais uma vez cola acima dela o seguinte excerto de código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Agora, no esquema do blog, escolhe uma miniaplicação "HTML/JavaScript", e cola nela o código abaixo.

<a href="#" id="subir">Voltar Ao Topo ↑</a>

Inserir uma Caixa de Texto

Olá, visitantes fofos :3, neste post vou ensinar a colocar uma caixa de texto, igual à que podes ver aqui em baixo.

Caixa de Texto

É super fácil, basta no HTML do teu post, colocares o código abaixo, e onde diz TEXTO, colocares o texto que queres que fique dentro da caixa de texto. Como vês é super fácil.

<style> .caixadetexto {  background: #cdcdcd;  width: 290;  font: 13px Century Gothic;  color: #fff;  text-align: center; } </style> <br />
<div class="caixadetexto">
<br />
TEXTO.
<br />
<br /></div>

Este pequeno tutorial, foi feito por mim, por favor, não reblogues.

Estilo Para Blockquote

Olá meus visitantes :3, hoje deixo-vos aqui um estilo para blockquote feito por mim. Espero que gostem, e que usem nos vossos blogs.

blockquote {
background: #dcdcdc; /*cor de fundo do blockquote*/
padding:10px; /*não mexer*/
border-right: 4px solid #b3ae4f; /*tamanho e cor da borda da direita*/
border-left: 4px solid #b3ae4f; /*tamanho e cor da borda da esquerda*/
text-align: justify; /*alinhamento do texto*/
color:#707070; /*cor do texto*/
font-family: Courier New; /*tipo de letra*/
font-size:100%; /*não mexer*/
line-height:1.6em; /*não mexer*/
}

Observação: Deves colocar o código do blockquote antes desta tag: ]]></b:skin> .

Espero que tenham gostado. Se usarem, dêem os devidos créditos.

Menu "Listinha" Para Tutoriais

Olá pessoal *___*, neste tutorial vou ensinar como fazer um menu "Listinha" para tutoriais, materiais ou até mesmo para categorias e tags.

No painel, vai a design → editar html → aperta F3 e procura por:

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
    }

Depois de teres encontrado o código acima, copia o código seguinte e cola abaixo da chave destacada a negrito no código anterior.

.listinha {
margin-bottom:2px;
background:#f9f9f9;
padding:2px;
border-left: 3px solid #COR_da_BORDA;
font-size:11px;
}
.listinha:hover {
border-left: 3px solid #COR_da_BORDA;
}

Coloca o código hexadecimal de duas cores diferentes nos locais indicados a negrito, uma para a lista em estado normal e a outra para a lista em estado hover. Depois de isso feito, visualiza e guarda o modelo.

Agora para o menu funcionar, copia o código seguinte, e cola-o na página ou na miniaplicação pretendida.

<div class="listinha">
<a href="LINK_AQUI" target="_blank">NOME_do_TUTORIAL</a></div>

Como viste, é muito fácil. Espero que tenhas gostado do tutorial. Se tiveres alguma dúvida, tira-a na aba "Pergunta".

Créditos do Menu: Camila's Designs

Retirar "Mostrar Mensagens Com a Etiqueta (...)"

Olá :3, neste tutorial vou postar um tutorial bem simples e eficaz. Vou ensinar como retirar aquela coisa chata de: "Mostrar Mensagens Com a Etiqueta (...)". 

Para retirares isso, basta seguires os seguintes passos:

No painel, vai a design → editar html → aperta F3 e procura pela tag:

<head>

Abaixo dela, cola o seguinte código:

<style type='text/css'>
.status-msg-wrap{
display:none;
}
.status-msg-body{
display:none;
}
.status-msg-border{
display:none;
}
.status-msg-bg{
display:none;
}
.status-msg-hidden{
display:none;
}
</style>

E pronto como viste é bem fácil *-*; agora visualiza o modelo e se estiver tudo certo, salva  as alterações. Se tiveres alguma dúvida, não hesites em perguntar.

Imagem com a Largura Total do Post

Este tutorial é super simples; alguém me fez um pedido no ask para o fazer, então vou ensinar como deixar as imagens do post com largura total (ocupando toda a largura do post). O resultado é bem bonito.

Vai ao painel do teu blog, clica em design → editar html e usando a ferramenta de busca (Ctrl+F), procura por:

]]<>/b:skin>

Depois de encontrares a tag acima, cola acima dela o seguinte código:

.post img{ border: 0; /* não mexer */
margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não mexer */
padding: 0; /* espaço entre margens e imagem, não mexer */
width:540px; /* tamanho máximo da imagem, pode e deve ser alterado */ }

Substitui o número a negrito, pela largura da tua área de postagens. Se tiveres dúvidas, não hesites em perguntar.

Dividir Conteúdo do Post em Duas Colunas

Olá visitantes *-*; o tutorial de hoje, é super pequeno e fácil, vou ensinar como dividir o conteúdo dos posts em duas colunas. Para fazer isso, basta copiar o código abaixo e inseri-lo no HTML do post.

<div style="float: left; width: 45%">
TEXTO DA COLUNA ESQUERDA
</div>
<div style="float: right; width: 45%">
TEXTO DA COLUNA DIREITA
</div>
<div style="clear: both"></div>

Personalização da Barra de Rolagem

Olá visitantes *-*, neste tutorial vou ensinar a personalizar a barra de rolagem do blog, é muito simples.

No painel, vai a design → editar html → aperta F3 e procura pela tag:

 ]] ></b:skin>

E cola acima dessa tag, o código seguinte.

/*Rolagem da Barra Vertical da Página*/
::-webkit-scrollbar-thumb:vertical {
background: #dcdcdc; /*cor da barrinha que se move*/
border: 1px solid #ccc; /*borda (podes eliminar)*/
height:50px;
}
/*Rolagem da Barra Horizontal da Página*/
::-webkit-scrollbar-thumb:horizontal {
background-color:#dcdcdc;
border: 1px solid #ccc; /*borda (podes eliminar)*/
height:10px;
}
/*Fundo Fixo da Barra de Rolagem*/
::-webkit-scrollbar {
height:10px;
width:15px; /*largura da barra de rolagem*/
background: #00bfff; /*cor da parte fixa*/
border: 1px solid #ccc; /*borda (podes eliminar)*/
}

Finalmente, edita o código acima ao teu gosto e de acordo com os comentários à frente de cada linha de código; e pronto, a tua barra de rolagem está prontinha *___* .

Retirar o Sublinhado dos Links do Blog

Olá, visitantes fofos *-*; neste tutorial vou ensinar a retirar o sublinhado dos links do blog. É muito fácil, e fica muito mais bonito e limpo.

Primeiro, procura pela tag abaixo (usa o CTRL + F).

text-decoration:underline;

Depois basta substituir a parte da tag, que diz "underline", por "none". Ficando assim:

text-decoration:none;

ATENÇÃO: Vais encontrar mais do que uma tag, para substituir, porque há links para as postagens, para a barra lateral e para o rodapé. Por isso, terás de substituir a primeira tag, em três sítios diferentes, pela segunda.

Se tiveres alguma dúvida, não hesites em perguntar, ou na aba "Pergunta", ou mesmo aqui em baixo, pelos comentários.

Classes Coloridas com Efeito Hover

Olá, neste post, vou ensinar como personalizar as classes coloridas (negrito, itálico, sublinhado e rasurado), com efeito hover.

No teu HTML, procura pela tag “]]></b:skin>”, sem aspas. Copia o código abaixo, e cola acima dessa tag.

b { color: #00BFFF; }
i { color: #00BFFF; }
u { border-bottom: 1px  solid #00BFFF; text-decoration:none; }
s, strike { color: #00BFFF; }

b:hover { color: #CCCCCC; }
i:hover { color: #CCCCCC; }
u:hover { border-bottom: 2px solid #CCCCCC; text-decoration:none; }
s, strike:hover { color: #CCCCCC; }

O primeiro grupo de códigos, é referente às classes coloridas em estado normal, e o segundo grupo, é referente às classes coloridas em efeito hover.

Usa os códigos hexadecimais desta tabela de cores e altera os trechos a negrito pelo código que pretendes.

E pronto, como viste, é muito fácil. Se tiveres alguma dúvida, pergunta na aba "Pergunta".

Classes Coloridas

Neste tutorial, vou ensinar como pôr as classes do blog coloridas (negrito, itálico, sublinhado e rasurado). No teu HTML, procura pela tag “]]></b:skin>”, sem aspas. Copia o código abaixo, e cola acima dessa tag.

b { color: #COR; } /*Negrito*/ 
i { color: #COR; } /*Itálico*/ 
u { border-bottom: 1px  solid #COR; text-decoration:none; } /*Sublinhado*/
s, strike { color: #COR; } /*Rasurado*/ 

Pronto, agora é só alterares onde diz COR, pelo código da cor que queres (exemplo: #00BFFF). Clica aqui para acederes à tabela de cores HTML.

Dica: O Que Um Blog Deve Ter na Barra Lateral (SideBar)?

Olá :3, estou a fazer este post, a pedido de um leitor do blog, que me pediu para fazer um tutorial sobre o que um blog deve ter na sidebar (barra lateral).

Ora bem, isso depende muito do assunto do blog, e de que fala o blog. Mas o básico que um blog deve conter na barra lateral (na minha opinião) é:

• um texto de abertura;
• os parceiros/afiliados;
• um gadget de categorias;
• um texto com os créditos;
• um gadget com ícones (com hiperligações) para as redes sociais.

A meu ver, esses são os gadgets mais importantes que a barra lateral do blog, deve ter. Espero que o leitor que me fez o pedido tenha gostado, e  que os outros visitantes também *-*.

Guardar Design e Conteúdo do Blog no Computador

Olá visitantes *-*, neste tutorial-dica vou ensinar como guardar todos os posts do blog e o design (codificação html), no vosso computador. Para caso aconteça alguma coisa com o vosso blog, não perderem tudo o que tinham lá. 

GUARDAR PARTE DO DESIGN (CODIFICAÇÃO HTML)

Ora bem, para guardar a parte do HTML do blog, basta aceder a Modelo > Efetuar Cópia de Segurança/Restaurar > Transferir Modelo Completo. E pronto, a parte do HTML está salva no computador.

GUARDAR OS POSTS DO BLOG

Para guardar o conteúdo do blog, basta ir a Definições > Outros > Exportar Blogue. Desta vez o que ficou salvo no teu computador, foi todo o conteúdo do teu blog.

DICA: Deves fazer download do HTML e dos POSTS do blog, pelo menos uma vez por mês, para não acontecer nenhum desastre e perderes tudo o que tinhas lá.

Dicas Para Fazer um Design

Olá *-*, desta vez estou a publicar um post-dica, com algumas dicas para fazerem o vosso design.

DESIGN

O design do blog é um convite (a voltar a visitar o blog), para os visitantes do blog. Nenhum visitante vai voltar a visitar um blog, se o mesmo tiver todo "desarrumado" e um design mau. Se o visitante vir que o blog tem um bom template (sem plágio) ficará de certeza muito interessado no blog. 

PLÁGIO

Nunca plagies o design doutro blog. Pois se um visitante, entrar no teu blog e vir que o design está igual ao de outro (que por acaso ele também visita), nunca mais se vai interessar pelo teu blog. Lembra-te: Inspiração é diferente de Cópia. E se te inspirares em algum template, dá sempre os créditos donde retiras-te as ideias.

Mapeamento de Banners / Imagens no Image Maps

Olá :D , neste tutorial vou ensinar a mapear um banner (como um dos banners antigos aqui do blog) ou uma imagem.

Primeiro, terás de fazer o teu banner (ou a imagem que queres mapear), num editor de imagens (por exemplo: Photoshop, Photoscape, Photo Filtre Studio...).
Depois de teres o banner pronto, tens de o hospedar no site de mapeamento.
Entra neste site: www.image-maps.com, e de seguida faz o upload do teu banner e clica em START MAPPING YOUR IMAGE.
Depois mapeias o teu banner, usando as ferramentas da barra lateral. Finalmente clica em GET YOUR CODE e depois em HTML CODE.
E pronto, depois é só colares o código HTML, numa miniaplicação HTML/JAVASCRIPT, e está feito ;).

Este tutorial foi feito por mim, por favor não reblogues.

Personalizar o Rodapé Abaixo do Título dos Posts

Olá *___*, agora vou ensinar como personalizar o rodapé abaixo do título das postagens. É bem fácil, e fica bem organizado. Clica aqui, para veres o resultado da personalização. Pronto *-*, vamos então ao tutorial.

No painel, vai a design → editar html → aperta F3 e procura pela seguinte tag:

]]>

Depois de a encontrares, cola antes dessa tag, o código abaixo.

.post-header, .dados {
   margin: 0; /* não alteres */
   padding: 1px 0 1px 12px; /* não alteres */
   border-top: 1px dashed #DCDCDC; /* borda acima dos dados */
   border-bottom: 1px dashed #DCDCDC; /* borda abaixo dos dados */
   text-align: center; /* alinhamento centralizado dos dados */
   text-transform: uppercase; /* dados em letra maiúscula */
}

Feito isso, altera o código ao teu gosto, de acordo com os comentários à frente de cada linha de código. Como vês, é super fácil :) . Se tiveres alguma dúvida, não hesites em perguntar. 

Script para Redirecionamento de Página

Olá, neste pequeno tutorial vou ensinar uma coisa bem fácil, para as pessoas que mudarem o link do blog não perderem os seus visitantes. Basta usarem um script de redirecionamento de página.

O script é bem fácil, basta colocar depois de <head> o código abaixo.

<script>
location.href="link_do_novo_blog";
</script>

Pronto, agora é só colocar no sítio destacado o link do novo blog e já está. Muito fácil *-*.

Colocar Banner Por Cima da Área das Postagens

Olá pessoal *-*, agora vou ensinar, como colocar um banner (ou uma imagem), por cima da área das postagens, como tenho aqui no blog (imagem).

Antes de começares as edições no html do blog, deves primeiro deves fazer o teu banner (de preferência da largura da tua área de postagens; e da altura que quiseres).

Depois de teres o banner feito, vamos supor que a largura dele é de 500px e a altura é de 200px.

Primeiro, temos de descer a tua área de postagens 200px, visto que a altura que definimos para o banner foi de 200px. Para fazeres isso segue o tutorial abaixo.

No painel, vai a design → editar html → aperta F3 e procura pela seguinte tag:

.main-inner .column-center-outer {

Depois de encontrares a tag acima, cola abaixo dela o seguinte código:

margin-top: 200px;

O valor a negrito, será o valor da ALTURA do teu banner. Depois do passo acima feito, procura pela tag seguinte:

<div class='columns fauxcolumns'>

E abaixo dela, cola o seguinte código.
<center><a href='/'><img src='LINK_DO_BANNER' style='margin-top: -500px; margin-bottom: -200px;'/></a></center>

Mais uma vez, terás de alterar as medidas que estão no código, de acordo com as medidas do teu banner.

Pronto *-*, espero que tenhas entendido, caso contrário, manda uma ask (na aba: pergunta).

Este tutorial foi feito por mim, não reblogues.