Bandeiras para traduzir seu blog

Olá Amigos!

Ultimamente tenho recebido vários emails de leitores atrás deste código para colocar as bandeiras de tradução do blog para outras línguas, na seção Tutoriais, postei um mostrando passo a passo, mas como muita gente ainda esta com dificuldades, abaixo está o código que uso aqui no Info Blogui, basta copiar e onde estiver Info Blogui, mude para o nome do seu Blog/site.

<div id="tradutor">
<a class="bandeira" href="#" target="_blank" rel="nofollow"
title="Info Blogui in English"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cen&hl=en');
return false;"><img border="0" alt="English" width="24"
src="http://img142.imageshack.us/img142/9283/unitedkingdomgreatbritalr4.png"
height="24" title="Info Blogui in English"/></a>
<a class="bandeira" href="#" target="_blank" rel="nofollow"
title="Info Blogui en Español"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Ces&hl=en');
return false;"><img border="0" alt="Spain" width="24"
src="http://img142.imageshack.us/img142/8160/spainxu5.png" height="24"
title="Info Blogui en Español"/></a>
<a class="bandeira" href="#" target="_blank" rel="nofollow"
title="Info Blogui en Français"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cfr&hl=en');
return false;"><img border="0" alt="Français"
width="24"
src="http://img222.imageshack.us/img222/3904/francaisbandeira.png"
height="24" title="Info Blogui en
Français"/></a>
<a class="bandeira" href="#" target="_blank" rel="nofollow"
title="Info Blogui in Deutsch"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cde&hl=en');
return false;"><img border="0" alt="Deutsch" width="24"
src="http://img201.imageshack.us/img201/6388/alemanhabandeira.png"
height="24" title="Info BLogui in Deustsch"/></a>
<a class="bandeira" href="#" target="_blank" rel="nofollow"
title="Info Blogui in italiano"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cit&hl=en');
return false;"><img border="0" alt="Italian" width="24"
src="http://img230.imageshack.us/img230/1032/italyjj1.png" height="24"
title="Info Blogui in italiano"/></a>
<a class="bandeira" href="#" target="_blank" rel="nofollow"
title="Info Blogui in Japan"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cja&hl=en');
return false;"><img border="0" alt="Japan" width="24"
src="http://img230.imageshack.us/img230/7880/japanbj4.png" height="24"
title="Info Blogui in Japan"/></a>
<a class="bandeira" href="#" target="_blank" rel="nofollow"
title="Info Blogui in Russian"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cru&hl=en');
return false;"><img border="0" alt="Russian" width="24"
src="http://img149.imageshack.us/img149/1218/russianfederationck1.png"
height="24" title="Info Blogui in Russian"/></a>
<a class="bandeira" href="#" target="_blank" rel="nofollow"
title="Info Blogui in Korea"
onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=pt%7Cko&hl=en');
return false;"><img border="0" alt="Korea" width="24"
src="http://img230.imageshack.us/img230/5052/southkoreaef7.png"
height="24" title="Info Blogui in Korea"/></a>
</div>

Este código no seu blog, vai ficar exatamente igual ao meu, mudando somente a posição de onde você irá colocá-lo, de uma olhada no topo do Info Blogui.

Caso alguém queira mudar as imagens, basta procurar alguns ícones por ai e hospedar em alguns site, como por exemplo, o ImagesHack.Us

Abraços!

.

Como colocar linkbars no meu blog

Olá Amigos!

Hoje vou mostrar aqui, como instalar uma linkbar no blog, alguns templates não vem com linkbar, e para adicionar é facil facil.
Linkbar é tipo essa barra ai em cima no meu blog, com links como Home, Tutoriais, Templates, Parcerias etc...

Primeiramente, vá em Layout>>Editar Html e faça um backup do seu template, caso ocorra algum problema.
Agora no Html do seu template procure por esse pedaço de código:

#header .description {

Quando achar esse código, vá até o fim dele, quando fecha } e cole isto:

/* ----- LINKBAR ----- */
#linkbar {
margin: 3px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #3075B8;
border: 0px solid #fff;
border-bottom: 0;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 7px 5px;
text-align: right;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 3px 20px 3px 20px;
width:100%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
border-right: 1px solid #fff;
}

#linkbar a:hover {
color: #000;
background: #fff;
}

Agora, procure por esse pedaço de código:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Titulo do seu blog(Cabeçalho)" type="Header">
</b:widget>

E logo após esse código, cole este:

<div id="linkbar-wrapper">
<b:section class="linkbar" id="linkbar" showaddelement="no">
<b:widget id="LinkList1" locked="true" title="Linkbar" type="LinkList">
</b:widget>
</b:section></div>

Pronto, sua linkbar está instalada, basta você salvar e entrar em Layout, Elementos de Página, e abaixo do seu cabeçalho estará sua linkbar. Agora basta adicionar seus links...

Gostaram ?

Até mais!


.

Colocar icones para rede sociais no Blogger

Olá Amigos!

Hoje vou mostrar pra vocês um hack que peguei do Dicasblogger da Juliana Sardinha.
O que ele faz ?
Ele coloca pequenos ícones no seu template e facilita sua vida, ele envia seus posts para as grandes redes sociais como dihitt, technorati, google, yahoo etc.
Vai ficar mais ou menos assim:



