Desenvolvendo Blogs - Dicas e Tutoriais para Blogs: Códigos/Scripts

Colocando aviso para deixar o blog em manutenção: Somente para os visitantes

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais

Recentemente no blog de um amigo meu ocorreram alguns problemas com a template, onde ela ficou com alguns erros bem visíveis, onde ele necessitou colocar o seu blog em manutenção para os visitantes e ao mesmo tempo pode-se editar a template de forma que só ele visualiza-se as modificações.

Colocar blog em manutenção

Neste artigo vamos ver como fazer isto, ou seja deixar uma mensagem de aviso para os visitantes, que o blog está em manutenção e que será reparado em breve.

OBS: Antes de quaisquer modificações, aconselho que você salve um backup de segurança, para caso ocorra algo de errado possa recuperar a template sem modificações: Clique aqui para ver como fazer o backup, ou Vá em modelo -> Fazer backup/Restaurar -> Fazer download do modelo completo.

Tutorial

1. Acesse o painel do Blogger, vá na guia "Modelo" e depois "Editar HTML"

2. Aperte as teclas Ctrl+F e procure pela tag abaixo:

<body>

ou caso não encontre:

<body expr:class='"loading" + data:blog.mobileClass'>

3. Abaixo da tag encontrada cole o seguinte código:

<span class='item-control blog-admin'>

4. Agora procure por:

</body>

5. E ACIMA da tag encontrada cole:

</span>

6. Agora abaixo da tag </body> , encontrada no passo 4, cole:

<div style='text-align: center;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhrpmzighW69aKmdqtws0bnPHTzd3qO7RBU9WKbsGf0_zafK-A6Z5JTpnpb6vc-PAz4WFoeV_ixYURkMRI2xqrCYhry0zD5p-oL11KxTFG-BKFKAbo_ZGu-2HbSRWxKoPN1NoRHZd-KLI/s320/blog+em+manuten%C3%A7%C3%A3o.gif'/></div>

Em vermelho, é a URL da imagem, caso não queira há que já está no código, veja algumas sugestões abaixo:

OBS: Para retirar o aviso de manutenção do blog, basta remover os códigos inseridos por meio deste tutorial.

OBS²: Lembre-se que o blog ficará em manutenção somente para os visitantes, assim caso você queira ver ele em manutenção desconecte-se da sua conta do Blogger.

Continue Lendo »

PopUp para Curtir Fan Page do Facebook no Blogger - Com Cookies

Por: Herlan Santos Marcadores: Acessórios, Códigos/Scripts, Gadgets/Widgets

O Facebook é uma ótima maneira de divulgação e de conectar os leitores ao seu blog, para que mais pessoas estejam conectadas por meio do Facebook é necessário que você busque aumentar o número de fans de sua página.

Uma boa forma de aumentar o número de fans na fan page de seu Facebook é divulgando a mesma por meio de seu blog.

Usando esse PopUp que irei disponibilizar aqui certamente isso irá ajudar a aumentar o números de fans na sua fan page.

- Colocando Sistema de Comentários do Facebook no Blogger
- Like Box - Caixa de fãs do Facebook

PopUp - Curtir fan page - com cookies

Clique aqui para ver uma demonstração.

O PopUp possui um sistema de Cookies, que faz com que ele só seja aberto na primeira visita do dia, o que faz que não incomode a quem está visualizando as páginas de seu blog.

Adicionando ao seu blog

1. Acesse o painel de seu blogger.

2. Vá para a página "Layout"

3. Clique em "Adicionar um Gadget"

4. Clique em "HTML/JavaScript"

5. Modifique o código abaixo, altere somente a parte "NOME-DA-SUA-FANPAGE", que está ao fim do código, coloque no lugar dele o nome da sua página no facebook, por exemplo a do nosso blog é da seguinte forma: www.facebook.com/DesenvolvendoBlogs, substitua por o nome final da sua página.

