Barra de administração no Blogger igual ao Wordpress

Todos que usam o Wordpress.org sabem que assim que abrimos o blog existe uma barra para administração visível apenas para o editor do blog. Foi assim que decidi fazer uma igual mas com uma diferença, essa era para o Blogger.

Assim surgiu o seguinte código:

Atenção! Antes de fazer qualquer modificação no seu template faça um BACKUP do mesmo.

<span class="item-control blog-admin">
<div id="barra-admin">
<div class="barra">
<ul>
<li><span class="item-control blog-admin"><a href="http://draft.blogger.com/home">Painel </a></span></li>
<span class="item-control blog-admin">
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#editor">Nova Postagem</a></li>
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#allposts">Editar Postagens</a></li>
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#basicsettings">Configurações</a></li>
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#pageelements">Layout</a></li>
<li><a href="http://draft.blogger.com/blogger.g?blogID=XXXXXX#pendingcomments">Moderar Comentários</a></li>
</span></ul>
<div class="busca">
</div>
<form action="/search" id="searchform2" method="get">
<div>
<span class="item-control blog-admin"><input id="s" name="q" type="text" value="" /></span>
<span class="item-control blog-admin"><input id="searchsubmit" type="submit" value="Busca" /></span></div>
</form>
</div>
</div></span>

Você irá colar este código IMEDIATAMENTE depois da tag <body>. Onde estiver em vermelho, você substituirá pelo ID do seu blog. Na URL do seu painel de administração o ID estará logo depois da tag "blogID=".

Em seguida, você irá adicionar o código CSS no seu HTML:


/*--- Barra Admin---*/
#barra-admin{width:100%;height:20px;padding:5px;background:#CCC;position:fixed;box-shadow:#333 0 0 10px;margin-top:-2px}
#barra-admin .barra{width:1007px;margin:0 auto 0;}
#barra-admin ul{list-style:none;border:none;margin:-18px 0 0 0;padding:0;}
#barra-admin li{float:left;position:relative;display:inline;}
#barra-admin li a{display:block;color:#333;text-decoration:none;padding:7px;}
#barra-admin li a:hover{background:#666;color:#FFF;text-decoration:none;}
#barra-admin .barra #searchform2{float:right;margin:3px 30px 0 0;}

Salve!

Nova opção no Blogger

Quem usa o Blogger in Draft pode disponibilizar apartir de hoje da opção VISUALIZAR no modelo de postagem.

O comando é o seguinte, você cria uma postagem e quer ver se ela está boa antes de publicar, então você clica no botão Visualizar ao lado do botão SALVAR, ai a postagem é mostrada do mesmo jeito que seu leitor irá ver.

Navbar personalizada

Atualmente o Blogger só disponibiliza as cores alternativas e a navbar transparente.
As cores disponibilizadas são: Azul, Beige, Preto, Cinza, Transparente e Escuro Transparente.
Mas e se nós, blogueiros, quisessemos mudar a cor da Navbar, para qualquer cor? Simples, Aplique o código em VERMELHO, no CSS do seu modelo, mas ANTES, vá no painel Layout do Blogger, e, nas opções da Navbar, esolha o modelo CLARO TRANSPARENTE:


#navbar-iframe{background-image: url(http://i43.tinypic.com/fc3aqu.png); float: bottom-page;}

A minha ficou assim:

Botão Postagem Aleatória e Flutuante - Dicadedica

Olá criei um botão para a distração dos leitores do seu blog, oferecendo uma postagem aleatória a cada click.

Para adicionar este widget é só clicar no botão "+Add ao meu blogger" e escolher o blog que quer colocar esse widget, se quiser remover posteriormente, é só entrar no painel de controle do blogger >> layout>>elementos de página> abrir o componete e clicar em remover.



Botão de postagens aleatórias




















Script adaptado do blog: http://www.geekblogger.org/2009/12/show-random-posts-in-blogger-widget-for.html

