Blog toc nas postagens

Faça um "Blog Toc" mais moderno, mais enxuto e mais fácil nas postagens do blog. Quer ver o resultado ? Clique AQUI.
Copie o código abaixo e cole no modo "Editar HTML" no editor de textos do Blogger.
<script style="" src="http://dl.getdropbox.com/u/1367826/blogtoc-reduz.js"></script>
<script src="http://AQUI O NOME DE SEU BLOG.blogspot.com/feeds/posts/default?max-results=2999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Troque o código na cor veremelha pelo nome de seu blog
reduz.js
Se preferir, é aconselhável hospedar o código javascript em um site de hospedagem

»»Leia mais...

Arquivo do blog no post

Coloque seus arquivos em um de seus posts, para isso basta seguir a instrução.
Vá até o HTML de seu blog e procure por:
</head>
E acima dele cole o código abaixo:
<script type='text/javascript'>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/><a href="http://www.abu-farhan.com" style="font-size: 8px; text-decoration:none; color: #616469;">Widget Abu Farhan</a></br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<p><a href="'+postYearMonth2[b]+'">'+temp1+"</a></p><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};
//]]>
</script>
Agora cole  próximo código no post do seu blog, mas antes clique em "Editar HTML, coloque o nome de seu blog no local indicado e publique.
<script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

»»Leia mais...

Widget de posts recentes com efeito

Encontrei um blog com dicas bem legais para o Blogger e postarei aqui nos próximos dias todas elas.
A primeira da série é esta, um widget com as últimas postagens do blog com efeito. É bem fácil coloca-lo, é só copiar o código abaixo e colar no HTML/Javascript. Coloque o endereço de seu blog no local indicado com a cor verde e salve.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
#spylist ul{
width:320px;/*largura do widget*/
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
#spylist li {
width:320px;/*largura do widget*/
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;/*aqui o fundo do widget*/
border:1px solid #ddd;
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
#spylist li img {
float:left;
margin-right:15px;
background:#EFEFEF;
border:0;
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 3005;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://NOMEDOSEUBLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://dl.getdropbox.com/u/1367826/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>
Créditos: Abu Farhan

»»Leia mais...

Arquivo do blog

Arquivo do blog
Quer um arquivo assim ? Clique aqui e faça o seu.

»»Leia mais...

Disney Princesas, imagens, background, wallpapers, vídeos, midis...

Gosta dos filmes da Disney ? E das princesas ? Ariel, Cinderella, Bella, Aurora, Tiane, Mulan, Pocahontas...
Elas estão esperando você neste endereço abaixo. Há wallpapers, imagens PNG, vídeos, midis, backgrounds e muito mais.

»»Leia mais...

HTML 5

No início de 2009 o W3C – consórcio de empresas de tecnologia para levar a Web ao seu máximo potencial – anunciou a primeira especificação do HTML 5. O HTML (Hypertext Markup Language), que é responsável por organizar e formatar as páginas que visitamos na internet, está em sua versão 4.0.1 e continua evoluindo. Após cinco anos de trabalho, esta, ainda, é apenas uma versão de testes do HTML 5 e a versão final está prometida para 2012. Foram feitas grandes alterações, que incluem: novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais, controle embutido de conteúdo multimídia, aprimoramento do uso off-line, melhoria na depuração de erros, entre outros avanços.

»»Leia mais...

Obrigada leitores feedelizados

Quero agradecer a todos os leitores deste blog, principalmente aos leitores assinantes do Feed. Já são 1000 leitores assinantes o que faz deste blog um tremendo sucesso. Bom, sei que vc vai questionar o que é sucesso, pois pra mim é isto, ganhar R$ 100.000,00 por mês para fazer o que eu mais gosto:

»»Leia mais...

The Phantom Of The Opera

A D O R O
M U I T O
I S S O
M E S M O
Pois é, para muitos o melhor vocal é o da Sarah Brightman. E você, concorda ?
Só sei que não gosto de Raoul, acho-o um mala oportunista. Sou mais o fantasma, rsrsrrsrsrs. Acho que gosto do mal feito.

»»Leia mais...

Slide carousel

Para colocar um slide como este abaixo vá seguindo as dicas.;-)

»»Leia mais...

Slide

Coloque um menu em seu blog que é um slide. Vá até o HTML do seu blog e cole o código abaixo acima de:

»»Leia mais...

Imagem do perfil nos comentários do Blogger

Será uma miragem ? Estou vendo alguns avatares de comentaristas no sistema de comentários do meu blog. E vc, os vê no seu ? Será esse mais um presente dos 10 anos do Blogger para nós ? Investigando...
Se em seu blog os avatares não aparecem, dê uma olhada se não está configurado para não aparecer imagens.
Clique em "Configurações" e depois em "Comentários"
Agora selecione o "Sim"
Aproveite que vc está aí, e peloamordeDeus, selecione o NÃO para a opção de "Exibir confirmação de palavras para os comentários", isso é um verdadeiro empata foda. É de lascar ter que confirmar o comentário através de senha. Quer sber o que eu faço quando tyenho que confirmar senha ? Fecho o blog !
Se ainda assim os avatares não apareceram, aprenda com o Ice Breacker a configurar no HTML do blog, dica que a Meri Pellens deixou nos comentários.

»»Leia mais...

Template Rosinha refeito