<br />
<style>
/*
ColorBox Core Style:
.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9jEeOjtzXUDvuQ0J47WUom9Gf0W4rNN6JMqDFXNQ0lnIVds9ZJuv_DYh0QgS_7GUHvgFExwXzI29PhLnGCuOCn7TBScKdMqE6DJscCDE8eFFo4Wf6FXK4114lKZwT_nQh1OTepo0N1O-/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5vQQ6H1FHuRJtooCrg_W61AQ4_CbIImZnhzXxY3d7ntUtgYewd2pcynSMr7ancI4GHmXIvtUvAhtKPBbcyubtAbMT04mNO8vrFdKXWO5rObrxB9-9rSwWJlT6YM6Ie4O3AYuXXKWwgrP/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9jEeOjtzXUDvuQ0J47WUom9Gf0W4rNN6JMqDFXNQ0lnIVds9ZJuv_DYh0QgS_7GUHvgFExwXzI29PhLnGCuOCn7TBScKdMqE6DJscCDE8eFFo4Wf6FXK4114lKZwT_nQh1OTepo0N1O-/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9jEeOjtzXUDvuQ0J47WUom9Gf0W4rNN6JMqDFXNQ0lnIVds9ZJuv_DYh0QgS_7GUHvgFExwXzI29PhLnGCuOCn7TBScKdMqE6DJscCDE8eFFo4Wf6FXK4114lKZwT_nQh1OTepo0N1O-/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5vQQ6H1FHuRJtooCrg_W61AQ4_CbIImZnhzXxY3d7ntUtgYewd2pcynSMr7ancI4GHmXIvtUvAhtKPBbcyubtAbMT04mNO8vrFdKXWO5rObrxB9-9rSwWJlT6YM6Ie4O3AYuXXKWwgrP/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9jEeOjtzXUDvuQ0J47WUom9Gf0W4rNN6JMqDFXNQ0lnIVds9ZJuv_DYh0QgS_7GUHvgFExwXzI29PhLnGCuOCn7TBScKdMqE6DJscCDE8eFFo4Wf6FXK4114lKZwT_nQh1OTepo0N1O-/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9jEeOjtzXUDvuQ0J47WUom9Gf0W4rNN6JMqDFXNQ0lnIVds9ZJuv_DYh0QgS_7GUHvgFExwXzI29PhLnGCuOCn7TBScKdMqE6DJscCDE8eFFo4Wf6FXK4114lKZwT_nQh1OTepo0N1O-/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9jEeOjtzXUDvuQ0J47WUom9Gf0W4rNN6JMqDFXNQ0lnIVds9ZJuv_DYh0QgS_7GUHvgFExwXzI29PhLnGCuOCn7TBScKdMqE6DJscCDE8eFFo4Wf6FXK4114lKZwT_nQh1OTepo0N1O-/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipM7dkUP64fCy37hAFzsxC-DqwN40qcfN4jVqP8yNGeJeScujaAjaxdDBrNGyPIoBAu1s06pK7CMuR8Zi1HsR73gSG7-1Ga5FUuib3x0YlzReKclVW9LQIauwwsZLt3VPFKxC7MoJ_MKHc/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXfzsdLOV4DjzY5teJ8PZrHHSIpoJfpvKwo0cymF9g4JqgMFSFA0fymMhNDQx2ghMvIoEm57ZVmubbZ3PYrscj-NfO2f05KdAKAfHSDfMZ7CBD8sdYecCnH2HnCik6ub-IQj5zOo2Z7FDL/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9jEeOjtzXUDvuQ0J47WUom9Gf0W4rNN6JMqDFXNQ0lnIVds9ZJuv_DYh0QgS_7GUHvgFExwXzI29PhLnGCuOCn7TBScKdMqE6DJscCDE8eFFo4Wf6FXK4114lKZwT_nQh1OTepo0N1O-/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style><br />
<br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script><br />
<script src="http://dl.dropbox.com/u/103852546/popup/popup.js"></script><br />
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script><br />
<br />
<br />
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">
Receber todas as atualizações através do Facebook. Basta curtir nossa FanPage.<center>
<p style="line-height:3px;" >
▼</p>
</center>
</h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOME-DA-SUA-FANPAGE&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe><br />
</center>
</div>
</div>

6. Cole no gadget e depois clique em "Salvar"

Pronto, PopUp adicionada!

- Colocando Sistema de Comentários do Facebook no Blogger

- Like Box - Caixa de fãs do Facebook

Continue Lendo »

Deixando a URL do Blogger "blogspot.com" sem o país.

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais

A pouco tempo atrás o blogger lançou uma novidade para deixar os domínios da plataforma com o sufixo de cada país, por exemplo no Brasil deixou blogspot.com.br ao invés de blogspot.com em todos os blogs brasileiros.
Para saber mais sobre esse assunto recomendo que leia Mudanças no domínio Blogspot.com, mas essa novidade não agradou a todos onde até mesmo se digitado a url sem o sufixo ( .br ) o visitante é redirecionado automaticamente para a url com o sufixo. Além de muitos blogs perderem visitas essa migração afetou também no SEO de alguns blogs, mas essa alteração é possível se remover.

Deixar a URL Blogspot.com

Para retirar essa novidade basta adicionar um código ao HTML de seu blog, veja abaixo como fazer as modificações.
1. Acesse o painel de seu blog
2. Clique na guia "Modelo" e depois em "Editar HTML"
3. Procure ( Ctrl+F ) pela tag abaixo:

<head>

4. Cole abaixo da tag citada o seguinte código:

<script type='text/javascript'>
if ((window.location.href.toString().indexOf('.com.br/'))>'1') {
window.location.href =window.location.href.toString().replace('.blogspot.com.br/','.blogspot.com/ncr/');
}
</script>

5. Salve o modelo e verifique se deu certo em seu blog.
Caso deseje você pode colocar o código em um gadget ( HTML/JavaScript ).

Continue Lendo »

Ativando a Opção de Responder Comentários em Templates Customizados no Blogger

Por: Herlan Santos Marcadores: Códigos/Scripts, Utilidades

Sistema de comentários no Blogger.

Como sabemos o sistema de comentários do Blogger disponibilizou no começo do ano a opção de responder comentários. Mas nem todas as templates, principalmente as customizadas "receberam" essa opção.
Para ativar esta opção em templates customizados basta colocar os códigos abaixo no HTML de sua template.

Tutorial
1. Acesse o painel de seu blog e depois clique na guia "Modelo"
2. Agora clique em "Editar HTML"
3. Agora procure ( Ctrl+F ) pelo seguinte trecho:

<b:include data='post' name='post'/><b:if cond='data:blog.pageType == "static_page"'><b:include data='post' name='comments'/></b:if><b:if cond='data:blog.pageType == "item"'><b:include data='post' name='comments'/></b:if>

4. E substitua por o seguinte código:

<b:include data='post' name='post'/><b:if cond='data:blog.pageType == "static_page"'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if><b:if cond='data:blog.pageType == "item"'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if>

5. Clique em "Salvar modelo"

Continue Lendo »

Botões de compartilhamento abaixo dos posts do blog

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais

Hoje em dia com o crescimento das redes sociais os botões de compartilhamento possuem grande poder de divulgação dos artigos de seu blog. Pensando nisso neste artigo venho mostrar a vocês um simples código que adiciona botões de compartilhamento abaixo dos posts de seu blog.

Botões de Compartilhamento abaixo dos artigos

Adicionado ao seu blog

1. Faça login no painel de seu blog e depois clique na guia "Modelo"

2. Clique em "Editar HTML" e após isso marque a opção "Expandir modelos de Widgets"

3. Procure pela linha abaixo:

<data:post.body/>

4. Acima dela cole o seguinte código:

<div style='clear: both;'/>
 <b:if cond='data:blog.pageType == "item"'><div align='left'>
 <p style='margin:0; border-bottom:1px solid #666666;'>
<font color='#666666' face='Arial Black' size='5'>Compartilhe »»</font></p>
<table border='0' cellpadding='2' cellspacing='10'><tbody>
<tr> <td style='padding-top:8px;'><g:plusone size='tall'/> <script type='text/javascript'>   (function() {     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;     po.src = 'https://apis.google.com/js/plusone.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);   })(); </script> </td>       <td style='padding-top:8px; '>    <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/> </td>      <td style='padding-top:8px;'>   <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>      <td style='padding-top:8px;'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </td>       <td>  <div class='addthis_toolbox addthis_default_style '>
 <a class='addthis_counter'/> </div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>  </td>     </tr>
</tbody></table>
<span class='style1'><a href='http://hs-dicas.blogspot.com' target='_blank'>Desenvolvido por HS Dicas</a></span></div>
</b:if>
    <div style='clear: both;'/>
 
      <div style='clear: both;'/>

7. Clique em "Salvar Modelo"

Pronto pessoal, terminamos aqui mais um artigo, até a próxima.

- Botões de compartilhamento de seus posts em redes sociais.

Continue Lendo »

Como Redirecionar um Blog para outro Blog

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais

Como redirecionar um blog para outro blog

Olá pessoal, neste artigo venho mostrar a vocês como redirecionar um blog para outro blog, ou seja, quando algum visitante tentar o url do blog que você escolheu, ele será imediatamente redirecionado para a outra url do blog.

Vamos ao Tutorial
1. Acesse o painel de seu blog, e clique em "Modelo"
2. Após isso clique em "Editar HTML"
3. Procure pela atg abaixo:

<head>

4. Acima da tag citada, cole o seguinte código

    <head>
    <meta content='3; URL='URL_DO_SEU_BLOG' HTTP-EQUIV='Refresh'/>
    </head>
    <body onLoad='redireccionar()'>
    <script language='JavaScript'>
    var pagina=URL_DO_SEU_BLOG
    function redireccionar()
    {
    location.href=pagina
    }
    setTimeout ("redireccionar()", 500);
    </script>
    </body>

Substitua as partes em negrito pelo url do seu blog. E não esqueça de adicionar a / ( barra ) no final da url, por exemplo: http://hs-dicas.blogspot.com.br/

5. Clique em "Visualisar" e se estiver tudo certo, cliquem em "Salvar"

Até a próxima pessoal, em caso de dúvidas comente!

Continue Lendo »

Criando um bloco de aviso personalizado para blog

Por: Herlan Santos Marcadores: Códigos/Scripts, Utilidades

Olá queridos leitores, hoje irei ensinar a vocês como inserir um bloco de aviso para seu blog, ele é muito utilizado para chamar a atenção dos leitores, ele também é bem parecido com o blockquote ou code. O tutorial é bem simples, então vamos lá.

Tutotial
1. Faça login no painel de seu blog e depois clique na guia "Modelo"
2. Clique em "Editar HTML" e procure pela tag abaixo:

]]></b:skin>

3. Cole logo acima o seguinte código:

aviso {border-left: 4px solid red; color: #555; background: #f1f1f1 url('images/code.gif') no-repeat top left; display: block; padding: 5px;}

Pronto agora você já tem um bloco de avisos para colocar nos posts de seu blog. Para o adicionar basta digitar o texto entre as tags <aviso></aviso>, veja o exemplo abaixo:

<aviso>Seu texto aqui</aviso>

Continue Lendo »

Bloqueando a tecla Ctrl ( Control ) no blog.

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais, Utilidades

Comando Desativado

Nos artigos anteriores mostrei como Bloquear seleção de textos do blog e Créditos Automáticos para Cópias dos Artigos de seu blog. São técnicas que atrapalhar muito aos plagiadores, nesse artigo vou mostrar a você outra técnica bem eficaz e simples para ser adicionada em seu blog. Ela bloqueia a tecla Ctrl, exibindo uma mensagem "Comando Desativado", muito útil também para quem produz textos de autoria pessoal.

Vamos ao Tutorial
1. Acesse o painel de seu Blog
2. Clique na guia "Modelo" e depois clique em "Editar HTML"
3. Segure as teclas Ctrl+F e procure pela seguinte tag:

</head>

4. Abaixo da tag encontrada cole o seguinte código:

5.Agora procure pela tag abaixo:

<body>

6. E cole o código abaixo a deixando como a imagem:

onkeydown='return checartecla(event)'

7. Clique em "Salvar Modelo"

Continue Lendo »

Bloqueando seleção de textos do blog - Protejento o conteúdo

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais, Utilidades

No artigo anterior mostrei uma técnica de Créditos Automáticos para Cópias dos Artigos de seu Blog que complica mais um pouco a vida dos plagiadores. Neste artigo venho mostrar mais uma opção que bloqueia a marcação de textos em seu blog, ele é muito útil para quem produz textos de autoria pessoal.
É um código muito simples e não requer mais que uma simples edição no HTML de seu blog.

Vamos ao Tutorial
1. Acesse o painel de seu Blog e depois clique na guia "Modelo"
2. Clique em "Editar HTML"
3. Após isso segure as teclas Ctrl+F e procure por:

<head>

4. Abaixo da tag citada cole o seguinte código:

Pronto! Clique em "Salvar Modelo"

Muito prático e simples, caso queira o desabilitar basta remover o código. Até onde eu sei funciona em todos os tipos de templates e também em sites.

Continue Lendo »

Créditos Automáticos para Cópias dos Artigos de seu blog.

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais, Utilidades

Créditos automaticos para cópia de seus artigos.

Muitos blogueiros buscam soluções para acabar com o plágio em seu blog, por isso venho mostrar neste artigo, uma solução muito eficaz para o plágio, apesar de ser algo muito fácil de se remover, pode complicar um pouco mais a vida de alguns plagiadores. A ferramente além de ser bem leve quase não ocupa espaço nenhum em seu blog.

Vamos ao Tutorial:
1. Acesse o painel de seu blog
2. Clique na guia "Modelo"
3. Clique em "Editar HTML"
4. Agora segure as teclas Ctrl+F e procure pela seguinte tag:

</head>

5. Após encontra-la cole acima dela o seguinte código:

Pronto, clique em "Salvar Modelo"

Continue Lendo »

Alterando a cor de seleção do mouse em seu blog

Por: Herlan Santos Marcadores: Códigos/Scripts, Efeitos, Tutoriais

Hoje em dia existem diversos tipo de efeitos para seu blog com CSS, CSS3, etc. Hoje vamos aprender algo bem legal. Vamos aprender a mudar a cor de seleção do mouse, assim que você for selecionar um código dentro do seu blog, ficará de cor diferente.

Alterando a cor de seleção do mouse em seu blog

É um efeito muito simples e até mesmo elegante. Não vai pesar em seu blog e você pode o personalizar. Já publique um artigo Efeitos Estrelinhas Caindo do Ponteiro do Mouse que é um efeito para o mouse também, caso se interesse confira o artigo.

Tutorial
1. Acesse o painel de seu blog e clique na guia "Modelo"
2. Clique em "Editar HTML"
3. Procure pela tag abaixo ( Ctrl+F ):

]]></b:skin>

4. Cole acima da tag citada o código abaixo, fazendo as modificações ao seu gosto:

*::-moz-selection {
    background:#91C21A; /* Cor que você quer para o fundo */
    color:#FFFFFF; /* Cor que você quer para o texto */
}
*::selection {
    background:#91C21A; /* Repita a cor que você escolheu para o fundo */
    color:#FFFFFF; /* Reíta a cor que você escolheu para o texto */
}