Top 10 Melhores Dicas para Blogger de 2009 - (Retrospectiva Dicadedica)

[Print_dicadedica.png]
Hoje resolvi fazer uma retrô sobre as melhores dicas do Dicadedica para blogger de 2009,  você encontra dicas de SEO, Tutoriais para edição do template, rede sociais, web 2.0, widgets e tudo de útil para o seu blog, Confira!!!







  1. Widget Te linko de volta: , , ,






     
    Adicione um link no do dica dedica no seu blog e ganhe um link de volta altomaticamente, e disponibilize um widget que faz isso no seu blog para aumentar suas visitas.
    Então para descobrir os últimos blogs que postaram links para suas postagens ou para sua página inicial ou add esse widget, apenas siga os seguintes passos...





    Leia Mais.
  2. Aprenda a posicionar elementos div usando CSS no Blogger




    Você quer posicionar um widget, banner, texto ou qualquer elemento de página na tela usando CSS? isso parecia difícil e complicado, agora mais fácil, pegue seu código javascript ou Html de um widget contendo texto, formulários, banners, imagens ou qualquer outro elemento e ....

    Leia mais.
  3.  Adicionar aos favoritos Crossbrowser e Flutuantes
    Via twitter  a seguidora @d20009 me pediu para criar um widget para add aos favoritos,
    Adorei a idéia, e fiz várias tentativas, porém descobri que meu o código não funcionava no
    Mozila Firefox porem descobri uma forma de fazer funcionar em todos os navegadores que testei e...
    Leia mais.
  4. Ocultando a barra Blogger com MouseHuver






    Tutorial encina de forma rápida e simples como ocultar a navbar do blogger ao passar o mouse em cima, usando css e ...




    Leia mais.
  5. Miniatura das postagens e leia mais no rodapé do blogger






    É só olhar no final das postagens do dicadedica que irá reparar nas miniaturas de outras postagens relacionadas ao assunto que se está lendo, este efeito é obtido usando um plugin widgets do site...





    Leia mais.
  6. Mini Joguinho de digitação para colocar no blog




    É um ótimo widget que em um click estará instalado no seu blog, esse leve jogo ira prender a atenção dos usuários no seu blog aumentando o trafego e fazendo do seu e permitindo aos ...








    Leia mais.
  7. Como colocar imagens e banner entre as postagens do blogger?Este tutorial encina de maneira fácil como colocar imagens e banner no seu blog. Para isso você deve primeiramente fazer uma cópia de segurança do seu template no painel de controle do blogger, depois você...
    Leia mais.
  8. Seu blogger com botão add esta postagem ao diHitt
    Mostrar quais postagens foram mais votadas no diHitt e ainda permitir aos leitores votarem nas suas postagens, leia este rápido tutorial que encina a colocar...




    Leia Mais...
  9. Aprenda sobre o efeto Goobo e como isso pode te ajudar a aumentar as visitas do seu blog Hoje tudo que aparece em programas de audiência tipo fantástico, bbb 10 e outros assuntos, os internaltas vão logo buscar sobre...


    Leia Mais.
  10. Tutorial ensinando a colocar botões <> no Blogger

    Tutorial Deixando os links Mais Atraentes: "Postagens mais antigas" para Anterior Início e Próximo
    ...
    Leia mais.

     







Recado aos Novos Colunistas do Dicadedica!

Olá equipe!

Primeiramente boas vindas a todos vocês novos colunistas do blog e obrigado por aceitarem o convite:

Meu me chamo Moisés, tenho 26 anos, casado, tenho uma linda filhinha de 4 anos, trabalho na aérea de informática, primeiro como instrutor de informática hoje como webdesigner , sou uma pessoa praticaste de Tai Chi Chuan me interesso por blogs, animes e jogos de estratégia.
Sou uma pessoa direta, e ficarei feliz em ajudar todos vocês em seus blogs, no que estiver ao meu alcance.

