Retirar número dos Marcadores

Quando colocamos marcadores no blog sempre aparece o numero de postagens ao lado de cada item, mas é possível retirar esse numero e deixar somente o marcador que colocamos, ou seja, em vez de aparecer, por exemplo, Musica (10) aparecerá somente Musica.
Para fazer isso entre na página editar HTML e clique para Expandir modelos de widgets e procure pelo trecho abaixo, queremos lembrar que logo no começo você encontra a palavra Marcadores aqui é o titulo que você usa nos seus marcadores, portanto talvez no seu blog não esteja exatamente igual:

<li>
<b:if cond='data:blog.url == data:label.url'>
<a class='activelabel' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
<b:else/>
<a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
</b:if>
</li>

Basta apagar as partes marcadas em vermelho e salvar. Abra o seu blog e verifique o resultado.


.

Texto deslizando

Texto deslizando

Coloque aqui seu texto! ! !

Texto rolante, texto deslizando, texto móvel, subindo, fazer uma faixa de texto... Existem dezenas de modos de descrever o texto que se move na pagina, mas o código para fazer isso é o marquee.
O texto acima foi feito com o seguinte código:

<marquee behavior="alternate" width="400" height="50" scrolldelay="2" scrollamount="2" direction="left" onmouseover="this.stop()" onmouseout="this.start()">Coloque aqui seu texto! ! !</marquee>

Agora vamos entender como isso funciona:

behavior="alternate" o texto fica indo e voltando.
behavior="scroll" é o modo normal, o texto entra por um lado e sai pelo outro
behavior="slide" o texto entra e para quando chega ao final da linha.

scrolldelay="2"
scrollamount="2"

direction="left" é a direção que o texto se desloca, pode ser left(esquerda), right(direita), up(para cima) down(para baixo)

width="400" isso é a largura que o texto percorerá. Pode ser qualquer valor e para que ocupe tudo o espaço disponivel simplesmente apague essa parte do código.
height="50" o mesmo que width, mas esse controla a largura.

onMouseOver=this.stop() onMouseOut=this.start() e finalmente esta parte do código que faz com que o texto pare de movimentar quando o mouse está sobre ele.

Bye Smoker

Contador de visitas

Contador de visitas

O código abaixo mostra quantas vezes uma pessoa visitou seu blog, ele funciona com base nos cookies, ou seja, quando os cookies do navegador(Internet Explorer, Firefox, Opera) forem excluidos a contagem será perdida, mas isso não é um problema pois quase ninguém faz isso. Para usar esse código é bom simples basta copiar e colocar no lugar que você deseja que apareça no seu blog. No começo do código tem a frase "Obrigado por sua visita! Você já esteve aqui", você pode alterar para qualquer frase.