Para mudar a cor basta mudar o código em vermelho para o que você desejar. Sugerimos que utilize a Tabela de cores HTML, para pegar o HTML da cor e substituir.

5. Clique em "Salvar Modelo"

Pronto agora é só olhar como ficou acessando o seu blog. Gostou? Comente, tire dúvidas, compartilhe e etc. Até a próxima e boa sorte!

Continue Lendo »

Adicionando Botão "Curtir" do Facebook no blog

Por: Herlan Santos Marcadores: Códigos/Scripts, Redes Sociais, Tutoriais

Botão Curtir

Olá pessoa, neste artigo venho mostrar a vocês como adicionar o botão "Curtir" do Facebook no Blogger, ele é uma ótima opção para que não quer colocar a Like Box ( Caixa de fãs no Facebook ), pois é muito mais leve e prático.

Tutorial
1. Acesse o painel de seu blog.
2. Clique na guia "Layout"
3. Clique em "Adicionar um Gadget" e depois procure e clique em "HTML/JavaScript"
4. E no conteúdo do Gadget cole o código abaixo, substituindo o texto em vermelho pelo link de sua página no Facebook.

<iframe src="//www.facebook.com/plugins/likebox.php?href=LINK DE SUA PÁGINA&width=292&height=62&colorscheme=light&show_faces=false&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowTransparency="true"></iframe>

