Código para adicionar seu blog aos favoritos do Mozilla e Explorer

Para colocar botões para que seus leitores adicionem seu blog aos favoritos tanto do Mozilla como do Explorer, copie o c[odigo e cole no HTML/Javascript em seu blog. Coloque o endereço e o nome do seu blog no local indicado.

<script language="JavaScript">
function addFav(){
var url="ENDEREÇO DO SEU BLOG";
var title="NOME DO SEU BLOG";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()"><img border="0" alt="Adicione aos Favoritos"
src="http://img5.imageshack.us/img5/7898/animation1kmt.gif"/></a>
<a href="ENDEREÇO DO SEU BLOG" onclick="window.external.AddFavorite('http://sorindodavida.blogspot.com/','NOME DE SEU BLOG');">
<img alt="Adicione aos Favoritos" src="http://img22.imageshack.us/img22/687/animation3qqe.gif"
border="0"/> </a>

»»Leia mais...

Menu em 8 abas

A primeira tutorial sobre este tipo de menu vi no blog da Áurea, o Templates para VOCÊ.

La ela tem alguns modelos, inclusive ensina a colocar abas nos comentários. O fato é que sempre que preciso vou lá buscar o código, mas sempre tenho um trabalhão pois ela disponibiliza este menu com 4 abas e preciso sempre com 8 abas. Portanto, para facilitar a minha vida, e talvez a sua, coloco agora no blog o código. Com a sua licença Áurea.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Vá até o HTML do seu blog e cole o código abaixo antes de:

</head>

<script type='text/javascript'>

/*Important Function to blend the tabs in and out*/

function blendoff(idname) {document.getElementById(idname).style.display = &#39;none&#39;;}

function blendon(idname) {document.getElementById(idname).style.display = &#39;block&#39;;}

</script>

<script type='text/javascript'>

/*Function for our Tabmenu with 4 Tabs*/

function swichtabs(wert) {

if (wert==&#39;1&#39;){

</script>

Copie este próximo código (que é o código onde você pode modificar as cores da barra do menu) cole acima de:

]]></b:skin>

/*Example for a Menu Style*/
.menu {background-color:#3D40CB; color:#ffffff; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#8083FC; font-weight:bold; position:relative;}

Agora copie este próximo código, vá até 'Elementos da página" e cole no HTML/Javascript em seu blog. Faça as modificações e salve.

<!--Start of the Tabmenu -->
<div class="menu">
<ul>
<li><a id="tablink1" onmouseover="blendon('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('1');" href="#" class="tabactive" onclick="return false;" title="">Título 1 </a></li>

<li><a id="tablink2" onmouseover="blendon('tabcontent2'); blendoff('tabcontent1'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('2');" href="#" onclick="return false;" title="">Título 2 </a></li>

<li><a id="tablink3" onmouseover="blendon('tabcontent3'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('3');" href="#" onclick="return false;" title="">Título 3 </a></li>

<li><a id="tablink4" onmouseover="blendon('tabcontent4'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('4');" href="#" onclick="return false;" title="">Título 4 </a></li>

<li><a id="tablink5" onmouseover="blendon('tabcontent5'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent6'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('5');" href="#" onclick="return false;" title="">Título 5 </a></li>

<li><a id="tablink6" onmouseover="blendon('tabcontent6'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent7'); blendoff('tabcontent8'); swichtabs('6');" href="#" onclick="return false;" title="">Título 6 </a></li>

<li><a id="tablink7" onmouseover="blendon('tabcontent7'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent8'); swichtabs('7');" href="#" onclick="return false;" title="">Título 7 </a></li>

<li><a id="tablink8" onmouseover="blendon('tabcontent8'); blendoff('tabcontent1'); blendoff('tabcontent2'); blendoff('tabcontent3'); blendoff('tabcontent4'); blendoff('tabcontent5'); blendoff('tabcontent6'); blendoff('tabcontent7'); swichtabs('8');" href="#" onclick="return false;" title="">Título 8 </a></li>

</ul>
</div>
<!--End of the Tabmenu -->
<!--Start Tabcontent 1 -->
<div id="tabcontent1" style="display:block;">

CONTEÚDO 1

</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div id="tabcontent2" style="display:none;">

CONTEÚDO 2

</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div id="tabcontent3" style="display:none;">

CONTEÚDO 3

</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div id="tabcontent4" style="display:none;">

CONTEÚDO 4

</div>
<!--Start Tabcontent 5-->
<div id="tabcontent5" style="display:none;">

CONTEÚDO 5

</div>
<!--Start Tabcontent 6-->
<div id="tabcontent6" style="display:none;">

CONTEÚDO 6

</div>
<!--Start Tabcontent 7-->
<div id="tabcontent7" style="display:none;">

CONTEÚDO 7

</div>
<!--Start Tabcontent 8-->
<div id="tabcontent8" style="display:none;">

CONTEÚDO 8

</div>
<!--End Tabcontent 8-->

»»Leia mais...

Apague a numeração dos marcadores

Basta clicar no widget, e tirar a seleção do quadradinho.

Ou de forma difícil:


Para apagar a numeração que fica juno aos marcadores, vá até o HTML do seu blog e procure pelo título que você estiver usando para os 'MARCADORES'.

Apague o que está em vermelho.

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b: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'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span></li>
</b:loop>

»»Leia mais...

Otmize o seu blog

Para deixar se blog mais rápido para carregar são necessários alguns cuidados.

• Colocar poucas imagens e as dimencionar sempre


• Adicionar poucos widgets, coloque só o essencial


• Instalar scripts realmente necessários


• Tenha o cuidado de deixar os widgets que carregam externamente na coluna a direita (ex: contadores, chats, flashs)

Uma outra coisa que você poderá fazer é otimizar o seu blog, assim os erros ou mesmo os códigos desnecessários serão mostrados. Use o site CSS Clean, é fácil. Digite o endereço de seu blog que ele lhe mostrará onde você deverá fazer as correções. Mas não se esqueça de sempre salvar uma cópia de seu template.

»»Leia mais...

Blogs e sites com brushs

Para quem gosta ou precisa de brushs para fazer imagens, eis aqui uma pequena amostra de sites e blogs que disponibilizam gratuitamente essas imagens e até há quem dê o curso.

1. Brushs PhotoFiltre e Photoshop


2. Brush King


3. Best Photoshop Tutorial


4. Free Photoshop Brushs


5. Brushs Download


6. Pixel and Icecrean

1. Photoshop Brushs


2. Celestial Star


3. Obesedian Dawn


4. Curso Online


5. Diva Mix

»»Leia mais...

Código para colocar fundo em seu blog

Pegando carona na dica anterior, posto aqui o código para colocar fundo em seu blog, fácil, fácil...


Vá até "Elementos de página", e abra um HTML/Javascript. Cole lá o código e insira o endereço da imagem. Salve e pronto.


Para a imagem se repetir:

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background-image %3A%20url%28%22 AQUI O ENDEREÇO DA IMAGEM %22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20href%3D%22 %22%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>

Para a imagem não se repetir, o código é este:

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background-image %3A%20url%28%22 AQUI O ENDEREÇO DA IMAGEM %22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20href%3D%22 %22%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>

»»Leia mais...

Backgrounds para seu blog

A alma caridosa da Meri do blog Luz em Flor escreveu-me dando essa dica de um site que tem vários backgrounds para colocar em blog.

Meri fofa, obrigada pela dica.

Para colocar os backs em seu blog é bem simples. Clique sobre a imagem escolhida. Você será direcionada a uma outra página.



Nessa página, veja embaixo na página. Haverá um código como o modelo abaixo.






Copie-o e cole em HTML/Javascript. Salve e pronto.

*ATENÇÃO ! Dê preferência ao template Mínima do Blogger. Veja AQUI um que baixei.



Clique

AQUI

»»Leia mais...

Widget para postagens antigas aleatórias afim de cada post

No blog Achei por aí e Bloguei, da Elke encontrei esse widget que mostra suas postagens antigas aleatoriamente ao pé de cada post. Com imagens e tudo. Veja como fica no blog AQUI




Entre AQUI no site, faça o registro e instale o widget em seu blog.

»»Leia mais...

Como abrir uma janela popup no seu blog do tamanho desejado

Para abrir uma janela popup em seu blog como tamanho que quiser.

AQUI



Copie o código abaixo e cole onde quiser. No código em vermelho cole aí o endereço do que ai ai, e no segundo código escreva o que vc quer que apareça para o leitor clicar. Os códigos em verde são o tamanho da janela. Para aumentar ou diminuir troque os números.

<a style="font-weight: bold;" class="frase" href="AQUI O ENDEREÇO QUE VAI ABRIR" target="_blank" onclick="window.open(this.href, this.target, 'width=754,height=479'); return false;">AQUI A MENSAGEM PARA CLICAR</a>

Ou este modelo com scroller (caixa deslizante)




CLIQUE AQUI


Copie o código abaixo e cole onde quiser. No código em vermelho cole aí o endereço do que vai abrir, e no segundo código escreva o que vc quer que apareça para o leitor clicar. Os códigos em verde são o tamanho da janela. Para aumentar ou diminuir troque os números.

<a href="ENDEREÇO DO SEU BLOG" onclick="window.open('ENDEREÇO DO QUE VAI ABRIR',
'Janela','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=650,height=500'); return false;">

ESCREVA AQUI</a>

»»Leia mais...