Algumas meninas me pediram para refazer este template que estava desconfigurado, e aí está ele. Podem baixar esta fofurinha a vontade. Clique AQUI para pegar o código.
Se você gostou de algum template publicado por mim, mas que constatou que está com defeito, deixe um recado para mim no post do template, assim que puder irei refaze-lo.

»»Leia mais...

Template Scrap Gabriel

Template em 3 colunas. Muito lindinho !
Ver template/Pegar código

»»Leia mais...

Template Scrap Suave

Template em 3 colunas, data costumizada e bordas arredondadas.
Ver template/Pegar código

»»Leia mais...

Conseguindo o endereço da propriedade de rádios e tvs

Muita gente que vem ao meu blog, paraquedista ou não, vem atrás de uma dica: colocar media player no blog. Os proprietários dos blogs adoram colocar músicas em seu blogs, mesmo que isso afaste os leitores, rs. Já havia ensinado como colocar vários tipos de players no blog e como conseguir o endereço de músicas, mas não havia ensinado como conseguir o endereço de tvs e rádios, mas eis que agora vou ensinar.
Entrando em um site que disponibiliza rádios, clique na rádio de seu interesse.
Eu escolhi a Rádio Dance e cliquei sobre a rádio.
Veja o player da rádio.
Dê um clique em cima do player com o botão direito do mouse. Veja que abriu uma janela. Clique então em "Propriedade"
Agora você verá uma janela como essa abaixo. Onde estiver escrito "LOCAL", arraste o mouse por cima com o botão esquerdo selecionado. Clique então com o botão direito e ao abrir outra janela clique em "COPIAR"
Agora clique em "COPIAR" e cole este código dentro do código de algum player. Disponibilizo o código AQUI e outro AQUI.

»»Leia mais...

Imagem no cabeçalho/header do Blogger

Para colocar imagem no cabeçalho do Blogger, vá até o HTML de seu blog e procure pelo trecho: (levando em consideração o template Mínima, pode ser que esteja diferente em seu blog então procure a partge em negrito e substitua tudo que estiver até } )
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.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
Substitua por este outro colocando o endereço de sua imagem hospedada na net e coloque o valor referente ao tamanho de sua imagem.
#header-wrapper {
background: url(AQUI O ENDEREÇO DE SUA IMAGEM) no-repeat;
height: 200px; /*comprimento*/
width:660px; /*largura*/
margin:0 auto 10px;
border:1px solid $bordercolor;/*borda*/
height:----------comprimento
width:-----------largura
Se não quer borda, apague todo o trecho em negrito

»»Leia mais...

Template Scrap Gerbera

Este template foi refeito em março de 2013 com códigos atualizados
DEMO/Post atualizado

»»Leia mais...

Gerador de caixinha link-me

»»Leia mais...

Dando estilo ao blockquote que vem no Blogger

Ao menos o template Minima já vem com esta opção, e acredito que todos os outros devam vir também já que o Blogger, no editor de textos tem esta opção já incorporada a barra de ferramentas. Para usa-la basta que após escrever o seu texto, você selecione a parte que quer que fique em destaque e clicar no ícone como mostra a imagem abaixo
Vá até a barra de ferramentas então, procure pelo trecho:
.post-body blockquote {
Após ele, cole o código abaixo de sua preferência.
Para esta aparência do seu blockquote
background: #cccccc;
*Para colocar outra cor de fundo, troque o código na cor vermelha.
Para esta aparência do seu blockquote
border: 6px double #cccccc;
padding: 8px;
Para trocar a cor da borda, troque o código na cor vermelha
Para trocar a aparência da borda, troque o código na cor verde. AQUI tipos de borda
Para esta aparência do seu blockquote
border: 4px solid #cc0000;
background: #cccccc;
vermelho-------espessura da borda
rosa-------------tipo de borda
laranja----------cor da borda
azul------------cor de fundo
Para esta aparência do seu blockquote
background: url(AQUI O ENDEREÇO DE SUA IMAGEM) repeat;
padding: 8px;
font-weight: bold;
Código em vermelho, troque pelo endereço de sua imagem
Para esta aparência do seu blockquote
background: url(AQUI O ENDEREÇO DA IMAGEM) top left no-repeat;
border-right: 2px solid #000000;
padding-left: 96px;
font-weight: bold;
Código em vermelho, imagem
verde cor da borda
azul é a margem necessária para que as letras não fiquem sobre a imagem

»»Leia mais...

Imagem ou cor no cabeçalho ocupando toda a área

Para que o cabeçalho do seu blog ocupe toda a extenção da header é bem facinho.
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 de seu blog e procure pelo código:
#header-wrapper {
Agora veja onde estiver escrito:
width:
Troque o número que estiver a frente dele pelo número: 1030
O código então ficará assim:
width: 1030px;
Salve.
Agora procure pelo trecho:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='template34094 (Cabeçalho)' type='Header'/>
</b:section>
</div>
Copie todo o trecho e apague-o pois você irá coloca-lo em outro lugar. Procure então pelo primeiro código <div id= e cole então o código que você copiou  acima dele.
Salve e pode fazer suas modificações.</s>
Veja a dica AQUI

»»Leia mais...

Botões sociais

Fiz estes botões para a barra social. Mas atenção, não copie, salve em seu pc e depois hospede em algum site ou mesmo no Blogger.

»»Leia mais...