5. Clique em "Salvar" e pronto!

Continue Lendo »

Como Inserir um Menu Suspenso no Blog

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais, Utilidades

Olá pessoal, neste tutorial venho mostrar a vocês um código simples que cria um menu suspenso, você pode utiliza-lo para colocar alguns links importantes, postagens, entre outros.

Tutorial
1. Acesse o Painel de seu blog
2. Clique na guia "Layout"
3. Clique em "Adicionar um novo Gadget" e depois em "HTML/JavaScript"
4. Cole o código abaixo, com suas edições.

Código

<form><select style="color: black; padding: 5px; width: 200px;" name="links" onchange="top.location.href=this.form.links.options[this.form.links.selectedIndex].value"> <option selected="selected">Opção Selecionada </option> <option value="LINK 1"> NOME 1 </option> <option value="LINK 2">NOME 2</option> <option value="LINK 3">NOME 3 </option> <option value="LINK 4">NOME 4 </option> </select></form>

Edição
- Substitua LINK X pelo link da página. ( Ex: http://hs-dicas.blogspot.com.br/2012/03/botoes-aumentar-fonte-diminuir-fonte.html )
- Substitua o NOME X pelo nome do link da página. ( Ex: Botões Aumentar e Diminuir Fonte )
- Caso queria adicionar mais opções, adicione esse trecho antes das tag de fechamento ( </select></form> )

</option> <option value="LINK">NOME</option>

5. Pronto, clique em "Salvar"

Continue Lendo »

Botões Aumentar Fonte, Diminuir Fonte, Fonte Padrão e Imprimir

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais

No tutorial de hoje vamos aprender como colocar os botões de aumentar fonte, diminuir fonte, fonte pardão e imrpimir. Esses botões fica em cada uma das postagens de seu blog, dando um estilo agradável e atraente e também ajudando a muitos visitantes de seu blog.

Vamos ao Tutorial
1. Acesse o painel de seu blog
2. Clique na guia "Modelo"
3. Clique no botão "Editar HTML"
4. Em seguida clique na caixa "Expandir modelos de Widgtes"
5. Segure as teclas Ctrl+F e procure por:

]]></b:skin>