Sugestão:(Alguns já o fizeram)
Cada um faça uma postagem falando sobre você e/ou seu próprio, nesta postagem podem conter por exemplo:
1 - Seu perfil ou foto
2 - Links para o seus blogs/sites
3 - banners e links

E quem quiser passar seu orkut, msn fique a vontade sou cadastrado no Me Adiciona
que tem todos estes dados!

Ultimas Notícias
Quem ainda não leu os últimos comentários do blog esta um pouco por fora do que aconteceu. Retirei algumas postagens que não se enquadravam com as regras do blog elas tinham coisas como programas e filmes piratas e algumas pornografias, bem como solicitei que algumas postagens não viesse com o conteúdo duplicado.

Os direitos e deveres estão no link acho que todos já leram:
http://dicadedica.blogspot.com/2009/05/dicadedica-convidou-voce-para.html


Respondendo dúvidas:
Posso colocar uma postagem que já tenho no meu blog?
R=Pode só peço que faça um título e um primeiro parágrafo diferente do que está no seu ou em outro blog.

EX:

De:
Limonada caseira
Para:
Suco de Limão feito em casa

Dica de título:
O que você digitaria no google para achar a dica que está escrevendo?
usa isso como título da matéria, o importante é ter relevância. acrescente palavras chave nos títulos e textos, quando houver mais de um tema na postagem usa negrito ou a tag [H1] no código.

Motivo:
Os motores de busca, excluem dos resultados os conteúdos duplicados, e retira o page rank dos conteúdos sem relevância. Se uma pessoa posta um conteúdo duplicado está prejudicando os dois sites. por isso peço que tenham o bom senso e faça o que acharem melhor para o seu blog e para o dicadedica.

Desta forma receberemos visitas dos usuários que digitam no google "suco de limão" e os que digitam "limonada" em ambos os blogs. rsrsrs

Quando o volume de postagem aumentar e com postagens de qualidade, os assinantes do rss vão aumentar e também os cliques nos links e anúncios que estão em suas postagens, por isso peço que postem bastante e postem com qualidade. (Postem toda semana)

Se você é um novo colunista e ainda não está com seu banner no dicadedica, é só enviar para meupcweb20@gmail.com que assim que eu tiver um tempo eu coloco sem falta, ok!

Mais uma coisa, podem postar programas e jogos (freeware, open sorce, shareware) e coloque o donwload para o baixaki (Não mandem link do rapdshare para o programas crakeados), em vez disso mande para o proprio site do programa para a versão demo.
Ex:
http://dicadedica.blogspot.com/2009/05/ccleaner-limpa-espaco-vazio-do-hd.html

Em caso de filmes e animes, não colocar dowload direto porque é ilegal em vez disso, fale sobre o mesmo e link para o trailer ou anexe o vídeo do youtube, videolog, etc... assim como nesta página:

EX:
http://dicadedica.blogspot.com/2008/10/o-livro-da-morte-death-note-primeira-e.html

Agradeço a todos e continuem gerando conteúdo e recebendo visitas em troca.

Abraços t+

Mais dúvidas podem mandar!!! fuiiiiiiiiiiii
--
Assinado:
Moisés
http://www.dicadedica.com

Posicione qualquer elemento de página em uma Div usando CSS Styles no blogger

Trenamento Expresso sobre alinhamentos CSS
Se você tem um código javascript ou Html de um widget contendo texto, formulários, banners, imagens ou qualquer outro elemento, você pode posiciona lo em local diferente do tradicional colocando o elemento dentro de um div e formatando via CSS styles para que fique em local oportuno.


Para que você precisaria mudar o posicionamento de um widget?
(EX:)

  • Você pode ter um banner suspenso como um popup
  • Um formulário de busca que em cima de uma imagem
  • Um menu com categorias para o blog que flutuando
  • Uma imagem alinhada no topo a direita do blog


Referência da posição:

Relativo (position: relative;)
O alinhamento esta referindo-se a posição do último elemento html colocado antes dele.
Absoluto(position: absolute;)
O alinhamento estará referindo-se a posição em relação ao navegador, portanto ao mover o rolamento da página o elemento não mudará sua posição, dando o efeito de flutuante ou suspenso.