Não é um bixo de sete cabeça não, é bastante simples, até eu compreendi como instalar =X.
Então chega de papo e mão na massa, ou melhor, no mouse e teclado.

Entre em Layout>>Editar HTML e cole dentro do CSS o seguinte código:

/* ----- Bookmarking ----- */
.book {
margin-top:5px;
background:#fdfdfd;
padding:2px 2px 2px 2px;
border:1px solid #f0f0f0;
}
.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Eu recomendo que vocês colem após o treicho "Posts" porque ai, ele vai ficar embaixo das postagens, fica mais legal.

/* ----- Posts ----- */
(todo o código)
/* ----- Bookmarking ----- */

Depois clique em "Expandir modelos de widgets".
Procure por esta linha:

<p class="post-footer-line post-footer-line-3">

Agora cole o seguinte código:

<p></p><div
align="left"><div class="book">
<div class="rsociales">
<span class="blogk">
<ul>
<li><a href="data:post.emailPostUrl"
target="_blank" title="Enviar por Email"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://del.icio.us/post?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank" title="Incluir no del.icio.us"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://digg.com/submit?phase=3&amp;url=%22%20+%20data:post.url"
target="_blank" title="Incluir no Digg"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://dihitt.com.br?botao=enviar&amp;url=%22%20+%20data:post.url%20+%20%22&amp;titulo=%22%20+%20data:post.title"
target="_blank" title="Incluir no diHITT"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://www.linkk.com.br/submit.php?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank" title="Incluir no LinkK"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://rec6.via6.com/link.php?url=%22%20+%20data:post.url%20+%20%22&amp;titulo=%22%20+%20data:post.title"
target="_blank" title="Incluir no Rec6"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://ueba.com.br/NovoLink?url=%22%20+%20data:post.url%20+%20%22&amp;titulo=%22%20+%20data:post.title"
target="_blank" title="Incluir no
Uêba"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://feeds.feedburner.com/infoblogui/"><img
alt="Assinar feed" class="rsociales-sobre" src="http://imagem.gif/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://www.technorati.com/faves?add=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank"><img alt="Agregar a Technorati"
class="rsociales-sobre" src="http://imagem.gif/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank"><img alt="Agregar a Google"
class="rsociales-sobre" src="http://imagem.gif/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://myweb2.search.yahoo.com/myresults/bookmarklet?u=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank"><img alt="Agregar a Yahoo!"
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank"><img alt="Agregar a Blogmarks"
class="rsociales-sobre" src="http://imagem.gif/"
/></a></li>
</ul>
</span>
</div>
</div>
</div>

Para cada ícone, você deverá linkar a imagem correspondente, hospedando-a em um site de sua preferência, eu hospedo no ImagesHack.us.
Substitua em cada linha http://imagem.gif pelo link de sua imagem.

Aqui disponibilizo os ícones para Download.

Ex:

<li><a
href="http://www.blogger.com/%22http://dihitt.com.br?botao=enviar&amp;url=%22%20+%20data:post.url%20+%20%22&amp;titulo=%22%20+%20data:post.title"
target="_blank" title="Incluir no diHITT"><img
class="rsociales-sobre"
src="http://imageshack.us/img/2862/infoblogui/dihitt.png"
/></a></li>
<li><a se="" de="" alterar="" o="" link="" info=""
blogui="" pelo="" do="" seu=""></a>
</li><li><a
href="http://feeds.feedburner.com/infoblogui/"><img
alt="Assinar feed" class="rsociales-sobre" src="http://imagem.gif/"
/></a></li>
<li><a>

Pronto galerinha, simples não é ?
Espero que tenham gostado.
Até mais!


.

Citações com destaque no Blogger

Olá Amigos!

Fonte: UsuarioCompulsivo modificado por: InfoBlogui


Segundo a Wikipedia:

Segundo a norma NBR 10520:2002, elaborada pelo Comitê Técnico 014 (Informação e Documentação) da Associação Brasileira de Normas Técnicas, citação numa produção textual é a "Menção de uma informação extraída de outra fonte", tais como (livros, periódicos, vídeos, sites e etc).

No exemplo acima, a citação de um texto da Wikipédia que fala sobre Citações.
Nos templates padrões, as citações são apenas tabuladas um pouco mais a direita do corpo do texto, sem destaque algum.
Com o código que postarei logo abaixo vai ser possível adicionar uma cor de fundo as citações, dando mais destaque a mesma.
Para usar citações em um artigo, você deve selecionar o texto a ser citado e depois clicar no ícone destacado na imagem abaixo:


Aqui vai o código que falei pra vocês, mas antes de mais nada, lembre-se, toda vez que for mexer no código do seu template, faça um backup dele.

.post blockquote {
margin: 1em 20px;
border: 1px solid #c0c0c0;
background: #f5f5f5;
padding: 7px;
}

Nos valores em vermelho definem-se as cores da borda e do fundo, mude-as como desejar, recomendo dar uma olhada nesta tabela de cores.
Caso não exista esse código no seu template, basta inseri-lo antes da tag ]]></b:skin>.

Espero que seja útil.
Até mais.


.