6. Acima da tag citada cole o seguinte código:

7. Agora procure por ( Ctrl+F ):

</head>

8. E cole o código abaixo acima da tag ( </head> )

<script src='http://dl.dropbox.com/u/44914301/codigos/fonte.js' type='text/javascript'/>

9. Procure por:

<div class='post-body entry-content'>

10. Cole abaixo o seguinte código:

<div id="textoFonte">

11. Agora localize a linha:

<data:post.body/>

12. Ao lado direito dele cole a seguinte tag:

</div>

13. Após isso procure por ( Ctrl+F ):

post-footer-line-1'>

14. E finalizando cole abaixo dele o seguinte código:

Agora é só clicar em "Salvar o Modelo"

Continue Lendo »

Cursores coloridos para seu blog

Por: Herlan Santos Marcadores: Códigos/Scripts

Olá amigos, neste artigo venho mostrar a vocês alguns scripts de cursores coloridos, para que você utilize em seu blog. tem cursor de uma única cor e tem outros que possue uma cor e quando passa por cima de algum link muda de cor.

Como adicionar em meu blog?
1. Copie o script do cursor que você deseja.
2. Faça login no blogger, clique na guia "Layout"
3. Clique em "Adicionar um Gadget"
4. Cole o código do script desejado, e clique em "Salvar"