-Alinhamentos css:-
alinhado ao topo
top:0px;

alinhado ao direita
right:0px;

alinhado em baixo
bottom:0px;

alinhado esquerda
left:0px;

EX:(topo 5px, direita 10px pixels de distancia da margem absoluta)

<div style="top: 5px; right:
10px; position: absolute;"
>

código do widget vem aqui!

</div>



No painel de controles do blogger acesse add um elemento de página javascript/html e cole o código do exemplo substituindo a frase código do widget vem aqui! pelo código da imagem, banner, widget, busca ou qualquer outro conteúdo que deseja alinhar no blog.

Clique na imagem ao lado para ampliar um exemplo de imagem!

NO blog estou usando o código de alinhamento para o top menu e imagens das latinhas flutuantes como absolutas e o posicionamento do banner do blog bem como o campo de busca como imagens com posicionamento relativas!!!


Veja tambem:
  1. Menu flutuante
  2. Rodapé 3 colunas
  3. Banner flutuante
  4. Banner entre postagens

Espero que este tutorial esclareça algumas dúvidas, existem muitos outros comando de alinhamento, porém estes são os fundamentais poderá conseguir novos códigos no endereço http://www.w3schools.com/css/default.asp , agradecimento especial ao @LucasPompeu que solicitou esta dica.

Tutorial Ícone Adicionar aos Favoritos Crossbrowser e Flutuante no Blogger

Bom dia, ontem fui acionado via Twitter pelo (a) @d20009, com um desafio muito interessante...

"Como faço para usar aquele seu tutorial de imagens e icones flutuantes com um ícone para add aos favoritos no meu blogger?"

Adorei a idéia, e fiz várias tentativas, porem descobri que o código que funcionava no Mozila Firefox, não funcionava no internet explorer ai eu descobri um código crossbroser mais que era incompatível com o blogger e seria necessário hospedar um arquivo .js em um servidor aparte...

O mais importante é que descobri outro código que funciona perfeitamente, depois ajustei ele para ficar flutuante e coloquei a imagem da latinha com a estrela que já havia baixado no tutorial anterior e pronto.

Segue abaixo o script para ser add como widget (Elemento de página gadget) no painel de controle do blogger, ainda não testei no wordpress, mais acredito que não ha nada que impossibilite o seu funcionamento, se alguém testar avisa aqui pra galera ok....



Código do wídget


<script language="JavaScript" type="text/JavaScript">
function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Muito mais do que dicas para
Blogs
","http://dicas.dicadedica.com","");
}
else { window.external.AddFavorite("http://dicas.dicadedica.com","Muito
mais do que dicas para Blogs
"); } }
// Fonte: dicasparablogs.com.br mais alterações do site dicas.dicadedica.com
</script>
<a href="javascript:void(favoritos());"><img title='Add aos favoritos' style='display:scroll;position:fixed;top:440px;right:-5px;'
src='http://img2.imagedash.com/1gZ9.png'
border='0'></a>

Se o código código anterior der problemas na instalação, instale este com as mesmas modificações...




Altere o que estiver em vermelho pelos paramentos do seu blogger:
  • Titulo do blog
    Muitomais do que dicas para Blogs
  • Endereço do blog
    http://dicas.dicadedica.com
  • Endereço da imagem
    http://img2.imagedash.com/1gZ9.png

Pegue mais ícones grátis aqui
http://dicas.dicadedica.com/2009/07/colocando-imagens-banners-ou-icones-com.html

É isso ai até a próxima dica, você pode informar onde pegou este tutorial caso alguém pergunte foi aqui no Dicadedica. Me add no twitter ok!!! t+

Slide no Blogger


Adicione um slider de noticias no seu blog, siga os passos abaixo e observe o bom resultado.
Clique aqui para ver um exemplo.

Obs: Antes de começarmos recomendo que faça um backup do seu template.


1. Já feito login no Blogger, entre em: Layout > Editar HTML.

Adicione o código abaixo antes de </HEAD>:

<script src="http://dl.getdropbox.com/u/1815091/Slider/mootools.v1.11.js" type="text/javascript"></script>
<script src="http://dl.getdropbox.com/u/1815091/Slider/jd.gallery.js" type="text/javascript"></script>

E está parte acima de ]]></b:skin>: Clique aqui!

