tag:blogger.com,1999:blog-2257808806302324332024-03-21T15:53:56.809-07:00Seja criativoMichelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.comBlogger17125tag:blogger.com,1999:blog-225780880630232433.post-53468970467149793072016-09-18T09:27:00.000-07:002016-09-18T09:29:25.887-07:00Fotos do Instagram com Instafeed<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3c92MuTALvcC9J-cBfByl8rKiK3VQLz14mEeGTd-EEul7Cq2Ee-llIC807G_COSj-9n7wh7ctvw2U4jzv7amoPpFhfJvc04zFdwkmQaG3uC2-Fw3GvGfiJX2xCmv9qDUqVQdRrSpAiFgr/s1600/post.png" /></div>
<br />
Resolvi juntar todas as informações em um único post, pois quando comecei a usar o <b>Instafeed</b> no blog, não encontrei um site que explicasse tudo. Alguns explicavam apenas como gerar o <i>token</i> e em outros encontrei o <i>javascript</i> necessário para criar o <i>widget</i> com as fotos do <b>Instagram</b>. Então para facilitar, todas as informações ficaram em um único post para vocês.<br />
<br />
<h4>
1. Criando o aplicativo</h4>
Acesse a página <a href="https://www.instagram.com/developer/" target="_blank">instagram/developer</a> e faça o login com os dados da sua conta no Instagram. No primeiro acesso, irá solicitar um cadastro para a criação da conta desenvolvedor. Confirme as informações e na tela seguinte clique no botão <b>Register a New Client</b>.<br />
<br />
Em seguida, irá abrir a tela para cadastrar o seu aplicativo. Você deve preencher com as informações na aba <i>Details</i>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-OJe40l1fCy70vZv_8FjTHGLPkRmbCULoOfXqneslcONWuICyJvv-9Ihc7BXOek4xEOIINWlo27cTvBIKGKIpPJKJ2kthTV42wgltQuPu1c21la71HhSF6S3BYQWZ4YM4WajXb1wHh8Ck/s1600/register.png" /></div>
<br />
<br />
Não clique para registrar ainda. Acesse a aba <i>Security</i> e desmarque a opção <b>Disable implicit OAuth</b>. Feito isso, clique em <b>Register</b> no final da página.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjeyxo4K3H9hxWtBoLgHTXIbRFO9UF6GSrQFVkCpcPK1YZubzEEp35cD3hCNVeUXl1C72qYMzgNouvP5PXxoA5SUv6Ig7Z2jj75CsPqJZ7qyX2ouSyHjvRvhtEUQ_3_jvt9OzhvqWChrMu/s1600/register_security.png" /></div>
<br />
Na tela seguinte irá apresentar o <b>client id</b> necessário para gerar o <b>access token</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9o7Xu9PDO9lkHYmRSbYsvMUnjV7PTCQcsiDzTeuNMjk0gLD9qJjms5doYiQIGV1Lhof4hyWFJiCQxxU80KsmqudcNU5QBoagnpqP-QecqWDuPHmenzvhL3ZwDuiGozODGfwRfSd9HB78Y/s1600/register_complety.png" /></div>
<br />
<h4>
2. Criando o Access Token</h4>
Para criar o <b>access token</b> utilize a URL abaixo. Você deve substituir o YOUR_CLIENT_ID pelo código <b>client id</b> gerado nos passos anteriores.<br />
<br />
<textarea class="codigo">https://instagram.com/oauth/authorize/?client_id=YOUR_CLIENT_ID&redirect_uri=http://localhost&response_type=token</textarea><br />
<br />
Feito isso, cole essa URL no seu navegador. Ao acessar o este link, irá abrir a página do Instagram solicitando a autorização para o aplicativo.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPh_zm7jNi2Edv7vNtQPrLHZNtnWCodYiuMcsrJNxTYNMPafRtQ1oUG1Shra6TJWXy-Vn793RqANYNEzxtHER_MtrLeCZemLdgRR6dV7w-B04RpUPYTGgyxMP1awSlkgeCWMzUIIB6_Wt/s1600/autorizacao.png" /></div>
<br />
Após esta tela, você será direcionado para outra página. O conteúdo dela não é importante, o que você precisa estará na URL da página. Tudo o que aparecer após "<b>access_token=</b>" é o que você precisa guardar.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqU4X13AxxiOrIPaME7rmvceZWQ5HyPx4W9DkEoeFZ9SUNRtLI7T60FSuUEQRib0HQrvTT08JttEAEhRAwUndVcYVJblcUp_8NuWiuPC-13pKLGhiiwJGhyphenhyphen37hr5yh8qrfA5rfk8khnBgY/s1600/token.png" /></div>
<br />
<h4>
3. Criar gadget com as imagens do Instagram</h4>
Antes de utilizar o código que irá mostrar as imagens do seu perfil no <b>Instagram</b>, você deve localizar o userId do seu perfil. Portanto, <a href="https://smashballoon.com/instagram-feed/find-instagram-user-id/" target="_blank">acesse este link</a> e informe o seu <i>User</i>.<br />
<br />
Em seguida, clique em <b>Get Instagram User Id</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHyJitRKqVUny1FrVsBI37Jr3e9ObRW-lSX5hDNa6HoKlKA3jq3h999EuOdiNwVviJzVisdkIOPWr3BY0wZrK-C8CD4vXzlGG59WaO-oI19IqiBOU7RiD3EiYL1iH30edNsH55bHUcGamf/s1600/instaid.png" /></div>
<br />
<br />
Agora, para adicionar um gadget com as fotos no seu blog, basta utilizar o código abaixo. Você pode testar o código com os seus dados <a href="http://codepen.io/michellymelo/pen/wzzBKP" target="_blank">acessando esta página aqui</a>.<br />
<br />
<div class="codepen" data-default-tab="html,result" data-embed-version="2" data-height="265" data-slug-hash="wzzBKP" data-theme-id="light" data-user="michellymelo">
See the Pen <a href="http://codepen.io/michellymelo/pen/wzzBKP/">Instafeed</a> by Michelly Melo (<a href="http://codepen.io/michellymelo">@michellymelo</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
Entenda o que você deve alterar no código acima:<br />
<br />
<b>userId</b>: É o ID que você gerou no passo número 3.<br />
<b>clientId</b>: É o ID gerado ao criar o aplicativo na página do Instagram (passo 1).<br />
<b>accessToken</b>: Follow this post to get your Access Token (passo 2).<br />
<b>limit</b>: É o limite de imagens que irão aparecer no seu gadget. O Instagram tem um limite de 20 imagens.<br />
<br />
<h4>
4.Incluir o código no seu blog (blogger)</h4>
Acesse a guia Modelo do seu blog, procure pela linha ]]></b:skin> e ANTES dela inclua o código o código CSS que consta no 3º passo.<br />
<br />
Já na guia Layout, adicione o gadget HTML/JAVSCRIPT e cole o código editado da guia HTML do 3º passo.<br />
<br />
Feito isso, basta salvar as alterações.Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com0tag:blogger.com,1999:blog-225780880630232433.post-63568337134481873352016-09-04T12:47:00.001-07:002016-09-04T12:47:29.504-07:00Vamos melhorar?<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ0EQDtpmXES4Nik-grRg5ZG2ZNZ4dKhgZhHWSYxY25bjAQp5lk-NMUNZnjAYQZqTvnk-mcwOOSi6-hawU5bf_yGHSYCSlzx1o7R2LOp1ROCPbLzC7pWzIggrkzvf9d0mqYVSXeYE6WrXn/s1600/post.png" /></div>
<br />
Olá!<br />
<br />
Cada vez mais recebo e-mails de blogueiros pedindo ajuda com código do blog, então depois de meses sem atualizar os tutoriais, o <b>Seja Criativo</b> irá voltar! \o/<br />
<br />
Mas para que eu possa preparar tutoriais úteis para vocês, preciso de uma ajudinha: respondam ao formulário abaixo com o máximo de informações possível. São poucas perguntas e rápido de responder, então sem preguiça, <i>ok</i>? <i>:P</i><br />
<br />
<iframe class="" form="" frameborder="0" height="740" marginheight="0" marginwidth="0" src="https://docs.google.com/forms/d/125IwIT34I-CG6DWpPhOulXvTk_h7SkDCW9dKteR91p8/viewform?embedded=true" width="750">Carregando…</iframe>Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com0tag:blogger.com,1999:blog-225780880630232433.post-51065928427922314652015-10-10T08:11:00.000-07:002015-10-14T16:00:55.674-07:00Trocar texto do marcador da postagem por imagem<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRF8BGNzd0_1AJ8Suh-1dMIQAmlBhazEofla6VJor_vdX97uBwJT88u5itgf0ySuepEGlK9vggOT9KW7uLTD5OGSbJjkYbF6XgGYJXgiWwBgjg1C-6j-fgnCjxsFAgKihNpPUBAbN3nCGr/s1600/post.png" /></div>
<br />
O tutorial de hoje foi escolhido por leitores do Seja Criativo. Há algum tempo liberei o link de um formulário pedindo dicas de tutoriais que deveriam ser postados aqui. Recebi vários pedidos e todos serão divulgados em breve. Então vamos lá!<br />
<br />
A ideia hoje é explicar como você pode personalizar os marcadores do seu blog com imagens e apesar de ser um tutorial simples, requer um tiquinho de atenção.<br />
<br />
Como exemplo você pode conferir o <a href="http://www.dezoitoprimaveras.com.br/" target="_blank">Dezoito Primaveras</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvpVVZs8LnMu7RiYVQUe_RnFu5X2709nlrxcT9qcmWquL_q_spjpzc5TFP3v6VN4nmN0mZKvGV_koh1iZnZuf8hmgudo3nKdBxT8vmbpqfuCzI0WgxKGUUqQ5SVkhVh6Ln-0ucYxUc1wS/s1600/modelo.png" /></div>
<br />
<h4>
Primeiro passo: Adicionar o CSS</h4>
Acesse o menu Modelo>Editar HTML e localize a linha <b>]]></b:skin></b>, <u>acima</u> dela adicione o código:<br />
<textarea>.icone-marcadores {
position:absolute;
left:-50px;
top:5px;
display:block;
}
.icone-marcadores img {
width:35px; // largura da imagem
height:35px; // altura da imagem
}
</textarea><br />
<br />
<h4>
Segundo passo: Adicionar o HTML</h4>
Procure pela linha <b><div class='post-footer-line post-footer-line-1'></b> e adicione <u>abaixo</u> o seguinte código:<br />
<textarea><b:loop values="data:post.labels" var="label"> <a expr:href="data:label.url" href="https://www.blogger.com/null" rel="tag"> <script type="text/javascript">lebel_logo("<data:label.name/>");</script> </a> </b:loop>
</textarea>
<br />
<h4>
Terceiro passo: Adicionar o Javascript</h4>
Acesse o menu Modelo>Editar HTML e localize a linha <b></head></b>, feito isso inclua o código abaixo <u>acima</u> dela.<br />
<textarea><script type='text/javascript'> function lebel_logo(etiqueta)
{
imagenes = new Array();
imagenes[1] = "<img src='LINK-DA-SUA-IMAGEM-1' title='IMAGEM 1'/>"
imagenes[2] = "<img src='LINK-DA-SUA-IMAGEM-2' title='IMAGEM 2'/>"
imagenes[3] = "<img src='LINK-DA-SUA-IMAGEM-3' title='IMAGEM 3'/>"
imagenes[4] = "<img src='LINK-DA-SUA-IMAGEM-4' title='IMAGEM 4'/>"
imagenes[5] = "<img src='LINK-DA-SUA-IMAGEM-5' title='IMAGEM 5'/>"
if (etiqueta == "IMAGEM 1") {document.write(imagenes[1]);}
if (etiqueta == "IMAGEM 2") {document.write(imagenes[2]);}
if (etiqueta == "IMAGEM 3") {document.write(imagenes[3]);}
if (etiqueta == "IMAGEM 4") {document.write(imagenes[4]);}
if (etiqueta == "IMAGEM 5") {document.write(imagenes[5]);}
}
</script>
</textarea>
<br />
<br />
<b>Entenda o que você está adicionando ao seu código</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC9KNMglCb5fiQFjRhnOn3ZmsOVycBZvHwccfB9xg13fjHAAO9524iAAlfiJBZvkjd12f6_JD-NaojwtQEUWAQ-wFBBWlDAQKKiqM15JP5YWnYynDSMB1mwTfeRWlbWqRZnM0OyYJf_IBL/s1600/img.png" /></div>
<br />
O código que você adicionou no seu blog pode ser melhor visualizado na imagem acima. Para que você entenda, fiz algumas marcações importantes.<br />
<br />
<b>Obs. 1.</b> As cores identificam quais linhas do código estão relacionadas.<br />
<b>Obs. 2.</b> Se você quiser adicionar outro marcador você deve:<br />
<br />
1. Adicionar a linha abaixo <u>antes</u> da primeira linha com conteúdo"if (etiqueta...":<br />
<i>imagenes[X] = "<img src='LINK-DA-SUA-IMAGEM-1' title='IMAGEM X'/>"</i><br />
<br />
2. Adicionar <u>antes</u> das linhas 14 e 15 o seguinte código:<br />
<i>if (etiqueta == "IMAGEM X") {document.write(imagenes[X]);}</i><br />
<br />
Lembrando que o "X" é o número que deve ser utilizando nos dois códigos. Agora é só salvar e visualizar o resultado! Qualquer dúvida é só deixar o comentário na postagem ou acessar a página de contato do blog.Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com3tag:blogger.com,1999:blog-225780880630232433.post-7991149498244971412015-10-07T16:47:00.000-07:002015-10-11T11:12:04.151-07:00Mostrar e esconder conteúdo dentro do post<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYwcvaU8MmicMwG45-5HldnoUwYIuQztLuTTxyrdPXod034BFBEkB65bMDiMaNo9gqQMsk4M_r4U54e_y0soivhcAAWdpEr594I0g40Wr9iT9vt9SJwJlgxycSr_1MqmqptNE1MjsC6AmY/s1600/post.png" /></div>
<br />
Um dos efeitos que eu mais gosto de usar na postagem é o <b>jQuery Toggle</b>. Ele permite que você "esconda" determinadas parte da sua postagem ou até mesmo conteúdos da sidebar com um código bem simples e rápido de implementar.<br />
<br />
Apesar do nome diferente, é um efeito bastante conhecido. Um exemplo de blog que utiliza é o <i><a href="http://madlyluv.com/" target="_blank">Madly Luv</a></i>, a Aninha usa em vários tipos de postagens para deixar escondido um conteúdo mais extenso e detalhes sobre algum assunto.<br />
<br />
Veja o exemplo:<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1mlUT-H1dAPPCdpR8oynJ5ppksM4ScYWJau95VhRvwAH_AOWrX1uJz_TcgZr03UbAiz8QpldAsCrRNDF5_QWY10R-KBEIbTMSRN-0-WaWLYp4R8sKosbLunw7gGVuByaXbYqq67XTABPs/s1600/exemplo.png" /></div>
<br />
<b>IMPORTANTE!</b><br />
<br />
Antes de começar você precisa adicionar no seu código a biblioteca <b>jQuery </b>versão 1.8, que esta sendo carregada direto da API do Google. Se você já tem adicionado no seu blog pode pular esta parte.<br />
<br />
Vá até o menu <i>Modelo>Editar HTML</i>, adicione o código <u>antes</u> da linha <b></head></b>.<br />
<br />
<textarea><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script></textarea><br />
<h4>
Primeiro passo: Adicionar o Javascript</h4>
Para adicionar o script que irá executar a função de esconder e revelar o conteúdo, vá até o menu <i>Modelo>Editar HTML</i> e localize a linha: <b></head></b>. Logo <u>acima</u> adicione o seguinte código:<br />
<br />
<textarea><!-- Script JQuery Toggle -->
<script type='text/javascript'>
$(document).ready(function()
{
$(".mostrar").hide();
$(".ocultar").click(function()
{
$(this).next(".mostrar").slideToggle(600);
});
});
</script>
<!-- Fim Script JQuery Toggle -->
</textarea><br />
<br />
<h4>
Segundo passo: Adicionar o CSS</h4>
Para adicionar o CSS, vá até o menu <i>Modelo>Editar HTML</i> e localize a linha: <b>]]></b:skin></b>. Logo <u>acima</u> adicione o seguinte código:<br />
<br />
<textarea>.ocultar {
cursor:pointer;
font-weight:bold;
font-size:14px; /* edite tamanho da fonte */
color:#3D81EE; /* edite cor do link */
padding:10px;
margin:0 auto;
}
.mostrar {
padding: 10px;
}
</textarea><br />
<br />
<h4>
Terceiro passo: Adicionar o HTML</h4>
Esta parte deve ser adicionada no local onde você quer utilizar, por exemplo: se for dentro da sua postagem, para adicionar o código, você deve criar a postagem e habilitar a opção: "HTML". Em seguida, localize a posição do post onde deseja utilizar e insira o código abaixo:<br />
<br />
<textarea><div class='ocultar'>
>> Mostar / Ocultar conteúdo << </div>
<div class='mostrar'>
Insira aqui o conteúdo que deve ficar escondido.
</div>
</textarea><br />
<br />
Obs.: Se você quiser adicionar o efeito na sidebar, basta ir em <i>Layout>Adicionar Gadget>HTML/Javascript</i> e adicionar o código do terceiro passo. Vale lembrar que o primeiro e segundo passo você deve seguir normalmente, mesmo que você inclua o efeito na sidebar.<br />
<br />
Fácil, não é? Separei alguns link úteis para quem quiser entender mais sobre este script.<br />
<ul>
<li><a href="http://www.mundoblogger.com.br/2009/11/efeito-revelaresconder-conteudo-no-post.html" target="_blank">Efeito Revelar/Esconder Conteúdo do Post</a></li>
<li><a href="http://www.maujor.com/blog/2009/06/22/efeito-jquery-toggle-para-revelar-e-esconder/" target="_blank">Efeito jQuery Toggle para revelar e esconder</a></li>
<li><a href="http://quebrandoacabeca.com/botao-exibir-esconder-div-com-jquery/" target="_blank">Botão Exibir/Esconder Div com jQuery</a></li>
<li><a href="https://www.oficinadanet.com.br/artigo/javascript/efeito-toggle-com-css-e-jquery" target="_blank">Efeito Toggle com CSS e jQuery</a></li>
<li><a href="http://headbody.com.br/mostrar-esconder-div-efeito-toggle-jquer/" target="_blank">Mostrar e esconder div com efeito Toggle jQuery</a></li>
</ul>
Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com2tag:blogger.com,1999:blog-225780880630232433.post-69323985443565782522015-09-23T17:03:00.000-07:002015-10-11T10:44:56.634-07:00Caixa de busca personalizada<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_o3Phyo3qgBxNwwcdzk8VOmyV23B2WNyrgSrJIucBr05SUuYaLRH9dznuLnEt40s1JGZPQI3xJSUwe4L4VjNqcPY5aK3fssae5sENC4n8_S4Kc7fy97HIwCusQFh8tQtPAYSkGO-7rrde/s1600/post.png" /></div>
<br />
Um dos últimos comentários que recebi aqui no <i>Seja Criativo</i>, veio com várias dicas de tutoriais simples e importantes. Então vou aproveitar esta semana para postar alguns deles.<br />
<br />
O primeiro tutorial que eu escolhi foi o da <b>caixa busca personalizada</b>. É um código simples, mas que sempre traz aquela ideia do copia e cola que a grande maioria dos blogueiros estão acostumados. Muitos tutoriais não explicam o código e acaba que você utiliza sem nem saber o que está copiando. Então vou além da explicação, vou deixar no finalzinho do post alguns link bacanas para quem quer ideias para personalizar a caixa de busca.<br />
<br />
Vamos lá!<br />
<br />
<b>Obs.:</b> Lembrando que todos os tutoriais disponibilizados aqui utilizam o <b>Template Minima</b>, para baixar basta acessar o link (<a href="http://www.4shared.com/file/vvgT08Veba/Template_Minima.html" target="_blank">download</a>).<br />
<br />
<b>Obs. 2:</b> Façam o backup do Template antes para evitar problemas futuros.<br />
<br />
<h4>
Primeiro passo: Entendo a estrutura</h4>
Antes de pensar na aparência da caixa de busca, é importante conhecer o código que você está utilizando. A estrutura é basicamente esta:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRjgPcr6FEISNzDF4Aku4VjnPDut4irJJ7XQF57Xr_tnxqo0NteL_WVzlQkQ45UOfSuJ_Cjthesx4XWcUYLBsLlj4mydw-A1SPmjX0qyzVuPcxiAKkS08PhzdPn1k4LvbwKhWa0cBAr_R/s1600/busca.png" /></div>
<br />
<h4>
Segundo passo: O HTML</h4>
<textarea class="codigo"><div id='busca'>
<form action="/search" class="search" method="get">
<input id="txtbusca" name="q" type="text" value="" placeholder="Digite o que você procura" />
<input id="btnBusca" type="submit" value="Ok"/>
</form>
</div>
</textarea>
<br />
<br />
<h4>
Terceiro passo: O CSS</h4>
<textarea class="codigo"><style type="text/css">
#busca {
margin:0 auto;
padding:0;
}
#txtbusca {
border:0px solid #222;
background:#EEE;
width:260px;
height:23px;
margin:0 auto;
padding:5px 0 5px 5px;
float:left; // posição do campo
line-height:36px; // altura da linha
}
#btnBusca {
background:#00cccc;
position:relative;
border:0px solid #222;
color:#FFF;
margin:0 auto;
padding:10px;
border:0 none;
font-size:11px;
font-weight:bold;
text-transform:uppercase;
}
#btnBusca:hover {
background:#99cccc;
}<style>
</textarea>
<br />
E o resultado final:<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0aeej70VGVyFrx12aAF0BjVmLW04jfaHtUDgUv_WayMH_fuHbvg22dEA3gSQlEk0dR_65XIpw1X946OW0k4QpjLvuY6BD_n4U3mumhubfdUMSmKtfJtFLiK_2yD0rFmhZUJq2V1Rcy0E/s1600/cxbsc.png" /></div>
<br />
<b>Obs. 3:</b> Lembrando que o CSS você pode usar e abusar da sua criatividade! :)
<br />
<br />
<h4>
Quarto passo: Adicionando ao seu blog</h4>
<ol>
<li>Antes de mais nada, faça login em sua conta e acesse o painel do blogger;</li>
<li>Clique no menu "<i>Layout</i>" > "<i>Adicionar um Gadget</i>";</li>
<li>Adicione o gadget "<i>HTML/JavaScript</i>";</li>
<li>Cole as duas partes do código informado acima;</li>
<li>Salve e organize o gadget onde desejar.</li>
</ol>
<br />
Prontinho! Código simples e fácil de editar. Vou deixar aqui embaixo, alguns links para quem quiser se aventurar um pouquinho mais. Beijos!<br />
<br />
<a href="http://www.linhadecodigo.com.br/artigo/3517/desenvolvendo-layouts-para-caixas-de-pesquisa-em-paginas-web.aspx" target="_blank">Desenvolvendo layouts para caixas de pesquisa em páginas Web</a>.<br />
<a href="http://www.bloggerenciado.com.br/2015/01/criar-caixa-de-pesquisa-para-blog.html" target="_blank">Criar caixa de pesquisa para blog</a>.<br />
<a href="http://www.elainegaspareto.com/2013/11/caixa-de-pesquisa-para-blog.html" target="_blank">Caixa de pesquisa para blog</a>.<br />
<br />Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com2tag:blogger.com,1999:blog-225780880630232433.post-85763823593756591332015-07-12T07:20:00.000-07:002015-10-10T05:30:51.957-07:00Template Free #2<img class="alignnone" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMmZyt5UiKGhJJmiZ84h70iJFGbdRG5pTL3RU5nIDGSBkDLGFM_nbU00lJUQO5gsN-3mo9vGMlayhfCbxyuD1txxrd3oP0YwB6wyfOr3awPY2KLrqdJLWyUhPHhK0oZ2C9IBhxjSw2UGa/s1600/logo.png" /><br />
<br />
Olá, olá!<br />
<br />
Depois de tantos pedidos, aqui estamos mais uma vez. Faz um bom tempo que estou prometendo disponibilizar outro Template Free para vocês, mas acabou que eu me enrolei com vários outros trabalhos e deixei o Template de lado. Desta vez resolvi criar um layout simples, clean e o mais próximo de ser responsivo que eu consegui fazer, rs.<br />
<br />
Se vocês tiverem qualquer problema com a instalação, por favor entre em contato através da página de contatos do blog ou mande um e-mail para <i>contato@dezoitoprimaveras.com.br</i>.<br />
<br />
<img class="alignnone" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBtZmJpNHoABotKPjfG2r_2SsXePovh-V_8xHryDA1UzvtpvaMGGspiVZp5dXi3AEnEN4_SR8KGIdqYhoZZSGYUS5VBXlUQoFtjYVY8cgWETENqoAPuPW6Mw9ahfZR49aMd3KsmvTvLXtP/s1600/img.png" /><br />
<br />
<div style="text-align: center;">
<b><a href="http://18primaveras-teste.blogspot.com.br/" target="_blank">Visualizar online</a> | <a href="https://www.dropbox.com/s/o80c4iudhv4tu0x/Layout_Free_Dezoito_Primaveras.zip" target="_blank">Download</a></b></div>
Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com7tag:blogger.com,1999:blog-225780880630232433.post-76406242177129146452015-05-01T14:24:00.000-07:002015-10-11T11:00:35.750-07:00Menu simples para usar no seu blog<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6r08dLBIwYR-HFFZgByDY7SychVyNlNvKZpCBQTwnG7kLpaXRuLZvkCkR82L-jzEc3ShtY-iugzjCWMOsWZjVjP5QedfmpYoo9L29HOb0aYyY6MfmPxW18m29R90eyR3LbNClbNRyzzy/s1600/post.png" /></div>
<br />
<i>Olá!</i><br />
<br />
Faz um bom tempo desde o último tutorial, mas fico muito feliz em sempre receber comentários/e-mails sobre o Seja Criativo e também vários pedidos de tutoriais. Estou tentando terminar de preparar todos os que vocês pedira. então teremos alguns atualizações por aqui.<br />
<br />
O tutorial de hoje é bem simples, porém algumas pessoas não conhecem a estrutura e para facilitar preferem buscar menus prontos na Web, o que nem sempre nos deixa personalizar como queremos de verdade. Como já disse: <i>é simples e fácil de aprender!</i><br />
<br />
<h4>
Primeiro: A estrutura</h4>
A forma mais comum de criar um menu é usando listas não ordenadas (ul, li). Para quem não conhece sobre listas, o <a href="http://www.maujor.com/tutorial/joe/cssjoe5.php" target="_blank">site Maujor</a> já fez um tutorial fácil e curtinho!<br />
<br />
Enfim.<br />
<br />
O HTML você poderá escolher onde vai ser acrescentado. Tudo depende de onde você quer que o menu apareça, basta escolher o local após <b><body></b>.<br />
<br />
<textarea class="post-codigo"><div class="menu">
<ul class="menu-list">
<li><a href="seu-link-fica-aqui">Home</a></li>
<li><a href="seu-link-fica-aqui">Link 1</a></li>
<li><a href="seu-link-fica-aqui">Link 2</a></li>
<li><a href="seu-link-fica-aqui">Link 3</a></li>
<li><a href="seu-link-fica-aqui">Link 4</a></li>
</ul>
</div>
</textarea>
<br />
<br />
<h4>
Segundo: O CSS</h4>
Esta parte deve ser acrescentada <b>antes</b> da linhas <b>]]></b:skin></b>.<br />
<br />
<textarea class="post-codigo">/* Fundo do menu e tudo o que estará dentro dele */
.menu {
background: #EEE;
width: 480px;
height: 34px;
}
/* Remove as bolinhas do lado das listas */
.menu .menu-list {
list-style: none;
}
/* Configuração de todos dos links do menu */
.menu a {
color: #333;
text-decoration: none;
display: block;
cursor: pointer;
text-transform: uppercase;
font-size: 11px;
}
/* Faz os
<li>s ficarem na horizontal. Ou seja: o seu menu ficará na horizontal. */
.menu > .menu-list > li {
float: left;
position: relative;
}
/* Configuração apenas dos links do menu */
.menu > .menu-list > li > a {
padding: 10px;
margin: 0 10px;
background: #EEE;
}
/* Configura o fundo do menu principal quando passa o mouse */
.menu > .menu-list > li:hover a {
background: #CCC;
}
</textarea><br />
<br />
Após adicionar o CSS, o menu deverá ficar desta forma:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTriuT7DhOG8FnN9av3WLA8FbCW2uNnhVibR3RNXxmk5BSqXuT-YvZQfQXoQMbJ5HwdAcUIGBFwtw5LXr4p52hyphenhyphenzWxdk50RbMRpSVHoDnvkJbFN59aOrEibBozBuqb91qHWKnkmb4P2tJ8/s1600/menu.png" /></div>
<br />
E quem quiser conferir, separei alguns links que você pode usar como base para personalizar o seu menu:<br />
<br />
<br />
<ul>
<li><a href="http://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3.aspx" target="_blank">Menu em CSS - Menu dropdown horizontal com HTML5 e CSS3</a></li>
<li><a href="http://www.adam-bray.com/blog/91/easy-html-5-css-3-navigation-menu/" target="_blank">Easy HTML 5 & CSS 3 Navigation Menu</a></li>
<li><a href="http://www.siteparaempresas.com.br/blog/?p=4354" target="_blank">46 Menus suspensos criativos e livres em HTML5 e CSS3</a></li>
<li><a href="http://css3menu.com/cloud-ice-blue.html" target="_blank">Cloud Ice Blue Demo - HTML5 menu example</a></li>
</ul>
<br />
<br />
Fácil não é?<br />
<br />
Se você tiver qualquer dúvida ou quiser outro tutorial aqui no <i>Seja Criativo</i>, basta deixar um comentário ou entrar na <a href="http://blogsejacriativo.blogspot.com.br/p/contato.html" target="_blank">página de contato do blog</a>.<br />
<br />Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com7tag:blogger.com,1999:blog-225780880630232433.post-68105368811671487842015-02-14T11:50:00.000-08:002015-10-11T10:49:02.645-07:00Como usar o botão de compartilhar personalizado no blogger?<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFCI2hTCkdhWlyamtmQ9jOvHmMVmOEhwlWZxPTh1RlrIGbA3zMajfjkH3Jrxs8cySoYkph26bVLKhKTRnJxyN95eO6eAP8mMc2KrM7nykyhLjTmyHZEWIK8Ch04Psm7lDy0w1JBgepZZKd/s1600/post.png" /></div>
<br />
Hey! Antes de tudo, quero agradecer as mensagens que tenho recebido sobre o Seja Criativo! Fico muito feliz que vocês estejam gostando e apoiando a ideia. Muito obrigada, de verdade. <3
<br />
<br />
<h6>
Cadê o tutorial?</h6>
Siim! No último tutorial pediram para que eu ensinasse como personalizar o botão de compartilhar, assim como do Seja Criativo. Então, vamos lá! Neste post vocês irão aprender como adicionar o botão do <i>Facebook / Twitter / Google +</i> personalizado no seu layout.<br />
<br />
Lembrando que todos os tutoriais postados aqui utilizando o <i>Template Minima</i> como base.
<br />
<br />
<h4>
Primeiro: Adicionar o código</h4>
Se você quiser deixar os botões dentro do footer da postagem, procure pela linha <b><div class='post-footer'></b> no seu layout. No template Minina esta linha aparece duas vezes, portanto você deverá editar a segunda. Após localizar, adicione logo <i>abaixo</i> o código:<br />
<br />
<textarea class="post-codigo"><div class='icon-redes-sociais'>
<ul>
<li><a class='icon-Twitter' data-title='icon-Twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='icon-Facebook' data-title='icon-Facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank'>Facebook</a></li>
<li><a class='icon-Google' data-title='icon-Google' expr:href='"https://plus.google.com/u/0/share?url=" + data:post.url' rel='nofollow' target='_blank'>Google</a></li>
</ul>
</div>
</textarea>
<br />
<br />
<h4>
Segundo: Adicionar o CSS</h4>
Localize a linha <b>]]></b:skin></b> e adicione logo <i>acima</i>:<br />
<textarea class="post-codigo">.icon-redes-sociais {
width:400px; //Largura total da área onde ficará os botões.
height:60px; //total da área onde ficará os botões.
margin:0 auto; //Não altere
}
.icon-redes-sociais li {
float:left; //Não altere
margin:0 10px;
background:#FFF;
}
.icon-redes-sociais li:hover {
float:left; //Não altere
margin:0 10px;
background:#CCC;
}
.icon-Twitter {
width:80px;
height:16px;
padding:5px 10px 5px 10px;
border:1px solid #333;
color:#EEE;
}
.icon-Facebook {
width:80px;
height:16px;
padding:5px 10px 5px 10px;
border:1px solid #333;
color:#EEE;
}
.icon-Google {
width:80px;
height:16px;
padding:5px 10px 5px 10px;
border:1px solid #333;
color:#EEE;
} </textarea><br />
<br />
Lembrando que você pode personalizar o código acima para deixar os botões da forma que você preferir!<br />
<br />
Feito isso, basta salvar e visualizar o resultado no seu blog! :)<br />
<br />
<br />
<h4>
<b>Update!</b></h4>
<br />
Alguns templates, ao adicionar o código acima, podem apresentar o erro: <i>The reference to entity "title" must end with the ';' delimiter</i>. Para corrigir basta adicionar o <b>amp;</b> antes da palavra title. Explicando melhor... O código corrigido deverá ficar assim<br />
<br />
<textarea class="post-codigo"><div class='icon-redes-sociais'>
<ul>
<li><a class='tips' data-title='icon-Twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank'>Facebook</a></li>
<li><a class='tips' data-title='icon-Google' expr:href='"https://plus.google.com/u/0/share?url=" + data:post.url' rel='nofollow' target='_blank'>Google +</a></li>
</ul>
</div>
</textarea>Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com9tag:blogger.com,1999:blog-225780880630232433.post-66677238889231258252015-02-08T09:56:00.000-08:002015-10-11T10:52:42.406-07:00Novo modelo para utilizar nas postagens populares<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTSXFmmofHQpwkz0y7HTcj7eebrBwAsZ5Fwbl2sVc4Q7JZ6tkYF14_kCzkJvd0jUL4rTeNFQfcRP-pqlhZHrNn5O4WNixfk41CA2U17FoTAkaEd7A8pA_z4TUqm8FsZ-6lTIKRR21hMnKV/s1600/post.png" /></div>
<br />
Já recebi vários comentário e e-mails perguntando como utilizar aquelas imagens destacadas para as postagens igualzinha ao <a href="http://www.depoisdosquinze.com/" target="_blank">Blog da Bruna Vieira</a>. Existem duas formas de fazer: do jeito antigo, editando manualmente toda vez que você quiser uma postagem diferente (o que vamos combinar enche o saco) e o segundo jeito é utilizando JavaScript e CSS. E este modelo que vou ensinar para vocês hoje.<br />
<br />
Procurei alguns tutoriais, mas todos deixavam a imagem muito pequena e se você tentasse aumentá-las no código elas ficam todas distorcidas e fora de foco. Ou então, só encontrava tutorias que deixavam a imagem grande, porém só buscava as imagens dos últimos posts, o que não era o que eu queria. Então consegui adaptar o código e tive o resultado que eu queria (<a href="http://www.dezoitoprimaveras.com.br/" target="_blank">vocês podem conferir aqui</a>). Também vou deixar o link de cada tutorial que eu usei no final da postagem.<br />
<br />
<i>Vamos lá! Lembrando que todos os tutoriais disponibilizados aqui utilizam o Template Minima.</i>
<br />
<i><br /></i>
<br />
<h4>
Primeiro passo: Adicionar o Gadget</h4>
Para que você possa personalizar todo o gadget, primeiro é necessário que ele já esteja incluído no seu blog. Então, vá até a guia <b>Layout</b> e adicione o gadget <b>Postagens Populares</b>.
<br />
<br />
<h4>
Segundo passo: Personalizar o código</h4>
Vá até a guia <b>Modelo</b> e clique em <b>Editar HTML</b>. Procure por <i style="text-decoration: underline;">PopularPosts1</i>, para isso utilize o <i>CTRL+F</i>.
Você deve encontrar a linha:
<br />
<textarea class="post-codigo"> <b:widget id='PopularPosts1' locked='false' title='Postagens populares' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2>
<data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'>
<data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FAev-LxsAHJRZge-z3msVshCwp7gFlRmrqkHyKOCqSoRMih4I5Xl4fU4WyaulpQwWfKYoJ-pkvGg3R-3qRXUw8cs16BO_e3F0B5XLi6DGLNhYqgwRs7g8u2S4pumgQOwseQerJ9D4kuQ/s1600/grande.png'/>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
</a>
</div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'>
<data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</textarea><br />
<br />
<b>IMPORTANTE:</b> Se você tiver algum post que não tenha imagem, você pode definir uma imagem padrão. Prepare uma imagem e faça o upload dela em algum site de sua preferência. Feito isso, no código acima localize o link a seguir e altere pelo link da sua imagem:<br />
<br />
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FAev-LxsAHJRZge-z3msVshCwp7gFlRmrqkHyKOCqSoRMih4I5Xl4fU4WyaulpQwWfKYoJ-pkvGg3R-3qRXUw8cs16BO_e3F0B5XLi6DGLNhYqgwRs7g8u2S4pumgQOwseQerJ9D4kuQ/s1600/grande.png<br />
<br />
<h4>
Terceiro passo: Adicionar o JavaScript</h4>
Agora localize no seu template a tag <b></head></b> e adicione logo <i>abaixo</i> as linhas abaixo:<br />
<br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/><br />
<script src='http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js' type='text/javascript'/>
<br />
<br />
<h4>
Quarto passo: Adicionar o CSS</h4>
Procure pela linha: <b>]]></b:skin></b> e cole o código logo acima desta linha.<br />
<textarea class="post-codigo">#PopularPosts1 h2 {
display:none;
}
#slider ol,#slider ul,#slider li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
.item-title a {
background:#fcfcfc;
position:absolute;
width:180px; //largura da imagem
height:180px; //altura da imagem
top:0;
margin-left:-180px;
color:#222;
}
.item-title a:hover {
background:#fcfcfc;
position:absolute;
width:180px; //largura da imagem
height:180px; //altura da imagem
top:0;
margin-left:-180px;
color:#222;
}
.popular-posts img {
margin: 0 !important;
padding:0 !important;
width:400px;
height:350px;
}
ol, ul {
list-style: none;
}
.wrapper {
width:100%;
margin: 0 auto;
position:relative;
}
.clear {
clear: both;
}
.display-none {
display:none;
}
#slider {
position: relative;
top: -2px;
z-index: 1;
}
#slider .prev {
display:none; //Não alterar
}
#slider .next {
display:none; //Não alterar
}
#slider #slider-wrapper {
width:100%;
height:350px;
padding-top:0
overflow: hidden;
z-index: 999;
position: relative;
}
#slider #slider-inner {
width:100%;
height:350px;
position:absolute;
}
#slider .article {
width:180px;
height:380px;
float: left;
margin-left:0;
}
#slider .article img {
margin-bottom: 25px;
}
#slider .article h2 {
display:none;
}
#slider .article h2 a {
display:none;
}
#slider .article .meta-comments a {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}
#slider .article .item-snippet {
margin-left:;
}
#slider .widget-item-control {
display: none;
}
</textarea><br />
<br />
Prontinho! Agora é só visualizar o layout. Qualquer dúvida, por favor, deixem nos comentários ou mande um email pela <a href="http://blogsejacriativo.blogspot.com.br/p/contato.html">página de contato</a>.<br />
<br />
<br />
<ul>
<li><a href="http://www.mundoinformal.com/2014/04/widget-ultimas-postagens-horizontal-com.html#.VNeg1PnF8rV" target="_blank">Widget últimas postagens horizontal com imagens para Blogger</a> </li>
<li><a href="http://www.templatesparavoce.com/2013/11/2-estilos-de-gadget-de-posts-populares.html" target="_blank">2 Estilos de Gadget de Posts Populares onde as Miniaturas das Imagens Giram ao passar o Mouse</a></li>
</ul>
<br />
<br />Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com5tag:blogger.com,1999:blog-225780880630232433.post-84740276257095683782014-12-29T11:08:00.000-08:002015-10-11T11:09:47.073-07:00Personalizando o Header do seu layout<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxcz3m_F9KrDI6yYmHOifKISU2ec8bQ83355HgmBzmVrZeyW3C3dozkkKNCJGt2HOZiGELLSeK_nnhvHi2je_a8QLxuEK0EWffb-PeKD61CU_pQp9cqoymWVcV1JFHuN3uWSR5Ildpsr_Y/s1600/post.png" /></div>
<br />
Agora que toda a explicação básica já se foi, os próximo tutoriais do <i>Seja Criativo</i> serão um pouco extensos. A intenção é mostrar ao máximo o que você deve saber para conseguir criar o seu próprio layout, dando base para que você conheça cada pedacinho possível de editar.<br />
<br />
Uma das perguntas que vire e mexe alguém me manda é sobre o código do Header (Cabeçalho) do Layout: "<i>como deixar da largura da tela?</i>" ou "<i>como mudar a posição?</i>", entre outras dúvidas. Hoje vou mostrar para vocês um pouco sobre o código e o que você precisa conhecer para conseguir altera-lo sozinho.<br />
<br />
Onde você poderá encontrar o código vai depender da base que você está usando, neste tutorial vamos usar o <b>Template Mínima</b> (<a href="http://www.4shared.com/file/vvgT08Veba/Template_Minima.html" target="_blank">download</a>), por ser um código mais simples e fácil de manipular, principalmente para quem está aprendendo.<br />
<br />
<h4>
1º Passo: Decidir o que você quer fazer!</h4>
Existem diversas formas de editar o seu cabeçalho, por isso antes de começar a editar o código é importante ter em mente o que você quer. Depois disto você poderá seguir um das dicas abaixo:<br />
<br />
<h5>
Usar o editor do blogger</h5>
Esse é um dos modos mais simples e rápidos de modificar, apesar de não permitir grandes alterações. Para editar sem precisar modificar nenhuma linha de código do HMTL do seu layout, o blogger dá a opção de incluir imagem no próprio painel. Para isso basta acessar:<br />
<br />
<div style="text-align: center;">
<i>Painel > Layout > E clique em editar no espaço pertencente ao cabeçalho.</i></div>
<br />
Não esqueça que para que a imagem fique centralizada, ela deve ter o tamanho definido no CSS ao cabeçalho. Por padrão, no <b>Template Mínima</b>, sem alterações, o tamanho é de 660px de largura. Então lembre-se que se você quiser uma imagem maior, deverá alterar a largura do seu cabeçalho no código.<br />
<br />
<h5>
Editar direto no código</h5>
<b>Antes de qualquer alteração, faça um backup do seu layout!</b><br />
<br />
As linhas de código abaixo são responsável pelo cabeçalho. Se você quiser muda-lo de posição, como por exemplo, deixar que ele ocupe todo a largura da página, basta alterar o local do código. De um jeito mais fácil de explicar:<br />
<br />
<div id="header-wrapper"><br />
<b:section class="header" id="header" maxwidgets="1" showaddelement="no"><br />
<b:widget id="Header1" locked="true" title="Teste de tutoriais (Cabeçalho)" type="Header"><br />
</b:widget><br />
</b:section><br />
</div><br />
<br />
Sem alterações, no Template Minima você vai encontrar o código do Header após as linhas:<br />
<br />
<div id='outer-wrapper'><div id='wrap2'><br />
<br />
Ou seja, o seu cabeçalho terá a largura do <i>Outer-Wrapper</i>. Se você quiser que o Header tenha a largura da tela, mas permaneça acima da área da postagem e da sidebar, você precisa alterar a posição do código deixando da seguinte forma:<br />
<br />
<br />
<div id="header-wrapper"><br />
<b:section class="header" id="header" maxwidgets="1" showaddelement="no"><br />
<b:widget id="Header1" locked="true" title="Teste de tutoriais (Cabeçalho)" type="Header"><br />
</b:widget><br />
</b:section><br />
</div><br />
<br />
<div id='outer-wrapper'><div id='wrap2'><br />
<br />
Ainda sobre a posição, você pode colocar em várias partes do layout. Por exemplo: deixa-lo em cima apenas da sidebar ou da área da postagem. Para isso basta seguir a regra anterior, copie a parte do código que pertence ao cabeçalho e mova-o para a posição que você deseja.<br />
<br />
<h5>
Excluir o cabeçalho</h5>
Dentre todas as alterações que você pode fazer, uma delas é remove-lo do seu layout. Mas se você já deu uma olhada no Painel do Blogger, deve ter percebido que ele não permite que você exclua o cabeçalho. Para isso você precisa alterar uma linha de código. Vá em:<br />
<br />
<br />
<div style="text-align: center;">
<i>Painel > Modelo > Editar > Procure por: </i></div>
<br />
<div style="text-align: center;">
<b:widget id='Header1' locked='true' title='Teste de tutoriais (Cabeçalho)' type='Header'></div>
<b:widget id="Header1" locked="true" title="Teste de tutoriais (Cabeçalho)" type="Header"> <br />
<br />
</b:widget><br />
<b:widget locked="true" title="Teste de tutoriais (Cabeçalho)" type="Header">Após localizar a linha, altere o seguinte trecho: <b>locked='true'</b> para <b>locked='false'</b>. Isso vai permitir que, ao retornar no Painel, você exclua o cabeçalho.<br />
<br />
<br />
</b:widget><br />
<h6>
Personalizar o CSS</h6>
Feita a alteração da posição você pode seguir para o CSS. Nele você vai incluir todos os estilos que o seu cabeçalho deve ter: tamanho, background, posição, borda, etc. Para começar a editar você precisa localizar a linha #header-wrapper e seguirá todos seletores que permitem personalizar o cabeçalho.<br />
<br />
Nâo vou listar tudo o que vocês podem fazer no CSS, pois há uma variedade enorme. Então vou deixar alguns links úteis para quem quiser conhecer um pouco mais de CSS:<br />
<br />
<ul>
<li><a href="http://blog.caelum.com.br/seu-codigo-css-pode-ser-mais-limpo-flexivel-e-reaproveitavel/" target="_blank">Deixe o seu código mais limpo e reaproveitável</a></li>
<li><a href="http://guilhermemuller.com.br/pt/elearning/html_css_basico/licao/2/sintaxe-seletores-css" target="_blank">Sintaxe e seletores CSS</a></li>
<li><a href="http://tutsmais.com.br/blog/css/especificidade-de-seletores-css/" target="_blank">Especificidade de seletores CSS</a></li>
<li><a href="http://www.dicasblogger.com.br/2013/04/onde-esta-o-css-no-novo-editor-html-do-blogger.html" target="_blank">Onde está o CSS no novo editor HTML do Blogger</a></li>
<li><a href="http://www.superdicaspfs.com.br/2010/08/trocando-o-cabecalho-do-blog.html" target="_blank">Trocando o cabeçalho do blogger</a></li>
<li><a href="http://templatesparanovoblogger.blogspot.com.br/2007/03/como-modificar-seu-template-no-novo.html" target="_blank">Modificar o seu template (Cabeçalho)</a></li>
<li><a href="http://www.maujor.com/index.php" target="_blank">Tudo sobre CSS</a> <i>(Melhor site para ter como base!)</i></li>
</ul>
<br />
<br />
É isso! Qualquer dúvida, por favor, deixem nos comentários ou mande um email pela <a href="http://blogsejacriativo.blogspot.com.br/p/contato.html" target="_blank">página de contato</a>.Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com0tag:blogger.com,1999:blog-225780880630232433.post-82777620830993567122014-12-22T15:31:00.001-08:002015-10-11T11:13:03.556-07:00Conhecendo o seu template #5<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdA-zHGak1gnByU9l97Bdu0ELZr2VZiTEpKpDg_8EfR5fQjKZ8RouPsPsYtr8R_bRaqlG9PKWJLRa8Xnd856kKEoKgGGwSBdPyJ2CiBbGHzP0PUF7Pczc_cgH5Km1MVDTN9rF5A3oTy7Tq/s1600/post.png" /></div>
<br />
A última postagem que explica algumas noções básicas que devemos ter para editar um layout. Neste post irá demonstrar como editar o <i>footer</i> do seu blog e tudo o que você precisa saber para que não apareça nenhum erro.<br />
<br />
Lembrando que todos os tutoriais postados aqui usam como base o <i>Template Mínima</i>, para baixá-lo basta <a href="http://www.4shared.com/file/vvgT08Veba/Template_Minima.html">clicar aqui</a>.<br />
<br />
O código do <i>Footer</i>, assim como o <i>Header</i>, fica localizado dentro <i>Outer-Wrapper</i>, sendo assim o tamanho definido será o mesmo que o deste seletor. Por exemplo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunhi4r9vizwBSFtEJEAqExlyR0ejAjPcKGBqaQrKbuvzsut8O90Qkx2WBMel8nUEwQARlXuadj_2a18fsWJvZ6YBgBuD157VE-dti4SF4K_6NFZcVUO-uUjkWXBPCIJnCMS438YrGqa9F/s1600/layo.png" /></div>
<br />
A parte em cinza na imagem representa o <i>Outer-Wrapper</i> do seu layout, se em suas propriedades você irá definir uma largura <i>x</i>, portanto todos os outros elementos dentro da areá cinza não poderão ultrapassar a largura definida. Logo, o <i>Footer</i> ficará no centro do layout ocupando o espaço após a área da postagem e a sidebar.<br />
<br />
Se você quiser que o <i>Footer</i> ocupe a largura total da página, você deverá fazer as seguintes alterações:<br />
<br />
1. Localize as linhas:<br />
<br />
<div id='footer-wrapper'><br />
<b:section class='footer' id='footer'/><br />
</div><br />
<br />
2. Em seguida, note que logo após aparece a linha:<br />
<br />
</div></div><!-- end outer-wrapper --><br />
<br />
Isso identifica o final do código que pertence a área cinza da Imagem, o Outer-Wrapper.<br />
<br />
3. Agora basta mudar o local do footer. Copie as linhas do passo 1 e inserir <b>após</b> as linhas do passo 2. Veja:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqozpBIFxJFoWUE0VOjRY9VpFSLQPYMt6uQHLB6tuP0Z1Gn2-p3XJRpNfZHF7B8Nt3rPR-4JAxoMqjXWO0IVMwlYM7iSaZvLc95cwXpITya-Pc2LidAXrZeEtMmY0muCPLmjfQAnKtg19R/s1600/layout.png" /></div>
<br />
Feito isso, você poderá alterar a vontade a largura do seu <i>Footer</i> sem depender de outro elemento dentro do layout.<br />
<br />
Simples não é? Os próximos tutoriais serão bem mais específicos agora que já foram apresentados a parte básica. Se você quiser ver algum tutorial por aqui entre na página de contato do blog e sugira um tema. <i>:)</i>Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com0tag:blogger.com,1999:blog-225780880630232433.post-36619772945685384632014-12-20T10:56:00.003-08:002015-10-11T11:13:58.411-07:00Conheça seu template #4<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY6ZS7MSZQvmuRUVLWHu14TzXF_rrdFLnMBV93_h8vLYw5HKcxQ1DjA-zLacNiwEwZK5JvcG06Jz2iwlbroUAv9K_AYdu6LIILtV0KTMR9GTm0LR4mAAslOlPJyAv_kAh4g1qE6b6U1AQD/s1600/post.png" /></div>
<br />
Este post irá explicar como modificar a área de comentários no blogger. Não só no template mínima como em outros templates do blogger, os comentários não vêm com a opção de "responder" adicionada no código, por isso é necessária uma alteração para que funcione. Lógico que isso altera também o CSS, por isso a explicação de hoje é mais longa.<br />
<br />
<h5>
Alterando o código</h5>
Localize o código abaixo:<br />
<i><b:include data='post' name='post'/></i><br />
<i><b:if cond='data:blog.pageType == &quot;static_page&quot;'></i><br />
<i><b:if cond='data:post.showThreadedComments'></i><br />
<i><b:include data='post' name='threaded_comments'/></i><br />
<i><b:else/></i><br />
<i><b:include data='post' name='comments'/></i><br />
<i></b:if></i><br />
<i> </b:if></i><br />
<br />
E <b>substitua todo o código acima</b> por:<br />
<i><b:include data='post' name='post'/></i><br />
<i><b:if cond='data:blog.pageType == &quot;static_page&quot;'></i><br />
<i><b:if cond='data:post.showThreadedComments'></i><br />
<i><b:include data='post' name='threaded_comments'/></i><br />
<i><b:else/></i><br />
<i><b:include data='post' name='comments'/></i><br />
<i></b:if></i><br />
<i></b:if></i><br />
<i><b:if cond='data:blog.pageType == &quot;item&quot;'></i><br />
<i><b:if cond='data:post.showThreadedComments'></i><br />
<i><b:include data='post' name='threaded_comments'/></i><br />
<i><b:else/></i><br />
<i><b:include data='post' name='comments'/></i><br />
<i></b:if> </b:if></i><br />
<br />
Lembrando que por padrão estamos usando <b>Template Mínima</b>, para fazer o download do código basta <a href="http://www.4shared.com/file/vvgT08Veba/Template_Minima.html">clicar aqui</a>. <br />
<br />
Agora o CSS! Depois da alteração no código as opções para personalizar o formulário de comentários muda bastante da versão original, pois te dá mais possibilidades para personalizar. Com isso é precisso adicionar ao seu CSS o código abaixo. Para ficar de uma forma melhor de ser organizada, recomendo que você substitua o CSS original dos comentários por este. <br />
<br />
No template Mínima é fácil de encontrar esta parte, pois a mesma vem sinalizada. Ou seja, você pode encontrar pocurar pela linha "Comments". Depois de localizar basta substituir. <br />
<br />
<textarea class="post-codigo" readonly="">/* Comments ----------------------------------------------- */ .comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px} .comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left} .comments .comment .comment-actions a,.comments .comment .continue a{ display:inline-block; margin:0 0 10px 10px; padding:0 15px; color:#999 !important; /*--- cor da fonte do botão reply--- */ text-align:center; text-decoration:none; background: #ccc; /*--- cor de fundo do botão reply--- */ background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); /*--- cor de fundo gradiente--- */ background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );/*--- cor de fundo gradiente--- */ border:1px solid #C0C0C0; /*--- cor da borda do botão reply--- */ border-radius:5px; -moz-border-radius:5px; height:26px; line-height:28px; font-weight:normal; cursor:pointer; } .comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { text-decoration: none; background:#fff; /*--- cor de fundo do botão reply houver--- */ border:1px solid #999; /*--- cor da borda do botão reply hover--- */ } .comments .comments-content .comment-thread ol{ list-style-type:none;padding:0;text-align:none} .comments .comments-content .inline-thread{padding:0} .comments .comments-content .comment-thread{margin:8px 0} .comments .comments-content .comment-thread:empty{display:none} .comment-replies{margin-top:1em;margin-left:40px;} .comments .comments-content .comment{margin-bottom:0;padding-bottom:0} .comments .comments-content .comment:first-child{padding-top:16px} .comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0} .comments .comments-content .comment-body{position:relative; } .comments .comments-content .user{font-style:normal;font-weight:normal} .comments .comments-content .user a{font-weight:normal;text-decoration:none;} .comments .comments-content .icon.blog-author{ background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==); width:18px; height:18px; display:inline-block; margin:0 0 -4px 6px; float:right; } .comments .comments-content .datetime a{ font-size:11px; text-decoration:none; color:#666; /* -- cor do link da data do comentário -- */ } .comment-content{margin:0 0 8px;padding:0 5px; } .comments .comment-block{ margin-left:65px; position:relative; background:#fff; /* -- cor de fundo do comentário -- */ border:3px solid #C0C0C0; /* --- cor da borda do comentário ---*/ border-radius:8px; -moz-border-radius:8px; } .comment-header{ /*--- linha onde fica o nome do autor do comentário --- */ background-color:#f1f1f1; /*--- cor de fundo--- */ font-size:18px; border-bottom:1px solid #C0C0C0; /*--- cor da borda --- */ padding:5px; } .comment-header a{ color: $(link.color); /*--- cor do link nome do autor do comentario --- */ } .comments .comments-content .owner-actions{position:absolute;right:0;top:0} .comments .comments-replybox{border:none;height:230px;width:100%} .comments .comment-replybox-thread{margin-top:0} .comments .comment-replybox-single{margin-top:5px;margin-left:48px} .comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center} .comments .thread-toggle{cursor:pointer;display:inline-block} .comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0} .comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden} .comments .thread-chrome.thread-collapsed{display:none} .comments .thread-toggle{display:inline-block} .comments .thread-toggle .thread-arrow{ display:inline-block; height:6px; width:7px; overflow:visible; margin:0.3em; padding-right:4px; } .comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent; } .avatar-image-container{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyICgSkgMfiWUrkvT4nXMUPtbEzREDk9UOM7aL9_InFF2kk8KCYqywTpmjcccPXTDJbqRArYCjELpBJ4ztDA7k2ubaHbo-v4krrOTiGC2h_GzJONwogf9SYrZ5244FakAs14prllWy3UU/s1600/imagem-arrow.png) top right no-repeat; /*--- imagem arrow---*/ float:left vertical-align:middle; overflow:hidden; width:65px !important; height:51px !important; max-width:65px !important; max-height:51px !important} .comments .avatar-image-container img{ padding:2px; border:1px solid #ccc; width:45px !important; height:45px !important ;max-width:45px !important; max-height:45px !important; } </textarea> <br />
<br />
Prontinho! Fácil não é?Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com0tag:blogger.com,1999:blog-225780880630232433.post-60628040164111748152014-12-20T10:54:00.000-08:002015-10-11T11:14:28.881-07:00Conheça seu template #3<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga_DmxOj5RDyNn5aghg_v_pBeDk6ILZlFNYd-DlLxR6Qk9ImNxtV_3L2aoE3nhE8ZGJ7arDRWLHdILtlMQM-wzYJ_rEi1LgQvWl9VfuMt7J6kqgMF0DjFe_c-894fwrOqWVfeDiN1nHofK/s1600/post.png" /></div>
<br />
<h5>
Headings</h5>
As "heading tags" (tags de cabeçalho) são bastante importante para o blog. Elas controlam a estrutura geral do seu layout, informando aos mecanismos de busca qual é o conteúdo que tem mais importância na página. A mais importante é a tag h1 e a menos importante é a tag h6.<br />
<br />
No blogger a <i>tag h2</i> refere-se a <b>data da postagem</b> e ao <b>título dos widgets</b>, portanto, poder ser que ao atribuir a tag h2 como “título” dentro de seu post, a fonte fique com a mesma formatação css referente a data ou aos títulos de seus widgets. Enquanto a <i>tag h3</i> é representada pelo título da suas postagens. De uma forma mais fácil:<br />
<br />
<b>H1</b> - O títilo do blog;<br />
<b>H2</b> - O título de cada gadget da sidebar e a data;<br />
<b>H3</b> - Título da postagem;<br />
<b>H4</b> - Fica mais escondidinho, mostra o número de comentários ao abrir uma postagem.<br />
<br />
<h5>
Post</h5>
<b>Data: </b>No template Minima, a data está representada pelo <i>h2.date-header</i>.<br />
<b>Post:</b> É o segundo elemento do código. Se refere a toda a área dos posts. No template Minima está representado por: <i>.post</i>.<br />
<br />
<ul>
<li><i>.post-body</i> – se refere somente ao corpo do post. Os estilos que você aplicar neste trecho valerão somente para o corpo do texto das postagens. </li>
<li><i>.post p</i>: Representa o paragrafo do post. Neste trecho você pode adicionar um recuo de texto, e para isso use a propriedade text-indent.</li>
<li><i>.post h3</i>: O titulo do post. Nesta parte que você pode acrescentar imagem, borda, tamanho da fonte, cor da fonte, alinhamento do texto, entre outros, para se aplicar a todos os títulos de suas postagem.</li>
<li><i>.post h3 a</i> - Link ativo.</li>
<li><i>.post h3 a:visited</i> - Link já visitado.</li>
<li><i>.post h3 a:hover</i> - Mouse em cima</li>
</ul>
<br />
<b>Imagem do Post:</b> É representado pela tag <i>.post img</i>. Todos os efeitos que você quiser adicionar nas suas imagens das postagens devem ser acrescentados nessa tag. Se no seu template não tiver este trecho, você poderá acrescentá-lo e incluir estilos a sua maneira.<br />
<br />
<b>Rodapé do Post:</b> No template Mínima é representado pela tag <i>.post-footer</i>.<br />
<b>Links dos comentários:</b> É representado pela tag .comment-link.<br />
<b>Blockquote (citações):</b> Pode ser modificado na tag .post blockquote.<br />
<br />Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com0tag:blogger.com,1999:blog-225780880630232433.post-38662507857795548302014-12-19T15:48:00.000-08:002014-12-19T15:48:30.711-08:00Seja criativo: busque inspiraçãoNão acredito que enfim consegui deixar tudo pronto. Faz um tempinho que eu disse que iria começar um projeto que serviria como um meio de inspiração para blogueiros que queiram aprender a criar o próprio layout usando a criatividade ao invés de simplesmente copiar.<br />
<br />
A ideia é criar uma campanha que incentive a busca por inspiração, instigando cada um a usar a liberdade para criar o que mais lhe representa. Afinal, o conhecimento pode ser transmitido e adquirido com o tempo, mas o que somos apenas nós mesmo podemos dizer.<br />
<br />
Espero conseguir continuar ajudando muitos blogueiros que sempre me mandam várias perguntas, tanto por e-mail como no Facebook e no Twitter. A ideia é que também seja um meio mais rápido e fácil para quem precisa de uma ajudinha para criar o próprio layout.<br />
<br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyZprx4S-bdZrOL6OtZQ1A_3BJ99C_EdEad6eMRRSWToQM75-duec4Zy6AyD7Y_ctsNhPo4CaXS1lbn88nc6-DbDRE6CIFYmcCsVCvnNr7Oby6mI3XPCSvnMZT3PYwCcBw9qDKyXN4eE7a/s1600/banner2.png" />Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com0tag:blogger.com,1999:blog-225780880630232433.post-83712860063581109872014-07-23T12:48:00.000-07:002015-10-11T11:15:15.816-07:00Conheça seu template #2<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiICx2Y1Nm_waZhUOK9Py2w7NEMqj6amSAZwB6qsZ-fHkK2yi2yxQcDP3rPZkKBDhiNRllSAzoP0MZTOd_VydwbeXE9qcL66KpLtcZcQQ7MYDCqZaJjQzGvHz7J5NHcW2wUcVlzV678a3Ox/s1600/post.png" /></div>
<br />
<h5>
Atributo Body</h5>
O body é o elemento responsável por ser o container de tudo que é conteúdo do site. Ou seja, o que está dentro do <body> é o que fica ou ficará disponível para visualização do visitante. Vale lembrar: o body é uma tag HTML e como tal, aceita atributos. Por isso, se você quer definir um padrão para o site, pode colocar os atributos nessa tag.<br />
<br />
<strong>1. Background</strong><br />
A parte mais fácil de fazer no template é adicionar o background, pois o mesmo só poderá ser uma cor ou uma imagem. <br />
<br />
<div align="center">
<em>background: <strong>$bgcolor</strong>;</em> </div>
<br />
Onde o <em><strong>$bgcolor</strong></em> é o atributo padrão do template mínima, basta altera-lo para o código da cor que deseja. Se você quiser adicionar o link basta usar:<br />
<br />
<div align="center">
<em>background: url(link-da-sua-imagem-aqui);</em></div>
<br />
O atributo background tem vários características e você pode encontra-las de forma detalhada <a href="http://www.maujor.com/tutorial/backtut.php">nesta página aqui</a>.<br />
<br />
<strong>2. Links</strong><br />
Seguindo do <em>body</em>, temos os atributos para os links em geral. Um link visitado, não visitado, ativo ou no estado hover pode assumir aspectos diferentes (cores, fundos, etc...). Para não ficar extenso, você pode ver <a href="http://www.maujor.com/tutorial/csslinks.php" target="_blank">suas propriedades aqui</a>.<br />
<br />
<h5>
Header: o cabeçalho do layout</h5>
O cabeçalho por padrão fica dentro do <i>#outer-wrapper</i>. Ali também contém a área da postagem, a sidebar e footer. Por isso, se você aumentar o tamanho do <i>#header-wrapper </i>ele vai ficar com uma parte "escondida" por não caber no valor declarado no <i>#outer-wrapper</i>. Ou seja, a forma mais simples de resolver é você lembrar de alterar o valor atribuído lá também.<br />
<br />
<b>#header:</b> é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:<br />
<b>#header-wrapper:</b> corresponde a toda a área do cabeçalho.<br />
<b>#header-inner</b><br />
<b>#header:</b> corresponde a coluna dentro do cabeçalho.<br />
<b>#header h1:</b> corresponde ao nome do cabeçalho (título do blog).<br />
<b>#header a:</b> corresponde ao link do nome do cabeçalho.<br />
<b>#header .description:</b> corresponde a descrição do blog que fica dentro do cabeçalho.<br />
Designer de modelo:<br />
<b>.header-outer:</b> área do cabeçalho<br />
<b>.header h1:</b> título do blog<br />
<b>.header h1 a:</b> link do nome do cabeçalho<br />
<b>.header .description:</b> descrição do blog<br />
<br />
<h5>
Outer wrapper</h5>
Seguindo o template, vem o <i>#Outer-Wrapper</i> que, assim como foi dito mais acima, é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar e footer. Sendo assim, qualquer alteração que você fizer com realação a largura dos atributos citados, vai ser necessário alterar a largura do <i>#outer-wrapper</i>. Se você aumentar a largura do post e da sidebar, mas não alterar a largura do #outer-wrapper, o seu layout vai ficar todo desalinhado. Muito confuso? Veja o exemplo:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrL-iavuUk6B_5P59E2-590FVaScntMQ09NbCw01L8nc9hu7HFSRQn8uWpKtc0X82Q6aK0Uhi6t_MbI-9XC3tRSElKDdaTCSW_sXGYJmcSJpCKu2w9c9Yo3HzVm9qkxvWnQM1BR4R_UF3q/s1600/img.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrL-iavuUk6B_5P59E2-590FVaScntMQ09NbCw01L8nc9hu7HFSRQn8uWpKtc0X82Q6aK0Uhi6t_MbI-9XC3tRSElKDdaTCSW_sXGYJmcSJpCKu2w9c9Yo3HzVm9qkxvWnQM1BR4R_UF3q/s1600/img.png" /></a></div>
<br />
Note que, na versão original, a soma do <i>width</i> (largura) do <i>Main</i> e da <i>Sidebar</i> é menor do que o valor do <i>Outer</i>. Já na versão alterada, a soma ultrapassa o valor. Se você fizer o teste, vai perceber que o seu layout vai ficar todo desajustado. Por isso é importante lembrar de manter a largura do Outer igual ou superior a soma do <i>Main</i> e da <i>Sidebar</i>.<br />
<br />
<b>Observação</b>: Isso também serve para o <i>Footer</i>. A largura total dele deve ser igual ou menor que a largura do <i>Outer</i>.Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com0tag:blogger.com,1999:blog-225780880630232433.post-1980523374756513152014-07-19T17:34:00.002-07:002015-10-11T11:15:57.032-07:00Conheça seu template #1<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYqhjlJmwajfeEI0xi5C8jnY35fK0ePUZGyCrhcfE_-r3MzMozrN6q7kWt7RKGC3RJGmRHPpVwjyh5EbMx2kew1hiAhYc8AfqiOUcV7d3WSZU4vIlEKLHkCA46GW7q9B3CHLdWDll7q2-/s1600/post.png" /></div>
<br />
Algumas vezes recebo e-mails de leitores pedindo para que eu faça um passo-a-passo de como criar o próprio layout. Por ser um tutorial extenso, nunca pensei em postar nada do tipo aqui no blog, porque não é algo que possa ser resumido em uma única postagem. Então, para ajudar um pouquinho, vou fazer uma sequência de postagens explicando alguns conceitos básicos para quem não quer depender mais de layouts prontos e precisa de um pouquinho mais de noção de HTML e CSS para conseguir editar sozinho. <br />
<br />
Um conselho muito útil para quem está começando é: use uma base pronta! O próprio blogger disponibiliza vários templates básicos que depois de editados diminui (e muito) o seu trabalho. Já testei a maioria das versões do blogger, mas a versão mais fácil de usar é o Template Mínima. Por isso todos os tutoriais que vou postar aqui o terão como base. (<i><a href="http://www.4shared.com/file/vvgT08Veba/Template_Minima.html">Para fazer o download basta clicar aqui</a></i>)<br />
<br />
<h5>
Primeiro passo: Conheça a base que você está usando.</h5>
Logo no começo do código você vai encontrar as definições básicas das variáveis (<i>Variable definitions</i>). Recomenda-se que não apague, pois alguns recursos do código já estão pré-definidos nesta parte. Isso não impede que você altere os estilos mais para frente no código. Em seguida virão as variáveis utilizados na construção do layout. <br />
<br />
<h5>
Segundo passo: Conheça a estrutura do template.</h5>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNvpBmgejGIezyL42zXW49UVy29mNTQ5LD5J-gLgksoB1O5WVd8MwX-avhJqLwkhHNedBZFNFokq0IEmFTUnFQgI4DUp_qsUmRJ8syNL0b4ZEAaS5zRpIRV1GZ_6FDDIOvkkeYhFa41YT/s1600/template_estrutura.png" /><br />
<strong>Header:</strong> O cabeçalho do layout é representado por: #header-wrapper e #header. <br />
<strong>Outer-wrapper (a parte cinza da imagem):</strong> Basicamente é parte que abriga todo o layout, representada por #other-wrapper.<br />
<strong>Sidebar:</strong> A coluna lateral é representada por: #sidebar-wrapper.<br />
<strong>Main:</strong> A coluna da postagem é representada por: #main-wrapper.<br />
<b>Footer:</b> O rodapé do layout é representado por #footer-wrapper.<br />
<br />
<h5>
Terceiro passo: Nunca altere o código sem ter um backup!</h5>
Tudo bem, pode parecer redundante, mas por experiência própria: não corra o risco de perder tudo. O blogger, ou qualquer outra ferramenta, pode falhar de vez em quando e se isso acontecer você vai agradecer muito por ter feito um backup das suas informações. Então sempre que você terminar de alterar o código, baixe a última versão. Isso será útil até se na hora de editar o código você apagar algo que não deveria. ;)<br />
<br />
<div style="text-align: center;">
<b>Beijos!</b></div>
Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com0tag:blogger.com,1999:blog-225780880630232433.post-46191611756763602982014-06-29T08:24:00.000-07:002014-06-29T09:40:23.281-07:00Mais uma novidade para vocês<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4R88pI37uzg6bBt_xE9KGy2qKaEjUKxOLzpUYRZFevGX_4lNv54PinmCxx2aXFW70yYHBN_6j1XDx3GNm3iKhgpwA_1Utg9koLrf_Sx6JpkHqBZrbRKeQF8cBDc3eUR9ej-XcSihYEblg/s1600/title.png" /><br />
Recebi alguns comentários no Dezoito Primaveras e até mesmo alguns e-mails perguntando sobre o que seria o "<i>Seja criativo</i>". Algumas pessoas viram o banner no meu blog e ficaram bastante curiosas. Mas hoje a curiosidade acaba.<br />
<br />
Bom, sempre me perguntam diversas coisas sobre a criação de um Layout e por ser um assunto do qual eu sempre me interessei bastante, resolvi criar uma página em que poderei conversar mais sobre isso com vocês. Achei melhor separar o tema do Dezoito primaveras, pois lá faço postagens relacionadas ao que eu gosto, sobre o meu dia-a-dia, mas não consigo fazer nada mais detalhado por ficar grande demais. Os tutorias mais simples continuaram lá, mas aqui vocês terão a oportunidade de conhecer um pouco mais. Claro, também vou aprender muito.<br />
<br />
A ideia principal é fazer com que o <i>Seja Criativo</i> seja um meio de inspiração para blogueiros que queiram aprender a criar o próprio Layout. Sempre instigando a criatividade ao invés de simplesmente copiar o blog de alguém! Se tem algo que sempre me irrita bastante é ver blogueiros copiando a ideia de alguém. Se uma pessoa teve a vontade e o esforço de criar algo, porque não podemos fazer o mesmo? A internet está aí, cheia de conteúdos inspiradores. Basta você parar para entender o que você realmente quer.<br />
<br />
<blockquote class="tr_bq">Se eu tivesse uma hora pra resolver um problema e minha vida dependesse dessa solução, eu passaria 55 minutos definindo a pergunta certa a se fazer. (Albert Einstein)</blockquote><br />
Michelly Melohttp://www.blogger.com/profile/12224060429144400575noreply@blogger.com3