Scripts dos cursores:

Uma Cor

Laranja

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur220.cur), progress;}</style>

Azul

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

Vermenho

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur), progress;}</style>

Verde

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur102.cur), progress;}</style>

Amarelo

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur221.cur), progress;}</style>

Rosa

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur119.cur), progress;}</style>

Rosa Claro

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur223.cur), progress;}</style>

Duas Cores

Cinza e Laranja

<style type="text/css">body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur118.cur), progress;} a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur220.cur), progress;}</style>

Cinza e Vermenho

<style type="text/css">body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur118.cur), progress;} a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur117.cur), progress;}</style>

Cinza e Azul

<style type="text/css">body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur118.cur), progress;} a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

Cinza e Verde

<style type="text/css">body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur118.cur), progress;} a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur102.cur), progress;}</style>

Cinza e Amarelo

<style type="text/css">body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur118.cur), progress;} a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur221.cur), progress;}</style>

Cinza e Rosa

<style type="text/css">body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur118.cur), progress;} a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur119.cur), progress;}</style>

Cinza e Rosa Claro

<style type="text/css">body, a {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur118.cur), progress;} a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur223.cur), progress;}</style>

Continue Lendo »

Como inserir um contador de visitantes online no Blog.