2.Adicione está parte em um elemento HTML / JavaScript :

<style type="text/css">
#myGallery
{
    width: 100% !important;
    height: 250px !important;
}
</style>

<script type="text/javascript">
   function startGallery() {
      var myGallery = new gallery($('myGallery'), {
         timed: true
      });
   }
   window.addEvent('domready',startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<h3>Titulo da Imagem</h3>
<p>Descrição da imagem</p>
<a href="URL do Post" class="open" title="Read More"></a>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

<div class="imageElement">
<h3>Titulo da Imagem</h3>
<p>Descrição da imagem</p>
<a href="URL do Post" class="open" title="Read More"></a>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

</div>

Troque tudo o que for necessário por o que você quiser. Se quiser adicionar mais imagens copie o código abaixo e cole entre:  <div id="myGallery"> & </div>

<div class="imageElement">
<h3>Titulo da Imagem</h3>
<p>Descrição da imagem</p>
<a href="URL do Post" class="open" title="Read More"></a>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="full"/>
<img alt="Titulo da Imagem" src="URL DA IMAGEM" class="thumbnail"/>
</div>

Caixa de Pesquisa para Firefox e IE 7+

Crie uma caixa de pesquisa para Firefox e IE 7+, siga o tutorial da Mozilla e veja.

https://developer.mozilla.org/pt/Criando_plugins_OpenSearch_para_o_Firefox

Caixa de pesquisa com AutoLimpante

Você já deve ter reparado em algumas caixas de pesquisa que trazem
dicas de tela dentro do box de busca, que desaparecem ao serem
acionadas e retornam quando o cursor sai do campo.

O problema é confundir os campos de pesquisa com aqueles usados para
assinatura de newsletter.

Essas dicas de tela, ajudam a conduzir o visitante ao local correto e
não interferem na busca, pois desaparecem ao ser acionado o campo do
formulário.

Para instalar uma caixa de pesquisa com dica de tela no seu blog
ancorado no Blogspot é super fácil, basta o código abaixo que o Widget de Pesquisa Autolimpante estará na sua barra lateral:

<style>
#pesquisa {
width: 264px;
padding:0.15385em 0.23077em;
margin:0.23077em 0 0 0;
line-height:2.07692em;
white-space:nowrap;
background:#eaeaea;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
</style>
<center>
<div id="pesquisa">
<form id="cse-search-box" action="/search">
  <div>
    <input value="" name="cx" type="hidden"/>
    <input value="UTF-8" name="ie" type="hidden"/>
    <input name="q" size="31" type="text"/>
    <input value="Pesquisar" name="sa" type="submit"/>
  </div>
</form>
</div></center>
<center><span style="font-size: 80%; color: rgb(51, 51, 51);"> Widget
 <a href="http://ufo-nordeste.blogspot.com/2009/09/
caixa-de-pesquisa-autolimpante.html">UFO Nordeste</a></span></center>
<script src="http://dl.getdropbox.com/u/1815091/Pesquisa/pesquisa%20%281%29.js" 
type="text/javascript"></script>

Obs: Não retire os créditos!

Mudando a cor do fundo do Blog

O tutorial a seguir eu encontrei no site Dicas para Blogs e ensina a criar um HTML que quando adicionado na página do blog/site faz com que o leitor tenha a opção de escolher qual a cor do fundo do site, fazendo com que o blog fique mais interativo.
O tutorial é muito simples e lembrando que os créditos são para o Fabiano Roberto do Dicas para Blogs.

 Entre na pagina layout, adicionar gadget, html/javascript e coloque esse código:

Clique aqui para ver o código.
Veja que as três linhas são basicamente iguais, portanto para usar outras cores ou dar mais opções só precisa alterar o texto com o nome da cor e o código da cor de fundo, no caso da primeira linha #0000ff e azul, cuidado para não apagar as aspas nem outros sinais do código senão ele não funcionará.

Outra coisa que você precisa alterar é na pagina editar html, procure por: body{....} se dentro das chaves do body tiver algo definindo a cor de fundo você precisará apagar senão o código para mudar a cor de fundo não funcionará, veja se tem background-color ou background-image: url(......) e se encontrar apague.

Infelizmente para usar esse efeito no seu blog ele sempre aparecerá com o fundo branco, pois se definir outra cor de fundo não conseguirá fazer o código que indicamos funcionar e alterar a cor da pagina.

Template Blogger 2.0

Este novo template é uma versão melhorada do template antigo o TEMPLATE BLOGGER. Essa nova versão trás:

2 colunas ( 1 na sidebar, 1 post );
Retirada navbar;
3 colunas no rodapé;
Navegador Personalizado;
Logotipo oficial do blogger ao lado do titulo;

Pegue o código aqui.

Obs1:  Não retire os créditos !

Template Blogger

Decidi criar este template para homenagear o Blogger, é um template com:
3 colunas ( 2 na sidebar, 1 post );
Retirada navbar;
2 colunas no rodapé;

Pegue o código aqui.

Obs1:  Não retire os créditos !

Campanha para tirar o IE 6 e outros navegadores antigos

Se você tem site ou blog participe hoje mesmo da campanha de morte aos navegadores antigos criada pelo site IMASTER para participar desta campanha basta acessar a página Morte ao Ie 6
copiar o código do banner e colar no código fonte do seu site ou blog.

Resultado: Irá aparecer um banner no topo do da página apenas para quem usa navegadores desatualizados que conterá um link para atualizar para as versões mais recentes do ie , firefox, opera e outros!!!



Tutorial para colocar o script no blogger

  1. Acesse o painel de controle do blogger
    www.blogger.com
  2. Clique em Layout
  3. Clique em Editar Html
  4. Faça backup do seu template para poder voltar se houver problemas clicando em
    "Baixar modelo completo"
  5. Encontre o trecho de código

    e logo abaixo cole o scrip que está disponível Nesta página
  6. Salve e é só isso!!!





    Você tambem pode optar por começar a usar o navegador modificado para pendriveFirefox Portable pelo dicadedica clicando aqui:

Email do futuro após a morte

Que tal escrever um email para futuro/

sim é uma idéia maluca feita por este site aqui Oh:
http://futureme.org/

a intenção dele é anda mais, nada menos que:
vc escreve um email.
coloca o nome ou apelido seu o da pessoa
e o mail dela
ou envie pra vc mesmo caso queira fazer um teste
depois seleciona a data e o email só será enviado na data que vc marcou!
por exemplo: 13 de julho de 2011 o email só chegará nesta data.

legal né?
quiser a dica tá data inutil mas interessante!

Postado por Ferrockxia do



Participe do cadastro de blogs do UFO NE

Participe do cadastro de blogs do UFO NE, clique aqui e preencha o formulário, assim que você terminar irá receber um e-mail de confirmação.

Como funcionará a barra (e o widget) do “UFO Nordeste - Blogs” ?

Todo o blog linkado, terá que inserir, obrigatóriamente, a “BarraBlogs” no topo do seu Blog. O código da barra está logo abaixo e deverá ser inserida logo abaixo da tag <body> do código fonte.


<iframe frameborder='no' height='28' id='' leftmargin='0' marginheight='0' marginwidth='0' name='blogamos' scrolling='no' src='http://barra-blog2.blogspot.com/' topmargin='0' width='100%'></iframe>


<iframe frameborder="no" height="28" id="" leftmargin="0" marginheight="0" marginwidth="0" name="blogamos" scrolling="no" src="http://barra-blog1.blogspot.com/" topmargin="0" width="100%"></iframe>

Update: O código do widget estará, exclusivamente, disponível na nossa comunidade no orkut. Lá também você encontrará os códigos acima.

Meu blog é do Wordpress.com e outras ferramentas que não alteram o ‘HTML’ como proceder?

Simples. Pegue o código do Widget em nossa comunidade no orkut e cole o código como “Texto/Html”, geralmente disponível em todos as ferramentas. Melhor dizendo, cole o código da mesma forma que você insere os códigos de banners dos seus parceiros.

Todo o blog, para ser destacado, primeiramente terá que ser cadastrado no BlogBlogs e no Technorati.

[UPDATE] Lembrando ainda que: O Blog que estiver na Barra e retira-lá , cederá seu lugar a outro Blog e assim, sucessivamente.[/UPDATE]


Como participar da BarraBlogs?

<a href=”http://ufo-nordeste.blogspot.com/2009/08/blogs.html”><img src=”http://i31.tinypic.com/24y9qtw.gif” width=”120″ height=”60″ ></a>

Insira este banner em seu blog (em lugar de destaque), insira o código da barra (ou do widget) que está logo acima, faça um post para divulgar a campanha e junte-se a nós!!!

Após esse procedimento, você estará fazendo parte do mais novo grupo de apoio aos blogueiros!!!

Menu flutuante - Dica

Depois de algumas horas consegui modificar o menu de que desce ao da rolar página. O modelo antigo era esse ao lado (img 1), agora é esse ao lado (img 2). Para obter o menu, copie o código abaixo e cole no HTML do seu blog, exatamente acima da tag </body>.




<style type='text/css'>
<!--
#mininavbar
{
display:scroll;
position:fixed;
bottom:1px;
right:1px;
z-index:99;
}
#mininavbar a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mininavbar img
{
border:0;
}
#mininavbar a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
-->
</style>
<script language='JavaScript'>
    function cima() {
    window.scrollBy(0,20); // velocidade para cima
    scrolldelay = setTimeout(&#39;cima()&#39;,100); // tempo da rolagem
    }

    function baixo() {
    window.scrollBy(0,-20); // velocidade para baixo
    scrolldelay = setTimeout(&#39;baixo()&#39;,100); // tempo da rolagem
    }

    function stopScroll() {
    clearTimeout(scrolldelay); // para o rolar ao tirar o cursor do link
    }

    </script>
<div id='mininavbar'><a href='#' onClick='window.location.reload()' title='Atualizar página'><img src='http://soulouko.googlepages.com/refresh.png'/></a><a href='SEU-BLOG' title='Página principal'><img src='http://soulouko.googlepages.com/house.png'/></a><a href='http://feeds.feedburner.com/SEU-ID' title='Feed'><img src='http://i32.tinypic.com/jfc6bn.png'/></a><a href='URL DA SUA COMU' title='Orkut'><img src='http://i32.tinypic.com/2cddds4.gif' width="16px" height="16px" /></a><a href='' onmouseout='stopScroll()' onmouseover='baixo()' title='Ir para o topo da página'><img src='http://soulouko.googlepages.com/topopg.png'/></a><a href='' onmouseout='stopScroll()' onmouseover='cima()' title='Ir para o final da página'><img src='http://soulouko.googlepages.com/down.png'/></a></div>
<a name='finalpg'/>


Em SEU-BLOG escreva a url do seu blog, em SEU-ID escrava a sua ID do Feedburner, em URL DA SUA COMU coloque o endereço da sua comunidade no Orkut.

Créditos: Blog do Lenon

Tutorial SEO: Gere parceiros de Link automaticamente online

Vocês já devem ter visto várias dicas de SEO para melhorar o seu page rank aumentando o número de parcerias. O problema é que nem sempre temos tempo para ficar colocando e retirando links parceiros e dando o devido valor aos parceiros que tanto nos ajuda na popularização do nosso blog, Então resolvi trago uma ferramenta para agilizar e ao mesmo tempo atrair mais trafego a Referer.org

Como o próprio nome diz, quando esta ferramenta for inserida no seu site ela irá linkar automaticamente todos os blogs e sites que verdadeiramente divulga o seu blog.

Ela irá vasculhar as origens dos visitantes e classificar na ordem dos que mandam mais visitas, veja abaixo todas as vantagens da ferramenta...


Vantagens do Referer.org
  1. Insere automaticamente o link dos seus parceiros mostrando agilidade e eficiência
  2. Cria um menu expansivo para que todos os parceiros sejam vistos mesmo aqueles que só enviaram uma única visita.
  3. Se adequa facilmente a qualquer template, porque incorpora o CSS e estilos da página.
  4. A opção expandir lista vem com a miniatura dos blogs participastes.
  5. É possível assinar o RSS da sua lista clicando em expandir lista depois no rss ex:(RSS Feed)
  6. Também é possível bloquear sites indesejáveis da lista!
  7. Limitar o número de blogs que irá aparecer na lista da página
  8. Ferramenta Online e Free
Por tudo isto eu uso o referer.org e recomendo!

Tutorial REFERER.Org

1 - Gere o código digitando o endereço do blog/site em Live Reports e clicando em Go:




2 - Como ficará no seu Lista na página do blog:



3 - Como ficará a lista completa em nova janela (Expand this list>>):



4 - Como bloquear site da lista(clique em Options par abrir as opções ocultas):


5 - Agora é só add o código gerado, como um widget (elemento de página) no seu blog.

aproveite e ganhe um parceiro agora mesmo é só colocar meu banner e seu site já estará na minha lista automáticamente:

Link-me

Dicas

Ou

Dicas para blogs

Ou

Dicadedica


Dúvidas é só perguntar, Obrigado!

Colocar Destaque Postagens Relacionadas com Imagem e Leia Mais no Blog

Quem reparou no rodapé de todas as postagens do dicadedica, viu algo diferente, é widget dos destaques em miniaturas das postagens relacionadas do blogger.

Eu estava a procura de colocar um item de tópcos relacionados que fosse útil e atraente ao mesmo tempo, e então me deparei com este widget que você vê ao lado.

Me surpreendeu a facilidade em que foi para inserir no blog com apenas alguns cliques você pode ter issto no seu blog tambem.
Outra coisa que gostei, é que que o site o ingles onde peguei o widget estava em inglês, ele veio em português, "Poderá também gostar de: "

Sem mais delongas...

O site gerador widget de imagens miniatura das postagens em destaque é o Linkwithin
Para colocar este elemento de página acesse e siga:
http://www.linkwithin.com/learn?ref=widget
1 - Ao abrir o site, de cara você vai ver campos
coloque nestes campos: Email, Link para o seu blog, a platforma do blog, e a Color.
2 - Agora clique no botão "Get Widget"

Irá abrir uma página com o tutorial de como inserir o widget, muito fácil por sinal...
segue abaixo a tradução para colocar no blogger mais tambem da para colocar em outras plataformas:

Instale o Widget no Blogger




1. Clique [no botao] para abrir Blogger em uma nova janela, e siga os passos abaixo nessa janela. Faça login, se necessário.


2. Escolha um blog, se tiver mais de um e, em seguida, clique em Adicionar Widget.




3. (Opcional) Para um melhor desempenho, arraste e solte a caixa do LinkWithin da caixa para baixo das "Postagens do Blog".




4. clique em Salvar.




E pronto! O item deverá aparecer no seu blog.

NOTA: A qualidade das histórias recomendado vai melhorar assim que concluir o nosso processo de verificação do seu blog. Isso pode levar até várias horas, dependendo do número de notícias no seu blog.
Instalar o widget em outro blog?

----------------------
Aqui funcionou tudo direitinho, mais se ai deu problema é só falar _o/