Obrigado por sua visita! Você já esteve aqui
<script language=JavaScript>
function getCookieSlsv (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieSlsv (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString()))
+
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie(name) {
var exp = new Date();
FixCookieDate (exp); // Correct for Mac bug
exp.setTime (exp.getTime() - 1); // This cookie is history
var cval = GetCookie (name);
if (cval != null)
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

var expdate = new Date();
var num_visits;
expdate.setTime(expdate.getTime() + (365*24*60*60*1000));
if (!(num_visits = GetCookie("num_visits")))
num_visits = 0;
num_visits++;
SetCookie("num_visits",num_visits,expdate);
document.writeln(num_visits+" vezes!");
</script>


Para mostrar visitantes online, ou seja, quantas pessoas estão visitando seu blog naquele momento você pode pegar o código aqui. Outra coisa bem interessante é saber o total de visitas e também saber de onde vieram seus visitantes para isso o Sitemeter é muito bom, ele fornece estatística detalhadas informa de que site vieram suas visitas, de que cidade ou país, resolução de tela, navegador que seus visitantes usaram e outras coisas.


Byer Smoker

Menu jump

Menu jump

O menu de salto é fácil de colocar e tem algumas coisas que podemos colocar para deixa-lo mais bonito, veja o exemplo:

Primeira Parte

<span style="color: rgb(255, 0, 0);"><script language="JavaScript" type="text/JavaScript"></span> <span style="color: rgb(255, 0, 0);"><!--</span> <span style="color: rgb(255, 0, 0);">function MM_jumpMenu(targ,selObj,restore){ //v3.0</span> <span style="color: rgb(255, 0, 0);">eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");</span> <span style="color: rgb(255, 0, 0);">if (restore) selObj.selectedIndex=0;</span> <span style="color: rgb(255, 0, 0);">}</span> <span style="color: rgb(255, 0, 0);">//--></span> <span style="color: rgb(255, 0, 0);"></script></span>

Segunda Parte:

<span style="color: rgb(255, 0, 0);"><form name="form1"></span> <span style="color: rgb(255, 0, 0);"><select style="width: 300px" name="menu1" onChange="MM_jumpMenu('parent',this,0)"></span> <span style="color: rgb(255, 0, 0);"><option>Links</option></span> <span style="color: rgb(255, 0, 0);"><option style="background-color:#cccccc"value="http://dicasparablogs.blogspot.com">Dicas para Blogs</option></span> <span style="color: rgb(255, 0, 0);"><option value="http://jornaljd.blogspot.com">Meu Jornal</option></span> <span style="color: rgb(255, 0, 0);"><option style="background-color: #cccccc"value="http://frasecurta.blogspot.com">Frases</span> <span style="color: rgb(255, 0, 0);">Curtas</option></span> <span style="color: rgb(255, 0, 0);"><option value="http://cidadeweb.110mb.com">Cidade Web</option></span> <span style="color: rgb(255, 0, 0);"></select></span> <span style="color: rgb(255, 0, 0);"></form></span>

Basta colocar esse código no blog e mudar os links e já está funcionando, mas ele pode ver alterado em varias coisas por exemplo para mudar a largura desse menu é só mudar o numero 300 nesta parte style="width: 300px".

Outra coisa é a cor de fundo que pode ser usada a mesma para todo o menu ou uma para cada linha colocando o código style="background-color: #cccccc" e naturalmente pode ser de qualquer, para trocar de cor é só mudar isto #cccccc. Para colocar a mesma cor em todo menu coloque essa parte background-color: #cccccc junto com o que define a largura, deixando ele desse jeito: style="width: 300px;background-color: #cccccc".

Se quiser um menu convencional pode retirar essas partes mencionadas a cima, e naturalmente o valor (300) e a cor (#cccccc) são apenas exemplos você pode mudar para combinar da melhor forma possível com seu blog.

No Blogspot as duas partes do código podem ser colocadas juntas através da página layout que funcionará normalmente, caso você use esse código em outro blog ou site e não funcionar é por que o correto é colocar a primeira parte do script entre as tags <head> e </head> , fazendo isso ele funcionará normalmente.


bye Smoker

Bloquear o botão direito do mouse

Algumas pessoas tentam evitar que copiem coisas do seu site ou blog bloqueando o botão direito do mouse, esse código abaixo bloqueia o botão direito do mouse no Internet Explorer e Firefox.

<script> function click() { if (event.button==2||event.button==3) { oncontextmenu='return false'; } } document.onmousedown=click document.oncontextmenu = new Function("return false;") </script>

Você deve colocar esse código antes da tag </head> no seu site e pronto o botão direito não funcionará mais em nenhuma parte do seu site nem nas imagens nem nos textos. No Blogspot você coloca esse código pela pagina editar html, nos outros blogs deve ser parecido com isso afinal todos permitem algumas alterações no código html do blog.
Mas lembre-se que apesar de usar esse ou qualquer outro código de bloqueio de botão direito, impedir selecionar texto e outras coisas, nenhum deles é 100% seguro, portanto dependendo do conhecimento de código da pessoa que está querendo copiar algo ela sempre dará um jeito de conseguir.


byer Smoker

Cópia de texto PROTEJA BLOG COMTRA COPIA

Há algum tempo publicamos um script que não deixa selecionar texto,
mas ele apresentou alguns problemas então encontramos esse que parece funcionar
adequadamente. Mas tenha a certeza que nenhum código protegerá completamente
o conteúdo do seu site, pois existem muitas formas de copiar um site.

<script language="JavaScript1.2"> function disableselect(e){ return false } function reEnable(){ return true } //if IE4+ document.onselectstart=new Function ("return false") //if NS6 if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script>

Na página editar html coloque esse código antes da tag</head>,
e isso impedirá a seleção de textos.

Seu Widgets

Uma maneira legal de divulgar seu site é fazer um Widgets, pois além de colocar no seu site, você ainda pode disponibilizar o código numa caixinha link-me do mesmo jeito que faz com seu banner, achei dois sites que fazem esse serviço:

Widgetbox

Spring Widgets

Naturalmente devem existir outros sites que façam esse serviço, mas o que vale é a idéia, portanto se não gostar desses, fica a sugestão que vale a pena pesquisar. Estes sites precisam fazer cadastro, mas não é difícil. Depois na hora de criar o seu widgets coloque a url do seu feed(RSS), que no caso do blogspot é http:// S E U B L O G .blogspot.com/atom.xml, e após isso é só escolher alguns detalhes sobre tamanho e aparência. O exemplo abaixo é o widget do nosso outro blog Frases Curtas que foi feito no site Spring Widgets

Quase esquecemos de dizer, caso você queria colocar isso numa caixinha link-me, é só colocar o código do widget e colocar no lugar do código do banner na caixinha, isso fica desse jeito:

<p align="center">Código do Widget
<br /><textarea rows="3" cols="12" onFocus="this.select()"
onMouseOver="this.focus()" name="textarea">Código
do Widget&lt;/a></textarea></p>


And Moker

Colocar Rádio no Blog

Muitos blogueiros pergunta como fazer para colocar uma radio ou suas músicas favoritas no blog isso não é difícil, isto não é difícil, você precisa pegar um código em uma das rádios existentes na internet e colocar no seu blog pela pagina layout, adicionar gadget, html/javascript. Aqui temos links de alguns sites que fornecem essas rádios para colocar no blog:

Radio-Fussion
Radio-Kot
Last FM
Radio Fusion
Deezer

Além desses encontramos nesse site um script que pode ser modificado para varias rádios diferente, testamos com duas delas e já deixamos o código pronto para colocar no seu blog:

Rádio Web Rock
Jovem Pan

Contudo você precisa avaliar bem se realmente deveria colocar uma radio ou música no blog principalmente se esta iniciar automaticamente, por que muitas vezes seus visitantes podem estar ouvindo outra música ou estão em silencio e de repente levam um susto com uma música começando sem ele saber de onde vem. Outro problema é o gosto músical de cada pessoa, certamente a música que você acha maravilhosa, outros não suportam, talvez se esse blog tivesse música você estaria achando ela ridícula e procurando feito louco onde parar com a música. Isso se não perdesse a paciência e saísse do blog sem nem olhar direito. Por essas razões pense bem se colocará músicas no seu blog e quais colocará. Uma opção para colocar apenas uma música no blog é o MP3tube, mas o visitante vai precisar clicar no play para iniciar a música. Bye smoker

Usando Melhor os Contadores de Visitas

Colocar um contador de visitas é bem simples, existem vários sites que fornecem o serviço gratuitamente, aqui tem uma lista de vários contadores de visita grátis, alguns recomendados pela própria pagina de ajuda do blogspot:

Google Analytics
Site Meter
Bravenet Hit Counter
FreeStats
Easy Hit Counters
StatCounter
Feedjit
Who's amung
BlogUtils

Os últimos 3 da lista mostram visitantes online, ou seja, que estão no seu site naquele momento. Alguns desses sites é necessário fazer cadastro para pegar o código, mas eles são grátis, depois que pegar o código entre na pagina layout, adicionar gadget, html/javascript e coloque o código do contador, clique para salvar e pronto.

Mas para que serve um contador de visitas? Parece uma pergunta boba, mas não é somente para enfeitar o blog ou apenas mostrar quantas visitas já tivemos. Existem varias estatísticas e informações úteis nesses contadores, como por exemplo:
Qual a resolução (tamanho) de tela de nossos visitantes?

Eles usam qual navegador (Internet Explorer, Firefox, Opera...)?
Essas perguntam vão ajudar na hora de modificar o layout ou colocar algumas coisas no blog, quando escrevi esse texto a maioria dos visitantes deste blog usava Internet Explorer e tem uma resolução de tela 1024x768, então devemos deixar o blog da melhor forma possível para esta configuração e não para a do nosso computador, afinal o objetivo de todo blog é agradar seus visitantes e se não é possível deixar ele perfeito em todas as configurações e navegadores, devemos dar prioridade para a maioria..

De qual site eles vieram? Outro blog? Site de busca?
O que pesquisaram para chegar em nosso blog?
Com essas informações podemos melhorar nosso conteúdo, por exemplo, publicando coisas que as pessoas procuram. Ainda podemos saber de quais sites recebemos mais visitas isso pode ser útil na hora de fazer parcerias e outras coisas.

Enfim seja qual for o contador que usar, tente explorar melhor as informações que tem nele e aproveitar da melhor forma possível e certamente acharam muitas coisas interessantes e úteis.

Mensagem ao entrar no blog

Embora não seja recomendável algumas pessoas gostam e procuram como colocar uma mensagem ao entrar no blog, aquela caixinha de texto escrito bem vindo ou algo parecido com isso.
O código para fazer isso é:

<script>alert('texto do alerta');</script>

Primeiro altere o texto da mensagem(texto do alerta) para o que deseja depois entre na página editar HTML e coloque esse código antes de</body> , e já está pronto é só clicar para salvar.




xD

Removendo a Barra de Navegaçao do blogger

Basta adicionar o seguinte código antes de fechar a tag HEAD do template:

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

Alterando aparencia das colunas

Para fazer alterações de bordas e planos de fundo nas colunas do template, procure no codigo do template:

#main-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;
margin-left: 0px;
width: 400px;
float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background-color:#FFFFFF;
border: 2px solid $bordercolor;
margin-right: 0px;
width: 165px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Onde #main-wrapper é a coluna de postagem e #sidebar-wrapper a do perfil.
Se você deseja colocar uma cor como plano de fundo da coluna use background-color: e o código da cor. Se deseja uma imagem, coloque background: url(endereço da imagem) repeat;

Em border você estabelecerá, como vimos em Header, a largura, cor e textura da borda. Aqui valem os mesmos procedimentos. Se você deseja colocar borda somente no topo e em uma das laterais, por exemplo, é só colocar:
border-top: 1px solid #00000; (largura em pixels e cor, somente como exemplos)
border-left: 1px solid #000000;

Assim a coluna terá borda somente no topo e do lado esquerdo. Se deseja borda em toda volta da coluna é só colocar:
border: 1px solid #000000; (sem precisar estabelecer onde a borda deve aparecer.)

Width estabelece a largura da coluna.

Alterando largura das colunas

Procure no seu código HTML as seguintes tags:


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}


#main-wrapper {
background-color: #F3F3EB;
border-top: 3px solid $bordercolor;
border-left: 3px solid $bordercolor;
border-bottom: 3px solid #43433B;
border-right:3px solid #43433B;
margin-left: 5px;
width: 550px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background-color: #F3F3EB;
border-top: 3px solid $bordercolor;
border-left: 3px solid $bordercolor;
border-bottom: 3px solid #43433B;
border-right:3px solid #43433B;
margin-right: 0px;
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Tudo o que está contido em #main-wrapper se refer a coluna do post. Assim, para aumentar ou diminuir a largura desta coluna você deve alterar os valores que estão em WIDTH.

Tudo o que está contido em #sidebar-wrapper se refere a coluna lateral do template (no caso de um template com uma coluna em cada lateral, aparecerá duas vezes). Aqui também os valores de WIDTH devem ser alterados. Cuidado para não desconfigurar completamente o template! Obedeça as dimensões que estão contidas na tag acima, em #outer-wrapper , sem ultrapassá-la!

Adicionar titulo no blog

Para adiconar o titulo ao blog, vá em Modelo, Adicionar Cabeçalho e coloque o título e a descrição do seu blog. Salve e arraste o retângulo Cabeçalho até o topo da página. Fazendo isso, você verá um retângulo maior, pontilhado. Solte o titulo alí e salve.

Adicionar marcadores de postagem

Os marcadores servem para separar seus posts em categorias ou assuntos, facilitando a visualização dos mesmos. Para adicionar marcadores, vá em Modelos, Adicionar Marcadores. Quando terminar de escrever um post, no retângulo onde se lê "Marcadores para esta postagem", você dará um nome para a categoria em que o post se encaixa. Após a primeira vez que você insere um marcador, a opção fica memorizada. Depois, em Modelo, arraste o retângulo que corresponde a Marcadores para a posição que desejar, no template.
Um exemplo de como ficam os marcadores na lateral do template:
música(2)
poesia(4)
humor(2)
Onde os números em parênteses se referem a quantidade de posts sobre o tema.

Retirando a numeração ao lado dos marcadores

Vá no HTML do seu blog, clique em Expandir Modelo de Widgets e procure por:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/>< /a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Apague o que está em negrito, visualize e se estiver ok (ou seja, se tiver sumido a numeração), salve. OBS: aqui no exemplo, a widget Marcadores está seguida de <div id='sidebar-wrapper'>, mas não significa que esteja assim no seu código. Também não significa que o título da sua widget seja Marcadores: faça a busca pelo título que escolheu.

Colocando cor ou imagem nos titulos da sidebar

Para colocar cor ou mesmo uma imagem nos títulos da sidebar,procure este trecho do código do seu template (lembrando sempre que todos os tutoriais são feitos baseados nos códigos do Mínima, do Blogger - sendo assim, é normal que existam diferenças entre o que apresento aqui e seu próprio template)

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

acrescente abaixo:

.sidebar h2{
color: $sidebartextcolor;
line-height: 1.5em;
background: #000000;
margin: 0px;
padding: 8px 0 0 0;
text-align: center;
}


Se no seu template já existir este trecho do seu código, é só colocar background: (valor da cor); e ter certeza de que margin:0px;. Padding afasta o título do topo da coluna - você pode alterar este valor ao seu gosto. Para que o texto não fique colado na lateral esquerda (já que margin = 0) coloque texto alinhado no centro.

Se você deseja inserir uma imagem, por exemplo, é só colocar:

*se a imagem tem o mesmo tamanho e altura especificada para o titulo:
background: url(endereço da imagem);

*ou, se a imagem for menor e você deseja que ela se repita:
background: url(endereço da imagem) repeat-x;

Adicione uma Ferramenta de Busca

De maneira rápida e rasteira. Este pequeno código permite a você adicionar uma busca interna no conteúdo do seu blog hospedado no Blogger.

Tudo que você precisa fazer é ir na tela de edição de layout do Blogger, clicar em “Elementos da Página” .E escolher a opçao "Adicionar um elemento de página"e depois vai em "HTML/JavaScript "

Depois, basta adicionar o código abaixo no campo de edição da janela que irá abrir e pronto!

<form action="/search" style="display: inline"
id="searchthis" name="searchthis" method="get">
<input id="search-box" name="q" />
<input id="search-btn" value="Buscar" type="submit" />
</form>

Adicione um Caixa de Texto ao blog

Com esta caixinha de texto é possível também publicar códigos ou mesmo dar um destaque em um post.

<textarea style="COLOR: rgb(0,0,0); BACKGROUND-COLOR: #ffffff" rows="5" cols="40">ESCREVA AQUI O SEU TEXTO</textarea>

Exemplo:

ESCREVA AQUI O SEU TEXTO

Alterando tamanho da coluna do titulo do blog

Vá no codigo do seu template e procure por:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Modifique o valor de width para um que corresponda à medida do template.