Por: Herlan Santos Marcadores: Códigos/Scripts, Gadgets/Widgets, Tutoriais

whos amung

Olá pessoal, estou aqui novamente, ensinando a vocês como adicionar um contador de visitantes online em seu blog. O contador pertence ao site Whos.Amung.us, e nesse tutorial abaixo vou ensinar como o inserir o widget em seu blog.

Vamos ao Tutorial
1. Acesse o seguinte site: Clique aqui para acessar.
2. Agora clique no tipo de Widget que você deseja.
3. Após isso copie o código que o site lhe dará.
4. Acesse o painel de seu blogger, clique na guia "Layout"
5. Clique em "Adicionar um Gadget"
6. Cole o código recebido do site Whos.Amung.us
7. Caso deseje, dê um título ao Gadget e clique em "Salvar"

Continue Lendo »

Colocar o passáro do Twitter voando no blog

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais, Utilidades

Olá pessoal, neste post venho mostrar a vocês um código muito legal, que pode ajudar a você conseguir mais alguns seguidores em seu Twitter, é um passarinho do Twitter que fica voando pelo blog, onde se você desce ou sobe a página ele acompanha.
É muito simples de colocálo, veja só.

Passarinho do Twitter voando no blogger

Vamos ao tutorial
1. Faça login no painel de seu blog.
2. Clique na guia "Layout" e depois clique em "Adicionar um Gadget"
3. Agora procure o gadget "HTML/JavaScript" e clique nele
4. Cole o seguinte código abaixo:

<script><br />function click() {<br />if (event.button==2||event.button==3) {<br />oncontextmenu='return false';<br />}<br />}<br />document.onmousedown=click<br />document.oncontextmenu = new Function("return false;")<br /></script>
<script src='http://oloblogger.googlecode.com/files/tripleflap.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    var birdSprite="http://blogando-com-facilidade-codes.googlecode.com/files/Passarinho%20do%20Twitter%20%7BBcF%20image%7D.png";
    var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
    var twitterAccount = "http://twitter.com/HSDicas";
    var tweetThisText = "TWEET ME: <data:post.url/>";
    tripleflapInit();
//]]>
</script>

6. Substitua o trecho em vermelho pelo seu nome de usuário no Twitter.

Pronto! Clique em "Salvar". Até a próxima e ajudem nosso blog, compartilhando nos botões abaixo.

Continue Lendo »

Colocar "Leia Mais" nas postagens do blog

Por: Herlan Santos Marcadores: Códigos/Scripts, Tutoriais, Utilidades

Olá amigos, venho mostrar aqui a vocês como colocar "Leia Mais" nas postagens de seu blog do Blogger. Ele serve para dar somente um resumo nas páginas de seu blog, para que os visitantes vejam somente um pouco do artigo, e quando clicarem no "Leia Mais" verem o restante do mesmo.

Vamos ao Tutorial
1. Acesse o painel de seu blogger
2. Clique na guia "Modelo"
3. Após isso clique em "Editar HTML"
4. Marque a caixinha " Expandir modelos de widgets "
5. Segure Ctrl+F e procure por:

<div class='post-body entry-content'>
<data:post.body/>

6. Abaixo das linhas mencionadas cole o seguinte código:

7. Agora procure por:

]]></b:skin>

8. E cole abaixo o seguinte código:

Caso queira mudar a cor do link quando passa o mouse ou depois de clicado mude as cores ( color ) .rmlink a:hover ( quando passa o mouse ) ou .rmlink a:visited ( depois do link clicado )

