tag:blogger.com,1999:blog-57689589130266569052024-03-12T16:49:40.330-07:00Várias Dicas para BlogsDicas e Tutoriais para blogs, fique também por dentro das novidades do blogUnknownnoreply@blogger.comBlogger148125tag:blogger.com,1999:blog-5768958913026656905.post-24120471213963151402015-09-10T16:31:00.001-07:002015-09-10T16:31:32.089-07:00Prêmio Top Blog 2015<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtox-pgu7OrRpB9FlVgsBYcE_G6MSCGw7hHTHknyEop0RekUKrUQydzIve_ZAQEgZ_JAHiNd5psSWCzD9iTXbRxQ-37GDeuWmDbqJplWm381UWOgYy1qv4br5f638mHNOqRnMlwGVHEm4/s1600/Premio+Top+Blog+2015+VDB.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtox-pgu7OrRpB9FlVgsBYcE_G6MSCGw7hHTHknyEop0RekUKrUQydzIve_ZAQEgZ_JAHiNd5psSWCzD9iTXbRxQ-37GDeuWmDbqJplWm381UWOgYy1qv4br5f638mHNOqRnMlwGVHEm4/s320/Premio+Top+Blog+2015+VDB.png" width="320" /></a></div>
<br />
Olá, caro leitor! Neste artigo falarei um pouco sobre a nossa participação no "<a href="http://www.topblog.com.br/candidatos/?projeto=89566" target="_blank">Prêmio Top Blog 2015</a>". Esta é a nossa primeira participação no Top Blog Brasil, onde estaremos concorrendo à prêmios e reconhecimento...<br />
<br />
<br />
<br />
<br />
<a name='more'></a>Concorrer ao Top Blog Brasil não é uma coisa totalmente fácil, pois cada blog participante precisa imensamente do apoio popular, de cada seguidor e leitores do seu blog. Estamos inscrito na categoria Blog e editoria Ciências e tecnologia, onde as eleições começaram no dia <b>24 de agosto de 2015</b> e a votação do 1º turno será feita através do "<b>voto popular</b>" aberta ao público brasileiro. Então, precisamos do seu reconhecimento para termos chance de ganhar, deixe sua participação.<br />
<div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<b>Varias Dicas Para Blog - <a href="http://www.topblog.com.br/candidatos/?projeto=89566" target="_blank">VOTE AQUI</a> </b>>></div>
<div style="text-align: center;">
"O período de votação do 1º turno encerrará dia 18/12/2015"</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.topblog.com.br/candidatos/?projeto=89566" target="_blank"><img alt="Prêmio Top Blog 2015 - Votar no Varias Dicas Para Blogs" border="0" height="333" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsU6bl-uo9ZZ0ogRh78lHAoyeN-DlI1Q9o7XjLEgKui1xQAVaRXAjhrID8HJ4jVORNdkBCQrmdSI46GsWPxOcT_6vRkLA9le5KaEbWW4KB92PsrVbhV5m1dQVnpGJohwipfcFoPqiFoTY/s400/premio+top+blog+2015.png" title="Votar no Várias Dicas Para Blogs - Prêmio Top Blog 2015" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>Como Votar?</b></div>
<div style="text-align: left;">
Para votar não precisa de cadastro, basta acessar o <a href="http://www.topblog.com.br/candidatos/?projeto=89566" target="_blank">link da votação</a>, em seguida será aberto a página com as informações do nosso Blog, então clique no "Botão Votar". <b>Veja exemplo na imagem abaixo</b>:</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpk0nInJX2t0DSdysEnihTlJCrC7tPaxm2WlpyfM0yRqWOxO613SyTLIXC8whASm2ccgwO5larZce-O7U3Q18fm5u66DtM5YWahCVIhVv4SLyXw2ArIIvZN3OFRMvmyb4782SoiqwRD8/s1600/COMO+VOTAR.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpk0nInJX2t0DSdysEnihTlJCrC7tPaxm2WlpyfM0yRqWOxO613SyTLIXC8whASm2ccgwO5larZce-O7U3Q18fm5u66DtM5YWahCVIhVv4SLyXw2ArIIvZN3OFRMvmyb4782SoiqwRD8/s400/COMO+VOTAR.png" width="400" /></a></div>
<div style="text-align: left;">
<br /></div>
<br />
<br /></div>
<div>
<hr style="align: center; background: #000000; border: 0px; height: 1px; width: 100%;" />
<b>Como se inscrever?</b><br />
<blockquote class="tr_bq">
Período oficial das inscrições no Top Blog 2015 se iniciam em 10/08/2015 e encerra dia 30/10/2015. Acesse para fazer sua inscrição (<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b>www.topblog.com.br/cadastro</b></span>). <b><a href="http://www.topblog.com.br/faq/" target="_blank">FAQ</a>.</b></blockquote>
<hr style="align: center; background: #000000; border: 0px; height: 1px; width: 100%;" />
<br /></div>
<div>
<h2>
Sobre o Top Blog</h2>
<br />
Desde 2008, o Prêmio Top Blog reconheceu e premiou, mediante votação popular e técnica, os melhores blogs nacionais de acordo com suas editorias.
Movimentou em 5 edições mais de 160 mil blogs dos mais diversos temas em todo o país.
Em 2015, o Top Blog retorna com repertório ampliado e nova proposta de premiação. Nosso objetivo é selecionar, recomendar, reconhecer e premiar as melhores iniciativas de produção de conteúdo independente no Brasil em ambiente digital... <a href="http://www.topblog.com.br/sobre-o-top-blog/#" target="_blank">Veja mais</a>.<br />
<br />
<br />
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5768958913026656905.post-7337034300364788532015-08-26T17:35:00.001-07:002015-08-30T02:04:55.895-07:00Widget Formulário de contato personalizado com ícones em uma determinada Página do Blog<br />
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVrx0H7RbliWzp-_w8slGwhc3p0GucNHR-3UDBLteEPx801OJWMIqzLYfGkju5OZw77747IedmdQvT-6diuFie40rotO6UkjxMvgN5C4eJUYMosYonr4bgUWtCswFfDW1fWLIq1H2sH8/s1600/widget+formulario+de+contato+com+icones.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Widget Formulário de contato com ícones em uma determinada página do Blog" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVrx0H7RbliWzp-_w8slGwhc3p0GucNHR-3UDBLteEPx801OJWMIqzLYfGkju5OZw77747IedmdQvT-6diuFie40rotO6UkjxMvgN5C4eJUYMosYonr4bgUWtCswFfDW1fWLIq1H2sH8/s320/widget+formulario+de+contato+com+icones.png" title="Widget Formulário de contato com ícones em uma determinada página do Blog" width="320" /></a></div>
Veja como ter seu Widget formulário de contato personalizado com pequenos ícones e colocá-lo em uma determinada página do Blog.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br /></div>
<div>
Este formulário de contato é um elemento padrão do Blogspot, iremos personalizá-lo deixando bem atraente e ainda você poderá alterar as cores, e cada campo de resposta ganhará pequenos ícones. Veja exemplo na imagem abaixo.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj-cARy9ivO9O7SkeJt5YBFghS9P2AkhLrm4VxavaXcuk2lJw0TreRmrKakXDVxpXlo9TVJtsyZ5uSzMvWqq10zqIX8HgLZ0F26Xd2d4NkPx5V_WkgGlVoh_w5McdXBAUdLDtMEdIHdxM/s1600/formulario+de+contato+para+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj-cARy9ivO9O7SkeJt5YBFghS9P2AkhLrm4VxavaXcuk2lJw0TreRmrKakXDVxpXlo9TVJtsyZ5uSzMvWqq10zqIX8HgLZ0F26Xd2d4NkPx5V_WkgGlVoh_w5McdXBAUdLDtMEdIHdxM/s400/formulario+de+contato+para+blog.png" width="397" /></a></div>
<br />
<h2>
Como colocar Widget Formulário em uma nova página do Blog</h2>
</div>
<div>
<br /></div>
<div>
Primeiro acesse o painel de edição do seu Blog, vá na opção "<b><span style="color: #cc0000;">Modelos</span></b>" e depois em "<b><span style="color: #cc0000;">Editar HTML</span></b>".<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim2U1SGfPuK7JfSHupyfir7jpaHRa0oX2Vyd4HnO61BrXmJmzKP0iQVG2LC-wVxqARk8rO0BbtiKfNrwtL-qHMUNkoQaLdPrHVGEPl257zP0drjH_XHoEbY9LFXAbkLnhNb7De_J4Xbfc/s1600/editar+html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Editar HTML do Blog" border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim2U1SGfPuK7JfSHupyfir7jpaHRa0oX2Vyd4HnO61BrXmJmzKP0iQVG2LC-wVxqARk8rO0BbtiKfNrwtL-qHMUNkoQaLdPrHVGEPl257zP0drjH_XHoEbY9LFXAbkLnhNb7De_J4Xbfc/s400/editar+html.png" title="Clique na imagem para visualizar melhor" width="400" /></a></div>
<br />
Em seguida, clique dentro do código HTML e depois<b> pressione as tecla de atalho</b> "<b><span style="color: #cc0000; font-family: Arial, Helvetica, sans-serif;">Ctrl+F</span></b>" e pesquise por esta TAG "<b style="background-color: #f1c232;"><span style="color: blue;">]]></span><span style="color: #274e13;"></b:skin></span></b>".<br />
<br />
Após encontrar a TAG, logo acima dela acrescente este código CSS:<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b><br /></b></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Código CSS:</b></span><br />
<hr style="align: center; background: #000000; border: 0px; height: 1px; width: 100%;" />
<br />
/*----Formulário de contato---*/<br />
<br />
#ContactForm1 {<br />
display: none;<br />
}<br />
<br />
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {<br />
width: 300px;<br />
height: auto;<br />
margin: 10px auto;<br />
padding: 10px;<br />
background: <b><span style="color: #990000;">#fdfdfd</span></b>;<b> <span style="color: #38761d;">/*--- Cor do Fundo do campo Nome e Email----*/</span></b><br />
color: <b><span style="color: #990000;">#666</span></b>; /<b><span style="color: #38761d;">*---Cor da Letra do </span></b><b><span style="color: #38761d;">campo Nome e Email</span></b><b><span style="color: #38761d;">---*/</span></b><br />
border: 2px solid <b><span style="color: #990000;">#696969</span></b>; <b><span style="color: #38761d;">/*---Cor das Bordas </span></b><b><span style="color: #38761d;">campo Nome e Email</span></b><b><span style="color: #38761d;">---*/</span></b><br />
transition: all 0.5s ease-in-out;<br />
}<br />
<br />
#ContactForm1_contact-form-email-message {<br />
width: 450px;<br />
height: 175px;<br />
margin: 10px auto;<br />
padding: 10px;<br />
background: <b><span style="color: purple;">#fdfdfd</span></b>; <span style="color: #38761d;"><b>/*---Cor do fundo do campo mensagem---*/</b></span><br />
color: <b><span style="color: purple;">#666</span></b>; /<b><span style="color: #38761d;">*---Cor da letra do campo mensagem---*/</span></b><br />
font-family: 'Roboto',sans-serif;<br />
border: 2px solid <b><span style="color: purple;">#696969</span></b>; <b><span style="color: #38761d;">/*---Cor das Bordas do campo mensagem---*/</span></b><br />
transition: all 0.5s ease-in-out;<br />
}<br />
<br />
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {<br />
background: <b>#fff</b>; <span style="color: #38761d;"><b>/*---Fundo hover de todos os campos---*/</b></span><br />
outline: none;<br />
border: 2px solid <b>#f8a82a</b>;<b><span style="color: #38761d;"> /*---Borda hover de todos os campos---*/</span></b><br />
<b><span style="color: #38761d;">}</span></b><br />
<br />
#ContactForm1_contact-form-submit {<br />
font-size: 15px;<br />
font-family: Arial, Helvetica, sans-serif;<br />
width: 101px;<br />
height: 35px;<br />
float: left;<br />
color:<b> <span style="color: blue;">#fff</span></b>; <b><span style="color: #38761d;">/*--- cor da letra do Botao---*/</span></b><br />
padding: 0;<br />
margin: 10px 0 3px 0;<br />
cursor: pointer;<br />
background: <b><span style="color: blue;">#4682B4</span></b>; <b><span style="color: #38761d;">/*--- Cor do fundo do Botao---*/</span></b><br />
border: none;<br />
border-radius: 2px;<br />
transition: background 0.4s linear;<br />
}<br />
<br />
#ContactForm1_contact-form-submit:hover {<br />
background: <b><span style="color: blue;">#436EEE</span></b>; <span style="color: #38761d;"><b>/*--- Cor do fundo Hover do botão---*/</b></span><br />
}<br />
<br />
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {<br />
width: 450px;<br />
margin-top: 35px;<br />
}<br />
<hr style="align: center; background: #000000; border: 0px; height: 1px; width: 100%;" />
<br />
<br />
Agora, utilize novamente as teclas de atalho "<b><span style="color: red;">Ctrl+F</span></b>" e procure por esta segunda Tag "<span style="background-color: orange;"></head></span>", e logo <b>acima </b>dela <b>acrescente</b> este código:<br />
<br />
<span style="color: red;"><b><link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> </b></span><br />
<br />
<br />
Depois, salve clicando em "<b><span style="color: #cc0000;">Salvar modelo</span></b>".<br />
<br />
<h2>
Adicionando o Script do formulário em uma determinada página</h2>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-ohB_OiD94wWi2N9FM52gPuCbsqbZSno9zm01A7b1eVxu7jY7j7PpfB2SRFuMGDvU9ZUDsQJmU8Yv5jXz7w-ZzgTBr9NpGXd6A-ZjKbQbuxhqgPhnFYXZSHIB0xhOStFSQjfEnotCQo/s1600/adicionando+formulario+de+contato+no+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Como adicionar formulário de contato em uma determinada página do Blog" border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-ohB_OiD94wWi2N9FM52gPuCbsqbZSno9zm01A7b1eVxu7jY7j7PpfB2SRFuMGDvU9ZUDsQJmU8Yv5jXz7w-ZzgTBr9NpGXd6A-ZjKbQbuxhqgPhnFYXZSHIB0xhOStFSQjfEnotCQo/s400/adicionando+formulario+de+contato+no+blog.png" title="Clique na imagem para visualizar melhor" width="400" /></a></div>
<br /></div>
<div>
Agora, iremos adicionar o formulário em uma nova página do Blog, então, <b>crie uma nova página</b> ou <b>edite uma página</b> já criada.</div>
<div>
<br />
<ul>
<li>Quando estiver editando a página, clique no botão "<b>HTML</b>".</li>
</ul>
</div>
<div>
<br />
<ul>
<li>Em seguida, <b><span style="color: #cc0000;">insira este código no HTML</span></b> da página e depois <b>Salve</b>.</li>
</ul>
<div>
<br /></div>
</div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Código do formulário</b></span>:<br />
<hr style="align: center; background: #000000; border: 0px; height: 1px; width: 100%;" />
</div>
<div>
<form name="contact-form"><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> <b>Nome</b></span><br />
<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> <b> Seu E-mail </b> <span style="color: red; font-weight: bolder;">*</span></span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> <b> Mensagem </b> <span style="color: red; font-weight: bolder;">*</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<br />
<input id="ContactForm1_contact-form-submit" type="button" value="Enviar" /> <br />
<div style="max-width: 222px; text-align: center; width: 100%;"><br />
<div id="ContactForm1_contact-form-error-message"><br />
</div><br />
<div id="ContactForm1_contact-form-success-message"><br />
</div><br />
</div><br />
</form></div>
<div>
<hr style="align: center; background: #000000; border: 0px; height: 1px; width: 100%;" />
</div>
<div>
<br /></div>
<div>
Pronto! Depois, acesse sua página de contato e veja o resultado.<br />
<br />
<br />
<h2>
Como editar as cores do formulário de contato</h2>
</div>
<div>
Se você desejar mudar as cores do formulário é fácil, a alteração será feita no "<b><span style="color: #990000; font-family: Arial, Helvetica, sans-serif;">código CSS</span></b>", observe que no primeiro código eu destaquei em cores diferente e notifiquei cada linha informando o que deve ser feito, basta seguir as explicações destacada.</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Referente ao campo Nome e E-mail:</b></span></blockquote>
<div>
<ul>
<li><b>Cor do fundo</b>: Substitua esta parte "<b><span style="color: #990000;">#fdfdfd</span></b>" por outro código de cor em HTMl. (<b><a href="http://codigos.2cmultimidia.com/2014/07/tabela-de-cores-1.html" target="_blank">Acessar tabela de cores em HTML</a></b>)</li>
<li><b>Cor da letra</b>: Substitua esta parte "<b><span style="color: #990000;">#666</span></b>" por outro código de cor em HTML.(<b><a href="http://codigos.2cmultimidia.com/2014/07/tabela-de-cores-1.html" target="_blank">Tabela de cores em HTML</a></b>)</li>
<li><b>Bordas</b>: Substitua esta parte " <b><span style="color: #990000;">#696969</span></b>" por outra cor em HTML. (<b><a href="http://codigos.2cmultimidia.com/2014/07/tabela-de-cores-1.html" target="_blank">Tabela de cores em HTML</a></b>)</li>
</ul>
<br />
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Referente ao campo Mensagem:</b></span></blockquote>
</div>
<div>
<ul>
<li><b>Cor do Fundo</b>: Substitua esta parte "<b><span style="color: purple;">#fdfdfd</span></b>" por outra cor em HTML. (<b><a href="http://codigos.2cmultimidia.com/2014/07/tabela-de-cores-1.html" target="_blank">Acessar tabela de cores em HTML</a></b>)</li>
<li><b>Cor da letra</b>: Substitua esta parte "<b><span style="color: purple;">#666</span></b>" por outro código de cor em HTML. (<b><a href="http://codigos.2cmultimidia.com/2014/07/tabela-de-cores-1.html" target="_blank">Acessar tabela de cores em HTML</a></b>)</li>
<li><b>Cor das Bordas</b>: Substitua esta parte "<b><span style="color: purple;">#696969</span></b>" por outro código de cor em HTML. (<b><a href="http://codigos.2cmultimidia.com/2014/07/tabela-de-cores-1.html" target="_blank">Acessar tabela de cores em HTML</a></b>)</li>
</ul>
<br />
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Referente ao efeito Hover dos campos "Nome, E-mail e Mensagem":</b></span></blockquote>
<blockquote class="tr_bq">
Para quem não sabe o "Efeito Hover" é aquele mesmo efeito executado através da ação do mouse, quando passamos ou clicamos o elemento muda de cor. </blockquote>
<div>
<ul>
<li><b>Cor do Fundo Hover</b>: Substitua esta parte "<b>#fff</b>" por outro código de cor em HTML.</li>
<li><b>Cor das Bordas</b>: Substitua esta parte "<b>#f8a82a</b>" por outro código.</li>
</ul>
<div>
<br /></div>
<blockquote class="tr_bq">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Botão Enviar</b></span>:</blockquote>
<div>
<ul>
<li><b>Cor do Fundo</b>: Substitua esta parte "<b><span style="color: blue;">#4682B4</span></b>" por outro código de cor em HTML.</li>
<li><b>Cor da Letra</b>: Substitua esta parte "<b><span style="color: blue;">#fff</span></b>" por outro código de cor em HTML.</li>
<li><b>Cor do Fundo Hover</b>: Substitua esta parte "<b><span style="color: blue;">#436EEE</span></b>" por outro código de cor em HTML.</li>
</ul>
</div>
<div>
<br /></div>
<div>
Espero que tenham gostado, deixem comentários. Obrigado!</div>
</div>
</div>
</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5768958913026656905.post-82701202940664613142015-07-05T20:12:00.000-07:002015-07-05T20:20:17.624-07:00Como alterar o ícone do Blog que aparece na aba do navegador <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8p90TbXlYiiWYd_EuTT9xXQhsa2fYa8hmFIVUmbYw5jODPQ527TIdyq8nMvTKw0XPrilISBeNiduv4qJxCf1IHwLn5wIz83BQmLNeVe-Ba7Jc-9Mu0ro77N5OvqMSdc6KFE2WolAcDp8/s1600/alterar+iconer+do+blogspot.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Como alterar o ícone do Blog que aparece na aba do navegador" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8p90TbXlYiiWYd_EuTT9xXQhsa2fYa8hmFIVUmbYw5jODPQ527TIdyq8nMvTKw0XPrilISBeNiduv4qJxCf1IHwLn5wIz83BQmLNeVe-Ba7Jc-9Mu0ro77N5OvqMSdc6KFE2WolAcDp8/s320/alterar+iconer+do+blogspot.png" title="Como alterar o ícone do Blog que aparece na aba do navegador" width="320" /></a></div>
<br />
Veja como alterar aquele <b>ícone</b> do<b> Blogspot</b> que aparece na aba do navegador, e substituí-lo por um ícone personalizado para o seu Blog...<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br />
Você já deve ter visto que a maioria dos Blogs possuem o ícone que aparece na aba do navegador diferente dos Blogs comuns. Saiba que, o Blogspot também disponibiliza essa alteração, veja como:<br />
<br />
<br />
<h2>
Como alterar o ícone do Blogspot </h2>
<br />
Tecnicamente chamamos este ícone de "<b><span style="color: #990000;">Favicon</span></b>", ele é, aquela imagem que aparece na aba do navegador. E para fazer a alteração, basta fazer os seguintes procedimentos mostrado logo abaixo:<br />
<br />
<b>1º Passo</b>: Acesse o painel de edição do seu Blog e clique na opção <b><span style="color: #990000;">Layout</span></b>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnLCNr5N56K3OYyjgFp4fscVZtUYre8xeGBra65UmFFiAHwjzuXSdivQVHJji9O9vY_jgUZ3rNqYSpy-U57ZLo4VVWXry3GVsrw9brP7zQW90AFv724Mjum8nCdONMwSSZrkFQhzUPbs/s1600/Layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnLCNr5N56K3OYyjgFp4fscVZtUYre8xeGBra65UmFFiAHwjzuXSdivQVHJji9O9vY_jgUZ3rNqYSpy-U57ZLo4VVWXry3GVsrw9brP7zQW90AFv724Mjum8nCdONMwSSZrkFQhzUPbs/s320/Layout.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>2º Passo</b>: Após entrar no Layout, você vai procurar um elemento chamado "<b><span style="color: #990000;">Favicon</span></b>" e em seguida clicar em "<b><span style="color: #990000;">Editar</span></b>":</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QzulwXZScrWU2fMJrmQko3tz-iHO-NWDHx1HBsicQzErzk0I3tjxu2N2HtC3MDcUo54WEKdKSWQVvjriA7gbm3CQuRMTa_SSzt4796Ih8EmX1SqPDrEPV8se-5MkVIlW_vPJK69j5q0/s1600/editar+icone+do+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Como alterar o ícone do Blog que aparece na aba do navegador" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QzulwXZScrWU2fMJrmQko3tz-iHO-NWDHx1HBsicQzErzk0I3tjxu2N2HtC3MDcUo54WEKdKSWQVvjriA7gbm3CQuRMTa_SSzt4796Ih8EmX1SqPDrEPV8se-5MkVIlW_vPJK69j5q0/s320/editar+icone+do+blog.png" title="Clique na imagem do para ampliar e visualizar melhor " width="320" /></a></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
Em seguida, será aberto uma nova janela e você vai clicar no botão "<b><span style="color: #990000;">Escolher arquivo</span></b>" e enviar sua imagem, depois finalize clicando em "<b><span style="color: #990000;">Salvar</span></b>".</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaTXqdXr4ETGNdOY0PE6tcRpoycG34tZkMWLXFI1pQ_HnvTV8DoMxu_qwnKc94uQ6Rnxk2Eck6EwGlercAd3GJaB6ztq8XB8QjuiLwxsRmkXgT-2mdTs6UsYfs_QxQY3dE0T0Z32jyqU/s1600/salvar+arquivo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Como alterar o ícone do Blog que aparece na aba do navegador" border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaTXqdXr4ETGNdOY0PE6tcRpoycG34tZkMWLXFI1pQ_HnvTV8DoMxu_qwnKc94uQ6Rnxk2Eck6EwGlercAd3GJaB6ztq8XB8QjuiLwxsRmkXgT-2mdTs6UsYfs_QxQY3dE0T0Z32jyqU/s320/salvar+arquivo.png" title="Clique na imagem para visualizar" width="320" /></a></div>
<br />
<hr style="align: center; background: #000000; border: 0px; height: 3px; width: 100%;" />
<b><span style="color: red;">Observe</span></b>:<br />
<blockquote class="tr_bq">
O Favicon exige que a imagem seja <b><span style="color: #990000;">quadrada</span></b> e com menos de 100KB.</blockquote>
<blockquote class="tr_bq">
O tamanho da imagem recomendo com as dimensões 32x32px.</blockquote>
<blockquote class="tr_bq">
O tipo de formado da imagem pode ser em "<b><span style="color: #990000;">.ICO</span></b>" que é o mais utilizado ou em "<b><span style="color: #990000;">.PNG</span></b>".</blockquote>
<hr style="align: center; background: #000000; border: 0px; height: 3px; width: 100%;" />
<div class="separator" style="clear: both; text-align: left;">
</div>
<br />
Pronto, é só isso pessoal. Obrigado!!!Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-5768958913026656905.post-9815959763355191702015-07-05T18:11:00.000-07:002015-07-05T18:11:59.630-07:00Adicionando links externos no Widget Páginas do Blogspot<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRoEP-KTW-AW_rawhi9LF3NR5sdnCrny1tcIcKD-t0PuHJxKJrs78CgRnEpbz2kxhqe08YiFxTACNx0SYfi7l3Hhp3Eu-sSHz9jGiL6csfMe1LFDwh69ubX6_rtlFmmncedpFZMCvPLE/s1600/widgets+de+paginas+do+blogspot.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRoEP-KTW-AW_rawhi9LF3NR5sdnCrny1tcIcKD-t0PuHJxKJrs78CgRnEpbz2kxhqe08YiFxTACNx0SYfi7l3Hhp3Eu-sSHz9jGiL6csfMe1LFDwh69ubX6_rtlFmmncedpFZMCvPLE/s320/widgets+de+paginas+do+blogspot.png" width="320" /></a></div>
Veja como adicionar links que não são de páginas do Blog, e colocá-los no mesmo "<b>Widgets de Páginas</b>" do Blog...<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
O <b>Widgets Páginas</b> é um plugin padrão do Blogspot, que inserimos no Blog para que os links de páginas internas apareçam todas agrupadas na página inicial do Blog. Além de páginas internas, também podemos adicionar <b>links externos</b> que não são de páginas, como por exemplo: <b><span style="color: #990000;">Links de redes sociais</span></b>, <b><span style="color: #990000;">URL de postagens</span></b>, <b><span style="color: #990000;">marcadores</span></b> e etc..<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig-d_MOEdOKdRKDGAJTLY2eg79KU2_FYV_NRgj4qxxR14Kc7S_Moyr18DopX0yUGxQ4mk4eUCKL7cF4MTw-YC0yZeL6TRVSvSNPbPw7WgNJPixIR_vxQ_wL12wq-yNx928uv0FMTe4pXI/s1600/Widget+Paginas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig-d_MOEdOKdRKDGAJTLY2eg79KU2_FYV_NRgj4qxxR14Kc7S_Moyr18DopX0yUGxQ4mk4eUCKL7cF4MTw-YC0yZeL6TRVSvSNPbPw7WgNJPixIR_vxQ_wL12wq-yNx928uv0FMTe4pXI/s400/Widget+Paginas.png" width="400" /></a></div>
<h2 style="clear: both; text-align: left;">
Como adicionar links externos no Widgets de Páginas</h2>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>1º Primeiro Passo</b>: Acesse o painel de edição do seu Blog, e clique na opção Layout.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7dz6R5N5rVvYITQ1hX7P8gsE3dhlnoOze6eP3Af5aUi0dcsUlTm3ptBsvyTI0j5gyEZKmbaAFIHsoouIzABJGMhuzCMtjTNazlIheSiHD7zvcW2tKqElcBk4unMEID_KGRQKDM-rsPZk/s1600/Layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Adicionando links externos no Widget páginas do Blogspot" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7dz6R5N5rVvYITQ1hX7P8gsE3dhlnoOze6eP3Af5aUi0dcsUlTm3ptBsvyTI0j5gyEZKmbaAFIHsoouIzABJGMhuzCMtjTNazlIheSiHD7zvcW2tKqElcBk4unMEID_KGRQKDM-rsPZk/s400/Layout.png" title="Clique na imagem para visualizar melhor" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>2º Segundo Passo</b>: Se você tem o <b><span style="color: #990000;">Widgets Páginas</span></b> já adicionado no Blog basta clicar em "<b><span style="color: #990000;">Editar</span></b>". </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjaAvd8RdZmD7bMFBePc2HDU2gaOpxmC3XbYSeV1vYn6NjsKFiHKn0-bxj_MWKOUzO3gvZOKLCvzVkCcWybVt9JaBAiGq6HNIAYxgsjM68AW9hnFTBGat5Fq1poPbzVyLKtpko_nIYAtc/s1600/clique+em+editar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjaAvd8RdZmD7bMFBePc2HDU2gaOpxmC3XbYSeV1vYn6NjsKFiHKn0-bxj_MWKOUzO3gvZOKLCvzVkCcWybVt9JaBAiGq6HNIAYxgsjM68AW9hnFTBGat5Fq1poPbzVyLKtpko_nIYAtc/s400/clique+em+editar.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 100%;" />
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<b><span style="color: #cc0000;">OBSERVE</span></b>: Se você não tem o "<b>Widget Páginas</b>", clique em "<b><span style="color: #990000;">Adicionar um Gadget</span></b>" e depois na opção "<b>Páginas</b>".</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidUO7Sdk0dG8GQ3A52k05UEt1RdhZG3uwdCJnFCvQcqcAMgRIwZHR_u1rG6ADxKDNc0cVRA1Xu0ejeSanRoOAQ4ttyOAmcxuyXpGvJo2eJarmocUlQWbx2jkgjLIGN6SDXMiPLZx9FLZc/s1600/widget+paginas+do+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidUO7Sdk0dG8GQ3A52k05UEt1RdhZG3uwdCJnFCvQcqcAMgRIwZHR_u1rG6ADxKDNc0cVRA1Xu0ejeSanRoOAQ4ttyOAmcxuyXpGvJo2eJarmocUlQWbx2jkgjLIGN6SDXMiPLZx9FLZc/s400/widget+paginas+do+blog.png" width="400" /></a></div>
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 100%;" />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>3º Terceiro Passo</b>: Depois de editar ou adicionar seu Widgets Páginas, clique em "<b><span style="color: #990000;">Adicionar um link externo</span></b>".</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUkV6Luwkyd7rJPpV-T3ao-iWilx1Ok_XFJIa5UEP0E3ujvU0OslO9So7V7tfqDzRRzUlv4rO567xmk8Xse8uZRJwqjX4Km6aiBAPaXEBXLvNdSmYLdpOanUOswrjKnxBAl2EsG3hRr4/s1600/adicionar+um+link+externo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUkV6Luwkyd7rJPpV-T3ao-iWilx1Ok_XFJIa5UEP0E3ujvU0OslO9So7V7tfqDzRRzUlv4rO567xmk8Xse8uZRJwqjX4Km6aiBAPaXEBXLvNdSmYLdpOanUOswrjKnxBAl2EsG3hRr4/s400/adicionar+um+link+externo.png" width="375" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
Em seguida, será aberto uma caixa de diálogo onde você irá colocar um<b> título</b> e <b>adicionar um link</b> externo.</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOH37O_BuJXPvrFLIWOIztgyrFMVXVkuNCr4G0Fm0eEQa886Y5ucOFHuj6YITwdmrdTt1j-k2KZCWAVs34Baa0IfryFFuZJL2g0kqWLNIOvN66ztSiYjF1BkrqJEqNjWt91bvlNdAiIi8/s1600/inserir+link+externo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOH37O_BuJXPvrFLIWOIztgyrFMVXVkuNCr4G0Fm0eEQa886Y5ucOFHuj6YITwdmrdTt1j-k2KZCWAVs34Baa0IfryFFuZJL2g0kqWLNIOvN66ztSiYjF1BkrqJEqNjWt91bvlNdAiIi8/s400/inserir+link+externo.png" width="375" /></a></div>
<br />
<blockquote class="tr_bq">
Depois de inserir as informações clique em "<b><span style="color: #990000;">Salvar link</span></b>".</blockquote>
<blockquote class="tr_bq">
Para adicionar mais links basta você fazer o mesmo procedimento mais vezes. </blockquote>
<br />
Pronto pessoal, é só isso. Obrigado!!!Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5768958913026656905.post-27500145771719635012015-06-28T18:16:00.001-07:002015-06-28T18:16:53.793-07:00Menu horizontal com sub-menus e botões de redes sociais para Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikAmmloxIwfy0PBHMgg09beOhJufAjp899Z2dLPUpI9AjJJCPcgVTgatr_Zex7gR1JiBtfw96P1AjAH8LOUXaG0tKt4JtiIezEFf52Z2gp6OsznE2PbfEXZia4HHSbdiXv5ZKj1Bz2F-A/s1600/menu+horizontal+com+redes+sociais+para+blogs.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikAmmloxIwfy0PBHMgg09beOhJufAjp899Z2dLPUpI9AjJJCPcgVTgatr_Zex7gR1JiBtfw96P1AjAH8LOUXaG0tKt4JtiIezEFf52Z2gp6OsznE2PbfEXZia4HHSbdiXv5ZKj1Bz2F-A/s320/menu+horizontal+com+redes+sociais+para+blogs.png" width="320" /></a></div>
Veja como colocar um menu horizontal personalizado com botões de redes sociais no seu Blog. Este menu horizontal compõem <b>menus</b> e <b>sub-menus</b> que é muito eficiente para organizar as páginas do Blog e também permite inserir suas redes sociais...<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br />
Este é um menu CSS horizontal é totalmente editável, você pode mudar as cores e editar todos os botões, e ainda vem com botões de redes sociais (<b>Facebook</b>, <b>Twitter</b>, <b>Google+</b> e <b>YouTube</b>) que é importante para as visitar lhe seguir nas redes sociais. Veja Exemplo:<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
*<span style="color: red;">Clique na imagem para Visualizar</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9G4V0PSTzXd96bX743IDCsS2L68rzyon10OevkZBo8P5X40C88Hu-cEA-QyJGYr4oUXQVCUXa3964tXrB-eWeWXyE3SHJnF_4ok1cERaGbj5biQbdrYAT4NkcHR6AQpeGqwDjtNnI2k/s1600/menu+horizontal+para+blogs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menu horizontal com sub-menus e redes sociais para colocar no Blog" border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX9G4V0PSTzXd96bX743IDCsS2L68rzyon10OevkZBo8P5X40C88Hu-cEA-QyJGYr4oUXQVCUXa3964tXrB-eWeWXyE3SHJnF_4ok1cERaGbj5biQbdrYAT4NkcHR6AQpeGqwDjtNnI2k/s400/menu+horizontal+para+blogs.png" title="Clique na imagem para ampliar e visualizar melhor" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
Ver <a href="http://blogparateste0003.blogspot.com.br/" target="_blank"><b>demostração</b></a> do Menu</div>
<div style="text-align: center;">
<br /></div>
<h2 style="text-align: left;">
Como colocar menu horizontal com sub-menus e botões de redes sociais</h2>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Primeiro acesse o<b> painel de edição </b>do seu Blog, vá na opção "<b><span style="color: #cc0000;">MODELO</span></b>" em seguida clique em "<b><span style="color: #cc0000;">Editar HTML</span></b>" para abrir o HTML do seu Blog.</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinMckeLg10O_tXmS442-u-jPNVVEYqdUIzCemEd1MHP-QNfWaOVQHOOMU5iu-OYgjijjZTcmYW7w00vuBvqMbGHBax0j0JXsfbuW8-jj578KgRcwRzuwqpok49NXI3H1f81PWwMHQRDgw/s1600/editar+HTML+do+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Editando HTML do Blog" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinMckeLg10O_tXmS442-u-jPNVVEYqdUIzCemEd1MHP-QNfWaOVQHOOMU5iu-OYgjijjZTcmYW7w00vuBvqMbGHBax0j0JXsfbuW8-jj578KgRcwRzuwqpok49NXI3H1f81PWwMHQRDgw/s400/editar+HTML+do+Blog.png" title="Clique na imagem para ampliar" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: left;">
Estando no HTML do seu Blog, dê um <b>clique</b> <b>em qualquer parte</b> do código e pressione as teclas de atalho "<b><span style="color: #cc0000;">Ctrl</span></b>+<b><span style="color: #cc0000;">F</span></b>" do seu teclado para abrir a "<b><span style="color: #cc0000;">caixa de pesquisa</span></b>".</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fwBuUYT0_J1AGKVgBs6cWZxpGFgmAwcyVtZ4AAcR_peTQ1Q-AXl-sSl-4AEap7Ctally2qlzjCJYLqhIhbMCrn696JwrK4p7zz-wUuhFCuoUNRpJlUM9s7aO8SKTAKpLQryX3XiRB8A/s1600/ctrl+f.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fwBuUYT0_J1AGKVgBs6cWZxpGFgmAwcyVtZ4AAcR_peTQ1Q-AXl-sSl-4AEap7Ctally2qlzjCJYLqhIhbMCrn696JwrK4p7zz-wUuhFCuoUNRpJlUM9s7aO8SKTAKpLQryX3XiRB8A/s320/ctrl+f.png" width="320" /></a></div>
<blockquote class="tr_bq">
Na caixa de pesquisa você vai inserir esta Tag " <span style="background-color: #ffe599;"><b><span style="color: #0b5394;">]]></span></b><b><span style="color: #38761d;"></b:skin></span></b></span> " e pressione <b>Enter</b> para localizar.</blockquote>
Após localizar a Tag, logo <b>acima</b> dela "<b style="color: #cc0000;">acrescente</b>" este código CSS:<br />
<br />
<div style="text-align: center;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Código CSS</span></b></div>
<hr style="align: center; background: #000000; border: 0px; height: 6px; width: 100%;" />
<br />
/* CSS Main Menu Hover*/<br />
#menu-wrapper{background:<b><span style="color: purple;"> </span><span style="color: #274e13;">#222</span></b> ;height:40px;width:100%;position:relative;}<br />
#menu{background:<b><span style="color: purple;"> </span><span style="color: #274e13;">#222</span></b>;color: #fff ;height:40px;padding-top: -10px}<b><span style="color: magenta;"> </span><span style="color: #274e13;">/*------ mudar a cor do fundo ----*/</span></b><br />
#menu ul,#menu li{margin:0;padding:0;list-style:none;}<br />
#menu ul{height:40px;}<br />
#menu li{float:left;display:inline;position:relative;font-family:'Oswald', sans-serif;font-size:14px;font-weight:400;text-transform:uppercase;}<br />
#menu li a{color: <b>#fff</b>;}<br />
<br />
#menu a{display:block;line-height:40px;padding:0 15px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}<br />
#menu li:hover > a{background: <b><span style="color: blue;">#4F4F4F</span></b>;color: <b>#fff</b>;} <span style="color: blue;">/<b>*------ mudar a cor do fundo Hover ----*/</b></span><br />
#menu li a:hover{background: <b><span style="color: blue;">#4F4F4F</span></b>;color: <b>#fff</b>;} <b><span style="color: blue;">/*------ mudar a cor do fundo Hover ----*/</span></b><br />
<br />
#menu input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}<br />
#menu label{font-family:'Oswald', sans-serif;font-size:30px;font-weight:400;display:none;width:35px;height:51px;line-height:51px;text-align:center}<br />
<br />
#menu label span{font-size:13px;position:absolute;left:35px}<br />
#menu ul.menus{height:auto;overflow:hidden;width:166px;background:#fff;position:absolute;z-index:99;display:none;color:#444;box-shadow:0px 10px 0px -5px rgba(0,0,0,0.3);transition:all 0.3s ease-in-out;}<br />
#menu ul.menus a{background:#fff;color:#444;}<br />
#menu ul.menus a:hover{padding-left:25px;color:#dd4c39;box-shadow:none;}<br />
#menu ul.menus li{display:block;width:100%;font-family:'Open Sans';font-size:13px;font-weight:400;text-transform:none;transition:all 0.1s ease-in-out;}<br />
#menu ul.menus li:hover{width:100%;}<br />
#menu ul.menus li:last-child {}<br />
#menu ul.menus li:first-child a{border-top:none;}<br />
#menu ul.menus li:last-child a{}<br />
#menu ul.menus li:hover a {color:#dd4c39;}<br />
#menu li:hover ul.menus{display:block;}<br />
<br />
#menu .homers a{background: <b><span style="color: red;">#4F4F4F</span></b>; color: <b>#fff</b>;} <b><span style="color: red;">/*--mudar a cor do fundo do botão inicio---*/</span></b><br />
#menu .homers a:hover{background: <b><span style="color: red;">#4F4F4F</span></b>; color: <b>#fff</b>;} <b><span style="color: red;">/*--mudar a cor do fundo Hover </span></b><b><span style="color: red;">do botão inicio</span></b><b><span style="color: red;">---*/</span></b><br />
<br />
/* social */<br />
<br />
#menu .SocialIcons {float:right;overflow:hidden;}<br />
#menu .SocialIcons ul li a {display:block;text-indent:-300px;float:left;width:25px;}<br />
<br />
#menu .SocialIcons ul li.icon_google a {background: <b><span style="color: purple;">#404040</span></b> url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKj5xBuhCNmEC9fI2C0C8zExFGjeAmC1XIFF3alZqM2udG37GBGIUvZBAZjJZmVuhlEOn0vy0cftlCrsQvFstYIoZHxMxyj7IiGLW0wdSXUHGZa46tDVJ6kgkD7wutGuRe1psB_UCz7Jex/s1600/googleplus.png) no-repeat center center;transition:all 0.2s ease-in-out;}<br />
<br />
#menu .SocialIcons ul li.icon_google a:hover{background: #dd4b39 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKj5xBuhCNmEC9fI2C0C8zExFGjeAmC1XIFF3alZqM2udG37GBGIUvZBAZjJZmVuhlEOn0vy0cftlCrsQvFstYIoZHxMxyj7IiGLW0wdSXUHGZa46tDVJ6kgkD7wutGuRe1psB_UCz7Jex/s1600/googleplus.png) no-repeat center center;}<br />
<br />
#menu .SocialIcons ul li.icon_facebook a {background: <b><span style="color: purple;">#404040</span></b> url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9GiRuRZfYJM0gWnOSODJpVsoxL02QncA9BrsOaI8dyDFJ-6k-zJOqTtYBEi8M2Rf5xbeBHT3Xyy_PWcDG4li6iaQCB_9JWJFGrCJURpxbozwzYnUHxT3ZhGqEhhIriaxl336fCXv5Ac/s1600/facebook.png) no-repeat center center;transition:all 0.2s ease-in-out;}<br />
<br />
#menu .SocialIcons ul li.icon_facebook a:hover{background: #3b5998 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9GiRuRZfYJM0gWnOSODJpVsoxL02QncA9BrsOaI8dyDFJ-6k-zJOqTtYBEi8M2Rf5xbeBHT3Xyy_PWcDG4li6iaQCB_9JWJFGrCJURpxbozwzYnUHxT3ZhGqEhhIriaxl336fCXv5Ac/s1600/facebook.png) no-repeat center center;}<br />
<br />
#menu .SocialIcons ul li.icon_youtube a {background: <b><span style="color: purple;">#404040</span></b> url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOw8ptFUjTPP5AUebtzohpfWLZWcy9JynSoO7FX3jz1zMqYnQAlO6bQn8s4e_plCfdDxrTHFGJDOaaJslZSBS6SYn6HinaLouB1YkEwKC6xVDQSunKn2KMEBjjLr1KiPnt8bZtYERhRiS/s1600/youtube.png) no-repeat center center;transition:all 0.2s ease-in-out;}<br />
<br />
#menu .SocialIcons ul li.icon_youtube a:hover{background: #8B0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOw8ptFUjTPP5AUebtzohpfWLZWcy9JynSoO7FX3jz1zMqYnQAlO6bQn8s4e_plCfdDxrTHFGJDOaaJslZSBS6SYn6HinaLouB1YkEwKC6xVDQSunKn2KMEBjjLr1KiPnt8bZtYERhRiS/s1600/youtube.png) no-repeat center center;}<br />
<br />
#menu .SocialIcons ul li.icon_twitter a {background: <b><span style="color: purple;">#404040</span></b> url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJHDGaxL6367qzNnGGC30Q6JPTvDXmavrBvXARnuTX0uugbXSzZnx4Jq_QRe8drlGNnWYUe_kAPEd76tACXx-Ug0QS155QL4HNE-zgiuvPOZomEUDxOThux9kDq102D42EceSyC_Mak9M/s1600/twitter.png) no-repeat center center;transition:all 0.2s ease-in-out;}<br />
<br />
#menu .SocialIcons ul li.icon_twitter a:hover{background:#55acee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJHDGaxL6367qzNnGGC30Q6JPTvDXmavrBvXARnuTX0uugbXSzZnx4Jq_QRe8drlGNnWYUe_kAPEd76tACXx-Ug0QS155QL4HNE-zgiuvPOZomEUDxOThux9kDq102D42EceSyC_Mak9M/s1600/twitter.png) no-repeat center center;}<br />
<br />
#menu ul.sub li {<br />
position:relative;<br />
float:left;<br />
background-color:#222;<br />
}<br />
#menu ul.sub {<br />
position:absolute;<br />
top:40px;<br />
left:0;<br />
display:none;<br />
z-index:999;<br />
}<br />
#menu li:hover ul.sub, #menu li.over ul.sub{display:block;}<br />
#menu ul.sub li{<br />
display:block;<br />
width:150px;<br />
}<br />
<br />
<hr style="align: center; background: #000000; border: 0px; height: 6px; width: 100%;" />
<div style="text-align: center;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Fim do código CSS</span></b></div>
<h3>
</h3>
<h3>
Adicionar o Script do Menu</h3>
Próximo passo é adicionar o Script do menu, então, pressione novamente as teclas de atalho "<b><span style="color: #cc0000;">Ctrl</span></b>+<b><span style="color: #cc0000;">F</span></b>" e pesquisar esta segunda Tag " <b><span style="background-color: #ffe599; color: #274e13;"></header></span></b> ". <br />
<br />
Quando encontrar a segunda Tag, logo acima da mesma coloque o código Script do Menu.<br />
<br />
<div style="text-align: center;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Código Script</span></b></div>
<hr style="align: center; background: #000000; border: 0px; height: 6px; width: 100%;" />
<br />
<div id='menu-wrapper'><br />
<div class='content-wrapper'><br />
<nav id='menu'><br />
<ul><br />
<li class='homers'><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b>'><b> <span style="color: red;">Início</span></b></a></li><br />
<li><a href='#'><b><span style="color: red;">Sobre</span></b> &#187;</a><br />
<span style="background-color: #b4a7d6;"><ul class='<b>sub</b>'></span><br />
<li><a href='<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b> </b></span><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL </span></b>'><b><span style="color: red;">Sobre nós</span></b></a></li><br />
<li><a href='<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b> </b></span><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL </span></b>'><b><span style="color: red;">Anúncio</span></b></a></li><br />
<li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL </span></b>'><b><span style="color: red;">Parceria</span></b></a></li><br />
</ul><br />
</li><br />
<br />
<li><a href='#'><b><span style="color: red;">Categorias</span></b> &#187;</a><br />
<span style="background-color: #b4a7d6;"><ul class='<b>sub</b>'></span><br />
<li><a href='<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b> </b></span><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL </span></b>'><b><span style="color: red;">Fotos</span></b></a></li><br />
<li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>'><b><span style="color: red;">Vídeos</span></b></a></li><br />
<li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>'><b><span style="color: red;">Músicas</span></b></a></li><br />
</ul><br />
</li><br />
<br />
<li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>'><b><span style="color: red;">Contato</span></b></a></li><br />
<li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>'><b><span style="color: red;">Serviços</span></b></a></li><br />
<li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>'><b><span style="color: red;">Download</span></b></a></li><br />
<li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>'><b><span style="color: red;">Artigos</span></b></a></li><br />
<br />
<li class='SocialIcons'><br />
<ul><br />
<li class='icon_facebook'><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>' target='_blank'><b>Facebook</b></a></li><br />
<li class='icon_twitter'><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>' target='_blank'><b>Twitter</b></a></li><br />
<li class='icon_google'><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>' target='_blank'><b>Google+</b></a></li><br />
<li class='icon_youtube'><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>' target='_blank'><b>YouTube</b></a></li><br />
</ul><br />
</li><br />
</ul><br />
</nav><br />
</div><br />
</div><br />
<hr style="align: center; background: #000000; border: 0px; height: 6px; width: 100%;" />
<div style="text-align: center;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Fim do Código Script</span></b></div>
<div style="text-align: center;">
<b><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></b></div>
<br />
Depois de ter inserido os dois códigos do menu, é preciso em seguida "<b>visualizar o template</b>" para verificar se tudo ocorreu bem, então clique no Botão "<b><span style="color: #cc0000;">Visualizar modelo</span></b>".<br />
<br />
Após a verificação, volte ao HTML do Blog clicando no botão "<b><span style="color: #990000;">Editar modelo</span></b>" para em seguida <b>editar o menu</b>.<br />
<br />
<h2>
Editando menu</h2>
<div>
<div style="text-align: center;">
"Nesta parte é preciso ter bastante atenção para não erra nada".</div>
</div>
<div>
<br /></div>
<div>
O código que iremos editar será o "<b>Script do menu</b>" que é o segundo código que foi inserido no Blog.<br />
<blockquote class="tr_bq">
Observe que eu destaquei algumas parte do menu em cores diferentes.</blockquote>
</div>
<blockquote class="tr_bq">
<ul>
<li>Onde está destacado em vermelho trata-se do <b>titulo</b> de cada botão, e você pode <b>renomear</b> cada um deles: (<b><span style="color: red;">Início</span></b>,<b><span style="color: red;"> </span></b><b><span style="color: red;">Categorias</span></b>,<b><span style="color: red;"> </span></b><b><span style="color: red;">Contato</span></b>,<b><span style="color: red;"> </span></b><b><span style="color: red;">Serviços</span></b>,<b><span style="color: red;"> </span></b><b><span style="color: red;">Download</span></b>,<b><span style="color: red;"> </span></b><b><span style="color: red;">Artigos</span></b>..) entre outros.</li>
</ul>
</blockquote>
<blockquote class="tr_bq">
<ul>
<li>Em azul "<b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b>" você vai <b>substituir </b>pelo endereço da página. </li>
</ul>
</blockquote>
<blockquote class="tr_bq">
<b>Exemplo</b>:</blockquote>
<blockquote class="tr_bq">
<span style="background-color: #a2c4c9;"><li><a href='<b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">http://variasdicasparablogs.blogspot.com/p/contato.html</span></b>'><b><span style="color: red;">Contato</span></b></a></li>.</span></blockquote>
<blockquote class="tr_bq">
<ul>
<li>Os botões de <b>redes sociais</b> altere somente a "<b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b>" o <b>título não é necessário</b>, pois o botão utiliza imagem.</li>
</ul>
</blockquote>
<br />
Depois de editar cada botão, antes de <b>salvar</b> verifique seu template. Se tudo ocorreu bem cliquem em "<b><span style="color: #cc0000;">Salvar modelo</span></b>".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh19SK5JaKwKEzklNh8JMMC2TLhK_ksgf09ye26lkdZXXVVXHPDwT0ETGtBpkATtHIaO-abUVk0heww2knYLC3GE8Yw7UTNSoynJqBv_opPmBCtLcPnh3YU5CmmJGchyphenhyphenm9Ta67Rqn3vXPs/s1600/salvar+template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Salvar template do Blog" border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh19SK5JaKwKEzklNh8JMMC2TLhK_ksgf09ye26lkdZXXVVXHPDwT0ETGtBpkATtHIaO-abUVk0heww2knYLC3GE8Yw7UTNSoynJqBv_opPmBCtLcPnh3YU5CmmJGchyphenhyphenm9Ta67Rqn3vXPs/s400/salvar+template.png" title="Clique na imagem para visualizar" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pronto!!! Depois de salvar modelo a instalação do menu é concluída e o tutorial termina por aqui.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<hr style="align: center; background: #4682B4; border: 0px; height: 6px; width: 100%;" />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Como Excluir ou adicionar mais Botões</h2>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Excluir botão</span></b>:</blockquote>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
Se por acaso ficar algum botão em branco e deseja excluí-lo, basta<b> apagar</b> a <b>linha</b> referente a onde ele se encontra. (veja exemplo da linha do botão)</blockquote>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<b>EX</b>: <span style="background-color: #cfe2f3;"><li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>'><b><span style="color: red;">Contato</span></b></a></li></span></blockquote>
<blockquote class="tr_bq">
<b>Observe</b>: Se não quiser excluir o botão você pode deixá-lo em branco, basta substituir a parte azul por um sustenido jogo da velha "<b><span style="color: blue;">#</span></b>".</blockquote>
<blockquote class="tr_bq">
<b>EX</b>: <span style="background-color: #cfe2f3;"><li><a href=' </span><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">#</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b><span style="background-color: #cfe2f3;">'></span><b><span style="background-color: #cfe2f3; color: red;">Contato</span></b><span style="background-color: #cfe2f3;"></a></li></span>. </blockquote>
<br />
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Para adicionar mais botões</span></b>:</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1u18fXyxqCBhyphenhyphenI8Q4WLHPpv6JSIwPQ0e6NcjRZcAnNhrXru_xeZwArcg1FF0igFz5nOxYhbRihcnlS2jXiOcc4f0-0CFbwnW7zUUS2JiZNnWPJ1nwkzD1G55pxqCwkmXfAtlVDPpn718/s1600/excluir+menu+do+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1u18fXyxqCBhyphenhyphenI8Q4WLHPpv6JSIwPQ0e6NcjRZcAnNhrXru_xeZwArcg1FF0igFz5nOxYhbRihcnlS2jXiOcc4f0-0CFbwnW7zUUS2JiZNnWPJ1nwkzD1G55pxqCwkmXfAtlVDPpn718/s400/excluir+menu+do+blog.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Você viu que este menu horizontal possui dois "<b>sub-menus</b>" e, se desejar adicionar mais opção dentro dos sub-menus basta fazer as seguintes alterações.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<ul>
<li><b><span style="color: red;">Copie</span></b> este código:</li>
</ul>
</blockquote>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<span style="background-color: #f6b26b;"><li><a href='<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b> </b></span><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL </span></b>'><b><span style="color: red;">TITULO</span></b></a></li></span> </blockquote>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<ul>
<li>Depois <b><span style="color: red;">cole</span></b> o código abaixo da linha do Sub " <span style="background-color: #b4a7d6;"><ul class='</span><b style="background-color: #b4a7d6;">sub</b><span style="background-color: #b4a7d6;">'></span> ". </li>
</ul>
</blockquote>
<blockquote class="tr_bq">
Veja no exemplo como ficaria:</blockquote>
<li><a href='#'><b><span style="color: red;">Categorias</span></b> &#187;</a><br />
<span style="background-color: #b4a7d6;"><ul class='<b>sub</b>'></span><br />
<span style="background-color: #f6b26b;"><li><a href='<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b> </b></span><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL </span></b>'><b><span style="color: red;">TITULO</span></b></a></li></span><br />
<li><a href='<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b> </b></span><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL </span></b>'><b><span style="color: red;">Fotos</span></b></a></li><br />
<li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>'><b><span style="color: red;">Vídeos</span></b></a></li><br />
<li><a href=' <b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">URL</span></b><b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;"> </span></b>'><b><span style="color: red;">Músicas</span></b></a></li><br />
</ul><br />
</li><br />
<br />
<blockquote class="tr_bq">
<ul>
<li>Para colocar mais botões basta repetir o código quantas vezes quiser, sempre um abaixo do outro.</li>
</ul>
<blockquote class="tr_bq">
E pronto!!! Só salvar o modelo</blockquote>
<blockquote class="tr_bq">
</blockquote>
</blockquote>
<br />
<h2>
Como alterar as cores do menu horizontal</h2>
Lembrando que a alteração das cores devem ser feita no "<b>código CSS do menu</b>" que foi mostrado no começo do tutorial.<br />
<br />
<ul>
<li><b>Fundo do menu</b>: Substitua este código de cor "<b><span style="color: #274e13;">#222</span></b>" pelo código da cor em HTML que deseja colocar no menu. (<a href="http://www.flextool.com.br/tabela_cores.html" target="_blank"><b>Ver tabela de cores em HTML</b></a>).</li>
</ul>
<ul>
<li><b>Cor do fundo Hover</b>: Cor do fundo hover é quando passamos o mouse e ele muda de cor, então, substitua este código "<b><span style="color: blue;">#4F4F4F</span></b>" e "<b><span style="color: red;">#4F4F4F</span></b>"pelo código da cor em HTML que deseja colocar. (<a href="http://www.flextool.com.br/tabela_cores.html" target="_blank"><b>Ver tabela de cores em HTML</b></a>).</li>
</ul>
<ul>
<li><b>Cor do fundo das redes sociais</b>: Você vai substituir esta parte " <b><span style="color: purple;">#404040 </span></b>" pelo código da cor em HTM.</li>
</ul>
<ul>
<li><b>Cor da letra</b>: Onde estiver este código destacado em negrito "<b>#fff</b>" o substitua por outra cor.</li>
</ul>
<div>
<br /></div>
<div>
<br /></div>
<div>
É bem fácil de mudar as cores, basta substituir o código HTML por outra cor, e você pode encontrar mais cores em HTM acessando esse link: "<a href="http://www.flextool.com.br/tabela_cores.html" target="_blank"><b>Ver tabela de cores em HTML</b></a>".<br />
<br />
<hr style="align: center; background: #000000; border: 0px; height: 1px; width: 100%;" />
<b><span style="color: red;">Dica importante de edição</span></b>: A onde estiver escrito "<b>background</b>" ele representará a cor do plano de fundo, e onde tem tiver "<b>color</b>" representará a cor da letra, e no código você encontrará eles desse jeito, exemplo:<br />
<span style="background-color: #ffe599;"><b>background</b>: #222; <b>color</b>:#fff</span><br />
Sabendo isto, você conseguirá entender melhor.<br />
<hr style="align: center; background: #000000; border: 0px; height: 1px; width: 100%;" />
</div>
<div>
<br /></div>
<div>
Prontinho pessoal, espero que tenham gostado, aguardo comentários de todos e não deixe de curtir minha fã <a href="https://www.facebook.com/VariasDicasParaBlogs" target="_blank"><b>page no facebook</b></a>.</div>
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-5768958913026656905.post-23590638143473940102015-06-25T20:02:00.000-07:002015-06-25T20:29:08.967-07:00Nova caixa de fãs do facebook para o Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqdSn8IQaLE9vGdjGBVygAAdIvY8KTpOT8iHD1CdBNzVub7uBwJDMMTyPQyLKUEzBKtN1Kwsiwg-4npvfnIngM7ol_PykMwoHeJq1LEaHFsPekMSAkDkPVBUFDdKOxukrXcaqZ0Idl68/s1600/nova+caixa+de+fan+do+facebook.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqdSn8IQaLE9vGdjGBVygAAdIvY8KTpOT8iHD1CdBNzVub7uBwJDMMTyPQyLKUEzBKtN1Kwsiwg-4npvfnIngM7ol_PykMwoHeJq1LEaHFsPekMSAkDkPVBUFDdKOxukrXcaqZ0Idl68/s320/nova+caixa+de+fan+do+facebook.png" width="320" /></a></div>
Conheça a nova caixa de Fãs do Facebook, agora está diferente e mais elegante, além do botão de curtir página, tem novo botão Share de compartilhamento e também a caixa mostra a capa do Facebook...<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br />
<div>
<a name='more'></a><br /></div>
<div>
O novo design da caixa de fãs do Facebook está cada vez melhor, hoje com uma novidade, ela mostra uma miniatura da capa da página do Facebook, e ainda vem com um novo botão de "compartilhar". Veja exemplo:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4EewJdoOIs2KCv5UfTIvRzloAL2EFiuiEjnthmjdQebTVSqTRGTBhzNLbJw-SoDrRJ1viDEKPpy6htjPnhvguZiL7_wkPTTrbwDDlUFmNrCX8j9s6WKSjKbDwG1kSopf5WEcrklqwsE/s1600/nova+caixa+do+facebook+para+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Nova caixa de fãs do Facebook para Blog" border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4EewJdoOIs2KCv5UfTIvRzloAL2EFiuiEjnthmjdQebTVSqTRGTBhzNLbJw-SoDrRJ1viDEKPpy6htjPnhvguZiL7_wkPTTrbwDDlUFmNrCX8j9s6WKSjKbDwG1kSopf5WEcrklqwsE/s320/nova+caixa+do+facebook+para+blog.png" title="Clique na imagem para visualizar" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<br /></div>
<h2>
Como colocar nova caixa de Fãs do Facebook no Blog</h2>
<div>
Para colocar a caixa de fãs, primeiro acesse a página de <a href="https://developers.facebook.com/docs/plugins/page-plugin" target="_blank"><b><span style="font-family: Arial, Helvetica, sans-serif;">Plugins do Facebook</span></b></a>, em seguida siga os passos abaixo:</div>
<div>
<br /></div>
<div>
Você vai copiar a <b>URL</b> (Endereço) da sua página do Facebook e <b>colar </b>no campo "<b><span style="color: red;">Facebook Page URL</span></b>". Depois pressione Enter para visualizar a caixa:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-3Pnuw3bHkOqM3NZbLxxU0R7KqnG9NRZVyGL3HFAHIXku0JNxQNxr8fq2LMxgwggePcEbIRwVrx_d6aEHa2gYohWHhj_mTI0yAHdexMEHcCUga5AIm89e4vUF61o3hpMicobQqN1UQQ/s1600/insira+a+url.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-3Pnuw3bHkOqM3NZbLxxU0R7KqnG9NRZVyGL3HFAHIXku0JNxQNxr8fq2LMxgwggePcEbIRwVrx_d6aEHa2gYohWHhj_mTI0yAHdexMEHcCUga5AIm89e4vUF61o3hpMicobQqN1UQQ/s320/insira+a+url.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Após inserir a URL da página, logo abaixo será visualizado a caixa de fãs do Facebook, mas antes existe algumas configurações que você pode personalizar. <b>Veja as configurações abaixo</b>:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Configurando a caixa de fãs do Facebook</h3>
<div>
<br /></div>
<div>
<hr style="align: center; background: #000000; border: 0px; height: 5px; width: 100%;" />
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
Altura e Largura da caixa</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLzyl5krNLlNuLemvlbTf2c3lldgmVVTarCv2Gn4w_Cjc0W86oDhb9p45a_drMKMledtx3SI9mzm04vpYpIU87feymUywJmXugO8V1w83Nuew_w1V258-yZxYIt70hjW0qsBNiWeHlpBY/s1600/altura+e+largura+da+caixa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Caixa de fãs do facebook" border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLzyl5krNLlNuLemvlbTf2c3lldgmVVTarCv2Gn4w_Cjc0W86oDhb9p45a_drMKMledtx3SI9mzm04vpYpIU87feymUywJmXugO8V1w83Nuew_w1V258-yZxYIt70hjW0qsBNiWeHlpBY/s320/altura+e+largura+da+caixa.png" title="Clique na imagem para ampliar e visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<b>Width:</b> significa a largura da caixa. Aqui você adiciona um valor desejado para o tamanho da caixa, lembrando que o máximo é 500 pixel de largura.</blockquote>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<b>Height</b>: Significa altura. Informar um valor desejado para ser a altura da caixa.</blockquote>
<div class="separator" style="clear: both; text-align: left;">
</div>
<hr style="align: center; background: #000000; border: 0px; height: 5px; width: 100%;" />
<div>
<div style="text-align: center;">
Outras configurações</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdIIGQKPzIOQpYlTO_tNJV3pEIIFztAufU9CFZISNfCruyYLOThRP29lZmFX23O2W4Mxh8zIztUHuwjwGsOkJD5HGVHcGEGRGLydqjDnl0zPMrolLPMI6Cjg3xAqNfLTcL8sk3NSe52U/s1600/altera%25C3%25A7%25C3%25B5es+da+caixa+de+fas+do+facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdIIGQKPzIOQpYlTO_tNJV3pEIIFztAufU9CFZISNfCruyYLOThRP29lZmFX23O2W4Mxh8zIztUHuwjwGsOkJD5HGVHcGEGRGLydqjDnl0zPMrolLPMI6Cjg3xAqNfLTcL8sk3NSe52U/s320/altera%25C3%25A7%25C3%25B5es+da+caixa+de+fas+do+facebook.png" width="320" /></a></div>
<div>
<br /></div>
<blockquote class="tr_bq">
<b>Adapt to plugin container widht</b>: Esta opção é para deixar a largura da caixa auto-ajustável. (Recomendo utilizar esta opção)</blockquote>
<blockquote class="tr_bq">
<b>Show Friends faces</b>: Esta opção mostra uma miniatura do Facebook das pessoas que curtiram sua página.</blockquote>
<blockquote class="tr_bq">
<b>Use Small Header</b>: Permite utilizar uma versão pequena da caixa de fãs.</blockquote>
<blockquote class="tr_bq">
<b>Hide Cover Photo</b>: Permite você retirar a foto da capa da página do Facebook.</blockquote>
<blockquote class="tr_bq">
<b>Show Page Post</b>: Esta opção mostra publicações da linha do tempo da sua página.</blockquote>
</div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
Pronto! Depois de configurar sua caixa próximo passo é<b> gerar o código</b> da caixa. Clique no botão "<b><span style="color: red;">Get Code</span></b>".</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKeR_ewJ3a-g0iS4lrcpqAezNCXn3LwUFpwZnOFzMyXK0SMkqIRWBe5_m0JcGj6oayNS-rdQkItIXMI4od6lQcXU7DhZ7VrMUf_LF4bxGk_0Xo0p6Kcm3sV0vvajCzk2D72_KQwrmzxzQ/s1600/codigo+da+caixa+de+fas+do+facebook.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKeR_ewJ3a-g0iS4lrcpqAezNCXn3LwUFpwZnOFzMyXK0SMkqIRWBe5_m0JcGj6oayNS-rdQkItIXMI4od6lQcXU7DhZ7VrMUf_LF4bxGk_0Xo0p6Kcm3sV0vvajCzk2D72_KQwrmzxzQ/s320/codigo+da+caixa+de+fas+do+facebook.png" title="Clique na imagem para visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li>Será gerado o código e terá duas partes (<b>código 1</b> e <b>código 2</b>), então, você vai <b><span style="color: red;">copiar</span></b> estes dois códigos e <b><span style="color: red;">colar</span></b> em um novo<b> Gadget HTML/JavaScript</b> do Blog. </li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX9B9HhpT_sAS-6YHsuApxHYyS82ncxqgKPtAZ_SvplPWX7TX1VfWCEB7HHV9JXa5S8a3bygfJyCvPH_yVgNa4FTfvBqOZa5M3g5eMnPU1jVAIOns-_PVDDvMcSNGTOh5xXSY_sarSnXQ/s1600/salve+o+gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX9B9HhpT_sAS-6YHsuApxHYyS82ncxqgKPtAZ_SvplPWX7TX1VfWCEB7HHV9JXa5S8a3bygfJyCvPH_yVgNa4FTfvBqOZa5M3g5eMnPU1jVAIOns-_PVDDvMcSNGTOh5xXSY_sarSnXQ/s320/salve+o+gadget.png" width="320" /></a></div>
<blockquote class="tr_bq">
<br />
<ul>
<li>Cole os dois código no Gadget e na <b>mesma sequencia</b> um abaixo do outro, depois <b>salve.</b></li>
</ul>
</blockquote>
<ul>
</ul>
<br />
Prontinho pessoal, é só isto espero que tenham gostado desta novidade. Obrigado!<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5768958913026656905.post-61990556122513792132015-06-23T22:32:00.002-07:002015-06-23T22:32:38.116-07:00Como criar postagem no Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFLGA6t_TSyge_ywnu0hyzdJI6qh72pfHVoklk9hDENIwxQpiIBTC2u3hn6GnX_k0_oxchnFXNOWW0XV3d9JZ2Ni7w_eQSWWgUaeBTyiLfWjjGsfVGczUpSEL_VZ57rzAag6oOqn2qUg/s1600/como+criar+uma+postagem+no+blogspot.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFLGA6t_TSyge_ywnu0hyzdJI6qh72pfHVoklk9hDENIwxQpiIBTC2u3hn6GnX_k0_oxchnFXNOWW0XV3d9JZ2Ni7w_eQSWWgUaeBTyiLfWjjGsfVGczUpSEL_VZ57rzAag6oOqn2qUg/s320/como+criar+uma+postagem+no+blogspot.png" width="320" /></a></div>
Olá pessoal! Ensinarei como criar e publicar uma nova postagem no Blog, é importante para quem está iniciando na plataforma Blogger. Irei ensinar passo a passo como iniciar e estruturar uma postagem...<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
"<i><b>Serei breve na minha explicação, espero que seja bem útil e qualquer dividas deixem comentários</b></i>".<br />
<br />
<h2>
<b><span style="font-size: large;">Onde é que crio uma nova postagem</span></b></h2>
Primeiro, entre na sua conta do "Blogspot.com", quando entrar no Blogspot, clique no <b>título</b> do seu Blog para acessar o <b>painel de edição</b>. (Veja exemplo na imagem abaixo)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKUlynYH0PqJuTguzGrhbjBJ8-yinlSv9VUr6MVrHxdlhrHO5xyiQRi1sc1-5gnWBaT_3Jl1wpLDVev4vqY1TKyDyFXH95QMWVIdGrvExK0ix2P97Hrw3rIesLEoqWCB-BmsYU1k41FI/s1600/painel+de+edi%25C3%25A7%25C3%25A3o+do+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKUlynYH0PqJuTguzGrhbjBJ8-yinlSv9VUr6MVrHxdlhrHO5xyiQRi1sc1-5gnWBaT_3Jl1wpLDVev4vqY1TKyDyFXH95QMWVIdGrvExK0ix2P97Hrw3rIesLEoqWCB-BmsYU1k41FI/s320/painel+de+edi%25C3%25A7%25C3%25A3o+do+Blog.png" title="Clique na imagem para visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Depois que abrir o painel de edição do Blog, clique na opção "<b><span style="color: red;">Nova Postagem</span></b>". (Veja exemplo na imagem abaixo)</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZC3HMOLJq-FA_pqhd172bVVbKzPeqtOzxcvAgETFJC3zuz8ShLC-S-4qk6ASp0F5lsMq8mhxbGOpspJlPlBppBvAngTwpIDotGsf5AeWYOh0Jg8njCIY6QVPyJbVYwz3BSVpOLUFoQOY/s1600/Nova+postagem+no+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZC3HMOLJq-FA_pqhd172bVVbKzPeqtOzxcvAgETFJC3zuz8ShLC-S-4qk6ASp0F5lsMq8mhxbGOpspJlPlBppBvAngTwpIDotGsf5AeWYOh0Jg8njCIY6QVPyJbVYwz3BSVpOLUFoQOY/s320/Nova+postagem+no+Blog.png" title="Clique na imagem para visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Pronto! Após clicar em nova postagem, será aberto o "painel de criação de postagem". A seguir, irei mostrar as funções deste painel.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2>
Painel de criação de postagem do Blog</h2>
<br />
Este painel de postagem é bastante simples, linguagem de fácil intendimento. Entretanto, algumas funcionalidades é preciso explicar para entender como funcionam. Veja exemplo na imagem abaixo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ_IrmN1LDru9e4ARxr9-kVgxhMV4eiZ8bMFTBwgF_AbUAx7-3geHKMP4p9HNmWXHVhiGCLngaza3HS9XaaK0otl2P051WJe4p-xEzaYsUFSBcddFkZ-gdkwFeqCEYIq4UAXTmWmIsWhg/s1600/criando+postagem+go+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ_IrmN1LDru9e4ARxr9-kVgxhMV4eiZ8bMFTBwgF_AbUAx7-3geHKMP4p9HNmWXHVhiGCLngaza3HS9XaaK0otl2P051WJe4p-xEzaYsUFSBcddFkZ-gdkwFeqCEYIq4UAXTmWmIsWhg/s320/criando+postagem+go+Blog.png" title="Clique na imagem para visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span style="color: red;">1º - Titulo da Postagem</span></b>:</div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
Este campo é bem fácil de entende, trata-se do Título da Postagem que irá aparecer no Blog após ser publicado.</blockquote>
<b><span style="color: purple;">2º - Barra de Ferramentas</span></b>:<br />
<blockquote class="tr_bq">
Esta parte encontra-se as ferramentas para edição textual e postagem, funções como: (<b>Fonte, tamanho da fonte, formato de texto, cor de plano de fundo de texto, Link, imagem, vídeo e entre outros</b>..), funções padrões que também encontramos em programas de produção de texto. Também encontraremos outros recursos como "<b><span style="color: purple;">HTML </span></b>e <b><span style="color: purple;">Inserir Expansão de Postagem</span></b>" irei explicar no decorrer do tutorial</blockquote>
<b><span style="color: #274e13;">3º - Área de trabalho</span></b>:<br />
<blockquote class="tr_bq">
Como o próprio nome já diz tudo, esta parte é onde trabalhamos na criação do nosso conteúdo, onde inserimos nossos textos, imagens, vídeos, links e entre outros... .</blockquote>
<b><span style="color: #073763;">4º - Configurações de Postagem</span></b>:<br />
<blockquote class="tr_bq">
Aqui é onde inserimos informações técnicas sobre a postagem, como por exemplo:(marcadores de postagem, programar, Link permanente, Local, Descrição da pesquisa e Opções), ire mostrar estas funcionalidade também no decorrer do tutorial.</blockquote>
<br />
<h2>
Estrutura da postagem</h2>
Bom! Para criar uma postagem no Blog é fácil, basta você ter algum conteúdo, seja ele grande ou pequeno. Além disso, a postagem também tem uma estrutura que devemos fazer para manter um padrão e organização.<br />
<br />
Veja bem como é feito:<br />
<br />
<b>1º Título</b>:<br />
<blockquote class="tr_bq">
Primeiro, a postagem se inicia com um título.</blockquote>
<b>2º Introdução</b>:<br />
<blockquote class="tr_bq">
Depois do título, a postagem deve se iniciar com uma introdução, costumo orientar que seja feita com no máximo 6 linhas e minimo 4 linhas e podendo utilizar ao mesmo tempo imagem na introdução.</blockquote>
<blockquote class="tr_bq">
A introdução é importante para manter organização na página inicial do Blog. Porque, na página inicial elas irão aparecer uma abaixo da outra e serão exibidos somente a introdução de cada postagem. Por isto é importante a introdução ser pequena contendo no máximo 6 linhas, e se fosse pelo contrário, a página inicial iria conter textos muito grandes e várias postagens uma abaixo da outra, causando desorganização e provavelmente sua página inicial será muito extensa.</blockquote>
<b>3º Conteúdo</b>:<br />
<blockquote class="tr_bq">
Depois da introdução vem o conteúdo, onde você pode adicionar textos, parágrafos, imagens, vídeos, sub-títulos e também conclusão. No conteúdo você fica livre para poder fazer o que bem entender, fica a seu critério.</blockquote>
Você viu como é fácil a estrutura da postagem e a importância da introdução, agora, vamos para a prática.<br />
<br />
<h2>
Criando uma postagem no Blog</h2>
<br />
Nesta parte é importante que você "<b style="color: red;">crie uma nova postagem</b>" de teste só para praticar melhor este tutorial.<br />
<br />
<blockquote class="tr_bq">
Dê um título para sua nova postagem, coloque o titulo como: "<b>Postagem de teste</b>".</blockquote>
<blockquote class="tr_bq">
<ul>
<li>Agora <b><span style="color: red;">copie</span></b> qualquer texto na internet e<b><span style="color: red;"> cole</span></b> na "<b>área de trabalho</b>" da postagem. E na parte de cima do texto, separe as 6 ou 4 primeiras linhas para ser a <b>INTRODUÇÃO</b>. Veja exemplo na imagem abaixo:</li>
</ul>
</blockquote>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVhtHvgq1oDhHqGbBh2Fgx1o9C8Fh-eySngtEO570GpDs-_BJlzhwlbZRu0NF0t899GFkSiqS7-5tkQYK53r0dL3TMjVOQTVt5S_qdn47lTbuZSsyQNmZ_3SPxss-tnHoJOKI1IGF9ZVU/s1600/introdu%25C3%25A7%25C3%25A3o+da+postagem.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVhtHvgq1oDhHqGbBh2Fgx1o9C8Fh-eySngtEO570GpDs-_BJlzhwlbZRu0NF0t899GFkSiqS7-5tkQYK53r0dL3TMjVOQTVt5S_qdn47lTbuZSsyQNmZ_3SPxss-tnHoJOKI1IGF9ZVU/s320/introdu%25C3%25A7%25C3%25A3o+da+postagem.png" title="Clique na imagem para ampliar e visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Depois de ter a introdução, logo abaixo do texto temos que inserir um recurso chamado "<b>Inserir Expansão de Postagem</b> " que fica localizado na Barra de ferramenta.</div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<ul>
<li>Então, Logo<b> abaixo</b> da introdução<b><span style="color: red;"> clique me um espaço vazio</span></b> e em seguida Clique na opção "<b>Inserir Expansão de Postagem</b> ", veja exemplo na imagem abaixo.</li>
</ul>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiy883-OWkbHpesnwN_ThhMhJFe9xWfLQHuwx6LRdGmElJnjCwtAXFW171UwO_4zzybojvMlszSk2-XtrKuZfT1neqnrTVPBke9ekyvmkAQG_xvMZE7efyjW7NWBoBoNSp9BxlZ1SEtfA/s1600/expansao+de+postagem.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiy883-OWkbHpesnwN_ThhMhJFe9xWfLQHuwx6LRdGmElJnjCwtAXFW171UwO_4zzybojvMlszSk2-XtrKuZfT1neqnrTVPBke9ekyvmkAQG_xvMZE7efyjW7NWBoBoNSp9BxlZ1SEtfA/s320/expansao+de+postagem.png" title="Clique na imagem para ampliar e visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b style="text-align: left;"><span style="color: red;">OBS</span></b><span style="text-align: left;">.: Quando inserimos a "Expansão de postagem" irá aparecer um traçado </span><b style="text-align: left;">demarcando o final da introdução</b><span style="text-align: left;">, e abaixo desse traçado é a onde sempre inserimos o restante do conteúdo. Veja exemplo na imagem:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFu-cKa7LYKSMQD0gLv3sjo2soeWaCRvfuwW9iLeb6rKpsDRdbsNtrsIylZ26aIAnHoh8NMKeMdE5IpMxnD6suKY2ANqNHzoAO-UfUYuhAEpnYqI8dJDYN6pmwtgoSjWbhXLasgRFJEu8/s1600/postagem+do+blogg.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFu-cKa7LYKSMQD0gLv3sjo2soeWaCRvfuwW9iLeb6rKpsDRdbsNtrsIylZ26aIAnHoh8NMKeMdE5IpMxnD6suKY2ANqNHzoAO-UfUYuhAEpnYqI8dJDYN6pmwtgoSjWbhXLasgRFJEu8/s320/postagem+do+blogg.png" title="Clique na imagem para visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: left;">Depois finalizamos clicando na botão "</span><b style="text-align: left;">Salvar</b><span style="text-align: left;">" e a postagem será publicada no Blog.</span></div>
<br />
<div>
<br /></div>
</div>
Depois que a postagem é publicada, ela será exibida na página inicial do Blog, aparecendo somente a introdução juntamente com o link "<b>Mais informações>></b>". Veja exemplo da minha postagem de teste abaixo:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCSlDiCZr3U5_L5pahFk2V_4BkjVI55QwyxhW5-DehWGSFxOyjjlzCdcZ7bSn9pbGG7n5YNe4NZUN2TOKJ2PP3wEP3uAizeW1MrBgHjUhEgOZFYAYEujUj3586yczJ5of1M6BdlR0-hs/s1600/pagina+inicial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCSlDiCZr3U5_L5pahFk2V_4BkjVI55QwyxhW5-DehWGSFxOyjjlzCdcZ7bSn9pbGG7n5YNe4NZUN2TOKJ2PP3wEP3uAizeW1MrBgHjUhEgOZFYAYEujUj3586yczJ5of1M6BdlR0-hs/s320/pagina+inicial.png" width="320" /></a></div>
<br />
<br />
<br />
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 100%;" />
<b><span style="font-family: Arial, Helvetica, sans-serif;">Sobre a ferramenta Inserir Expansão de Postagem</span></b><br />
Ela é responsável pelo resumo de postagem que aparece na pagina inicial do Blog, e que inserimos abaixo da introdução da postagem. Então, tudo que fica abaixo da Expansão ficará oculto na pagina inicial, dando a ideia de resumo.<br />
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 100%;" />
<h2>
Configurações de Postagens</h2>
As "<b>configurações de postagens</b>" vou explicar como faz. Lembrando que esta configuração é feita durante a postagem, e também pode ser feita depois da publicação, mas eu <span style="background-color: #ea9999;">recomendo que seja feita durante a postagem</span>.<br />
<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/AVvXsEjjmnkKD-Ra0uAbINkbA0gg4amiuSMQFt7cdc8wSgcjpFZNH6VKRT3N1KnnedY-SsDw1NdxwLmuXSdqOW8SsCx-pnYcfNvvPxpbXShueHv8-8EuayMOTHTcUnBV2UuvOVldLH9Mj8bjEpw/s1600/configuracoess.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjmnkKD-Ra0uAbINkbA0gg4amiuSMQFt7cdc8wSgcjpFZNH6VKRT3N1KnnedY-SsDw1NdxwLmuXSdqOW8SsCx-pnYcfNvvPxpbXShueHv8-8EuayMOTHTcUnBV2UuvOVldLH9Mj8bjEpw/s320/configuracoess.png" title="Clique na imagem para ampliar e visualizar melhor " width="320" /></a></div>
<br />
<br />
<br />
Insira estas configurações em todas suas postagens. Veja como fazer:<br />
<br />
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 80%;" />
<blockquote class="tr_bq">
<b>Marcadores</b>:</blockquote>
<blockquote class="tr_bq">
Esta opção existe para "<b>classificar as postagens em categorias</b>", ou seja, para cada postagem que for criada, você vai inserir um ou mais marcadores para classificar o "<b><span style="color: red;">tema</span></b>" falado na postagem. </blockquote>
<blockquote class="tr_bq">
<span style="background-color: #fff2cc;"><b><span style="color: red;">Exemplo</span></b>: Se a sua postagem fala sobre o tema "<b>Novo sistema operacional Windows 10</b>", você vai colocar o tema desta postagem como (<b><span style="color: #660000;">Windows 10</span></b>, <b><span style="color: #660000;">Microsoft</span></b>, <b><span style="color: #660000;">Windows</span></b>), outro exemplo é, se você fala sobre "<b>como fazer bolo da chocolate</b>", você pode classificar o tema como (<b><span style="color: #660000;">Receita de Bolo</span></b>).</span></blockquote>
Veja um exemplo meu na imagem abaixo de uma postagem que fala sobre "Como criar postagem no Blog". Eu adicionei <b><span style="color: red;">3 marcadores</span></b> ou (3 temas diferentes):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflhob3xXq6Q7qaLsz_G4LSPamHDznqLmUsCv13fLhRuRpxBRge7Ix0WAUFdtJmgOW5QpGsLbWs32E4ykS7fuGV3u1EYkar0w9eAk0tx96YkD-zUAnMsVAlYfYqbyD63CgmDxa-0qqe7U/s1600/adicionando+marcadores.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflhob3xXq6Q7qaLsz_G4LSPamHDznqLmUsCv13fLhRuRpxBRge7Ix0WAUFdtJmgOW5QpGsLbWs32E4ykS7fuGV3u1EYkar0w9eAk0tx96YkD-zUAnMsVAlYfYqbyD63CgmDxa-0qqe7U/s320/adicionando+marcadores.png" title="Clique na imagem para ampliar e visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pronto! Nesse exemplo mostrado acima, inseri 3 marcadores diferentes, lembrando que podemos adicionar 1 ou mais marcadores na mesma postagem. E se for adicionar mais marcadores, tem que separá-los por "<b>vírgula</b>". </div>
<div class="separator" style="clear: both; text-align: left;">
Se tiver postagens com o mesmo tema, você pode adicionar o mesmo Marcador para todas elas sem nem um problema.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 80%;" />
<blockquote class="tr_bq" style="clear: both; text-align: left;">
<b>Programar:</b></blockquote>
<blockquote class="tr_bq">
Não tenho muito o que falar sobre esta opção, ela serve para determinarmos uma data de publicação automática. Você pode agendar sua postagem para que ela seja publicada automaticamente. Então, não vou explicar muito sobre esta opção porque ela é pouco usada.</blockquote>
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 80%;" />
<blockquote class="tr_bq">
<b>Link permanente</b>:</blockquote>
<blockquote class="tr_bq">
Esta opção se refere ao endereço da postagem, e com ela podemos mudar os caracteres do endereço da postagem.</blockquote>
<blockquote class="tr_bq">
<ul>
<li> <b><span style="color: #660000;">Link permanente automático:</span></b> É gerado uma URL automático pelo sistema.</li>
</ul>
</blockquote>
<blockquote class="tr_bq">
<ul>
<li><span style="color: #660000;"><b>Link permanente personalizado</b></span>: Como já diz, podemos personalizar os caracteres finais da URL.</li>
</ul>
</blockquote>
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 80%;" />
<blockquote class="tr_bq">
<b>Local</b>:</blockquote>
<blockquote class="tr_bq">
É onde informamos o local de origem da publicação. </blockquote>
<blockquote class="tr_bq">
Eu não costumo utilizar este recurso de localização, isto pode ficar a critério do autor.</blockquote>
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 80%;" />
<br />
<blockquote class="tr_bq">
<b>Descrição da pesquisa</b>: </blockquote>
<blockquote class="tr_bq">
Esta opção é muito importante para a otimização da postagem, é nela onde inserimos uma pequena descrição sobre o assunto tratado na postagem. Isso facilita a troca de informações com os mecanismos de busca, fazendo com que a sua postagem seja encontrada nos resultados de buscas feitas no Google.</blockquote>
<blockquote class="tr_bq">
<ul>
<li> Então, nesta opção você vai descrever um pouco sobre o assunto da postagem. Faça uma descrição pequena e clara dentro do assunto da postagem.</li>
</ul>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZzRneNMBvTwkPRcQobBE780oWIavAjxq-BbWdifPJG-H1SWPAQkwh7qnU_lLLbaoySh_GHXgUkcTHtO6CTEPk-WZSfRNgynJPg9l03nplb6VAXLFawRlsqY9-kZSu27dSN1rwTTIbGg/s1600/descri%25C3%25A7%25C3%25A3o+de+postagem.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZzRneNMBvTwkPRcQobBE780oWIavAjxq-BbWdifPJG-H1SWPAQkwh7qnU_lLLbaoySh_GHXgUkcTHtO6CTEPk-WZSfRNgynJPg9l03nplb6VAXLFawRlsqY9-kZSu27dSN1rwTTIbGg/s320/descri%25C3%25A7%25C3%25A3o+de+postagem.png" title="Clique na imagem para visualizar melhor " width="320" /></a></div>
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 80%;" />
<blockquote class="tr_bq">
<b>Opções</b>:</blockquote>
<blockquote class="tr_bq">
Esta opção é para moderação de <b>comentários de leitore</b>s feito na postagem. Você pode "permitir ou não permitir" que seja enviado comentários nesta postagem e, também moderá o uso de (<b>Backlinks</b>,<b> Modo de escrever</b> e <b>Quebra de linha</b>).</blockquote>
<hr style="align: center; background: #000000; border: 0px; height: 2px; width: 80%;" />
<br />
Pronto! É só isto, depois de inserir as configurações você finaliza clicando no botão "<b>Publicar</b>".<br />
<br />
<h2>
Como Excluir postagem do Blog</h2>
Para excluir uma postagem publicada no Blog é fácil. Acesse o painel de edição do Blog e vá na opção "<b><span style="color: #660000;">Postagens</span></b>" >> depois "<b><span style="color: #660000;">selecione</span></b>" a postagem que deseja excluir e em seguida clique no Link "<b><span style="color: #660000;">Excluir</span></b> ". Veja exemplo na imagem abaixo:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn-FM82OAe5cvPCLzW2TsbVu3fDfuvYUcfT9JqRp8G48I63e-svISTEiIuubZL8cPsstwAD3IUStKOZoaJ8fniNIIxzUsvISphdojzJ7vHl64_kSRFhoqqyaxeqDebv0vGbWeNPWTyM9Y/s1600/excluir+postagem+do+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn-FM82OAe5cvPCLzW2TsbVu3fDfuvYUcfT9JqRp8G48I63e-svISTEiIuubZL8cPsstwAD3IUStKOZoaJ8fniNIIxzUsvISphdojzJ7vHl64_kSRFhoqqyaxeqDebv0vGbWeNPWTyM9Y/s320/excluir+postagem+do+blog.png" title="Clique na imagem para visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Enfim, finalizo este tutorial espero que tenham gostado e aguardo comentários. Obrigado!</div>
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5768958913026656905.post-13238080000573006752015-06-21T16:54:00.002-07:002015-06-21T17:00:06.368-07:00Como desativar modelo do template mobile para celulares do Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3eR_jc6bie7pDJoETXzcVwcLGNAszige5ddTDmNnvLCnUv1p5Nm54I2ItPisVSirQrvYXNk-4impPfM5VET_4Exgu0CDmQJazVBPr6b7OPDaM6WMuQwfcWLh8eBc_epxhcmqhgh2x_XQ/s1600/modelo+mobile+do+blog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3eR_jc6bie7pDJoETXzcVwcLGNAszige5ddTDmNnvLCnUv1p5Nm54I2ItPisVSirQrvYXNk-4impPfM5VET_4Exgu0CDmQJazVBPr6b7OPDaM6WMuQwfcWLh8eBc_epxhcmqhgh2x_XQ/s320/modelo+mobile+do+blog.png" width="320" /></a></div>
Veja como desativar a visualização do <b>template mobile para aparelho celulares</b> e deixar a visualização somente em <b><span style="color: red;">modelo de versão web</span></b>...<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a>Recebi comentários de alguns leitores perguntando como é que, desativamos a visualização do template mobile para celulares, pois alguns preferem que o Blog seja visualizado em "<b>versão para web</b>", então vou explicar como faz essa alteração.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_-ji2_t-s8rp4YDjkPyQ5A7g3CL2oZ6fb6_rHV4Fvc6EwqjzLZ76T9JI9G8lmokaICS2-9NUkE5m4xxyqmG-npdY3Sqe_TOcHBT85CXopYPp4YNNtyAhC4R7edEq5rTN2SWc4S1WiLU/s1600/modelo+web+no+celular.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_-ji2_t-s8rp4YDjkPyQ5A7g3CL2oZ6fb6_rHV4Fvc6EwqjzLZ76T9JI9G8lmokaICS2-9NUkE5m4xxyqmG-npdY3Sqe_TOcHBT85CXopYPp4YNNtyAhC4R7edEq5rTN2SWc4S1WiLU/s400/modelo+web+no+celular.png" width="400" /></a></div>
<br />
<h2>
Como desativar Template móbile para celulares no Blog</h2>
<br />
<b>1º Primeiro Passo</b>: Acesse o Painel de Controle do seu Blog, e vá na opção<b><span style="color: red;"> MODELO</span></b>, em seguida clique no <b><span style="color: red;">ícone de configuração</span></b> que tem na opção "<b>Celular</b>". (Veja o exemplo na imagem abaixo):<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fO-eJXi6XDq7879_UFU4rWBg3LxWTVjB5a5mfz9GT7NAVQtq1udU8pzal6z3OWWO0R0mfifgH1_Ii4xEDgfTtUPKa_GuPae9biJxgXa44T7senzjuEWMBU_PeJq2PmDf8D4tJPBvRS8/s1600/template+mobile+-+painel+de+controle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="como desativar o Template mobile do blog" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fO-eJXi6XDq7879_UFU4rWBg3LxWTVjB5a5mfz9GT7NAVQtq1udU8pzal6z3OWWO0R0mfifgH1_Ii4xEDgfTtUPKa_GuPae9biJxgXa44T7senzjuEWMBU_PeJq2PmDf8D4tJPBvRS8/s320/template+mobile+-+painel+de+controle.png" title="Clique na imagem para ampliar e visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>2º Segundo Passo</b>: Depois que você clicar no ícone de Configurações, será aberta uma nova janela (<i>Escolher modelo para Celular</i>). Nessa nova janela você vai selecionar a <b><span style="color: red;">segunda opção:</span></b> "<span style="background-color: #ea9999; font-family: Arial, Helvetica, sans-serif; font-size: 13px;"><b>Não. Mostrar modelo para celular em aparelhos celulares</b></span>". (veja exemplo na imagem abaixo)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4pgNJHpznE-2U4wUhS1ypsGiHtg4geProzMXHpPG7lQ3ymSVPt2BAaluJZ6t324A_b85M7NSTcDWOQDx4MWolNy-6-e0A95W2FlRltBH-JXPQFbDiokEkIgnGsnhHyCiDDFsj1zh5IM/s1600/template+mobile+-+painel+de+controle+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Como desativar template mobile para celulares" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4pgNJHpznE-2U4wUhS1ypsGiHtg4geProzMXHpPG7lQ3ymSVPt2BAaluJZ6t324A_b85M7NSTcDWOQDx4MWolNy-6-e0A95W2FlRltBH-JXPQFbDiokEkIgnGsnhHyCiDDFsj1zh5IM/s320/template+mobile+-+painel+de+controle+2.png" title="Clique na imagem para ampliar e visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li>Em seguida, finalize clicando na opção "<b>Salvar</b>".</li>
</ul>
<br />
Pronto, quando você acessar seu Blog a visualização será feita já na "<b>versão para web</b>" e a alteração também poderá ser desfeita a qualquer momento, basta você acessar novamente aquele ícone de configuração e ativar o template.<br />
<h3>
Vantagens e desvantagens</h3>
<blockquote class="tr_bq">
<b>Vantagens:</b></blockquote>
<blockquote class="tr_bq">
A visualização da página é o mesmo template web;</blockquote>
<blockquote class="tr_bq">
<b> Desvantagem:</b></blockquote>
<blockquote class="tr_bq">
O tamanho da página é diferente das dimensões para dispositivos móvel;</blockquote>
<blockquote class="tr_bq">
Se o Blog tiver uma grande quantidade de Widgets pode causar uma demora no carregamento da página dependendo da conexão do usuário.</blockquote>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5768958913026656905.post-68482908056588806692014-06-11T18:11:00.000-07:002014-06-11T18:16:28.806-07:00Melhores práticas de SEO para Blogger<div class="MsoNormal">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ITWNykzdEllw5feJlGLNE90faE8dZII_COT8kOCh0pnG2xi7nOGdSetYSUM1QHXZgDMh50yOE_vDl5Q6kqnlO5q1HxrY5mXjAKmh3lVhjrTTKraoEGZcZFviy4JVzOjkxPE8XdUIwbQ/s1600/melhores+praticas+de+seo+para+o+blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Melhores práticas de SEO para Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ITWNykzdEllw5feJlGLNE90faE8dZII_COT8kOCh0pnG2xi7nOGdSetYSUM1QHXZgDMh50yOE_vDl5Q6kqnlO5q1HxrY5mXjAKmh3lVhjrTTKraoEGZcZFviy4JVzOjkxPE8XdUIwbQ/s1600/melhores+praticas+de+seo+para+o+blogger.png" height="160" title="Melhores práticas de SEO para Blogger" width="320" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ITWNykzdEllw5feJlGLNE90faE8dZII_COT8kOCh0pnG2xi7nOGdSetYSUM1QHXZgDMh50yOE_vDl5Q6kqnlO5q1HxrY5mXjAKmh3lVhjrTTKraoEGZcZFviy4JVzOjkxPE8XdUIwbQ/s1600/melhores+praticas+de+seo+para+o+blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a></div>
<span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Desde meados de 2010 webmasters e donos
de sites e blogs discutem como aplicar otimização de qualidade para bons
resultados no Google. Hoje existem diversos sistemas e plataformas para criação
de blogs e sites no mercado.</span><br />
<a name='more'></a><span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"> No caso de lojas virtuais o sistema mais utilizado
é o Magento, por que ele oferece recursos que facilitam ações de SEO, mas
também há agências especializadas para criação de ecommerces.</span><br />
<span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"></span><br />
<span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><br /></span>
<span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Houve uma época em que se discutia se os
blogs dariam certos na internet. Os números falam por si. De acordo com a </span><span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><a href="http://www.desenvolveti.com.br/blog/wp-content/uploads/2013/07/Infografico_final_2012.jpg" target="_blank">pesquisa realizada pela Boo Box</a></span><span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">, divulgado em um infográfico, em 2013 houve
pouco mais de 80 milhões de usuários que usam blogs como fontes de informação.
A tendência é que cresça a cada ano.</span><br />
<span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Mas a grande pergunta que muitos especialistas
fazem é qual plataforma é melhor para aplicar ações de SEO em blog? </span><span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><a href="http://br.wordpress.org/" target="_blank">Wordpress</a></span><span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"> ou </span><span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><a href="http://blogger.com/" target="_blank">Blogger</a></span><span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">?</span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Primeiramente devemos ter a seguinte
noção. Existe uma diferença entre WordpressOrg e Wordpress COM. O primeiro é um
aplicativo que o usuário pode baixar no site oficial e instalar no servidor de
hospedagem, podendo não só criar um blog como um site profissional facilmente
em linguagem PHP. O segundo é possível abrir um blog gratuitamente, usando
servidor limitado. Como o Blogger também é gratuito, então se compararmos com o
Wordpress COM certamente o Blogger tem larga vantagem.</span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;"><br /></span></div>
<div class="MsoNormal">
<h2>
<b><span style="font-family: "Verdana","sans-serif"; mso-bidi-font-family: Verdana; mso-fareast-font-family: Verdana;">Como fazer SEO
para Blogger</span></b></h2>
</div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Primeiramente
deve-se imaginar SEO em dois grande grupos, sendo On Page (melhorias feitas
dentro do blog) e Off Page (ações para conseguir links em fontes externas).
Vamos abordar algumas metodologias certeiras para melhorar um blog feito no
sistema Blogger em relação ao Google.<o:p></o:p></span><br />
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<h4>
<i><span style="font-family: "Verdana","sans-serif";">Título de página</span></i></h4>
</div>
<br />
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Para quem
não sabe o que é, título de página é aquele conteúdo ou título que aparece em
azul no resultado de busca do Google, por exemplo. Ele também é usado por
navegadores para serem exibidos nas abas.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioS95Sxmz4_ZJSVQnqjlpsWe3fGeaJp6IqdxQl77bEDMOhttwLDle-hJ2NRB8cB6vCmLts1QoybjFtzikla8wj0tlrOIJ68OIj4G6Php0z0xT_2oZVGQCmqkSf4H4mSiWSeq91eB42hjM/s1600/01.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Título de página" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioS95Sxmz4_ZJSVQnqjlpsWe3fGeaJp6IqdxQl77bEDMOhttwLDle-hJ2NRB8cB6vCmLts1QoybjFtzikla8wj0tlrOIJ68OIj4G6Php0z0xT_2oZVGQCmqkSf4H4mSiWSeq91eB42hjM/s1600/01.PNG" height="320" title="" width="308" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Por padrão,
os títulos de página de postagens no Blogger geram conteúdo com a frase do título
da sua postagem seguido pelo nome do seu Blogger definido nas configurações.
Isso pode ser ruim por que se a sua postagem tiver um nome grande poderá
ocorrer quebra na exibição de resultado de pesquisa, originandoaqueles três
pontinhos.<o:p></o:p></span><br />
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Para
resolver isso, acesse seu painel de controle, selecione aba “Modelo” e escolha
“Editar HTML”. Em seguida, logo no começo do código, encontre uma linha comando
parecida como essa:<o:p></o:p></span><br />
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<i><span lang="EN-US" style="color: #2e74b5; font-family: "Verdana","sans-serif"; mso-ansi-language: EN-US; mso-themecolor: accent1; mso-themeshade: 191;"><b:include data='blog'
name='all-head-content'/><o:p></o:p></span></i><br />
<i><span lang="EN-US" style="color: #2e74b5; font-family: "Verdana","sans-serif"; mso-ansi-language: EN-US; mso-themecolor: accent1; mso-themeshade: 191;"><br /></span></i></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Em seguida,
apague qualqueradicione o seguinte código:<o:p></o:p></span><br />
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<i><span lang="EN-US" style="color: #2e74b5; font-family: "Verdana","sans-serif"; mso-ansi-language: EN-US; mso-themecolor: accent1; mso-themeshade: 191;"><b:ifcond='data:blog.pageType ==
&quot;index&quot;'><o:p></o:p></span></i></div>
<div class="MsoNormal">
<i><span lang="EN-US" style="color: #2e74b5; font-family: "Verdana","sans-serif"; mso-ansi-language: EN-US; mso-themecolor: accent1; mso-themeshade: 191;"><title><data:blog.pageTitle/></title><o:p></o:p></span></i></div>
<div class="MsoNormal">
<i><span lang="EN-US" style="color: #2e74b5; font-family: "Verdana","sans-serif"; mso-ansi-language: EN-US; mso-themecolor: accent1; mso-themeshade: 191;"><b:else/><o:p></o:p></span></i></div>
<div class="MsoNormal">
<i><span lang="EN-US" style="color: #2e74b5; font-family: "Verdana","sans-serif"; mso-ansi-language: EN-US; mso-themecolor: accent1; mso-themeshade: 191;"><title><data:blog.pageName/></title><o:p></o:p></span></i></div>
<div class="MsoNormal">
<i><span lang="EN-US" style="color: #2e74b5; font-family: "Verdana","sans-serif"; mso-ansi-language: EN-US; mso-themecolor: accent1; mso-themeshade: 191;"></b:if><o:p></o:p></span></i><br />
<i><span lang="EN-US" style="color: #2e74b5; font-family: "Verdana","sans-serif"; mso-ansi-language: EN-US; mso-themecolor: accent1; mso-themeshade: 191;"><br /></span></i></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Resumindo,
essa informação faz com que a página inicial mostre o nome do blog, que pode ser
definido em configurações. Quando for qualquer outra página, exibe apenas o
nome da postagem, excluindo o nome do blog, tornando o título e página mais
limpo e pontual.<o:p></o:p></span><br />
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<h4>
<i><span style="font-family: "Verdana","sans-serif";">Quebra de texto</span></i></h4>
<i><span style="font-family: "Verdana","sans-serif";"><br /></span></i></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">É muito
comum os blogueiros deixarem uma postagem completa na página inicial igualmente
dentro da postagem. Existe um recurso interessante no editor de texto chamado
de Expansão de Postagem”. Esse recurso faz com que parte da postagem seja
exibida na página inicial do blog, criando um botão que convida o usuário a
visitar a postagem interna para ler o conteúdo completo.<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyoFM1tYn2JK-clQwRKATcvrlJy5Qd0RLb14rG8DvG6g6Bpm1K923MB21OPdbDW1UIgP9dBDEgyPMJYP0W4EB4VLJgr-aga1B2lp0XZ8ucDstRT84_C5VFQuwsgq2ki_Umvjg8IJC8rxc/s1600/02.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyoFM1tYn2JK-clQwRKATcvrlJy5Qd0RLb14rG8DvG6g6Bpm1K923MB21OPdbDW1UIgP9dBDEgyPMJYP0W4EB4VLJgr-aga1B2lp0XZ8ucDstRT84_C5VFQuwsgq2ki_Umvjg8IJC8rxc/s1600/02.PNG" height="142" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfpVfdbfYPQFdwrUFvyadci-k4KWszauzIqdpe1AZ_zXTlZsvRdyao94heC5jslF9cY-MkzVHAOCtr59mL6OW6B3hby3au-IdQWhEcGu-5JxfPEB63X3zXPmy48NDHzPQ6pQcC4_fhzs/s1600/03.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfpVfdbfYPQFdwrUFvyadci-k4KWszauzIqdpe1AZ_zXTlZsvRdyao94heC5jslF9cY-MkzVHAOCtr59mL6OW6B3hby3au-IdQWhEcGu-5JxfPEB63X3zXPmy48NDHzPQ6pQcC4_fhzs/s1600/03.PNG" height="164" width="320" /></a></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Isso é
importante por que evita conteúdo duplicado em páginas diferentes do blog além
de diminuir a taxa de rejeição indicada no Google Analytics, pois ousuário é
obrigado a navegar no blog para ter acesso ao conteúdo completo.<o:p></o:p></span><br />
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<h4>
<i><span style="font-family: "Verdana","sans-serif";">ALT das imagens</span></i></h4>
<i><span style="font-family: "Verdana","sans-serif";"><br /></span></i></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Esse é um
recurso que tem como principal função descrever uma imagem, mas fica embutido
no código. Só é exibido no navegador se o mesmo não conseguir carregar a imagem
na tela. Também é usado por programas leitores de caracteres para cegos.<o:p></o:p></span><br />
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">O Google
usa essa descrição para entender o que a imagem condiz com o conteúdo. Fazer
uma descrição de alta qualidade é muito importante.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGnPuNekHhAYqDXOP6VlIiZHrTXVBxPfyA3QpMJutKYH6AYqB8cf1etzvhNjcWXKZM9VpCdeCetjV33lr3cUjg6umIUR1wCf5LBX4Ug0GkU1Kw4Ha9FtA-5R17ctCW7ko5dS6gNKeDfI/s1600/04.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGnPuNekHhAYqDXOP6VlIiZHrTXVBxPfyA3QpMJutKYH6AYqB8cf1etzvhNjcWXKZM9VpCdeCetjV33lr3cUjg6umIUR1wCf5LBX4Ug0GkU1Kw4Ha9FtA-5R17ctCW7ko5dS6gNKeDfI/s1600/04.PNG" height="112" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<h4>
<i><span style="font-family: "Verdana","sans-serif";">Postagem mais acessadas</span></i></h4>
<i><span style="font-family: "Verdana","sans-serif";"><br /></span></i></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">O Google
adora encontrar links internos, principalmente aqueles que mais chamam a
atenção do usuário. Indicar em barra lateral ou no final de cada postagem links
de alta qualidade, principalmente conteúdos mais acessados, é uma forma
inteligente de “prender” o usuário no blog.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wUqcOQAVDNgps2HrsjmSSZ_ZH5hgIK6ZdzZDoo0RicA03QJwn10YXi1-veuvP53Oy8qWsFYH4ZPa0tVvc7n7DKh778_9Z9_-fn5KVhDcJg5KzF_VsNXrgPH6pvlm1o0J9CdnkgObJbU/s1600/05.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wUqcOQAVDNgps2HrsjmSSZ_ZH5hgIK6ZdzZDoo0RicA03QJwn10YXi1-veuvP53Oy8qWsFYH4ZPa0tVvc7n7DKh778_9Z9_-fn5KVhDcJg5KzF_VsNXrgPH6pvlm1o0J9CdnkgObJbU/s1600/05.PNG" height="299" width="320" /></a></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Para isso,
use o sistema de gadgets do Blogger, que pode ser encontrado no editor de
layout do sistema.<o:p></o:p></span><br />
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";">Essas foram
as principais dicas para tornar um blog mais amigável para o Google.
Infelizmente seria necessário mais de seis horas de leitura para aplicar todas
as melhorias recomendadas. Mas tenho certeza que já com essas informações o seu
blog pode ter mais qualida<a href="https://www.blogger.com/null" name="_GoBack"></a>de técnica.<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "Verdana","sans-serif";"><br /></span></div>
<div class="MsoNormal">
<hr style="align: center; background: #828282; border: 0px; height: 2px; width: 100%;" />
</div>
<div class="MsoNormal">
<i><span style="font-family: Arial, Helvetica, sans-serif;"><b>Autor do Post</b></span><span style="font-family: "Verdana","sans-serif";">: Paulo Augusto Sebin. Jornalista
especializado em SEO e produção em marketing para conteúdo. Fundador do blog </span></i><i><span style="font-family: "Verdana","sans-serif";"><a href="http://www.paulosebin.com.br/" target="_blank">O que é SEO e Google Marketing</a></span></i><i><span style="font-family: "Verdana","sans-serif";">.
Acima de tudo, defende a livre expressão em blogs.<o:p></o:p></span></i></div>
<hr style="align: center; background: #828282; border: 0px; height: 2px; width: 100%;" />
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-5768958913026656905.post-49810985971300735212014-05-23T23:14:00.002-07:002015-06-18T16:41:59.789-07:00Programa de Afiliados Egrana - Ganhe dinheiro com seu Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkWVS83GaJ9xNAYSdew5RhyVQ-4jqtdrdJrgFgu5ac1hf-7ctvhNLs7WhYVdI8nKj6gQQqdqkc_THevkoi_2hgF6jNVOTwMFxVq6i50BNqE6TecqHK_xwPcyYK_PzpiFWSszgP1xPay2c/s1600/egrana+ganhar+dinheiro+com+blog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Prigrama de Afiliados Egrana - Ganhe dinheiro com seu Blog" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkWVS83GaJ9xNAYSdew5RhyVQ-4jqtdrdJrgFgu5ac1hf-7ctvhNLs7WhYVdI8nKj6gQQqdqkc_THevkoi_2hgF6jNVOTwMFxVq6i50BNqE6TecqHK_xwPcyYK_PzpiFWSszgP1xPay2c/s1600/egrana+ganhar+dinheiro+com+blog.png" title="Prigrama de Afiliados Egrana - Ganhe dinheiro com seu Blog" width="320" /></a></div>
Conheça o <b><a href="http://ads.egrana.com.br/indica/14738" rel="nofollow" target="_blank">Egrana</a></b> programa de Afiliados online. Aprenda ganhar dinheiro com o seu Blog utilizando a plataforma do Egrana...<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a>Olá Pessoal! Meu nome é Kelven, vou falar um pouco sobre como ganhar dinheiro com o Blog e mostrar como faço para ganhar dinheiro com ele, ok?<br />
<br />
Primeiramente, você que é iniciante nesse mundo de Blog ou Site, precisa intender como é que ganhamos dinheiro na internet. Existe inúmeras formas de ganhar dinheiro, mas a que vou mostrar agora, conhecemos por "Afiliados Online" onde você se torna afiliado da tal empresa e entroca seu Blog compartilha publicidade da empresa afiliada. Isso é extremamente fácil de entender, você ganhará dinheiro através de <b>publicidades exibidas na sua página</b>, a cada usuário do seu Blog que <b>visualiza</b> a publicidade gera dinheiro para seu Blog. É assim que funciona, quanto mais acesso seu Blog tem mais rentabilidade.<br />
<br />
Você entendeu bem como funciona o 'Afiliados Online", independente disso, para se ganhar dinheiro na internet seja ele um <b>Site</b>, <b>Blog, Canal no You Tube</b> ou uma <b>Loja Online</b> ambos para ter sucesso necessitam de <b><span style="color: red;">tráfego online</span></b> que é a quantidade de acesso, quanto mais relevante os acesso mais retorno. A dica é você sempre trazer conteúdo para o seu Blog e agregar recursos para ganhar dinheiro como o <b>Afiliado Online</b>.<br />
<div style="text-align: center;">
<a href="http://ads.egrana.com.br/indica/14738" target="_blank"><img alt="Afiliados Egrana - Ganhe dinheiro com seu Blog" border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip0knwX9F44kJ0wP5jWOcpeiGIvAXa2kjt0oC4bFeaDiAo_mvtcA6S1-fTgCb_EAC6X_jO1oI5RhNxPpQWYg0tX1oR9Apj1llRGsoFDu_J8pmSyfmW2BfEFh4YKKFCArKgPu9HcGm4ZM4/s1600/logo-grande-egrana.png" title="Afiliados Egrana - Ganhe dinheiro com seu Blog" width="320" /></a></div>
<h2>
O que é o Egrana</h2>
O <b><a href="http://ads.egrana.com.br/indica/14738" target="_blank">Egrana</a></b> é uma rede de publicidade online, bastante séria que segue no mercado desde 2003. É bastante conhecida e adepta por vários blogs, onde os afiliados ganham dinheiro por <b>CPM (Custo por Mil impressões)</b>.<br />
<br />
<h3>
Como ganhar com o Egrana</h3>
No <b><a href="http://ads.egrana.com.br/indica/14738" target="_blank">Egrana</a>,</b> você ganha por cada <b>1000 exibições</b> de anúncios no Blog, e ela se difere de outras empresas de publicidade que só ganha por cliques nos anúncios. No Egrana, além de <b><span style="color: #990000;">ganhar com exibições</span></b>, também pode ganhar com indicações, você indica o Egrana para outras pessoas e você tem mais 10% sobre os ganhos dos seus indicados.<br />
<br />
<blockquote class="tr_bq">
<b>Vantagens:</b></blockquote>
A<b> primeira</b> <b>vantagem do Egrana</b>, é que você ganha por <span style="color: #990000;"><b>exibições</b></span> e eles não exige que os visitantes cliquem nos anúncios para poder gerar alguma pontuação para seu Blog, e fica muito mais fácil de ganhar dinheiro assim.<br />
<br />
A <b>segunda vantagem</b> seria o valor mínimo para saque, que é de R$: 50,00 (cinquenta reais) e é uma das poucas que disponibiliza este valor minimo para saque. E se seu Blog tem muitas visualizações, com certeza você conseguirá sacar todo mês, até valores superiores à R$: 100,00 reais que vai depender da quantidade de exibições que conseguir.<br />
<br />
<blockquote class="tr_bq">
<b>O que acontece se eu não atingir o valor minimo no mês?</b></blockquote>
Se seu Blog não atingir no mês o valor mínimo de saque que é de R$50,00 reais, tudo que você conseguiu juntar será acumulado e somado com os ganhos do próximo mês e não será perdido. Os ganhos continuarão a acumular até chegar o valor minimo de 50,00 reais.<br />
<br />
<blockquote class="tr_bq">
<b>Pagamento</b></blockquote>
O pagamento é feito automaticamente via depósito bancário efetuado mensalmente de forma rápida, e eles trabalha com vários bancos (<span style="color: #990000;"><b>HSBC</b>, <b>SANTANDER</b>, <b>BANCO DO BRASIL</b>, <b>BRADESCO</b>, <b>ITAÚ</b> e <b>CAIXA ECONÔMICA FEDERAL</b></span>) e também com o <b>Paypal</b>. Bastante fácil para quem utiliza um desses Bancos.<br />
<br />
Você também terá acesso a um escritório Online onde poderá acompanhar em tempo real o desempenho do seu Blog, consultar valores gerado diariamente e valor total acumulado do mês.<br />
<br />
Outra coisa excelente desta empresa é o suporte de atendimento, funciona 24hrs por dia e 7 dias na semana e são atenciosos e retornam a todos os contatos.<br />
<br />
<blockquote class="tr_bq">
<b>Anúncios do Egrana</b></blockquote>
O Egrana possui alguns tipos de diferentes anúncio que você pode estar escolhendo alguns deles "<b>Banner</b>, <b>Popunder</b> e <b>Flutuante</b>".<br />
<blockquote class="tr_bq">
<span style="color: #660000;"><b>Anuncio Banner</b></span>: Você pode colocar o banner em qualquer parte do Layout do Blog. Os ganhos desse anúncio é R$: 0, 50 centavos a cada 1000 mil exibições. (<u>O CPM pode aumentar até R$: 3,00 para sites de conteudo relevante</u>)</blockquote>
<blockquote class="tr_bq">
<b><span style="color: #660000;">Anuncio Popunder</span></b>: Quando a gente clicar em qualquer parte da página o anuncio será visualizado em uma nova janela do navegador, os ganhos é de R$: 2,00 reais a cada 1000 mil Exibições. (<u>O CPM pode aumentar até R$: 8,00 para sites de conteudo relevante</u>)</blockquote>
<blockquote class="tr_bq">
<b><span style="color: #660000;">Anuncio Flutuante</span></b> : O anuncio é exibido na frente da janela do navegador do visitante, os ganhos é de R$:0,30 centavos a cada 1000 mil exibições. (<u>O CPM pode aumentar até R$: 5,00 para sites de conteúdo relevante</u>)</blockquote>
<br />
<br />
Esta é uma ótima oportunidade para ganhar uma renda extra com o seu Blog, acesse o site e conheça um pouco do <a href="http://ads.egrana.com.br/indica/14738" target="_blank"><b>Afiliados Egrana</b></a>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://ads.egrana.com.br/indica/14738" target="_blank"><img alt="Afiliados Egrana - Ganhe dinheiro com seu Blog" border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip0knwX9F44kJ0wP5jWOcpeiGIvAXa2kjt0oC4bFeaDiAo_mvtcA6S1-fTgCb_EAC6X_jO1oI5RhNxPpQWYg0tX1oR9Apj1llRGsoFDu_J8pmSyfmW2BfEFh4YKKFCArKgPu9HcGm4ZM4/s1600/logo-grande-egrana.png" title="Afiliados Egrana - Ganhe dinheiro com seu Blog" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Dúvidas pessoal deixem comentário, obrigado!</div>
<br />Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-5768958913026656905.post-54204875145495629842014-05-12T19:43:00.000-07:002014-05-12T19:46:25.456-07:00Propriedades de Imagens do Blog veja como utilizar e sua importância <div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIj8-Nv2bxyp_QpK6uVhSaxi3ACLEjYYiI36pU2z0U6y_Z9RyISxcBpsiXkqGmOuN_gKvK39zZI7WgDAXvsbYszdNkAfggZlMyynL0drgOwqgCiH5se44fASmGZSCTbbvgASNb63BIrMw/s1600/propriedades+de+imagem.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Propriedades de Imagens do Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIj8-Nv2bxyp_QpK6uVhSaxi3ACLEjYYiI36pU2z0U6y_Z9RyISxcBpsiXkqGmOuN_gKvK39zZI7WgDAXvsbYszdNkAfggZlMyynL0drgOwqgCiH5se44fASmGZSCTbbvgASNb63BIrMw/s1600/propriedades+de+imagem.png" height="160" title="Propriedades de Imagens do Blog veja como utilizar e sua importância " width="320" /></a></div>
Olá pessoal, depois de ficar um bom tempo sem postar nem uma dica, hoje mostrarei como utilizar as <b>propriedades de Imagens</b>. Quem ainda não conhece esta propriedade, ela é bastante relevante para quem utiliza imagens nas postagens do Blog, pois, este recurso ajuda as imagens a serem exibidas na busca Google...<br />
<br />
<br />
<a name='more'></a><br />
<br />
A importância de utilizar esta opção é para o SEO do seu Blog. Ele ajuda na hora da busca por imagens no Google através da descrição que inserimos na imagem, fazendo com que, ela seja encontrada facilmente e exibida nas Buscas.<br />
<br />
<h2>
Como usar Propriedades de Imagens do Blog</h2>
<br />
<br />
<ul>
<li>Para usar esta opção é fácil, depois de inserir a imagem escolhida na postagem, basta você "<b><span style="color: red;">clicar</span></b>" sobre a imagem para selecioná-la.</li>
</ul>
<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/AVvXsEgQtl_k_JxRLuw0kAXtJamQihNjMtM8G2Bs5gXwZyKSFobRMLownKfzp3U-xu9PLi8qhyCQBucy2GOndZcIx1Wxa0UvHO-3usvUlmBO32FbD_aOxDQW0H4KcwRKVp7bajW-lMMzRppLjNc/s1600/propriedadesss.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQtl_k_JxRLuw0kAXtJamQihNjMtM8G2Bs5gXwZyKSFobRMLownKfzp3U-xu9PLi8qhyCQBucy2GOndZcIx1Wxa0UvHO-3usvUlmBO32FbD_aOxDQW0H4KcwRKVp7bajW-lMMzRppLjNc/s1600/propriedadesss.png" height="168" title="Clique na Imagem Para Visualizar " width="640" /></a></div>
<br />
<ul>
<li>Por segundo, clique na opção "<span style="color: red;"><b>Propriedades</b></span>".</li>
</ul>
<div style="text-align: center;">
Em seguida será aberto as<b> Propriedades de Imagem</b></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYF9RaCEh3Jsg3wTZHSJ5DGnxq8JjpmVezf6AAhdpLUKo7BFR4LELed9Vl9sZRHxpzCeU5vMgDZkhLAkdglDqXrTSvDQfyYN16x4BvjABSrBvUPrDDEt-aDp5RyewAR1Rq3X5gP6K7Pm0/s1600/propiedades+de+imagem.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYF9RaCEh3Jsg3wTZHSJ5DGnxq8JjpmVezf6AAhdpLUKo7BFR4LELed9Vl9sZRHxpzCeU5vMgDZkhLAkdglDqXrTSvDQfyYN16x4BvjABSrBvUPrDDEt-aDp5RyewAR1Rq3X5gP6K7Pm0/s1600/propiedades+de+imagem.png" height="122" width="320" /></a></div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
No Campo "<b><span style="color: red;">Texto do Titulo</span></b>", escreva um título para sua imagem.</blockquote>
<blockquote class="tr_bq">
E no Campo "<b><span style="color: red;">Texto Alternativo</span></b>" que é o mais importante, escreva uma descrição em poucas palavras sobre o assunto que sua imagem transmite. </blockquote>
<blockquote class="tr_bq">
Logo em seguida clique em <b>OK para finalizar</b>.</blockquote>
Prontinho pessoal, depois disso é só publica sua postagem. Com isto, suas imagens estão otimizadas para aparecerem na busca do Google Imagem, e com um tempo estas imagens poderão originarem visitas direto do Google Imagens.<br />
<br />
<br />
<hr style="align: center; background: #828282; border: 0px; height: 1px; width: 100%;" />
É isso aí pessoal, não deixem de seguir nossa <a href="https://www.facebook.com/VariasDicasParaBlogs" target="_blank">Página do facebook</a> e <a href="https://www.blogger.com/follow-blog.g?blogID=5768958913026656905" target="_blank">no Blog</a>. Obrigado!<br />
<hr style="align: center; background: #828282; border: 0px; height: 1px; width: 100%;" />
Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-5768958913026656905.post-49441613265129970222014-03-08T21:10:00.002-08:002014-03-27T17:23:03.157-07:00Meta Tags Descrição de Pesquisa da Postagem do Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyvqvTDZp46APyNM-Y91_CxK6qDyV_81edjU4ZBqIvqvozDTY2DaVzmA0HDkBKIvhwVX1pXArwzxufQpRbu-DD-5vVMXd9mPAyzXepg5gcm6jG3MvdLOcJQm-1YTRGKLpSmtHkJ9gJ4ZM/s1600/metatags+decricao+de+pesquisa.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyvqvTDZp46APyNM-Y91_CxK6qDyV_81edjU4ZBqIvqvozDTY2DaVzmA0HDkBKIvhwVX1pXArwzxufQpRbu-DD-5vVMXd9mPAyzXepg5gcm6jG3MvdLOcJQm-1YTRGKLpSmtHkJ9gJ4ZM/s1600/metatags+decricao+de+pesquisa.png" height="160" width="320" /></a></div>
O Blog com sua nova interface, trouxe um novo recurso conhecido como "<b>Descrição de Pesquisa</b>", sua funcionalidade é inserir Meta descrição para cada postagem publicada no blog de maneira individual, facilitando a troca de informações do seu blog com os mecanismo de busca. Sendo assim, ajudará bastante seu blog a se encontrado nas pesquisas do Google e entre outros buscadores...<br />
<br />
<br />
<a name='more'></a><br />
<br />
<div>
Portanto, se você não conhece ou não utiliza esta opção, saiba que é bastante recomendável utilizá-la nas postagens do blog.<br />
Então, vou ensinar como usar as descrição de postagem.</div>
<h2>
Ativar a opção Descrição de Pesquisa de Postagem</h2>
<div>
Provavelmente o seu Blog pode estar com esta opção desativada, portanto, se esse for o seu caso, você terá que ativá-la, para isso, siga as instruções logo abaixo:</div>
<div>
<br /></div>
<div>
<b>1º Passo</b>: Acesse o painel de edição do seu Blog, vá em <b><span style="color: red;">Configurações</span></b> >> depois em <b><span style="color: red;">Preferencia de pesquisa</span></b>. (Veja exemplo na imagem)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOyf5dtTKh8nGID_jzpArrZhiys_Mn3EjQFWjINLfccIxfJzCGRmrxdUyL-kpcOtsiTaVjQEAMkkr3R29Hcl45fHgnYkGGKX-jvDY9PVtM-apMu39dSmm5bNgtfop5G7gkklohXV2mL-c/s1600/preferencia+de+pesquisa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tag Descrição de pesquisa de postagem" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOyf5dtTKh8nGID_jzpArrZhiys_Mn3EjQFWjINLfccIxfJzCGRmrxdUyL-kpcOtsiTaVjQEAMkkr3R29Hcl45fHgnYkGGKX-jvDY9PVtM-apMu39dSmm5bNgtfop5G7gkklohXV2mL-c/s1600/preferencia+de+pesquisa.png" height="205" title="Clique na imagem para Visualizar melhor" width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<b>2º Passo</b>: Veja que na parte de "<b>Metatags</b>" tem a opção "<b><span style="color: red;">Descrição</span></b>", nela você vai clicar em <b><span style="color: red;">Editar</span></b> e marcar a opção "<b><span style="color: red;">Sim</span></b>" e em seguida escreva uma descrição em poucas palavra sobre o seu blog.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivC1OMWc7EXnlLsffxet9Ri4AvlDbrsDcqJl8K-UBj4i7Mt6vfpg0JZLEoQD8Sv9S_HZIz-SsqiRH26v8K3c0bFa1NgWXEjV4AOmpvseRdZuZYCReQDBxALJW1viSVANDgBqN7roLAyrQ/s1600/salve.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Como inserir a descrição de postagem no Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivC1OMWc7EXnlLsffxet9Ri4AvlDbrsDcqJl8K-UBj4i7Mt6vfpg0JZLEoQD8Sv9S_HZIz-SsqiRH26v8K3c0bFa1NgWXEjV4AOmpvseRdZuZYCReQDBxALJW1viSVANDgBqN7roLAyrQ/s1600/salve.png" height="162" title="Clique na imagem para Visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul>
<li style="text-align: left;">Depois, finalize clicando em Salvar alterações. E pronto!</li>
</ul>
<h2 style="text-align: left;">
Como utilizar a Descrição de Pesquisa nas postagem do Blog</h2>
<div style="text-align: left;">
Prontinho, depois de Ativar a opção de descrição de pesquisa, você já pode usar as metas descrição de postagem no Blog</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>1º Passo</b>: No painel onde criamos a postagem do Blog logo na lateral direita tem a barra de "<b>configurações de Postagem</b>" e nele se encontra a nova opção "<b><span style="color: red;">Descrição de Postagem</span></b>". (Veja Exemplo na imagem)</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJOu5lZ7x2Rc94osqhs7NxVbd8wuu-eDGTSTLQA6hhKcRY62junujvoM9shZkmxCoSJUqyV6vi8YIez2gE2KNHkb_bd0CWvwc6zDmCQR4MYz7cwGuxhWbIrdwnvj6q-L1kvKJ6P-D17Is/s1600/painel+de+postage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tag descrição de postagem do Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJOu5lZ7x2Rc94osqhs7NxVbd8wuu-eDGTSTLQA6hhKcRY62junujvoM9shZkmxCoSJUqyV6vi8YIez2gE2KNHkb_bd0CWvwc6zDmCQR4MYz7cwGuxhWbIrdwnvj6q-L1kvKJ6P-D17Is/s1600/painel+de+postage.png" height="148" title="Clique na imagem para ampliar e visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>2º Passo</b>: Então, você vai clicar na opção "<b><span style="color: red;">Descrição de pesquisa</span></b>" e escrever uma descrição sobre o conteúdo da determinada postagem, e depois clique em "<b><span style="color: red;">Concluir</span></b>" e pronto.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzcQzCGCl6MR-SLR2N0q5rC1q3rCCKOUawxPdOJjN7R374n_75R73YrAg2thCmwgCROabcMfDc2XX8AxK_q3x3Zx4809jfUXEWF-Ezaq4UHjwVCcTEkQdrkCpjg7zSn442wdcggjqnkcE/s1600/concluir.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzcQzCGCl6MR-SLR2N0q5rC1q3rCCKOUawxPdOJjN7R374n_75R73YrAg2thCmwgCROabcMfDc2XX8AxK_q3x3Zx4809jfUXEWF-Ezaq4UHjwVCcTEkQdrkCpjg7zSn442wdcggjqnkcE/s1600/concluir.png" /></a></div>
<div style="text-align: left;">
<br /></div>
<br />
<div>
<hr style="align: center; background: #828282; border: 0px; height: 1px; width: 100%;" />
<b><span style="color: red;">Conclusão</span></b>:</div>
<div>
O que você escreve na descrição será de tal referencia para os mecanismos de busca encontrarem sua postagem.<br />
<hr style="align: center; background: #828282; border: 0px; height: 1px; width: 100%;" />
<b><span style="color: red;">Observação 1</span></b>:<br />
Você também pode "Editar" as postagens publicada no seu blog e inserir a descrição.</div>
<hr style="align: center; background: #828282; border: 0px; height: 1px; width: 100%;" />
<br />
<br />Unknownnoreply@blogger.com16tag:blogger.com,1999:blog-5768958913026656905.post-9375704994407125392014-02-22T17:19:00.001-08:002014-02-28T04:35:40.622-08:00Estilo de Carregamento de Página do You Tube no Blogger <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibmOGNoEt5Y2qNHeKbjal3dG6yUw1XlBzY4iBbX8xB1q6S3uZBJOStamjhr9Zc-sSRcLMElmkeXVIHq0Pu8bhLQ4bwBNXryWJBKtVFJyLqhl0psJycQvGG9UgSTGLKKVNVfk7tWJEHLyE/s1600/carregamento+de+pagina+do+you+tube.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibmOGNoEt5Y2qNHeKbjal3dG6yUw1XlBzY4iBbX8xB1q6S3uZBJOStamjhr9Zc-sSRcLMElmkeXVIHq0Pu8bhLQ4bwBNXryWJBKtVFJyLqhl0psJycQvGG9UgSTGLKKVNVfk7tWJEHLyE/s1600/carregamento+de+pagina+do+you+tube.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibmOGNoEt5Y2qNHeKbjal3dG6yUw1XlBzY4iBbX8xB1q6S3uZBJOStamjhr9Zc-sSRcLMElmkeXVIHq0Pu8bhLQ4bwBNXryWJBKtVFJyLqhl0psJycQvGG9UgSTGLKKVNVfk7tWJEHLyE/s1600/carregamento+de+pagina+do+you+tube.png" height="160" width="320" /></a></div>
Hoje vamos aprender a adicionar o estilo de carregamento da página parecido com a do <b>You Tube</b>.<br />
<div>
Acredito que você já deve ter visto, quando acessamos qualquer página do You Tube, durante o carregamento logo "aparece" uma pequena<b> </b>barra com a cor vermelha no topo da página e quando termina de carregar a mesma desaparece. Então, vamos aprender a utilizar esse mesmo estilo de carregamento no Blogger...</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<a name='more'></a><br /></div>
<div>
Este estilo é um "<b>progress bar</b>" que é executado durante o carregamento da página, onde o usuário poderá visualizar o progresso de carregamento da página em um determinado tempo, nele, é utilizado uma animação que indicar que o carregamento está acontecendo.</div>
<div>
<br /></div>
<div>
Antes, eu queria agradecer ao <b>Charliton Carvalho </b>do site <a href="http://www.2cmultimidia.com/" target="_blank">2C Multimídia</a> um grande amigo e parceiro do Varias Dicas... que nos sugeriu este excelente artigo para ser compartilhado entre nossos leitores.</div>
<div>
<br /></div>
<div style="text-align: center;">
Veja uma <b>demonstração</b> na imagem logo abaixo:</div>
<div style="text-align: center;">
Clique na imagem</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFfGPocS1hyphenhyphenjFYJ4JtPxWORMG6VNlTKcf2aAsDMj3EoXJsx29Ig0UJPS0osfmtZV-8tfv-zVxdui_Lu0WTL38u03bz4Xw-ylmJDZ63ctVK7oYTPukeHXD-nWGBJr2ei7jJhJa8akoPmsM/s1600/barra+de+carregamento+do+youtube+no+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Barra de carregamento do You Tube no Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFfGPocS1hyphenhyphenjFYJ4JtPxWORMG6VNlTKcf2aAsDMj3EoXJsx29Ig0UJPS0osfmtZV-8tfv-zVxdui_Lu0WTL38u03bz4Xw-ylmJDZ63ctVK7oYTPukeHXD-nWGBJr2ei7jJhJa8akoPmsM/s1600/barra+de+carregamento+do+youtube+no+blog.png" height="165" title="Clique na imagem para visualizar melhor " width="320" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<h2>
Como colocar estilo de carregamento de página igual o You Tube</h2>
<div>
Pra colocar no Blog é extremamente fácil vamos apenas inserir um pequeno código no HTML do Blog.</div>
<div>
<br /></div>
<div>
<b>1º Passo</b>: Acesse o painel de edição do seu Blog, clique na opção <b><span style="color: red;">Modelo</span></b> >> depois em <b><span style="color: red;">Editar HTML</span></b>.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBWg4Avv4NIOdxOAPDIljo8T3VWCOv3aGJ4FuEh1nKtCIv9_hs7YlJykLRbDeNZ_zB3bXAXDUHSDI4bmS4aeVGNPTQ9rhPkrhV_UfABLh0gOHEdJY4a0zqlOZCROrco8iU5x1nV3hd6w/s1600/Editar+Modelo+do+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBWg4Avv4NIOdxOAPDIljo8T3VWCOv3aGJ4FuEh1nKtCIv9_hs7YlJykLRbDeNZ_zB3bXAXDUHSDI4bmS4aeVGNPTQ9rhPkrhV_UfABLh0gOHEdJY4a0zqlOZCROrco8iU5x1nV3hd6w/s1600/Editar+Modelo+do+Blog.png" height="213" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>2º Passo</b>: Agora, clique em qualquer parte do código, em seguida, pressione as teclas de atalho "<b><span style="color: red;">Ctrl</span></b>+<span style="color: red;"><b>F</b></span>" do seu teclado e <b>encontre</b> esta seguinte Tag no código:</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: orange;"></body></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: orange;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<b>3º Passo</b>: Após encontrar a Tag, logo<b> acima </b>dela <b>acrescente</b> este código:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><!-- carregamento --></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><style>#nprogress{pointer-events:none}#nprogress .bar{background: <b><span style="color: red;">#FF0000</span></b>;<span style="color: blue;"><b>height:2px</b></span>;left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress .peg{-ms-transform:rotate(3deg) translate(0px,-4px);-webkit-transform:rotate(3deg) translate(0px,-4px);box-shadow:0 0 10px #29d, 0 0 5px #29d;display:block;height:100%;opacity:1.0;position:absolute;right:0;transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 2px transparent; height:18px;width:18px}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.photo{display:none}</style> <div id='loadMore'/> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script src='http://goo.gl/10Okof'/></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><!-- Fim do código de carregamento --></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li>Prontinho, agora é só clicar em <b>Visualizar Modelo</b> para verificar se esta tudo certo, depois é só clicar em Salvar Modelo.</li>
</ul>
<h3>
Alterando o código</h3>
<div>
<ul>
<li>Se você desejar <b>alterar a cor</b> da Barra, basta <b>substituir</b> a parte que esta destacado em vermelho "<b><span style="background-color: #fff2cc; color: red;">#FF0000</span></b>" por um outro código de cor em HTML.<b> (<a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">clique aqui para escolher uma Cor em HTML</a>)</b></li>
<li>Para alterar a <b>espessura</b> da barra basta alterar o seguinte valor destacado em Azul "<b style="background-color: #fff2cc; color: blue;">height:2px</b>".</li>
</ul>
<div>
<b><br /></b></div>
</div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
Unknownnoreply@blogger.com10tag:blogger.com,1999:blog-5768958913026656905.post-89061856309203796542014-02-15T18:56:00.000-08:002014-03-10T20:56:33.954-07:00Botões de compartilhamentos de redes sociais em baixo do titulo da postagem <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitaPhuJqtGqxjnOQKLBRhYGJGml5ORtSTfTzqVxWBLcd_88PKEBAzpQylDMf8_OLt4-MWaKCDOjQutG_KxE8sVr6cV7SGoooPfxhjwV3dD23rzTO6V3-xKp8EMBF0gaokyj_r5rS-FGyg/s1600/botoes+de+compartilhamentos+de+postagem.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitaPhuJqtGqxjnOQKLBRhYGJGml5ORtSTfTzqVxWBLcd_88PKEBAzpQylDMf8_OLt4-MWaKCDOjQutG_KxE8sVr6cV7SGoooPfxhjwV3dD23rzTO6V3-xKp8EMBF0gaokyj_r5rS-FGyg/s1600/botoes+de+compartilhamentos+de+postagem.png" height="160" width="320" /></a></div>
Veja como colocar no seu Blog botões de compartilhamentos de redes sociais que fica em baixo do titulo da postagens.<br />
Essa ferramenta é bem útil para o Blog, pois o leitor pode compartilhar sua postagens nas redes sociais, e ao mesmo tempo colabora coma divulgação do conteúdo...<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
<br />
<a name='more'></a><br />
Esses botões de compartilhamento é disponibilizados pelo site do <a href="http://www.addthis.com/" target="_blank">Addthis</a> que é totalmente grátis, vamos utilizá-los abaixo do titulo da postagem, e eles irão aparecer apenas nas <b>páginas interna das postagens</b>, e ficarão ocultos na página inicial, bastante legal isso e fácil de colocar no Blog.<br />
<br />
Veja um exemplo na imagem abaixo:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcUu5Qml6etyPtXHLBK01WjnnU8SNgwrv7-kMciaS502PUd5P84zJnAjOcsFRZZ27JqpEEuohb1-cBpRuDVAo_fl7M0N13r7qNU9Go1XhC5pOcoKWUnQhY7yR77FWReTCK7tayzP9Ypxo/s1600/compartilhamento.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcUu5Qml6etyPtXHLBK01WjnnU8SNgwrv7-kMciaS502PUd5P84zJnAjOcsFRZZ27JqpEEuohb1-cBpRuDVAo_fl7M0N13r7qNU9Go1XhC5pOcoKWUnQhY7yR77FWReTCK7tayzP9Ypxo/s1600/compartilhamento.png" height="149" title="Clique na Imagem para visualizar " width="320" /></a></div>
<br />
<br />
<h2>
Como colocar botões de compartilhamentos de redes sociais</h2>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>1º Passo:<span style="font-size: large;"> </span></b>Então, você vai acessar o Painel de edição do seu Blog, Vá em <b><span style="color: red;">Modelo</span></b> >> depois em <b><span style="color: red;">Editar HTML</span></b> </div>
<div style="text-align: left;">
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGd8Pbs4I7NRKzfX8hfut51GOcUGhD6LVEwFRmUN0E84CHhrhuSygoWFW87HALhW-T4E5A0ojqwDXJ2yYPpG6b5NWSqoK2PPVghCaVzcBSLL_aKgtyizwctuPm1GorGQG_9dLPg85uLRk/s1600/Editar+HTML.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGd8Pbs4I7NRKzfX8hfut51GOcUGhD6LVEwFRmUN0E84CHhrhuSygoWFW87HALhW-T4E5A0ojqwDXJ2yYPpG6b5NWSqoK2PPVghCaVzcBSLL_aKgtyizwctuPm1GorGQG_9dLPg85uLRk/s1600/Editar+HTML.png" height="224" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<b>2º Passo:<span style="font-size: large;"> </span></b>Agora, clique em qualquer parte do código e pressione as teclas de atalho "<b><span style="color: red;">Ctrl</span></b>+<b><span style="color: red;">F</span></b>" no seu teclado. Em seguida, <b>busque</b> (encontre) este pequeno trecho no HTML do blog:</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: orange;"><div class='post-header'></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<hr style="align: center; background: #828282; border: 0px; height: 1px; width: 100%;" />
<div class="separator" style="clear: both; text-align: left;">
<b><span style="color: red;">Observação</span></b>:</div>
<div class="separator" style="clear: both; text-align: left;">
O template do Blog possui <b>duas</b> Tags igual a esta"<span style="background-color: #cfe2f3;"><div class='post-header'></span>", o código que vamos disponibilizar terá que ser inserido <b>na segunda Tag, </b>pelo contrário não irá funcionar<b>.</b></div>
<hr style="align: center; background: #828282; border: 0px; height: 1px; width: 100%;" />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>3º Passo</b>: Apos <b>encontrar</b> o seguinte Trecho: <span style="background-color: orange;"><div class='post-header'></span> Logo <b><span style="color: red;">abaixo</span></b> dele você vai <b><span style="color: red;">acrescentar</span></b> este código:</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="background-color: #fff2cc; line-height: 22px;"><b><!-- botões de compartilhamento --></b></span></span><br />
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="background-color: #fff2cc; line-height: 22px;"><b><b:if cond='data:blog.pageType == "item"'></b></span></span><br />
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="background-color: #fff2cc; line-height: 22px;"><b><br /></b></span></span>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="background-color: #fff2cc; line-height: 22px;"><b><hr style="align:center; background:#828282; border:0px; height:1px; width:100%;" /></b></span></span><br />
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="background-color: #fff2cc; line-height: 22px;"><b><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e644cc020c5895d"></script><!-- AddThis Button END --></b></span></span><br />
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="background-color: #fff2cc; line-height: 22px;"><b><hr style="align:center; background:#828282; border:0px; height:1px; width:100%;" /></b></span></span><br />
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="background-color: #fff2cc; line-height: 22px;"><b></b:if></b></span></span><br />
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;"><span style="background-color: #fff2cc; line-height: 22px;"><b><!-- fim do codigo --></b></span></span></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Depois de colocar o Código, clique em <b>Visualiza Modelo</b> para verificar se não fez nada errado, se estiver tudo certo finalize clicando em <b>Salve o Modelo. </b><br />
<b><br /></b>
<br />
<blockquote class="tr_bq">
<b><span style="color: red;">Observe:</span></b> Se você quiser que os botões apareça no rodapé das postagens, basta você <b>localizar </b>esta seguinte parte "<span style="color: red;"><b><div class='post-footer'></b></span>" e <b>acrescentar</b> o código <b>abaixo</b> da mesma e pronto.</blockquote>
<b><br /></b>
<br />
<hr style="align: center; background: #828282; border: 0px; height: 1px; width: 100%;" />
Olá pessoal! Deixem comentários sobre o Botão se deu tudo certo ou não, ficarei grato por isto. Obrigado!</div>
<hr style="align: center; background: #828282; border: 0px; height: 1px; width: 100%;" />
<br />Unknownnoreply@blogger.com23tag:blogger.com,1999:blog-5768958913026656905.post-65108546188465913812014-02-09T18:25:00.000-08:002014-02-09T18:57:27.269-08:00Solicitando desbloqueio do Blog bloqueado por Malware<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8CAjDIhwy4xbVJNnB0c6Ia-m78mh7lCiU4mbMUhqlnfqmFZasVARY5G8oj3kq93AeiCv1G-OdTqTi5-H7y0r0eOZQUmvTbhSB0zjLPENzeG2_78l2dgKCILAenmlVaqiJ9qdQmdpRSA/s1600/blog+bloqueado.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8CAjDIhwy4xbVJNnB0c6Ia-m78mh7lCiU4mbMUhqlnfqmFZasVARY5G8oj3kq93AeiCv1G-OdTqTi5-H7y0r0eOZQUmvTbhSB0zjLPENzeG2_78l2dgKCILAenmlVaqiJ9qdQmdpRSA/s1600/blog+bloqueado.png" height="160" width="320" /></a></div>
Se seu Blog foi Bloqueado indevidamente porque o Blogger detectou um certo <b>Malware</b>, saiba quais os procedimento para solicitar Desbloqueio do Blog...<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br /><br />
Caso o seu Blog tenha sido bloqueado por conter Malwares, isso acontece pois o mecanismo contra Malwares da plataforma Blogger detectou algum Link suspeito presente na página do Blog. Geralmente é causado por recursos de terceiros, como por exemplo: Contadores de visitas, anúncios e entre outros...<br />
<br />
E como já sabe, o Malware chega até o seu Blog através de recursos de terceiros que você mesmo adiciona no Blog. E o procedimento correto a ser feito é,<b> identificar qual Script </b>causou a ameaça, e logo remove-lo.<br />
<br />
Então, é preciso você lembrar qual foi o ultimo recurso que colocou no Blog, que depois causou a sinalização de Malware, e excluí-lo da página.<br />
<br />
<blockquote class="tr_bq">
<b><i>Obs: Tem casos que até o próprio navegador identifica a ameaça mostrando uma mensagem informando que contém Malware na página. Veja a imagem abaixo:</i></b></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvbHYdsCabfd8xGbrn5D_6eBJl9t35oJ5qmNwVoMe5yqUqwxKNN2KR-sxUzbr9Acs-Gxo0eefh6PxIOU9lLx18HHrkbX_8gFS_eBj8074iU0-tZomjhQby7LcG4KzPBjVuSqexhkgnGo/s1600/malware+detectado+no+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvbHYdsCabfd8xGbrn5D_6eBJl9t35oJ5qmNwVoMe5yqUqwxKNN2KR-sxUzbr9Acs-Gxo0eefh6PxIOU9lLx18HHrkbX_8gFS_eBj8074iU0-tZomjhQby7LcG4KzPBjVuSqexhkgnGo/s1600/malware+detectado+no+blog.png" height="286" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Depois de remover o Script suspeito, o próximo passo será fazer a solicitação de Desbloqueio do Blog, mas sabendo que, depois de solicitar desbloqueio o seu Blog terá que aguardar 24 horas para ser liberado e podendo demorá no máximo 2 dias.<br />
<h2>
Solicitando desbloqueio do Blog </h2>
<b>1º Passo</b>: Depois de fazer a remoção do Script suspeito, acessar o site <b><a href="https://www.google.com/intl/pt-BR/webmasters/" target="_blank">Ferramentas para Webmasters</a></b> que é um serviço do Google.<br />
<blockquote class="tr_bq">
Clique aqui >> <b><a href="https://www.google.com/intl/pt-BR/webmasters/" target="_blank">Ferramentas para Webmasters</a> </b></blockquote>
<b>2º Passo</b>: Na página inicial das "<b>Ferramentas para Webmasters</b>" clique no botão "<b><span style="color: red;">Faça login nas Ferramentas para Webmasters</span></b>" com sua conta do Blog (Google).<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNtiYip3rRf_AuC4DisvB9m5z3jUP8jADpY-f55BJggpmLnQpNP2VD7xjZmqJyDj8dwuiOYWXKgqhvUIDlyEqWUG4FgPLjOfH0hA1dn05Jh2BtpSD0zrIvPBAskJ0lq4c9zYBiEz4z6s/s1600/faca+login.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNtiYip3rRf_AuC4DisvB9m5z3jUP8jADpY-f55BJggpmLnQpNP2VD7xjZmqJyDj8dwuiOYWXKgqhvUIDlyEqWUG4FgPLjOfH0hA1dn05Jh2BtpSD0zrIvPBAskJ0lq4c9zYBiEz4z6s/s1600/faca+login.png" height="206" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>3º Passo</b>: Depois de logar sua conta, logo abrirá o <b>Painel Inicial</b> e, se você tem mais de um Blog, lá também irá aparecer todos eles.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhg6RAkFT1b_r08nB57pRSp1-F18dEQ2ejkKexSVzNjllfzJC0uk0wkLuusF_A8OMY2Qykep1CrssuYcnw79-7SwoGzKvvBXjZ-VpeFlRO2_46hMfnFjwzw0G9fUSY57CGSArcN9KWoDM/s1600/painel+inicial+ferramentas+para+web.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Painel inicial de ferramentas para Webmasters " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhg6RAkFT1b_r08nB57pRSp1-F18dEQ2ejkKexSVzNjllfzJC0uk0wkLuusF_A8OMY2Qykep1CrssuYcnw79-7SwoGzKvvBXjZ-VpeFlRO2_46hMfnFjwzw0G9fUSY57CGSArcN9KWoDM/s1600/painel+inicial+ferramentas+para+web.png" height="152" title="Clique na Imagem para visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>4º Passo</b>: Veja que o Blog bloqueado esta aparecendo sinalizado com uma mensagem informando que foi encontrado problemas, então, você vai na opção "<b><span style="color: red;">Verificar integridade do site</span></b>" e em seguida na opção "<b><span style="color: red;">Malware Detected?</span></b>" para poder avaliar seu Blog. Veja o exemplo na imagem:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDc-QUWFLCW1pWrQllQbh5Hzn69sZoYoWFv9EV66VI-oXxEiEXY47lyE2l-AKZHCuxL1A0_YJaMmyj2j2VXvBPEHISlvc9u4x49kQmmA5BBSHPlYRLsHP5ixyMNAaA6ZjPD1C-ZbeCOi8/s1600/Malware+detected.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDc-QUWFLCW1pWrQllQbh5Hzn69sZoYoWFv9EV66VI-oXxEiEXY47lyE2l-AKZHCuxL1A0_YJaMmyj2j2VXvBPEHISlvc9u4x49kQmmA5BBSHPlYRLsHP5ixyMNAaA6ZjPD1C-ZbeCOi8/s1600/Malware+detected.png" height="107" title="Clique na Imagem para visualizar " width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>5º Passo</b>: A seguir, será aberta o Painel de "<b>Problemas de Segurança</b>" onde a mesma informa ao usuário o local onde foi encontrado o Malware. No meu<span style="color: red;"> exemplo</span>, o Malware era de um Script que eu tinha adicionado em uma página Estática do meu Blog, e se você observar, o Painel mostra o endereço a minha página infectada, veja na imagem abaixo:</div>
<blockquote class="tr_bq">
No painel <b>Problemas de Segurança</b> você vai selecionar a opção "<b><span style="color: red;">Corrigi Problemas</span></b>" e depois clique no botão "<b><span style="color: red;">Solicitar uma revisão</span></b>". Veja exemplo na imagem:</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrjiZaW6thSI7n9Cxoh-ruwUVcaLvYNBdF3gRXc_hcI0Xln2eirUpJQFLqfQIHeXCCQjfKWoy_U6Ngzqaz4_wfovaAe7gxKgKhBDNOZEskcBoSfgHe-jG0BCw1bC4UKrjSDPFqzLAqqLs/s1600/solicitar+uma+revisao.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrjiZaW6thSI7n9Cxoh-ruwUVcaLvYNBdF3gRXc_hcI0Xln2eirUpJQFLqfQIHeXCCQjfKWoy_U6Ngzqaz4_wfovaAe7gxKgKhBDNOZEskcBoSfgHe-jG0BCw1bC4UKrjSDPFqzLAqqLs/s1600/solicitar+uma+revisao.png" height="162" title="Clique na Imagem para ampliar " width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<b> 6º Passo</b>: Depois de solicitar uma revisão, será aberta uma janela, e na mesma você terá que escrever uma <b>descrição</b> informando que já encontrou e corrigiu o problema, em seguida, finalizar clicando no botão "<b><span style="color: red;">Solicitar um Analise</span></b>".<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVlHl2K-b3u5EZ1UCixE88RQL-sFNnn6ZpkqIiH5f5e_34knbvbtl4C2Z6zydkJh9rGXqHBBBRHCf55wC2CnHWGig771GC8XrFywZ6srLOx-69HfwqcRWsCdvBEb3e6PbUbB3b6FNUsMY/s1600/faca+uma+descricao.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVlHl2K-b3u5EZ1UCixE88RQL-sFNnn6ZpkqIiH5f5e_34knbvbtl4C2Z6zydkJh9rGXqHBBBRHCf55wC2CnHWGig771GC8XrFywZ6srLOx-69HfwqcRWsCdvBEb3e6PbUbB3b6FNUsMY/s1600/faca+uma+descricao.png" height="162" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Prontinho, sua solicitação foi enviada, agora, só aguardar no prazo de 24 horas para seu blog ser liberado.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Galera, espero ter ajudado e respondido a dúvida de todos, obrigado!Unknownnoreply@blogger.com9tag:blogger.com,1999:blog-5768958913026656905.post-20483611522532642452014-02-05T21:45:00.000-08:002014-02-06T08:15:19.251-08:00Ocultar o rodapé da postagem na página inicial do Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhya2X3kQXtQJra2nAAlFlD2od8eP_qOStzCYICOFB5nc_Tp-00emeXR_gxpqufYyP4b6Rtx590XQk-tVZ3pG9cF2QYe-Gv5YcMxjXF7ZS82q3y5FJFcKI-3tTUpL5C57um6umv_NUCzKM/s1600/ocultando+o+rodap%C3%A9+das+postagens+do+blog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhya2X3kQXtQJra2nAAlFlD2od8eP_qOStzCYICOFB5nc_Tp-00emeXR_gxpqufYyP4b6Rtx590XQk-tVZ3pG9cF2QYe-Gv5YcMxjXF7ZS82q3y5FJFcKI-3tTUpL5C57um6umv_NUCzKM/s1600/ocultando+o+rodap%C3%A9+das+postagens+do+blog.png" height="160" width="320" /></a></div>
Olá pessoal! Vai aqui mais uma dica legal. Desta vez, eu mostrarei como <b>ocultar</b> o rodapé das postagens apenas na <b>página inicial</b> e na <b>página de marcadores</b> do Blog. Isso fica bem legal, pois evita aquela "repetição" de vários rodapés de postagens e eles só aparecerão na página da postagem, com a intenção de deixar a página inicial mais "limpa"...<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
Bom, como já deve ter percebido, o "rodapé da postagem" além de aparecer nas postagens, ele aparece também na pagina Inicial e na página de Marcadores, porém, não é tão importante ele aparecer nessas demais páginas. Então, para resolver isso vou mostrar como ocultar a mesma.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiuGQxqv9-ioi5jv85YBfwWy20F6Y-BYmyYBngL52hx-cM9w-kGKOFHWtXysE2sV6P8oiAmLXwVi3Kmb7hUPd5ZCQ0orgfTQ428u5j-mev7nXbzq3uHmqc8Rg5PoGryCTEQuAe4CSNk40/s1600/rodape+da+postagem.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiuGQxqv9-ioi5jv85YBfwWy20F6Y-BYmyYBngL52hx-cM9w-kGKOFHWtXysE2sV6P8oiAmLXwVi3Kmb7hUPd5ZCQ0orgfTQ428u5j-mev7nXbzq3uHmqc8Rg5PoGryCTEQuAe4CSNk40/s1600/rodape+da+postagem.png" height="160" width="320" /></a></div>
<br />
<div style="text-align: center;">
Veja uma demonstração na imagem abaixo como seria uma página inicial sem o rodapé:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibARFGRbs-1SjmLyXnNcpAbvNoxXp_jzF0CIKk6E3ddzg8e6mhdlcMR-8epF4jBBmTdDTtOAX8-Hm_RMYyh1efpBSKwq0wOE3zjOpOV7fVO_YUO95KXN0JCitWPHArrydjcu-YWq5EUD0/s1600/sem+rodape.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibARFGRbs-1SjmLyXnNcpAbvNoxXp_jzF0CIKk6E3ddzg8e6mhdlcMR-8epF4jBBmTdDTtOAX8-Hm_RMYyh1efpBSKwq0wOE3zjOpOV7fVO_YUO95KXN0JCitWPHArrydjcu-YWq5EUD0/s1600/sem+rodape.png" height="191" width="320" /></a></div>
<h2>
Ocultando o Rodapé da postagem na página inicial "Home" do Blog</h2>
<div>
Para ocultar é bastante fácil, vamos só acrescentar um pequeno código no HTML do Blog.</div>
<div>
<br /></div>
<div>
<b>1º Passo</b>: Acesse o painel de edição do seu Blog, vá na opção<b><span style="color: red;"> Modelo</span></b> >> depois em <b><span style="color: red;">Editar HTML</span></b>.</div>
<div>
<br /></div>
<div>
<b>2º Passo:</b> Depois de abrir o HTML do seu blog, <b>clique</b> em qualquer parte do código e sem seguida pressione as teclas de atalho <b><span style="color: red;">Ctrl</span></b>+<b><span style="color: red;">F </span></b>do seu teclado e, <b>busque</b> por esta seguinte Tag no código:</div>
<div>
<br /></div>
<div>
<b style="background-color: orange;"></head></b></div>
<div>
<br /></div>
<div>
<b>3º Passo:</b> Após encontrar a Tag, logo <b>acima</b> dela <b>acrescente</b> este código:</div>
<div>
<br /></div>
<div>
<div>
<span style="background-color: #cfe2f3;"><!-- ocultar rodape da postagem --></span></div>
<div>
<span style="background-color: #cfe2f3;"><b:if cond='data:blog.pageType != &quot;item&quot;'></span></div>
<div>
<span style="background-color: #cfe2f3;"><b:if cond='data:blog.pageType != &quot;static_page&quot;'></span></div>
<div>
<span style="background-color: #cfe2f3;"><style type='text/css'></span></div>
<div>
<span style="background-color: #cfe2f3;">.post-footer{display:none;}</span></div>
<div>
<span style="background-color: #cfe2f3;"></style></span></div>
<div>
<span style="background-color: #cfe2f3;"></b:if></span></div>
<div>
<span style="background-color: #cfe2f3;"></b:if></span></div>
<div>
<span style="background-color: #cfe2f3;"><!-- Final do código --></span></div>
</div>
<div>
<br /></div>
<div>
<b>4º Passo</b>: Prontinho, a seguir clique em<b><span style="color: red;"> visualizar</span></b>, verifique se não fez nada errado, em seguida<b><span style="color: red;"> Salve o Modelo</span></b>.</div>
<div>
<br /></div>
<div>
Pronto pessoal, boa sorte. Obrigado a todos!</div>
<div>
Não deixem de seguir nosso Blog ficarei grato. ;D</div>
<div>
<br /></div>
<br />Unknownnoreply@blogger.com13tag:blogger.com,1999:blog-5768958913026656905.post-40412534720490982862014-01-06T16:59:00.000-08:002014-01-06T17:14:23.892-08:00Botão Abrir e Fechar Xat (Chat) Flutuante Para Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLtU-dmKhwusMHTdogF3OshZkXW76ZECCtkMeZf3PLA-rHqYvRXv1HsGUt1e1RmVj8jL8Iwo7o0M3BHN98Nsk_iLsHC-_GJB4YI9ILIWNeLrxF5cZMZ7j3l5l4VzaYZjLX4342fCCAHjM/s1600/Novo+bot%C3%A3o+Abir+Xat+para+blog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLtU-dmKhwusMHTdogF3OshZkXW76ZECCtkMeZf3PLA-rHqYvRXv1HsGUt1e1RmVj8jL8Iwo7o0M3BHN98Nsk_iLsHC-_GJB4YI9ILIWNeLrxF5cZMZ7j3l5l4VzaYZjLX4342fCCAHjM/s1600/Novo+bot%C3%A3o+Abir+Xat+para+blog.png" height="160" width="320" /></a></div>
Esse botão é um recurso bem útil para queles blogueiros que utilizam Bate-papo Xat no blog, pois o botão deixará o Xat acessível e visível para o visitante acessá-lo, e a vantagem também é, que, o xat não ficará ocupando um grande espaço no seu blog...<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br />
Veja uma <a href="http://blogdetestes-0001.blogspot.com.br/" target="_blank">DEMONSTRAÇÃO</a><br />
<br />
Sobre o Botão abrir Xat, ele ficará posicionado na parte inferior direita da tela, e quando o botão é clicado o Xat é executado automaticamente e exibido sobre a página do seu blog, ainda contando com a opção Fechar Xat.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6aKSqaLYFPtkGG-pDnJwBrtTZvdnEqBVXsgTqpPWTh5rw4g_0XZ4XusBZmT9vtxU1q_fXwLc98_WT7ZMkgtwGZdyJVbA82oSLK7XSB8Q3OakIdsu2lTtHSluP0ugUwr60wA2TNNp-8I/s1600/DEMONSTRA%C3%87%C3%83O.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Botão abrir e fechar Xat para blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6aKSqaLYFPtkGG-pDnJwBrtTZvdnEqBVXsgTqpPWTh5rw4g_0XZ4XusBZmT9vtxU1q_fXwLc98_WT7ZMkgtwGZdyJVbA82oSLK7XSB8Q3OakIdsu2lTtHSluP0ugUwr60wA2TNNp-8I/s1600/DEMONSTRA%C3%87%C3%83O.png" height="179" title="clique na imagem para exibir a demonstração" width="320" /></a></div>
<h2>
Como Colocar o Botão Abrir e Fechar Xat no Blog</h2>
<div>
Para colocar no blog é bastante fácil galera, então vamos lá.</div>
<div>
<br /></div>
<div>
<b>1º Passo</b>: <b><span style="color: red;">Copie</span></b> o código mostrado logo abaixo:</div>
<div>
<br /></div>
<div>
<div>
<span style="background-color: #fff2cc;"><div id="botao_xat" style="position:fixed;right:5px;bottom:0;text-align:right; z-Index:9999; background-color:transparent;"><img onclick="abrir_xat()" style="cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceKikUuJ9r4XLWzqGZGB1M8kOLzszlEJW33ArGShSJ8V8guZtOUgh2Rzy04i2rkam7dkBaQSolPRU8VFCTvhikjjJgBjPq2xPnkgBYw03WUZQUz_5AcgfI2D0A2VviNs-Ry2v2Bd7-44/s1600/abrir+xat.png" /></div></span></div>
<div>
<span style="background-color: #fff2cc;"><script type="text/javascript"></span></div>
<div>
<span style="background-color: #fff2cc;">function abrir_xat(){</span></div>
<div>
<span style="background-color: #fff2cc;"><br /></span></div>
<div>
<span style="background-color: #fff2cc;">document.getElementById("botao_xat").innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwWzCTlAh0G0yWvmh0WZEpvUEYHq6KxnlCp67F2TyFnO9rG1adx7dVDmS7qYm53XeugsjhzB28fUhS3v6TeXfXWUtZM0cx4YO03bMPP5RpY491Yqkf3qp3DR3jlvPK74JzOdz9oSlK-k/s1600/xat.png" alt="Fechar Xat" title="Fechar Xat" onclick="fechar_xat()" style="cursor:pointer;" /><br>';</span></div>
<div>
<span style="background-color: #fff2cc;"><br /></span></div>
<div>
<span style="background-color: #fff2cc;">document.getElementById("botao_xat").innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwWzCTlAh0G0yWvmh0WZEpvUEYHq6KxnlCp67F2TyFnO9rG1adx7dVDmS7qYm53XeugsjhzB28fUhS3v6TeXfXWUtZM0cx4YO03bMPP5RpY491Yqkf3qp3DR3jlvPK74JzOdz9oSlK-k/s1600/xat.png" alt="Fechar Xat" title="Fechar Xat" onclick="fechar_xat()" style="cursor:pointer;" /><br><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="550" height="405" name="chat" FlashVars="<b>id</b>=<b><span style="color: red;">000000000</span></b>" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.php" />';}</span></div>
<div>
<span style="background-color: #fff2cc;"><br /></span></div>
<div>
<span style="background-color: #fff2cc;">function fechar_xat(){<span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById("botao_xat").innerHTML = '<img onclick="abrir_xat()" style="cursor:pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceKikUuJ9r4XLWzqGZGB1M8kOLzszlEJW33ArGShSJ8V8guZtOUgh2Rzy04i2rkam7dkBaQSolPRU8VFCTvhikjjJgBjPq2xPnkgBYw03WUZQUz_5AcgfI2D0A2VviNs-Ry2v2Bd7-44/s1600/abrir+xat.png" />';</span></div>
<div>
<span style="background-color: #fff2cc;">}</script></span></div>
</div>
<div>
<br /></div>
<div>
<b>2º Passo</b>: Em seguida, vá no painel de Edição do seu blog, clique na opção "<b><span style="color: red;">layout</span></b>" >> clique em "<b><span style="color: red;">Adicionar um Gadget</span></b>" >> adicione a opção "<b><span style="color: red;">HTML/JavaScripts</span></b>".</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdqx6KgHq9lEAnC9umloFYdpUbrWsS-hSH-KOIoG6FIYNoBGyszfoeE4TzJE84vTm0-7jOWHAmnVZqOyhYEe5baL4FyFAqeOY0qEh24AI_UfTNaDllrLDiAUWVoJROKQzNIULxAnX9KU/s1600/Layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdqx6KgHq9lEAnC9umloFYdpUbrWsS-hSH-KOIoG6FIYNoBGyszfoeE4TzJE84vTm0-7jOWHAmnVZqOyhYEe5baL4FyFAqeOY0qEh24AI_UfTNaDllrLDiAUWVoJROKQzNIULxAnX9KU/s1600/Layout.png" height="138" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Depois cole o Código no HTML/JavaScripts</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<b>3º Passo</b>: Agora vamos<b><span style="color: red;"> </span><span style="color: blue;">editar</span></b> o código. Veja que no código, eu destaquei uma pequena parte em cor <b>Vermelha</b>r: "<b><span style="background-color: #fff2cc; color: red;">000000000</span></b>" essa parte significa o "<b>Número ID</b>" do Xat, sendo assim, você terá que substituir essa parte do código pelo o "<b>ID</b>" do seu Xat.</div>
<div>
<br /></div>
<div>
<b><span style="color: red;">Obs</span></b>.: Pra encontrar o Número ID do Xat é fácil. Esse fica presento no código do seu Xat.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkg_GQJnPMGQV81tdsXCccKJhfTVzDDxkxaneMEBJXYHpZJD1bTnyJdP-R8JhuQIcVmFhgkOcOcheCzcP8tIkbyyQQmj8BRR2sZQoiU3NHtk4YvRO7coCiqWVh_8Umay34HZRNNnhyXQ/s1600/ID+do+xat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkg_GQJnPMGQV81tdsXCccKJhfTVzDDxkxaneMEBJXYHpZJD1bTnyJdP-R8JhuQIcVmFhgkOcOcheCzcP8tIkbyyQQmj8BRR2sZQoiU3NHtk4YvRO7coCiqWVh_8Umay34HZRNNnhyXQ/s1600/ID+do+xat.png" height="242" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>4º Passo</b>: Depois de editar o código, <b>Salve</b> o novo Gadget e pronto, seu xat estará funcionando.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Então pessoal, é só isso, espero terem gostado desse botão. Queria que vocês deixassem comentário sobre o Gadget, e não esqueçam de segui nosso blog, certo. obrigado!</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Observe</b>: Caso alguém deseja <b>mudar a</b> <b>cor do botão abrir</b> e <b>fecha</b> podem ficar a vontade, esse Gadget utiliza duas imagens, basta vocês <b>criarem duas imagens</b> com base nessas que <b>estarei deixando logo abaixo</b>, depois de prontas as imagens, hospede-as no blog e substitua o link das imagens antigas pelo que criaram:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Botão Abrir Xat</b>:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHrSdiESG4oV2nQLVSGG6sV9Be3aEEHAx0zHgMBEHBbBJ6Eiea7GDtKC91hPieBnkHVRe2MizCmMgGrkvgZRqR4SJO9shsGRcl_MELZlo4GvC2GExYmlTRZVzqI6ugexJ3cCxsR4bmrPc/s1600/abrir+xat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHrSdiESG4oV2nQLVSGG6sV9Be3aEEHAx0zHgMBEHBbBJ6Eiea7GDtKC91hPieBnkHVRe2MizCmMgGrkvgZRqR4SJO9shsGRcl_MELZlo4GvC2GExYmlTRZVzqI6ugexJ3cCxsR4bmrPc/s1600/abrir+xat.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: #fff2cc; text-align: left;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceKikUuJ9r4XLWzqGZGB1M8kOLzszlEJW33ArGShSJ8V8guZtOUgh2Rzy04i2rkam7dkBaQSolPRU8VFCTvhikjjJgBjPq2xPnkgBYw03WUZQUz_5AcgfI2D0A2VviNs-Ry2v2Bd7-44/s1600/abrir+xat.png</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: #fff2cc; text-align: left;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<b>Botão Fechar Xat:</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPrBCOJCDqtGpdL3ay5T8kqd_eSIdJEHviQcBQNoDObdkpZXqjXaNcMYinKdy5qFPnYb8NDtAecAYOiUPab3FQx9w-d01ZLIo6V4MNo01eIWmUEfkizqIYQhcYXCzV0kO_A3e9RUinRGM/s1600/xat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPrBCOJCDqtGpdL3ay5T8kqd_eSIdJEHviQcBQNoDObdkpZXqjXaNcMYinKdy5qFPnYb8NDtAecAYOiUPab3FQx9w-d01ZLIo6V4MNo01eIWmUEfkizqIYQhcYXCzV0kO_A3e9RUinRGM/s1600/xat.png" height="22" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: #fff2cc; text-align: start;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwWzCTlAh0G0yWvmh0WZEpvUEYHq6KxnlCp67F2TyFnO9rG1adx7dVDmS7qYm53XeugsjhzB28fUhS3v6TeXfXWUtZM0cx4YO03bMPP5RpY491Yqkf3qp3DR3jlvPK74JzOdz9oSlK-k/s1600/xat.png</span></div>
<div class="separator" style="clear: both; text-align: center;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-5768958913026656905.post-47810311088020589192014-01-04T17:04:00.000-08:002014-01-04T17:09:43.865-08:00Formulário de Contato do Blogger personalizado <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTyTNKuDATLjqzt4jXnYejXbpmWyg-ctvYVpuKwsjKGNEaNDtcsnQnvdx-fn-7AhkiLANVGX7yjxm-qGqxIGTvPYjZTZG72WlpQKSAPlHX5G5SR1Ppy2X3e2afB5ZpsMRPxCRDst6_Ec/s1600/formul%C3%A1rio+de+contato+personalizado.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTyTNKuDATLjqzt4jXnYejXbpmWyg-ctvYVpuKwsjKGNEaNDtcsnQnvdx-fn-7AhkiLANVGX7yjxm-qGqxIGTvPYjZTZG72WlpQKSAPlHX5G5SR1Ppy2X3e2afB5ZpsMRPxCRDst6_Ec/s320/formul%C3%A1rio+de+contato+personalizado.png" width="320" /></a></div>
Bom pessoal! Neste tutorial, aprenderemos a personalizar o<b> formulário de contato</b> padrão do blogger utilizando CSS. O seguinte procedimento é bem fácil de ser feito, e não tem complicação para quem é iniciante. Isso é bastante interessante, pois você pode personalizar o formulário e deixá-lo com uma aparência bem agradável...<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
Clique link para vê: <a href="http://blogdetestes-0001.blogspot.com.br/p/blog-page.html" target="_blank">DEMONSTRAÇÃO</a><br />
<br />
Então, você viu na demonstração que o formulário está aparecendo em uma <b><a href="http://variasdicasparablogs.blogspot.com.br/2013/07/como-colocar-o-novo-formulario-de.html" target="_blank" title="Como colocar o Formulário de Contato em Uma determinada página do blog">determinada página do Blog</a></b> com a aparência totalmente diferente comparada com a padrão. Agora o formulário possui cor de fundo e bordas diferenciadas, e os campos "<b>nome</b>, <b>e-mail</b>, e <b>mensagem</b>" estão com o tamanhos diferentes, enquanto ao botão "<b>Enviar</b>" ele também sofreu alterações. Enfim, você poderá alterar as cores e deixá-las aparente com a cor do layout do seu blog.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAdI2BHMdgKUikwwqBg5lw2u8huAvuIyxQPXeQ-dPw_VE2Vj_2zR9AyLye2IFtWtaXEo3wUYrdstzItYWYlWHBncznjxgHsRr0Rbhy06wXgoc6peKJ3srFYN6JkjiUTF6RukH2Vkr2EDI/s1600/Formulario+de+contato+do+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Formulário de Contato do Blogger" border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAdI2BHMdgKUikwwqBg5lw2u8huAvuIyxQPXeQ-dPw_VE2Vj_2zR9AyLye2IFtWtaXEo3wUYrdstzItYWYlWHBncznjxgHsRr0Rbhy06wXgoc6peKJ3srFYN6JkjiUTF6RukH2Vkr2EDI/s320/Formulario+de+contato+do+blog.png" title="Formulário de Contato do Blogger" width="320" /></a></div>
<br />
<br />
<h2>
Personalizando Formulário de Contato do Blog</h2>
<div>
<br />
Primeiramente, essa personalização é proporcional para quem utiliza o <b>Gadget Formulário de Contano</b> em uma determinada página do Blog, certo. Então, se você não sabe como colocar, peço que leia o tutorial anterior, e em seguida prossiga a continuação dessa aula.<br />
<br />
<ul>
<li><a href="http://variasdicasparablogs.blogspot.com.br/2013/07/como-colocar-o-novo-formulario-de.html" target="_blank">Formulário de Contato em uma determinada página do blog</a>.</li>
</ul>
</div>
<b>1º Passo</b>: No painel de edição do blog, clique sobre a opção "<b><span style="color: red;">Páginas</span></b>".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUxuG_rlRN39QM2wfz02srkvIlx_A6F-gInKstagrpOQ1rZOJlYaF5F0aQpgHR_MCzL5rmWnwo1TR4e_hClQi2KrnyzWTeN35cHr8KnoxKNxr5RsdJqoFwFpygLQ-BHjGiT3PFl1QYRc/s1600/op%C3%A7%C3%A3o+p%C3%A1ginas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUxuG_rlRN39QM2wfz02srkvIlx_A6F-gInKstagrpOQ1rZOJlYaF5F0aQpgHR_MCzL5rmWnwo1TR4e_hClQi2KrnyzWTeN35cHr8KnoxKNxr5RsdJqoFwFpygLQ-BHjGiT3PFl1QYRc/s400/op%C3%A7%C3%A3o+p%C3%A1ginas.png" width="400" /></a></div>
<br />
Agora, se você já possui uma página para <b>Contatos</b> no seu Blog, clique na opção "<b><span style="color: red;">Editar</span></b>", e se por acaso, não tem uma página para contato crie uma "<b>Nova Página</b>"<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaNV-HJvfJMRKG-YquBeEyw_atxDDrBONZml-tx2f9bI9OZjKb97hsoZNy4NGOFWgJqStGnKatEhSJmXTl8eRb6ZqY7LBmtQQ60kpqBtMVp_xDT5VaxUQa7uPwH_FmPNmwHCJBPav__w/s1600/Editar+P%C3%A1gina+do+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLaNV-HJvfJMRKG-YquBeEyw_atxDDrBONZml-tx2f9bI9OZjKb97hsoZNy4NGOFWgJqStGnKatEhSJmXTl8eRb6ZqY7LBmtQQ60kpqBtMVp_xDT5VaxUQa7uPwH_FmPNmwHCJBPav__w/s400/Editar+P%C3%A1gina+do+blog.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>2º Pass</b>o: Estando com a página aberta, abra o HTML da página, clicando na opção "<b><span style="color: red;">HTML</span></b>". </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNBcusQdh3kcEQlAMWc-3bKWIt9nn-nxIH4a2S9ARPVOqxvBJbW_IVyrAug_-rP78Vmmncyq95vN7Q1yCikE_Lzqhjb6KaDxH6CvXqWWLd9BSVRRefkDqVyyoDtqkv0Hjij3RHESYynA/s1600/HTMLLL.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNBcusQdh3kcEQlAMWc-3bKWIt9nn-nxIH4a2S9ARPVOqxvBJbW_IVyrAug_-rP78Vmmncyq95vN7Q1yCikE_Lzqhjb6KaDxH6CvXqWWLd9BSVRRefkDqVyyoDtqkv0Hjij3RHESYynA/s320/HTMLLL.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>3º Passo</b>: <b>Copie</b> o código disponibilizado logo abaixo, e depois <b>cole</b> no HTML da página, e depois <b>Salve</b> :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfs7axSmjBsSXntSwU7jSR9iiPgS38m3CFnMd-ZcUIEKRLR8u-IU7wgjO_3bKImGyoJPmwKpdaZH681wmLAgEew26peLPQwVq6BFwT_3-Gj0N2HBJiHq8RJ1xMs2l10rEJZ3lK4RAe9U/s1600/atualizar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Clique na imagem para visualizar" border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfs7axSmjBsSXntSwU7jSR9iiPgS38m3CFnMd-ZcUIEKRLR8u-IU7wgjO_3bKImGyoJPmwKpdaZH681wmLAgEew26peLPQwVq6BFwT_3-Gj0N2HBJiHq8RJ1xMs2l10rEJZ3lK4RAe9U/s400/atualizar.png" title="Clique na imagem para visualizar" width="400" /></a></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><center></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><div class="background-contact"></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><form name="contact-form"></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;">Seu Nome: </div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><hr style="align: center; background: #CDCDCD; border: 0px; height: 1px; width: 100%;" /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;">Seu e-mail: </div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><hr style="align: center; background: #CDCDCD; border: 0px; height: 1px; width: 100%;" /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;">Sua Mensagem:</div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"> </textarea></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><div style="text-align: center&quot; max-width: width: 450px;"></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"></div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"></div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"></div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"></form></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"></div></span></div>
<div class="separator" style="clear: both;">
<span style="background-color: #fff2cc;"></center></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>4º Passo</b>: Pronto, depois de ter salvo a página de contato, em seguida vá na opção "<b><span style="color: red;">Modelo</span></b>" >> depois em "<b><span style="color: red;">Editar HTML</span></b>".</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGd8Pbs4I7NRKzfX8hfut51GOcUGhD6LVEwFRmUN0E84CHhrhuSygoWFW87HALhW-T4E5A0ojqwDXJ2yYPpG6b5NWSqoK2PPVghCaVzcBSLL_aKgtyizwctuPm1GorGQG_9dLPg85uLRk/s1600/Editar+HTML.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGd8Pbs4I7NRKzfX8hfut51GOcUGhD6LVEwFRmUN0E84CHhrhuSygoWFW87HALhW-T4E5A0ojqwDXJ2yYPpG6b5NWSqoK2PPVghCaVzcBSLL_aKgtyizwctuPm1GorGQG_9dLPg85uLRk/s320/Editar+HTML.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<b>5º Passo</b>: Agora, procure por esta seguinte Tag "<span style="background-color: orange;">]]></b:skin></span>" no HTML do blog, para facilitar a localização, utilize as teclas de atalho (<span style="color: red;"><b>Ctrl</b></span>+<b><span style="color: red;">F</span></b>) do seu teclado.<br />
Quando localizar, logo <b>acima</b> da Tag <b>acrescente</b> esse código CSS:<br />
<br />
<span style="background-color: #fff2cc;"> /*-----Formulário de Contato---*/</span><br />
<span style="background-color: #fff2cc;">.background-contact {</span><br />
<span style="background-color: #fff2cc;">width: 500px;</span><br />
<span style="background-color: #fff2cc;">text-align: center;</span><br />
<span style="background-color: #fff2cc;">max-width: 100%;</span><br />
<span style="background-color: #fff2cc;">margin: 0 auto;</span><br />
<span style="background-color: #fff2cc;">padding: 10px;</span><br />
<span style="background-color: #fff2cc;">background: <b><span style="color: #444444;">#E6E8FA</span></b>;</span><br />
<span style="background-color: #fff2cc;">border-color: <b><span style="color: red;">#C0C0C0</span></b>;</span><br />
<span style="background-color: #fff2cc;">border-style:solid;</span><br />
<span style="background-color: #fff2cc;">border-radius:10px 10px 0 0;</span><br />
<span style="background-color: #fff2cc;">}</span><br />
<span style="background-color: #fff2cc;"><br /></span>
<span style="background-color: #fff2cc;">#formcontact{</span><br />
<span style="background-color: #fff2cc;">background: #f00;}</span><br />
<span style="background-color: #fff2cc;"><br /></span>
<span style="background-color: #fff2cc;">.contact-form-name, </span><br />
<span style="background-color: #fff2cc;">.contact-form-email{</span><br />
<span style="background-color: #fff2cc;">width: 250px;</span><br />
<span style="background-color: #fff2cc;">max-width: 250px;</span><br />
<span style="background-color: #fff2cc;">border-color: #333333;</span><br />
<span style="background-color: #fff2cc;">color: #000000Y; </span><br />
<span style="background-color: #fff2cc;">} </span><br />
<br />
<span style="background-color: #fff2cc;">.contact-form-email-message{</span><br />
<span style="background-color: #fff2cc;">width: 100%;</span><br />
<span style="background-color: #fff2cc;">max-width: 100%;</span><br />
<span style="background-color: #fff2cc;">border-color: #333333;</span><br />
<span style="background-color: #fff2cc;">color: #000000Y;</span><br />
<span style="background-color: #fff2cc;">}</span><br />
<span style="background-color: #fff2cc;"><br /></span>
<span style="background-color: #fff2cc;">.contact-form-button-submit {</span><br />
<span style="background-color: #fff2cc;">margin-bottom: 10px;</span><br />
<span style="background-color: #fff2cc;">}</span><br />
<span style="background-color: #fff2cc;"><br /></span>
<span style="background-color: #fff2cc;">.contact-form-button-submit { </span><br />
<span style="background-color: #fff2cc;">width: 100px; </span><br />
<span style="background-color: #fff2cc;">height:30px; </span><br />
<span style="background-color: #fff2cc;">font-size: 18px; </span><br />
<span style="background-color: #fff2cc;">border-color: <span style="color: blue;"><b>#3232CD</b></span>; </span><br />
<span style="background-color: #fff2cc;">background: <b><span style="color: magenta;">#007FFF</span></b>; </span><br />
<span style="background-color: #fff2cc;">color: <b><span style="color: #274e13;">#fff</span></b>; </span><br />
<span style="background-color: #fff2cc;">}</span><br />
<span style="background-color: #fff2cc;">.contact-form-button-submit:hover { </span><br />
<span style="background-color: #fff2cc;">border-color: <b><span style="color: lime;">#23238E</span></b>; </span><br />
<span style="background-color: #fff2cc;">background: <b><span style="color: orange;">#3366FF</span></b>; </span><br />
<span style="background-color: #fff2cc;">color: <b><span style="color: red;">#fff</span></b>; </span><br />
<span style="background-color: #fff2cc;">}</span><br />
<div>
<br /></div>
<br />
Pronto! Após acrescentar o CSS no HTML, clique em visualizar para certificar que não vai aparece nem uma mensagem de erro, em seguida <b>Salve o Modelo</b>. Agora<b> acesse sua página de contato</b> e aproveite o novo formulário.<br />
<br />
<br />
<br />
<br />
<b><span style="font-size: large;">Editando as Cores do Formulário</span></b><br />
<br />
Caso você deseja alterar as cores do formulário, é fácil, mais precisa de atenção pra realizar a alteração no código. Então, vamos lá!<br />
<br />
<b><span style="color: red;">Osb</span></b>.: Vamos fazer as alterações no segundo código.<br />
<br />
<ul>
<li><b>Plano de Fundo</b>: Para alterar, basta você substituir a seguinte parte destacada em cor "<b>Cinza</b>": <b><span style="color: #444444;"><span style="background-color: #fff2cc;">#E6E8FA</span> </span></b>por uma outra cor desejada. (<a href="http://variasdicasparablogs.blogspot.com.br/2012/10/gerador-de-cores-css.html" target="_blank">Escolha uma Cor</a>)</li>
<li><b>Bordas</b>: Para mudar a cor das Bordas substitua a parte destacada em vermelho: <b><span style="background-color: #fff2cc; color: red;">#C0C0C0</span></b>. (<a href="http://variasdicasparablogs.blogspot.com.br/2012/10/gerador-de-cores-css.html" target="_blank">Escolha uma Cor</a>)</li>
</ul>
<div style="text-align: center;">
<b><u>Cores do Botão:</u></b></div>
<div style="text-align: left;">
<ul>
<li><b>Cor da Borda do Botão</b>: Substitua a parte destacada em cor Azul: <b style="background-color: #fff2cc; color: blue;">#3232CD</b> .(<a href="http://variasdicasparablogs.blogspot.com.br/2012/10/gerador-de-cores-css.html" target="_blank">Escolha uma Cor</a>)</li>
<li><b>Cor de Fundo do Botão</b>: Substitua a parte destacada em cor de Rosa: <b><span style="background-color: #fff2cc; color: magenta;">#007FFF</span></b> .(<a href="http://variasdicasparablogs.blogspot.com.br/2012/10/gerador-de-cores-css.html" target="_blank">Escolha uma Cor</a>)</li>
<li><b>Cor da Letra</b>: altere a parte destacada em cor Verde: <b><span style="background-color: #fff2cc; color: #274e13;">#fff </span></b>.(<a href="http://variasdicasparablogs.blogspot.com.br/2012/10/gerador-de-cores-css.html" target="_blank">Escolha uma Cor</a>)</li>
<li><b>Cor de fundo 2 do botão</b>: Quando passamos o mouse sobre o botão, ele muda de cor, para mudar essa cor altere a parte destacada em cor "Laranja": <b><span style="color: orange;">#23238E</span></b>. (<a href="http://variasdicasparablogs.blogspot.com.br/2012/10/gerador-de-cores-css.html" target="_blank">Escolha uma Cor</a>)</li>
<li><b>Cor da Borda 2 do Botão</b>: Altere a parte destacada em cor "Verde limão" : <b><span style="color: lime;">#23238E</span></b>.</li>
<li><b>Cor da Letra 2 do Botão</b>: Altere a parte destacada em vermelha: <b><span style="color: red;">#fff</span></b>.</li>
</ul>
<div>
Agora, é só salvar as alterações.</div>
<div>
<br /></div>
<div>
Bom pessoal! essa é a lógica para poder alterar as cores do formulário, é fácil, não tem complicação, mas espero que os exemplos mostrados logo acima tenham sidas úteis.</div>
<div>
<br /></div>
<div>
Espero que tenham gostado da dica, deixem comentário do que acharam. Ajudem nosso Blog Seguindo e curtindo nossa Fan Page no facebook. Obrigado </div>
</div>
Unknownnoreply@blogger.com16tag:blogger.com,1999:blog-5768958913026656905.post-22137111443245410792013-11-01T17:06:00.002-07:002013-11-02T19:37:32.613-07:00Rodapé do Blog Personalizado com créditos, contador de visitas e redes sociais<br />
Olá caro leitor!<br />
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwIxG6KUK4os_3G0bPowh84bd_4gt3UNANjtXYDIN62h6VlB8l4ppedffrTvFS8giD7e3h2oa260XAMdqYw0SHlMxb2F_zZCcRrgYA2aN9XXYr20k6n_jEW7DMMhw-KANAgT4KPmH6BA/s1600/Roda-p%C3%A9+do+blog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: right;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwIxG6KUK4os_3G0bPowh84bd_4gt3UNANjtXYDIN62h6VlB8l4ppedffrTvFS8giD7e3h2oa260XAMdqYw0SHlMxb2F_zZCcRrgYA2aN9XXYr20k6n_jEW7DMMhw-KANAgT4KPmH6BA/s320/Roda-p%C3%A9+do+blog.png" width="320" /></a><br />
<div style="text-align: right;">
<div style="text-align: left;">
Vamos aí com mais uma nova dica de personalização, desta vez vou ensinar como criar o seu próprio roda-pé personalizado com créditos, botões de redes sociais (Facebook, Twitter, Google+, You Tube) e com um contador de usuários online. É bem fácil de colocá-lo no blog e não tem complicação, o legal é, que vai dar pra tirar aquela aparência neutra sem criatividade da parte inferior do seu blog deixando-a mais aparente e com cores exclusiva da sua preferência...</div>
<a name='more'></a></div>
</div>
<div>
<br /></div>
<div>
Veja uma demonstração do Rodapé personalizado no meu Blog de teste (<a href="http://blogdetestes-0001.blogspot.com.br/" target="_blank">DEMONSTRAÇÃO</a>)</div>
<div>
<br /></div>
<div>
Bom galera! Essa dica é bastante útil para aqueles que utilizam Template padrão modelo simples do blogger, pois os mesmos não possuem Rodapé personalizado, e é por isso que vou ensinar a criar o seu próprio rodapé.</div>
<div>
<br /></div>
<h2>
Como criar seu próprio rodapé personalizado </h2>
<div>
Primeiramente acesse o Painel de edição do seu Blog.</div>
<div>
Vá em <b><span style="color: red;">Modelos </span></b>>> <b><span style="color: red;">Editar HTML</span></b>.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBWg4Avv4NIOdxOAPDIljo8T3VWCOv3aGJ4FuEh1nKtCIv9_hs7YlJykLRbDeNZ_zB3bXAXDUHSDI4bmS4aeVGNPTQ9rhPkrhV_UfABLh0gOHEdJY4a0zqlOZCROrco8iU5x1nV3hd6w/s1600/Editar+Modelo+do+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBWg4Avv4NIOdxOAPDIljo8T3VWCOv3aGJ4FuEh1nKtCIv9_hs7YlJykLRbDeNZ_zB3bXAXDUHSDI4bmS4aeVGNPTQ9rhPkrhV_UfABLh0gOHEdJY4a0zqlOZCROrco8iU5x1nV3hd6w/s320/Editar+Modelo+do+Blog.png" title="Clique na Imagem para Visualizar melhor" width="320" /></a></div>
<div>
<br /></div>
<div>
<b>2º Passo:</b> Estando no HTML do seu Blog, <b>clique</b> nessa seguinte linha: "<span style="background-color: orange; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><b:skin>...</b:skin></span>" que fica logo no começo do código para poder <b>expandi-la</b>, veja o exemplo na imagem logo abaixo:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6zseZv2UxCS7bofqeMzKrdfdeSxzBq3HQOq5INZ-G_6zic7pzA-6R1VY5rMXkzIF6vLU9pR90MwfN3KisY8d6D8yIbANT6K3sFUCGGZD4ghRuGDCU8q13kqzt6gFWBKEheqYuGiN9Pe0/s1600/Expandir+HTML.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6zseZv2UxCS7bofqeMzKrdfdeSxzBq3HQOq5INZ-G_6zic7pzA-6R1VY5rMXkzIF6vLU9pR90MwfN3KisY8d6D8yIbANT6K3sFUCGGZD4ghRuGDCU8q13kqzt6gFWBKEheqYuGiN9Pe0/s320/Expandir+HTML.png" title="Clique na Imagem para Visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>3º Passo:</b> Depois de Expandir o código, <b>clique</b> em qualquer parte do código e logo em seguida pressione as <b>teclas de atalho:</b> (<b><span style="color: red;">Ctrl</span></b>+<b><span style="color: red;">F</span></b>) no seu teclado para pesquisar e encontrar essa seguinte Tag: </div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: orange; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">]]></b:skin></span></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li>Após encontrar a Tag "<span style="background-color: orange; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">]]></b:skin></span>", acima dela você vai <b>acrescente</b> (<b>Colar</b>) esse Código CSS:</li>
</ul>
<div>
<div>
<span style="background-color: #fff2cc;">/*----- Rodape do Blog-----*/</span></div>
<div>
<span style="background-color: #fff2cc;"><br /></span></div>
<div>
<span style="background-color: #fff2cc;">#credit{width: <b><span style="color: blue;">960</span></b>px;}<span style="color: red;"><b> /*--- Largura do rodapé ---*/</b></span></span></div>
<div>
<span style="background-color: #fff2cc;">#credit{background-color: <b><span style="color: magenta;">#1C1C1C</span></b>; <b><span style="color: red;">/*--- Cor de Fundo ---*/</span></b></span></div>
<div>
<span style="background-color: #fff2cc;">border-top:1px solid #0E0E0E; color: <b>#FFFFFF</b>;<b><span style="color: red;"> /*--- cor da letra ---*/</span></b></span></div>
<div>
<span style="background-color: #fff2cc;">overflow:hidden;margin:0 auto;clear:both;padding:10px 0;line-height:20px;}</span></div>
<div>
<span style="background-color: #fff2cc;">#credit .left{float:left;text-align:left;margin-left:20px}</span></div>
<div>
<span style="background-color: #fff2cc;">#credit .right{float:right;text-align:right;margin-right:20px;}</span></div>
<div>
<span style="background-color: #fff2cc;">#credit a{color: <b><span style="color: #351c75;">#1E90FF</span></b>;text-decoration:none;} <b><span style="color: red;">/*--- Cor do Link ---*/</span></b></span></div>
<div>
<span style="background-color: #fff2cc;">#credit a:hover{color: <b><span style="color: #38761d;">#fc0</span></b> ;text-decoration:none} <b><span style="color: red;">/*--- Cor do segundo link ---*/</span></b></span></div>
<div>
<span style="background-color: #fff2cc;"><br /></span></div>
<div>
<span style="background-color: #fff2cc;">.social-profiles-widget img{margin:0px 4px 0 0}</span></div>
<div>
<span style="background-color: #fff2cc;">.social-profiles-widget img:hover{opacity:0.8}</span></div>
<div>
<span style="background-color: #fff2cc;">#top-social-profiles{margin-top:5px; height:32px;text-align:right}</span></div>
<div>
<span style="background-color: #fff2cc;">#top-social-profiles img{margin:0 0 0 6px !important}</span></div>
<div>
<span style="background-color: #fff2cc;">#top-social-profiles img:hover{opacity:0.8}</span></div>
<div>
<span style="background-color: #fff2cc;">#top-social-profiles .widget-container{background:none;padding:10;border:0}</span></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<b>4º Passo: </b>Já inserimos o código CSS, agora, vamos colocar o Script do rodapé, para isso você tem que localizar essa outra Tag: "<span style="background-color: orange;"></body></span>" e quando encontrá-la <b>acrescente </b>esse segundo código <b>logo Acima </b>da mesma:</div>
<div>
<br /></div>
<div>
<div>
<span style="background-color: #cfe2f3;"><div class='clear'/></span></div>
<div>
<span style="background-color: #cfe2f3;"> <div id='credit'></span></div>
<div>
<span style="background-color: #cfe2f3;"> <div class='left'> </span></div>
<div>
<span style="background-color: #cfe2f3;"> Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script></span></div>
<div>
<span style="background-color: #cfe2f3;"> <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'></span></div>
<div>
<span style="background-color: #cfe2f3;"> <data:blog.title/></span></div>
<div>
<span style="background-color: #cfe2f3;"> </a> |</span></div>
<div>
<span style="background-color: #cfe2f3;"><script id="_wauofa">var _wau = _wau || []; _wau.push(["small", "pu4co6cgz64f", "ofa"]);</span></div>
<div>
<span style="background-color: #cfe2f3;">(function() {var s=document.createElement("script"); s.async=true;</span></div>
<div>
<span style="background-color: #cfe2f3;">s.src="http://widgets.amung.us/small.js";</span></div>
<div>
<span style="background-color: #cfe2f3;">document.getElementsByTagName("head")[0].appendChild(s);</span></div>
<div>
<span style="background-color: #cfe2f3;">})();</script></span></div>
<div>
<span style="background-color: #cfe2f3;"><br /></span></div>
<div>
<span style="background-color: #cfe2f3;"><br/></span></div>
<div>
<span style="background-color: #cfe2f3;"> Design by <a href='<b><span style="color: blue;">#1</span></b>' target='_blank'><b>SEU NOME</b></a> | Tecnologia do <a href='http://blogger.com'>Blogger</a> </span></div>
<div>
<span style="background-color: #cfe2f3;"><br /></span></div>
<div>
<span style="background-color: #cfe2f3;"> </div></span></div>
<div>
<span style="background-color: #cfe2f3;"> <div class='right'></span></div>
<div>
<span style="background-color: #cfe2f3;"> <div id='top-social-profiles'></span></div>
<div>
<span style="background-color: #cfe2f3;"> <ul class='widget-container'></span></div>
<div>
<span style="background-color: #cfe2f3;"> <div id='social-profiles-widget'></span></div>
<div>
<span style="background-color: #cfe2f3;"> <a href='<b><span style="color: blue;">#2</span></b>' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-ad8_6JTaXXIz4pZIOHo3Df8cRadFQTDDdrbzFItvGuTu9vb1kLHH_Crvwksqa1OruDOJBo51uglEXVA9BQgf97tzx2kVf5zAkfq2vv82kBT-DOfvFNcRq1gN02-qsNL3N4qKHmzjdet/s1600/twitter.png' title='<b>Twitter</b>'/></a></span></div>
<div>
<span style="background-color: #cfe2f3;"> <a href='<b><span style="color: blue;">#3</span></b>' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKuvwyeq7Dqi6bLwLKe0c8DYKutn99M12wmA_tzrqJ-rFoFOL6K05nM2DwqaIMhXz6M3wc-jWdJWHvZEmxwChhZOrGz0gAm1WJsyApCbdUDo_vJupdG0NN-Fw8Jar_0Fv_b04OhKQXt8vO/s1600/facebook.png' title='<b>Facebook</b>'/></a></span></div>
<div>
<span style="background-color: #cfe2f3;"> <a href='<b><span style="color: blue;">#4</span></b>' target='_blank'><img alt='Google +' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKj5xBuhCNmEC9fI2C0C8zExFGjeAmC1XIFF3alZqM2udG37GBGIUvZBAZjJZmVuhlEOn0vy0cftlCrsQvFstYIoZHxMxyj7IiGLW0wdSXUHGZa46tDVJ6kgkD7wutGuRe1psB_UCz7Jex/s1600/googleplus.png' title='<b>Google +</b>'/></a></span></div>
<div>
<span style="background-color: #cfe2f3;"> <a href='<b><span style="color: blue;">#5</span></b>' target='_blank'><img alt='YouTube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOw8ptFUjTPP5AUebtzohpfWLZWcy9JynSoO7FX3jz1zMqYnQAlO6bQn8s4e_plCfdDxrTHFGJDOaaJslZSBS6SYn6HinaLouB1YkEwKC6xVDQSunKn2KMEBjjLr1KiPnt8bZtYERhRiS/s1600/youtube.png' title='<b>YouTube</b>'/></a></span></div>
<div>
<span style="background-color: #cfe2f3;"> </div></span></div>
<div>
<span style="background-color: #cfe2f3;"> </ul></span></div>
<div>
<span style="background-color: #cfe2f3;"> </div></span></div>
<div>
<span style="background-color: #cfe2f3;"> </div></span></div>
<div>
<span style="background-color: #cfe2f3;"> </div></span></div>
<div>
</div>
<div>
</div>
</div>
<div>
<br /></div>
<div>
Prontinho pessoal, após inserir o segundo código o seu novo rodapé já estará presente no seu blog, só clicar em <b>Visualizar Modelo</b> e vê como ficou.</div>
<div>
<br /></div>
<div>
<b><span style="color: red;">Observe:</span></b></div>
<div>
O rodapé poderá não ficar de acordo com a Largura do seu Template, isso ocorre pois cada template tem uma Largura diferente de outros, então, será preciso você <b>ajustar a largura </b>do rodapé para ficar igual ao do seu template, para fazer isso basta seguir as instruções logo abaixo:</div>
<div>
<br /></div>
<h3>
Editando o Rodapé do Blog</h3>
<div>
Bom! Você percebeu que eu deixei o primeiro código CSS e o segundo código Script destacado em cores diferentes, isso é para facilitar a explicação e sua compreensão, as partes destacadas é o necessário que você pode editar, e as demais não será preciso alterar, então vamos lá:</div>
<div>
<br /></div>
<div>
Vou começar com o <b>primeiro código</b> (<b>CSS)</b></div>
<div>
<ul>
<li>Para alterar a "<b>Largura</b> <b>do Rodapé</b>", basta alterar o seguinte valor destacado em <b>cor</b> <b>Azul</b> "<span style="background-color: #fff2cc;"><b><span style="color: blue;">960</span></b>px;</span>" para mais ou menos de 960px, que vai de acordo com o tamanho do seu template.</li>
<li>Para alterar a cor do "<b>Fundo</b>", basta alterar a parte destacada em <b>cor de Rosa </b>"<b><span style="color: magenta;">#1C1C1C</span></b>" por uma outra <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">cor em código HTML</a>.</li>
<li>Alterar a cor da "<b>Letra</b>", só trocar a parte que está destacado em cor <b>Preto</b> em Negrito "<b>#FFFFFF</b>" por uma outra <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">cor em código HTML</a>.</li>
<li>Mudar a <b>cor do link</b>, só trocar o código que está destacado em cor Roxa "<b><span style="color: #351c75;">#1E90FF</span></b>", e para mudar a cor do <b>segundo link,</b> aquele que aparece quando passamos o cursor do mouse, basta trocar a parte que esta destacado em cor Verde "<b><span style="color: #38761d;">#fc0</span></b>" por uma outra cor.</li>
</ul>
<div>
Alterando o<b> segundo código (Script)</b></div>
<div>
<ul>
<li>Como você vê, a parte que está destacada em cor Preto Negrito "<b style="background-color: #cfe2f3;">SEU NOME</b>" é para o você colocar o seu nome.</li>
<li>Essa parte do código "<b><span style="color: blue;">#1</span></b>" é para você <b>colocar uma URL</b>, pode ser o endereço de uma página do seu blog que fala sobre você ou o endereço do seu perfil do Blog, mas se preferir pode deixar sem nem um endereço, basta alterar o valor "<b><span style="color: blue;">#1</span></b>" para "<b><span style="color: blue;">#</span></b>".</li>
<li>Nessa parte "<b><span style="color: blue;">#2</span></b>" você vai colocar o endereço do seu perfil no <b>Twitter.</b></li>
<li><b><span style="color: blue;">#3</span></b>: Coloque o endereço da sua Página no Facebook.</li>
<li><b><span style="color: blue;">#4</span></b>: Coloque o endereço do seu perfil do Google+.</li>
<li><b><span style="color: blue;">#5</span></b>: Coloque o endereço do seu Canal no You Tube, se não tiver altere esta parte para "<b><span style="color: blue;">#</span></b>".</li>
</ul>
</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Então é só isso pessoal, espero que gostem. Obrigado<br />
_Deixem comentário.<br />
<br />
<br />
<br />
Recomendo este poste:<br />
<h3 class="post-title entry-title" itemprop="name" style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; font-weight: normal; margin: 0.75em 0px 0px; position: relative;">
<a href="http://variasdicasparablogs.blogspot.com.br/2012/10/como-excluir-o-attribution-do-roda-pe.html" target="_blank">Como excluir o Attribution do rodapé do Blog</a></h3>
</div>
<br />
<div>
<br /></div>
Unknownnoreply@blogger.com17tag:blogger.com,1999:blog-5768958913026656905.post-84807682154480306772013-10-28T17:08:00.001-07:002013-10-28T17:18:20.922-07:00Marcadores do Blog com efeito Hover<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1P5z_TcyXcZs_SBeON-A1-iSq62ZlciDfL84-DHLmragAHlGz2citz61t55h_xWHLFFKT8HTAPZ4FdYjOHFJAwqIU6y2SIj9ml6b0ejTNPP0CSQiYCrsJ_R4fMKBk1fOpVau4c-KUDI/s1600/Marcadores+do+blog+com+efeito+Hover.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1P5z_TcyXcZs_SBeON-A1-iSq62ZlciDfL84-DHLmragAHlGz2citz61t55h_xWHLFFKT8HTAPZ4FdYjOHFJAwqIU6y2SIj9ml6b0ejTNPP0CSQiYCrsJ_R4fMKBk1fOpVau4c-KUDI/s320/Marcadores+do+blog+com+efeito+Hover.png" width="320" /></a>Hoje vou mostrar como colocar o efeito "Hover" nos marcadores do blog. Caso você não conheça esse efeito, saiba que ele é <b>executado quando passamos o "Cursor" do mouse </b>sobre uma determinada área de um link ou botão e <b>o fundo muda de cor</b>...<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a>O efeito Hover nos marcadores é bastante simples e fácil de aplicá-lo ao seu blog, então, veja uma breve demonstração dos Marcadores: <b>(<a href="http://blogdetestes-0001.blogspot.com.br/" target="_blank">DEMONSTRAÇÃO</a>)</b><br />
<b><br /></b>
<h2>
Colocando efeito Hover nos marcadores do Blog</h2>
Como eu tinha falado, o efeito é bastante simples, nele é utilizado um pequeno código CSS.<br />
<br />
<b>Primeiro:</b> Acesse o painel de edição do seu blog.<br />
Vá em <b><span style="color: red;">Modelos</span></b> >> <b><span style="color: red;">Editar HTML</span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBWg4Avv4NIOdxOAPDIljo8T3VWCOv3aGJ4FuEh1nKtCIv9_hs7YlJykLRbDeNZ_zB3bXAXDUHSDI4bmS4aeVGNPTQ9rhPkrhV_UfABLh0gOHEdJY4a0zqlOZCROrco8iU5x1nV3hd6w/s1600/Editar+Modelo+do+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBWg4Avv4NIOdxOAPDIljo8T3VWCOv3aGJ4FuEh1nKtCIv9_hs7YlJykLRbDeNZ_zB3bXAXDUHSDI4bmS4aeVGNPTQ9rhPkrhV_UfABLh0gOHEdJY4a0zqlOZCROrco8iU5x1nV3hd6w/s320/Editar+Modelo+do+Blog.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Segundo:</b> Após estar no Editor de HTML do seu blog, <b>Expanda</b> a seguinte Linha "<span style="background-color: orange; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><b:skin>...</b:skin></span><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">"</span> que fica logo no começo do código, veja o exemplo abaixo:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBilhWUzZiqAn8l4cAUwaCra7hcAocxgDWUmjvcu-fqEj3Oi8KdsqD1mtzzJdX2zMp8dwB_vaTzQuadYzRP8udJzF1dt_etDFh1qo3DJ-u1ZFU1_mbqDbYsVqkFoVuQ_PtScc6rYlLrOY/s1600/Expandir.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBilhWUzZiqAn8l4cAUwaCra7hcAocxgDWUmjvcu-fqEj3Oi8KdsqD1mtzzJdX2zMp8dwB_vaTzQuadYzRP8udJzF1dt_etDFh1qo3DJ-u1ZFU1_mbqDbYsVqkFoVuQ_PtScc6rYlLrOY/s320/Expandir.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Terceiro:</b> Agora, encontre essa seguinte Tag "<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">"</span><span style="background-color: orange; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">]]></b:skin></span>" na parte do código onde o mesmo expandiu, e para ajudá-lo a localizar melhor, utilize as <b>Teclas de Atalho</b> "<b><span style="color: red;">Ctrl</span></b>+<b><span style="color: red;">F</span></b>" e pesquise. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Quarto:</b> Depois de encontrar a Tag, <b>acrescente</b> este seguinte código CSS<b> logo acima</b> dela:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
.<span style="background-color: #fff2cc;">sidebar .Label li {</span><br />
<span style="background-color: #fff2cc;">padding:3px 5px;</span><br />
<span style="background-color: #fff2cc;">margin:0 3px 3px 0;</span><br />
<span style="background-color: #fff2cc;">float:left;</span><br />
<span style="background-color: #fff2cc;">background-color: <b><span style="color: blue;">#009ACD</span></b>; <span style="color: red;">/*---cor de primeiro fundo---*/</span></span><br />
<span style="background-color: #fff2cc;">-moz-border-radius:1px;</span><br />
<span style="background-color: #fff2cc;">-webkit-border-radius:1px;</span><br />
<span style="background-color: #fff2cc;">border-radius:1px;</span><br />
<span style="background-color: #fff2cc;">color:#fff;</span><br />
<span style="background-color: #fff2cc;">}</span><br />
<span style="background-color: #fff2cc;">.sidebar .Label li a, .sidebar .label li a {</span><br />
<span style="background-color: #fff2cc;">color: <b><span style="color: #274e13;">#FFFFFF</span></b>; <span style="color: red;">/*---cor da letra---*/</span></span><br />
<span style="background-color: #fff2cc;">text-decoration:none;</span><br />
<span style="background-color: #fff2cc;">}</span><br />
<span style="background-color: #fff2cc;">.sidebar .Label li:hover {</span><br />
<span style="background-color: #fff2cc;">background-color: <b><span style="color: magenta;">#363636</span></b>; <span style="color: red;">/*---cor do segundo fundo---*/</span></span><br />
<span style="background-color: #fff2cc;">}</span><br />
<span style="background-color: #fff2cc;">#tabdiv li, .sidebar li {</span><br />
<span style="background-color: #fff2cc;">list-style-type:none;</span><br />
<span style="background-color: #fff2cc;">}</span><br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Prontinho pessoal, agora, clique em <b>Visualizar </b>e veja se tudo ocorreu bem, se estiver tudo certo clique em <b>Salvar</b>.</div>
<br />
<b><span style="font-size: large;">Alterando o código</span></b><br />
Esse código é bem simples de fácil intendimento, veja que eu o destaquei em diferentes cores (<b><span style="color: blue;">#009ACD, </span></b><b><span style="color: #274e13;">#FFFFFF, </span></b><b><span style="color: magenta;">#363636</span></b><b><span style="color: #274e13;"> </span></b>), ou seja, é nesta parte que você poderá alterá-las, e juntamente nestas partes destacada eu também deixei um comentário pra entender melhor.<br />
<blockquote class="tr_bq">
Para alterar a cor do primeiro plano de fundo, basta alterar a seguinte parte destacada em cor Azul "<b><span style="color: blue;">#009ACD</span></b>" por um outro <a href="http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm" target="_blank">código de cor</a>.</blockquote>
<blockquote class="tr_bq">
A parte destacada em cor Verde "<span style="background-color: #fff2cc;"> </span><b><span style="color: #274e13;">#FFFFFF</span></b>" é a cor da letra.</blockquote>
<blockquote class="tr_bq">
Em cor de Rosa "<b><span style="color: magenta;">#363636</span></b>" é a cor do segundo plano de fundo, ou seja, o fundo que é exibido quando passamos o mouse sobre o marcador.</blockquote>
Prontinho, espero terem gostadoUnknownnoreply@blogger.com4tag:blogger.com,1999:blog-5768958913026656905.post-59384499995056772312013-10-24T18:44:00.002-07:002013-10-24T18:45:50.357-07:00Veja quais problemas podem acontecer ao duplicar textos de outros Blogs<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-gDmNW13RslWQRy8TOQLk01QvSjqfdto-d8CVLdYr2spebljRqfTfDZlNcmRyZ58-DeisAFpLp7Apf-qWbRNykR9l-cfaFIN_wIWNX3Q_ne6MhtlpXZSmt4ZwtzOKisGx_tEjFPvBzzg/s1600/problemas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-gDmNW13RslWQRy8TOQLk01QvSjqfdto-d8CVLdYr2spebljRqfTfDZlNcmRyZ58-DeisAFpLp7Apf-qWbRNykR9l-cfaFIN_wIWNX3Q_ne6MhtlpXZSmt4ZwtzOKisGx_tEjFPvBzzg/s320/problemas.png" width="320" /></a>Vamos ver quais problemas seu blog pode sofrer com postagens copiadas (duplicadas) de outros site/blogs, mesmo colocando os créditos de direitos autorais...<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a>Bom! No artigo anterior que publiquei, eu falo sobre <a href="http://variasdicasparablogs.blogspot.com.br/2012/11/sou-contra-o-plagio.html" target="_blank">o que é plágio?</a> e nesse mesmo tutorial falo que é muito importante o usuário da plataforma Blogger informar no final do post os créditos de onde foi retirada a fonte daquele conteúdo, caso o conteúdo não tenha sido criado por você. Pois, sabemos que é, muito comum essa prática de copiar trabalho dos outros.<br />
<br />
Muitos blogueiros buscam a oportunidade de publicar artigos de outros autores, utilizando os direitos autorais de forma autorizada ou não, pensando que pode estar favorecendo o trabalho, mais sendo que, mesmo você sendo autorizado a publicar o conteúdo e estiver utilizando os créditos, você pode estar trazendo problemas para o seu blog e até para o próprio autor.<br />
Então, saiba que isso trás grandes problemas para nosso blog e para a Internet de uma certa forma.<br />
<br />
<h2>
Quais problemas podemos sofrer ao duplicar textos de outros Blogs?</h2>
<br />
Vamos começar com a seguinte pergunta feita pela <cite class="user" style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; line-height: 16px;"><a href="http://www.blogger.com/profile/06016187037696417175" rel="nofollow" style="color: #888888; text-decoration: none;">Kariny Rangoussis</a></cite><span class="icon user" style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px; font-weight: bold; line-height: 16px;"></span><span class="datetime secondary-text" style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px; line-height: 16px; margin-left: 6px;"><a href="http://variasdicasparablogs.blogspot.com/2012/11/sou-contra-o-plagio.html?showComment=1367869676943#c5244373371345405167" rel="nofollow" style="color: #888888; text-decoration: none;">6 de maio de 2013 12:47</a></span> :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtc7mKqtUPVPz6tjjWtRwTJNJalOyXv_48HtyfTDJcx0i8lqYCYEiRAxSiPfF4aAvQB9HoLxsLOvSfYt83fNrdCU8S93jMvW6FucmxIXpWaZvRsJNi38Lzf0iZUCkqKvw2EGLcq85LAI/s1600/copiar+conte%C3%BAdo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtc7mKqtUPVPz6tjjWtRwTJNJalOyXv_48HtyfTDJcx0i8lqYCYEiRAxSiPfF4aAvQB9HoLxsLOvSfYt83fNrdCU8S93jMvW6FucmxIXpWaZvRsJNi38Lzf0iZUCkqKvw2EGLcq85LAI/s1600/copiar+conte%C3%BAdo.png" /></a></div>
<b>Resposta</b>:<br />
Colocar a fonte de onde foi retirado aquele texto não tem nem um problema, porém, há uma certa forma que seu blog pode ter problemas.<br />
<br />
<b>Mas porquê?</b><br />
<span style="color: red;">Exemplo:</span><br />
Vamos supor que, um certo usuário busque na internet <b>o que é</b> <b>PLÁGIO?</b>, e nos resultados da pesquisa ele acessa o meu Blog (Varias dicas para blogs) e lê todo o artigo que escrevi, mas logo em seguida, o mesmo usuário<b> faz uma segunda pesquisa</b> para saber mais conceitos sobre <a href="http://variasdicasparablogs.blogspot.com.br/2012/11/sou-contra-o-plagio.html" target="_blank">o que é PLÁGIO</a>?, e na segunda pesquisa realizada, ele acessa um outro blog que pode ser o seu, que no qual,<b> contem o mesmo texto</b> que <b>ele já havia lido</b> na pesquisa anterior, e com isso você perde esse usuário, porque, ele não necessita de ler o mesmo texto novamente.<br />
<br />
Afinal, você percebeu que no exemplo acima, o blog que tinha o texto reproduzido de outro <b>não obteve sucesso com o texto</b>, pois,<b> o usuário ja tinha lido</b> e não tinha pra que o mesmo lê-lo novamente. Então pessoal, esse é o problema que ocorre muito na internet e que já aconteceu comigo.<br />
<br />
E se você copia artigo de outros, você pode correr o risco de ser denunciado por direitos autorais, ou conter um texto mal elaborado, perder alguns benefícios (como ganhar dinheiro com o blog) pois o seu blog não tem conteúdo original que é muito importante, e etc...<br />
<br />
Agora, veja bem, se muitos blogueiros optassem em reproduzir textos de outros autores, aconteceria a mesma coisa mostrada no exemplo acima, e isso prejudicaria a pesquisa na internet, pois nós usuários não conseguiríamos encontrar assuntos e de "diferentes" conceitos, e sim, opiniões iguais.<br />
<br />
O certo é você criar a sua própria ideia, e não usufruir de ideias de outros autores, ao invés de copiar você poder falar sobre a mesma coisa que outros escrevem, e até fazer melhor, assim você não estará copiando nem cometendo plágio. É desta forma que eu penso e que pretendo orientá-los.<br />
<br />
Então, é só isso pessoal, espero terem compreendido o meu exemplo, gostaria que vocês comentassem nesse post o que vocês sabem ou o que não intenderam sobre este assunto. Obrigado!<br />
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-5768958913026656905.post-74698322105342122422013-09-14T17:58:00.000-07:002013-09-14T17:58:24.071-07:00Player de Web Radio fixo no topo do BlogOlá pessoal! Neste tutorial irei ensinar como colocar o player de web rádio fixo no topo do Blog, simples e prático.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwhGrKBM_VuQzARHNqnTpwYB8XPK-cnIs0hNy22oEv1V4PHfjcsdQNy_H8bpqv4GVaOA33ri_gE0MEnoaWM94aouCd8_R77h_0ej7Dzsp9JrRtPB6PKX2_bVlRbjUS8VG0FfFIuFQKpYE/s1600/Player.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwhGrKBM_VuQzARHNqnTpwYB8XPK-cnIs0hNy22oEv1V4PHfjcsdQNy_H8bpqv4GVaOA33ri_gE0MEnoaWM94aouCd8_R77h_0ej7Dzsp9JrRtPB6PKX2_bVlRbjUS8VG0FfFIuFQKpYE/s320/Player.png" width="320" /></a></div>
<br />
<a name='more'></a><br />
Creio que você já deve ter visto em alguns Blogs ou sites um player fixo posicionado no topo, conforme você rola a barra de rolagem para cima ou para baixo, o player desliza acompanhado a página sem sair de sua posição, então, é deste mesmo modo que vamos aprender a fazer.<br />
> <a href="http://blogdetestes-0001.blogspot.com.br/p/blog-page.html" target="_blank" title=" Clique Aqui para vê uma Demonstração">Veja uma Demonstração</a><br />
<br />
<h3>
<span style="font-size: small;">Veja como colocar o player no topo do blog</span></h3>
<b>1º Passo</b>: Abra o Painel de Edição do seu Blog:<br />
Vá em >> <b>Modelo</b> >> <b>Editar HTML</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-sli4Kq8kD1aXoN0mjdiMgAx1VRt-KnyVeeTW11YFf-btEKF-0_MJwAetaq0E61lqS9tuU4uoucjIyNkxvex8vfUPBW6uTPTw7RiwfJzsh-gpmB9vzqIuwLojInkj9DfndE23fROFrXQ/s1600/Editar+Modelo+do+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-sli4Kq8kD1aXoN0mjdiMgAx1VRt-KnyVeeTW11YFf-btEKF-0_MJwAetaq0E61lqS9tuU4uoucjIyNkxvex8vfUPBW6uTPTw7RiwfJzsh-gpmB9vzqIuwLojInkj9DfndE23fROFrXQ/s200/Editar+Modelo+do+Blog.png" title="Clique na Imagem para visualizar" width="200" /></a></div>
<b> </b> <br />
<b><br /></b>
<b>2º Passo</b>: Agora você vai <b>expandir</b> a seguinte linha de código "<span style="background-color: orange;"><b:skin>...</b:skin></span>" conforme mostra o exemplo na imagem logo abaixo: <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjA3WcIZ0RBgf9AE33PazBxTBCUUe429a0Nh00AYq7gxsRat4hAMo1pA9kvr3HNQPEvvMm6FZdQPQPTupXCtVz-JxNWdhCjhQM5NJ__cIYHLo9tqH0TRJxoLViEi_AKRj5jVN-YM9xQCM/s1600/Expandir+HTML.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjA3WcIZ0RBgf9AE33PazBxTBCUUe429a0Nh00AYq7gxsRat4hAMo1pA9kvr3HNQPEvvMm6FZdQPQPTupXCtVz-JxNWdhCjhQM5NJ__cIYHLo9tqH0TRJxoLViEi_AKRj5jVN-YM9xQCM/s320/Expandir+HTML.png" width="320" /></a></div>
<b>3º Passo</b>: Em seguida, procure por esta Tag: "<span style="background-color: orange;">]]></b:skin></span>", utilize as teclas de atalho (<b>Ctrl+F</b>) para localizar mais rápido. E após ter encontrado a Tag, logo <b>acima</b> dela<b> acrescente</b> este seguinte código CSS:<br />
<br />
<span style="color: red;"><b>/*Player de Radio*/<br />ul#Player-fixed { <br />position:fixed; width:100%; <br />margin:0; <br />padding:0; <br />top:0px;<br />left:0px;; <br />list-style:none; <br />z-index:9999; <br />} </b></span><br />
<br />
<b>4º Passo</b>: Depois do CSS, vamos agora, colocar o código Iframe do player.<br />
Ainda no HTML do seu blog, procure por esta segunda Tag "<span style="background-color: orange;"></body>"</span>, quando encontrá-la <b>acrescente </b>este código logo acima da mesma:<br />
<br />
<span style="background-color: white;"><ul id='Player-fixed'> <br /><span style="color: blue;"><span style="color: red;"><iframe src="</span> <b>http://link do Player da radio</b><span style="color: red;">" frameborder="0" scrolling="no" width="100%" height="40"></iframe></span> </span></ul></span><br />
<br />
<b>Agora você vai editar esse segundo código</b><br />
Vamos entender: <br />
<ul>
<li>A parte que esta destacado em cor <span style="color: blue;"><b>AZUL</b></span> você vai substituí-lo pelo endereço do player da sua web rádio, somente isso.</li>
<li>Agora, a parte que eu destaquei em cor <span style="color: red;"><b>Vermelho</b></span>, se trata do código "Iframe" que todo player tem, que em nosso caso não será preciso alterá-lo.</li>
<li>Se for preciso alterar a <b>Altura do player</b>, é só você alterar o valor da seguinte parte: "<span style="background-color: white;"><span style="color: blue;"><span style="color: red;"> height="40"</span></span></span>".</li>
<li>Em relação a <b>Largura do playe</b>r, o código está configurado para o player ficar ajustável a qual quer tipo de resolução de Tela, ou seja, ele ficará com a largura 100%.</li>
</ul>
<br />
<br />
<b> 5º Passo:</b> Agora é só você clicar em visualizar Modelo para conferir se tudo ocorreu bem, e depois, só salvar modelo.<br />
<br />
Prontinho pessoal, espero ter ajudado.<br />
Queria pedir que ajudasse nosso Blog, clicando no botão curtir no facebook ou Seguir o blog. obrigado<br />
<br />Unknownnoreply@blogger.com38tag:blogger.com,1999:blog-5768958913026656905.post-78382705978272969532013-07-18T15:21:00.002-07:002013-09-14T18:32:48.749-07:00Como colocar o Novo Formulário de Contato em uma determinada pagina do Blog<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9UmO49NvBGkhCSV_-LQl8Bnt0BF3rvUvNrunm021mybFzTBRSWbl5dAXZEUd0GrgaEdJ9YgqF3bmKeb9GDQvhMD6_FP9OiKFqEs9KlLnszFjHpNUfzqDIVnT5Ahutaewox4-hByifGnk/s1600/formulario+de+contato.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9UmO49NvBGkhCSV_-LQl8Bnt0BF3rvUvNrunm021mybFzTBRSWbl5dAXZEUd0GrgaEdJ9YgqF3bmKeb9GDQvhMD6_FP9OiKFqEs9KlLnszFjHpNUfzqDIVnT5Ahutaewox4-hByifGnk/s320/formulario+de+contato.png" width="320" /></a><br />
Olá pessoal! Hoje venho com uma ótima dica, desta vez, vamos aprender a como colocar o novo Widget Formulário de Contato do Blog para ele aparecer em uma determinada página. A vantagem de utilizar o formulário em uma específica página é, que não precisará o widget aparecer em todas as páginas, e não ocupará espaço deixando o seu blog mais organizado...<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<a name='more'></a><br />
<br />
Bom, sabemos que o formulário de contato é muito importante e não deve faltar em nosso blog, e hoje vou mostrar uma forma bastante legal de utilizar esta ferramenta, deixando a mesma para somente aparecer em uma determinada página do blog, facilitando a organização e ocupa menos espaço no blog.<br />
<br />
Veja o exemplo do formulário na página: <a href="http://blogdetestes-0001.blogspot.com.br/p/blog-page.html" target="_blank">Demostração</a><br />
<br />
<h2>
Colocando Formulário de contato no blog em uma Página</h2>
<br />
<b>1º Passo: </b>Primeiramente você tem que acessar o Layout do blog, e adicionar o Gadget "<b><span style="color: red;"><span style="background-color: white; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 25px;">Widget formulário</span><span style="background-color: white; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 25px;"> de contato</span></span></b>", para que em seguida nós possamos transferir o Gadget para uma determinada página.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75pjfUm5a6hAWFBb4e7Ru8FK9-soHHh8wJN-QSTLUvYsVlGwNdVNhVF8ApDhvHccc8VAdF788cP46a4yxOdfvsHgfhAFgAESYzhMi_-jBqmlTvoEhDOHxuBd6ArmXt2g0qrrgQkKZL_U/s1600/formul%C3%A1rio+de+contato.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75pjfUm5a6hAWFBb4e7Ru8FK9-soHHh8wJN-QSTLUvYsVlGwNdVNhVF8ApDhvHccc8VAdF788cP46a4yxOdfvsHgfhAFgAESYzhMi_-jBqmlTvoEhDOHxuBd6ArmXt2g0qrrgQkKZL_U/s400/formul%C3%A1rio+de+contato.png" width="400" /></a></div>
<br />
<ul>
<li>Se você não sabe como adicionar o Gadget "<b><span style="color: red;"><span style="background-color: white; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 25px;">Widget formulário</span><span style="background-color: white; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 25px;"> de contato</span></span></b>", peço que leia o tutorial anterior: <a href="http://variasdicasparablogs.blogspot.com.br/2013/05/formulario-de-contato-para-blog.html" target="_blank">Como adicionar o novo formulário de contato do blog</a>.</li>
</ul>
<div>
<b>2º Passo: </b>Após ter adicionado o Gadget "<b><span style="color: red;"><span style="background-color: white; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 25px;">Widget formulário</span><span style="background-color: white; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 25px;"> de contato</span></span></b>", crie uma <b>nova página </b>no blog, você pode colocar o título da página como "<b>Contato</b>" se preferir.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJJ2cZDb4nIonUEuKdRHKNNwR2wR_hnpTw8UQawP02_Isi61a6JhHHVpS-yqmhwacKhA5M2XroQYDsK_4eFwDCtUfvIeWk22l8MX98UvEMDBg735OaEVj1k31Pbk0hXC6xDTyqZZpIkX8/s1600/Nova+p%C3%A1gina+no+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJJ2cZDb4nIonUEuKdRHKNNwR2wR_hnpTw8UQawP02_Isi61a6JhHHVpS-yqmhwacKhA5M2XroQYDsK_4eFwDCtUfvIeWk22l8MX98UvEMDBg735OaEVj1k31Pbk0hXC6xDTyqZZpIkX8/s400/Nova+p%C3%A1gina+no+blog.png" title="Clique na imagem para visualizar melhor " width="400" /></a></div>
<br /></div>
<div>
<br />
<ul>
<li>A gora,<b> copie </b>o seguinte <b>código do formulário,</b> mostrado logo abaixo:</li>
</ul>
<div>
<div>
<b style="background-color: #cfe2f3;"><form name="contact-form"></b><br />
<b style="background-color: #cfe2f3;"><div></b><br />
<b style="background-color: #cfe2f3;">Seu Nome: </div></b><br />
<b style="background-color: #cfe2f3;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></b><br />
<b style="background-color: #cfe2f3;"><br /></b><br />
<b style="background-color: #cfe2f3;"><div></b><br />
<b style="background-color: #cfe2f3;">Seu e-mail: </div></b><br />
<b style="background-color: #cfe2f3;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></b><br />
<b style="background-color: #cfe2f3;"><br /></b><br />
<b style="background-color: #cfe2f3;"><div></b><br />
<b style="background-color: #cfe2f3;">Sua Mensagem:</div></b><br />
<b style="background-color: #cfe2f3;"><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"> </textarea></b><br />
<b style="background-color: #cfe2f3;"><br /></b><br />
<b style="background-color: #cfe2f3;"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /></b><br />
<b style="background-color: #cfe2f3;"><br /></b><br />
<b style="background-color: #cfe2f3;"><div style="text-align: center&quot; max-width: width: 450px;"></b><br />
<b style="background-color: #cfe2f3;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></b><br />
<b style="background-color: #cfe2f3;"></div></b><br />
<b style="background-color: #cfe2f3;"><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></b><br />
<b style="background-color: #cfe2f3;"></div></b><br />
<b style="background-color: #cfe2f3;"></div></b><br />
<b style="background-color: #cfe2f3;"></form></b></div>
<div>
<br /></div>
<div>
<br />
<br /></div>
</div>
<ul>
<li>Então, você vai <b>colar o código</b> do formulário no<b><span style="color: red;"> HTML da página</span></b>, basta clicar no botão >> <b>HTML</b>, conforme mostra o exemplo abaixo:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyzbvspFKHm90JFdG0-vRcYLmk6h5ZiEa5bmls89J-utcB7KdQcsN8wtV5MvQVMnYaA4qQHebE2bIMuzhzabuyC_CQrLPJ0IMHHmrk3C9A3HuEKSoD7NQIXcBitBFUDXo8cWFWj5RGjvA/s1600/Cole+o+codigo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyzbvspFKHm90JFdG0-vRcYLmk6h5ZiEa5bmls89J-utcB7KdQcsN8wtV5MvQVMnYaA4qQHebE2bIMuzhzabuyC_CQrLPJ0IMHHmrk3C9A3HuEKSoD7NQIXcBitBFUDXo8cWFWj5RGjvA/s400/Cole+o+codigo.png" title="Clique na Imagem para visualizar melhor" width="400" /></a></div>
<div>
<br /></div>
<ul>
<li>Depois <b>Salve</b> a nova página criada.</li>
</ul>
<div>
<b>3º Passo:</b> Vamos agora acessar o HTML da Blog. Vá em <b>Modelo</b> >> <b>Editar HTML</b>:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSS0MOtq9U10bv8C6YUPRx7bzxtbIcrrko3za98wLCNFYI6RpwRoWla-LSysaaUgmB6NE2wnJ6YKUCTwZB6GTjKE4ZlbtOrWFkU5ehQqQ5oI3umFm3JMCzEzNABD_sFWcoMn4mfROZYmw/s1600/Editar+HTML.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSS0MOtq9U10bv8C6YUPRx7bzxtbIcrrko3za98wLCNFYI6RpwRoWla-LSysaaUgmB6NE2wnJ6YKUCTwZB6GTjKE4ZlbtOrWFkU5ehQqQ5oI3umFm3JMCzEzNABD_sFWcoMn4mfROZYmw/s320/Editar+HTML.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>4º Passo:</b> Dentro do HTML do blog, você vai procurar pelo código do Widget formulário de contato. E para encontrar o código do formulário, clicar no botão "<b><span style="color: red;">Ir para um widget</span></b>" e em seguida clique na opção "<b><span style="color: red;">ContactForm1</span></b>", conforme mostra na imagem logo abaixo:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJGERngLjeS-9rbs_jyl7LftqXWmFwe3dqXftxL9X86IlMBe2907IbsBljS8FBd3U_UrLfqlW3sFzVQSU9GYtn45yr7OGA8YjQjL-_ElnnHlNR0jNrsx1hYNz3SZFhkHCFTAbMKlyxsVU/s1600/contactform1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJGERngLjeS-9rbs_jyl7LftqXWmFwe3dqXftxL9X86IlMBe2907IbsBljS8FBd3U_UrLfqlW3sFzVQSU9GYtn45yr7OGA8YjQjL-_ElnnHlNR0jNrsx1hYNz3SZFhkHCFTAbMKlyxsVU/s320/contactform1.png" title="Clique na imagem para visualizar melhor" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul>
<li style="text-align: left;">Quando localizar a linha onde se encontra o código do formulário, <b>clique</b> na pequena seta para <b>expandir a linha de código</b>. Veja o exemplo na imagem abaixo:</li>
</ul>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWQot-jBc66YeubjvlkdcnNdBLwJ5aAcEa-aEXcAgK6TqyDJ7rmj1heZZSe4mfP-kgSe5wwVL0tZ_CQgCvdD6JsE5LO4KM7X3o3lVDLyMb-aiEyA0N-MWwAZdTIOH4ErkY-TI9MD9x8U/s1600/expandir.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWQot-jBc66YeubjvlkdcnNdBLwJ5aAcEa-aEXcAgK6TqyDJ7rmj1heZZSe4mfP-kgSe5wwVL0tZ_CQgCvdD6JsE5LO4KM7X3o3lVDLyMb-aiEyA0N-MWwAZdTIOH4ErkY-TI9MD9x8U/s400/expandir.png" title="Clique na Imagem para visualizar melhor" width="400" /></a></div>
<div style="text-align: center;">
<ul>
<li style="text-align: left;">Agora<b> expanda </b>a linha seguinte que apareceu, a linha do "<b>includable</b>". Veja na imagem abaixo:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf-rI140qp28k-z82xUMjbn7zSUYgrr0gpLOcuuXmrn3diYd_e5wKDaNFf_CuYQiHlhGWl7rP5lRvq-x1FTBUZS01qOhpFYTTdcg68YuPbhiXKJZTMTQHayIFV65DFzXhFAVoX7Onulfs/s1600/includable.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf-rI140qp28k-z82xUMjbn7zSUYgrr0gpLOcuuXmrn3diYd_e5wKDaNFf_CuYQiHlhGWl7rP5lRvq-x1FTBUZS01qOhpFYTTdcg68YuPbhiXKJZTMTQHayIFV65DFzXhFAVoX7Onulfs/s400/includable.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul>
<li style="text-align: left;">Após expandir a linha de código, logo será aberto uma sequencia de código, a do widget formulário de contato, e atentamente você terá que <b>apagar a seguinte parte do código</b> mostrado na imagem abaixo:</li>
</ul>
<div style="text-align: center;">
Clique na imagem para visualizar</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOPlHNh9tDT4uC60vmMbyQ25o9wT5hcwWDgU8We7wYOgTRM-W-poYaotpwgkVo-5JK97SDx-VVrJX-CB3fE2PA7LjjHsiKKf0Z-Evtq0HKOPiTasRsTdlmcsJ_OwReOBKr7PR8deJoFds/s1600/apague.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="109" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOPlHNh9tDT4uC60vmMbyQ25o9wT5hcwWDgU8We7wYOgTRM-W-poYaotpwgkVo-5JK97SDx-VVrJX-CB3fE2PA7LjjHsiKKf0Z-Evtq0HKOPiTasRsTdlmcsJ_OwReOBKr7PR8deJoFds/s200/apague.png" title="Clique na imagem para visualizar melhor" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
O mesmo código da imagem está sendo mostrado logo abaixo:</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"><b:if cond='data:title != &quot;&quot;'></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <h2 class='title'><data:title/></h2></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> </b:if></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <div class='contact-form-widget'></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <div class='form'></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <form name='contact-form'></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <p/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <data:contactFormNameMsg/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <br/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <p/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <br/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <p/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <br/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <p/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <p/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <div style='text-align: center; max-width: 222px; width: 100%'></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> </div></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> </form></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> </div></b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;"><b style="background-color: #f4cccc;"> </div></b></span></div>
<div style="text-align: left;">
<br /></div>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
<div style="text-align: center;">
Depois de Apagar, o código terá que estar assim:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdEU9mhqLH-s5zD0Bsyy5gRHffB2s_w4oFMZoCmLYIa_azQ1Ml3lZzJxAaOOBCPMmm0dgBUjmD1Erwnb1tISquPnxyz4kPhB244u9Luwb67URR04oPtlw1AePkTqCQdrWirpD0wVzs3JA/s1600/ficara+assim.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdEU9mhqLH-s5zD0Bsyy5gRHffB2s_w4oFMZoCmLYIa_azQ1Ml3lZzJxAaOOBCPMmm0dgBUjmD1Erwnb1tISquPnxyz4kPhB244u9Luwb67URR04oPtlw1AePkTqCQdrWirpD0wVzs3JA/s400/ficara+assim.png" title="Clique na imagem para visualizar menlhor" width="400" /></a></div>
<div>
<br /></div>
</div>
<div style="text-align: left;">
<b>5º Passo</b>: Enfim, depois de apagar o código mostrado anteriormente,<b> Salve o modelo</b> para finalizar.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Prontinho, agora é só você acessar a sua nova página de contato e lá estará o widget formulário de contato.</div>
<div style="text-align: left;">
<br /></div>
</div>
</div>
<div>
</div>
Unknownnoreply@blogger.com47tag:blogger.com,1999:blog-5768958913026656905.post-14850804195229714962013-07-08T20:59:00.002-07:002014-02-05T05:22:21.900-08:00Seu Blog esta sendo redirecionado para outro site do databloggerpage.com, veja como resolver<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF2AWVZ3Yl-hvpStA2yFMVMVXxDgsKgCJTQwOPsVA6QY-XNVQlSPUePYLg5RNUik8juvAjE-OrQG_T180tXZsTx056A-EYUDUPZpfFnERayb5WfclvLB_AkgR9HrfUWpiyAg5vIHA5IEo/s1600/problemas.png" imageanchor="1" style="clear: left; display: inline !important; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF2AWVZ3Yl-hvpStA2yFMVMVXxDgsKgCJTQwOPsVA6QY-XNVQlSPUePYLg5RNUik8juvAjE-OrQG_T180tXZsTx056A-EYUDUPZpfFnERayb5WfclvLB_AkgR9HrfUWpiyAg5vIHA5IEo/s1600/problemas.png" height="200" width="320" /></a><br />
<br />
Olá pessoal! Ultimamente vários blogs estão sendo Redirecionado para o Site do "databloggerpage.com", então saiba o porquê que esta acontecendo isso e como podemos resolver...<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br /><br />
<br />
Bom, esse problema vem acontecendo por causa de um código <b>Script</b>, e esse Script está presente (instalado) em vários Templates para Blogs disponibilizado pela internet, que no qual o autor dos Templates utilizou a plataforma gratuita do "databloggerpage" para hospedá-los, que atualmente não estão funcionando mais e, está acarretando este problema de Redirecionamento.<br />
<br />
Eu recebi um e-mail de um leitor o "José freitas" ele diz que esta com o mesmo problema de redirecionamento, e ao mesmo tempo eu encontrei perguntas no "<b>Yahoo Resposta</b>" de pessoas que tiveram o seu blog afetado com o mesmo Script.<br />
<br />
Então eu consegui ter acesso a um HTML de um Blog afetado, e consegui identificar o problema, por tanto, vamos resolver logo isso.<br />
<h2>
Como Resolver o Problema no redirecionamento do Blog</h2>
<div>
<b>1º Passo</b>: Primeiramente é preciso que você acesse o HTML do seu blog.</div>
<div>
_ Vá em >><b> Modelo</b> >><b> Editar HTML</b> </div>
<div>
<br /></div>
<div>
<b>2º Passo:</b> Após entrar no HTML do Blog, você vai "<b>Expandir</b>" essa seguinte linha no código HTML: "<b style="background-color: orange;"><b:skin>...</b:skin></b>" clicando na pequena seta <span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;">'►'</span><span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;"> </span>. <span style="color: red;">Veja exemplo na imagem abaixo:</span></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9TC5Gc02YrR08z7bQ68ycnwIDtIME5nn7g1aFp7xvnB469KBRE11HPMgFOBCtZWrUPWs_JUfI8-1y7JIymmEzP3rs6OCoXd5sC6Cdh8nI5ZNWJpII1yQnjExXmblAqtl0H1Ai5jGrPiE/s1600/Expandir.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9TC5Gc02YrR08z7bQ68ycnwIDtIME5nn7g1aFp7xvnB469KBRE11HPMgFOBCtZWrUPWs_JUfI8-1y7JIymmEzP3rs6OCoXd5sC6Cdh8nI5ZNWJpII1yQnjExXmblAqtl0H1Ai5jGrPiE/s400/Expandir.png" height="210" title="Clique na Imagem para visualizar melhor" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>3º Passo:</b> Agora, depois de ter (Expandido) aquela linha de código, utilize as teclas "<span style="color: red;"><b>Ctrl </b>+ <b>F</b></span>" para Pesquisar o seguinte Script:</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: #f4cccc;"><span class="webkit-html-tag" style="font-family: monospace; white-space: pre-wrap;"><script <span class="webkit-html-attribute-name">src</span>='<a class="webkit-html-attribute-value webkit-html-resource-link" href="http://databloggerpage.com/data/datablog.js" target="_blank">http://databloggerpage.com/data/datablog.js</a>'></span><span class="webkit-html-tag" style="font-family: monospace; white-space: pre-wrap;"></script></span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span class="webkit-html-tag" style="font-family: monospace; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
Ao ter localizado, logo <b>apague</b> essa parte que encontrou. E se você encontrar essa sequencia mais de uma vez apague todas.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgad3KEk-KPUiQjzcXbEQjTkaHUzJRteopwIxIJQKVZTIZ9XfSml7E-6pSB2VMbqASZZ1sB8vBEAMqOx-QFXtyGQRj8G6Vce4BEff2OIxn7Cl61j7rmft9H2KPvu3dlGEvTdv81mNl2DWw/s1600/apague.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgad3KEk-KPUiQjzcXbEQjTkaHUzJRteopwIxIJQKVZTIZ9XfSml7E-6pSB2VMbqASZZ1sB8vBEAMqOx-QFXtyGQRj8G6Vce4BEff2OIxn7Cl61j7rmft9H2KPvu3dlGEvTdv81mNl2DWw/s400/apague.png" height="122" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>4º Passo: </b>Enfim, após ter retirado o Script <b>Salve as alterações, </b>depois é só acessar o Blog, que já estará tudo pronto.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Conclusão:</b></div>
<div class="separator" style="clear: both; text-align: left;">
Pessoal, muita gente estava pensando que este redirecionamento do Blog era relacionado a um vírus, porém, esse problema se trata de um código (Script) que com certeza apresentou falha e não sabemos o exato motivo. </div>
<div>
<br /></div>
Unknownnoreply@blogger.com29tag:blogger.com,1999:blog-5768958913026656905.post-29161756945650583792013-07-06T18:32:00.003-07:002014-02-05T06:27:15.558-08:00Como Fazer Páginas que Mostra post com Conteudo da Mesma Categoria no Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjS5XGae_GzyiQZ4VrwEg1ao6G6PneOozAkmxqUx3UI_xcC7V6jfp_rnNF1DDctSioor-NLKbNg910OkLlRIAJIjqmHL_dx0fPTG-_lyxWEwlWlBrNSc6o4oB5DtNC7dxqMgFW_3qtHOo/s1600/postagem+do+blog+com+a+mesma+categoria.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjS5XGae_GzyiQZ4VrwEg1ao6G6PneOozAkmxqUx3UI_xcC7V6jfp_rnNF1DDctSioor-NLKbNg910OkLlRIAJIjqmHL_dx0fPTG-_lyxWEwlWlBrNSc6o4oB5DtNC7dxqMgFW_3qtHOo/s1600/postagem+do+blog+com+a+mesma+categoria.png" height="160" width="320" /></a></div>
Neste tutorial irei seguir com uma dúvida do nosso Leitor<span style="font-family: Arial, Helvetica, sans-serif;"> </span><a href="https://plus.google.com/107195496331482644744" target="_blank"><span style="color: #888888; font-family: inherit;"><span style="background-color: #f9f9f9; line-height: 16px;"><b>Nelson Veron</b></span></span></a>, ele quer saber <b>como criar páginas de categorias no blog</b>.<br />
Fazer isso no Blog é bastante simples, é feito através do recurso <b>Marcadores</b> de postagens, e para muitos iniciantes no Blog isso é uma coisa que poucos conhecem, então, nessa aula também ensinarei o que é um Marcador e como usar...<br />
<br />
<br />
<a name='more'></a><br />
<br />
<div>
Bom pessoal, o <b>Nelson Veron</b> nos deixou um comentário com uma dúvida, ele quer saber como deixar as postagem do blog que possuem uma mesma categoria (Assunto relacionado), para aparecerem em uma única página. Então irei esclarecer a dúvida do nosso leitor <b>Nelson Veron,</b> e também para aqueles que são Iniciantes na plataforma Blogspot.</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9dNaINuSifL50SALSFQCV2MEIzBXs-CI7vjREFgBIN7SIDyudZAojGDrM1gr8SEd-gzK17jm1wUPew_jo3gam9WwbOaJubkSSLXy5p0gz3XrmVlZXZOenhSXcC_iGyO0wRaFahXWX4QQ/s1600/Nelson+Veron+-+Varias+Dicas+Para+Blogs.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9dNaINuSifL50SALSFQCV2MEIzBXs-CI7vjREFgBIN7SIDyudZAojGDrM1gr8SEd-gzK17jm1wUPew_jo3gam9WwbOaJubkSSLXy5p0gz3XrmVlZXZOenhSXcC_iGyO0wRaFahXWX4QQ/s400/Nelson+Veron+-+Varias+Dicas+Para+Blogs.png" height="140" title="Clique na imagem para Visualizar melhor" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Comentários do Nelson Veron. Clique na imagem para visualizar.</td></tr>
</tbody></table>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<blockquote class="tr_bq">
Como vocês viram no comentários do Nelson que foi mostrado logo aí acima, ele citou o exemplo do nosso blog, onde ele diz_ "<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px; line-height: 16px; text-align: justify;"><span style="color: red;">colocar as postagens dentro de uma determinada pagina igual ao que vc fez com o menu do lado direito de seu blog onde tem por exemplo "ferramentas" e dentro de ferramentas tem varios post</span></span><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 12px; line-height: 16px; text-align: justify;">,</span>", então pessoal, isso é fácil de elaborar basta você saber utilizar os Marcadores de postagem.</blockquote>
</div>
<div>
<br />
<h2>
Criando Marcadores nas Postagens do Blog</h2>
<b><span style="font-family: Arial, Helvetica, sans-serif;">Então vamos para o Passo a Passo</span></b><br />
<b><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></b></div>
<div>
<b>1º Passo:</b> Anteriormente nós publicamos em nosso blog um artigo que explica o <b>que é um Marcador</b> e como colocar marcadores no Blog.</div>
<div>
<blockquote class="tr_bq">
> Então peço que o mesmo leia o artigo: <a href="http://variasdicasparablogs.blogspot.com.br/2013/02/como-separar-as-postagens-do-blog-em.html" target="_blank">Como separar as postagens do Blog em Categorias</a> << clique</blockquote>
</div>
<div>
<br /></div>
<div>
<b>2º Passo:</b> Agora que já sabe como colocar marcadores nas postagens, irei também acrescentar a parte de "<b>Como adicionar 2 ou mais marcadores em uma unica postagem</b>".</div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
Essa parte também é muito importante você saber, pois saiba que, em uma só postagem podemos <b>acrescentar 2 ou mais</b> marcadores de diferentes categorias, mas sabendo que, essas duas ou mais palavras a serem adicionadas terão que ter relação com o assunto da postagem, <b>veja o exemplo</b>:</blockquote>
<br />
Este meu tutorial eu adicionei 3 marcadores, que são eles:<br />
<br />
<ol>
<li>A palavra "<b><span style="color: red;">INICIANTES</span></b>" para que esta postagem apareça na página que fala sobre dicas para <b>iniciantes</b>.</li>
<li>A palavra "<b><span style="color: red;">MARCADORES</span></b>" para aparecer na página com assunto sobre <b>Marcadores</b>.</li>
<li> A palavra "<b><span style="color: red;">POSTAGEM</span></b>" para aparecer na pagina com assunto que fala sobre <b>Postagens</b>.</li>
</ol>
<div>
Observe bem que, as 3 palavras que adicionei são 3 diferentes categorias, mas que se relacionam em determinado aspectos, como tutoriais para <b><span style="color: red;">INICIANTES</span></b> e, tutoriais que falam sobre <b><span style="color: red;">MARCADORES</span></b>, e por fim conteúdo que fala sobre organização de <b><span style="color: red;">POSTAGEM, </span></b>correto!</div>
<div>
<br />
<blockquote class="tr_bq">
Em cada postagem que escrevo, sempre adiciono 3 marcadores, mas isso vai de acordo com a <b>sua preferencia</b> podendo adicionar 1 ou mais marcadores. Ok pessoal!!!</blockquote>
</div>
<div>
Então, existe um modo certo para adicionar 3 palavras para ser marcadores. Na opção Marcadores você terá que escrever e separá-las com virgulas cada palavra, <b>Exemplo</b>:</div>
<div>
<blockquote class="tr_bq">
<b>Utilizando 3 palavras separada com "<span style="color: red;">,</span>": </b><b><span style="color: red;">INICIANTES, </span></b><b><span style="color: red;">MARCADORES, </span></b><b><span style="color: red;">POSTAGEM</span></b></blockquote>
</div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbBP0PxLhiry62-RaeLvw_qvjtVktYDmxZbPsJfGlZzXs8AP28CGMBOCC7DdRGVwOV-OGm7l7noFYfo4hzzwk1xvhXT7rNgRkz6xsh8QQV8fIcuLN7X5hCZLPrPIeoU0h7XnlbfETSfc0/s1600/Marcadores+-.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbBP0PxLhiry62-RaeLvw_qvjtVktYDmxZbPsJfGlZzXs8AP28CGMBOCC7DdRGVwOV-OGm7l7noFYfo4hzzwk1xvhXT7rNgRkz6xsh8QQV8fIcuLN7X5hCZLPrPIeoU0h7XnlbfETSfc0/s320/Marcadores+-.png" height="141" title="Clique na Imagem para visualizar" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Enfim, depois de você publicar sua postagens você poderá<b> usar os marcadores</b> na sua<b> página inicial</b>, e quando o visitante clicar por <b>exemplo</b>: No marcador "<b><span style="color: red;">INICIANTES</span></b>" o Blog abrirá uma página e mostrará as postagens relacionada somente para dica para Iniciantes.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
O legal é que, você pode<b> utilizar as mesmas categorias </b>em outras novas postagens, sendo assim, toda vez que você for criar uma postagem no Blog não esqueça de designar uma categoria para ela.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3>
Criando Menu Categorias na página inicial do Blog</h3>
<div>
Depois de criar os marcadores, vamos colocar eles na página inicial.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>1º Passo:</b> Vamos começar.</div>
<blockquote class="tr_bq">
<b>Observe</b>: O titulo que vou dar ao meu marcador será:<b><span style="color: red;"> Menu Categorias</span></b>, você poderá dar um titulo de ferente, esse é só o exemplo da aula.</blockquote>
<div class="separator" style="clear: both; text-align: left;">
<b>Adicione</b> no Layout do seu Blog o <b style="color: red;">Gadget Marcadores</b>. E o caminho para adicionar o Gadget Marcadores no Blog segue logo<b> abaixo</b>:</div>
</div>
<div>
<ul>
<li>Clique na opção <b>Layout </b>e veja que mais ao lado aparece as semelhantes colunas do seu blog, e em umas das colunas clique no link: <span style="color: #073763;"><b>Adicionar um Gadget</b></span></li>
</ul>
<div style="text-align: center;">
<span style="color: red;">Clique na imagem para ver o exemplo</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9q6nHwSqOXLf46TMmZw2R86EpgEkCvuXM79Gi3XCcns1Pn3eBiIB21tu0rk1sTRvAUB9wQ1nZVgx0Bn93ivkSOXHbnK2BcMDbI1nL-twGS5atVHouV0xrtJefYkwLDocBvxkWd0z6h8s/s1600/adicionar+Gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9q6nHwSqOXLf46TMmZw2R86EpgEkCvuXM79Gi3XCcns1Pn3eBiIB21tu0rk1sTRvAUB9wQ1nZVgx0Bn93ivkSOXHbnK2BcMDbI1nL-twGS5atVHouV0xrtJefYkwLDocBvxkWd0z6h8s/s400/adicionar+Gadget.png" height="195" width="400" /></a></div>
<div>
<span style="color: #073763;"><b><br /></b></span></div>
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li>Ao clicar no link <b>adiciona um Gadget</b> abrirá uma nova janela, e nessa janela tem várias opções de Gadget, então você vai procurar a opção "<b>MARCADORES</b>" e abrir ela.</li>
</ul>
<div style="text-align: center;">
<span style="color: red;">Clique na imagem para ver o exemplo</span>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXGf21PFtoAnxUf2is_I3DaIkBwH76K3Av1rAFKWs5VWDg1g79V_U9jveB3hxCTXW3JA8kK8kpADfJKaGi3mAPLpPdtFNdxKdgOVn9DUwa0DjDFhXw8Ku49B3t9kzszy04GrwsrhFwZ70/s1600/marcadores.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXGf21PFtoAnxUf2is_I3DaIkBwH76K3Av1rAFKWs5VWDg1g79V_U9jveB3hxCTXW3JA8kK8kpADfJKaGi3mAPLpPdtFNdxKdgOVn9DUwa0DjDFhXw8Ku49B3t9kzszy04GrwsrhFwZ70/s400/marcadores.png" height="400" width="372" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Prontinho! feito isso você vai fazer as seguintes <b>alterações no Gadget</b>:</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ol>
<li><b>Escolher um titulo</b> para o gadget, o meu é esse "<b><span style="color: red;">Menu Categorias</span></b>".</li>
<li>Maque a opção:<b> Marcadores Selecionados</b></li>
<li>Quando marcar a opção <b>Marcadores selecionado</b> vai aparecer um link para <b><span style="color: blue;">editar</span></b>, então clique nele.</li>
<li>Quando clicar em <b><span style="color: blue;">Editar</span></b>, lá em baixo vai aparecer os marcadores a serem exibidos, então você vai selecionar apenas aqueles que você quer que pareça na pagina inicial do blog.</li>
<li>Depois de selecionar os marcadores a serem exibidos clique em no link " <b><span style="color: blue;">Concluído</span></b>"</li>
<li>Desmarque a opção " <b>Mostrar o número de postagem por Marcadores</b>"</li>
<li>E por último clique em Salvar (concluído).</li>
</ol>
<div style="text-align: center;">
<span style="color: red;">Clique na imagem para ver o exemplo</span>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SoxKkAMtQhvQlovH3U4wLTUdG9oJlM3AvZEVdh2nOjWYAPQfipCuzwjRt-XWxLDtGYyUUeHn32arAgC8Ekb7gPwU2wAjx9s13JR6xCDiYZTymROJAzW3t72fnVMcxKVEOf_QZgUJceE/s1600/Altera%C3%A7%C3%A3o.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SoxKkAMtQhvQlovH3U4wLTUdG9oJlM3AvZEVdh2nOjWYAPQfipCuzwjRt-XWxLDtGYyUUeHn32arAgC8Ekb7gPwU2wAjx9s13JR6xCDiYZTymROJAzW3t72fnVMcxKVEOf_QZgUJceE/s320/Altera%C3%A7%C3%A3o.png" height="320" width="306" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Pronto, após ter concluído as alterações do Gadget Marcador, em seguida vá até a página inicial do seu blog e veja se esta tudo certo.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Sim pessoal, as postagem que já foram publicada no blog você ainda pode adicionar os marcadores.</div>
<div class="separator" style="clear: both; text-align: left;">
Espero ter ajudado. Obrigado!</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Unknownnoreply@blogger.com14