9. Procure por:

</head>

10. Abaixo cole o seguinte JavaScript:

<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
  width: expression(this.width > 150 ? 150: true);
  max-height:120px;
  height: expression(this.height > 120 ? 120: true);

}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
       return document.getElementById(id).innerHTML.split(//)[0];
}

function getSummaryImproved(post,max){
  var re = /<.*?>/gi
  var re2 = /<br.*?>/gi
  var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
  var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
 
  post = post.replace(re4,'')
  post = post.replace(re3,'<br /> ').split(re2)
 
  for(var i=0; i<post.length; i++){
   post[i] = post[i].replace(re,'');
  }
var post2 = new Array();
for(var i in post) {
 //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
 if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

}

var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
 indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
  s = post2.join(indentBlank +' <br/>');
} else {
 var i = 0;
 while(s.split(' ').length < max){
  s += indentBlank + ' ' + post2[i]+'<br/>';
  i++;
 }
}  
return s;
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (//.test(content)) {
 div.innerHTML = getSummaryLikeWP(pID);
 div.style.display = "block";
}
else {

var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
 if(thumbnail_mode == "float") {
  imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
  summ = summary_img;
 } else {
  imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
  summ = summary_img;
 }
}

var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';

div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>

Agora é só clicar em "Salvar Modelo". Caso de dúvida comente, que tirarei as dúvidas.

Até a próxima.

Continue Lendo »

Novo Efeito CSS3 Elegante para Imagens das Postagens - Versão 3

Por: Herlan Santos Marcadores: Códigos/Scripts, Efeitos, HTML/CSS, Tutoriais

CSS3

Olá amigos, neste artigo venho mostrar um efeito CSS3 para blogs do blogger. Ele é muito bonito e elegante, ele dá um efeito de sombra como borda das imagens, e dá uma espécie de zoom quando você passa o mouse. É muito fácil adicionar esse efeito em seu blog.

Tutorial
1. Acesse o painel do seu blog e clique na guia "Modelo".
2. Após isso clique no Botão "Editar HTML".
3. Depois segure as teclas Ctrl+F e procure por:

]]></b:skin>

4. Acima da linha citada cole o seguinte código:

Pronto, clique em "Salvar Modelo".

Continue Lendo »

Widgets flutuante de botões para compartilhar nas Redes Sociais

Por: Herlan Santos Marcadores: Códigos/Scripts, Gadgets/Widgets, Redes Sociais

Botões de Compartilhamento Flutuante - Widget

Olá pessoal venho mostrar aqui um widget flutuante de botões de redes sociais que é muito legal para compartilhar os artigos de seu blog, ele já chama atenção pelo motivo de ficar flutuando e acaba atraindo os visitantes a compartilharem.

Então vamos aprender como colocá-lo no blog.
1. Acesse o Painel de seu blog, vá em "Layout"
2. Clique em "Adicionar um Gadget", clique em "HTML/Javascript" e cole o seguinte código:

<style type="text/css">   #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }   #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }   .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv8G6Mm6HtCXfWeWwwNBomyfEpGBK_8KzxcBW94XBmrGAcZ3SeXlnwEweU7VrVSgn5SpthRuuwKa2Kd13aHpOx-rIbrX-UCgm1wP9zAwqrYBa57ayLFK5GrBDVheYJafcXOimkA9IV3h4/) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }   .dock-container .custom_images a { display: block;  position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }   .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }   .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }   </style><br /> <div id="sharedock">
  <div id="dock">
  <div class="dock-container">
<div class="addthis_toolbox">
 <div class="custom_images">
 <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a><br />   <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a><br /> <a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a><br /> <a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a><br /> <a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a><br /> <a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a><br />   <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a><br />   </div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script><br />   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />   <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script><br />   <script type="text/javascript">   $(function () {   // Dock initialize   $('#dock').Fisheye(   {   maxWidth: 30,   items: 'a',   itemsText: 'span',   container: '.dock-container',   itemWidth: 50,   proximity: 60,   alignment : 'left',   valign: 'bottom',   halign : 'center'   }   );   });   </script>

Pronto, clique em "Salvar" e visualize.

Continue Lendo »