Conteúdo do seu blog animado via feed
Para mostrar as postagens de um blog no seu ou mostrar as próprias postagens em um animado box via feed, entre em: http://www.widgetbox.com/widget/rssscroller
Preencha o quadro que vai aparecer.
Nome: Nome de exibição do box;
Width: Largura em Pixels do box;
Height: Altura em Pixels do box;
RSS Feed URL: Link do feed do blog;
Background Color: Cor de fundo do box;
Scroll Speed: Velocidade do conteúdo do box;
Exemplo:
Depois de configurado clique em: "Get Widget".
Aparecera esse quadro na tela, escolha a figura do Blogger para colocar automaticamente no blogger, e clique depois em "Add Widget", se você não usa o blogger ou preferi adicionar manualmente, clique em "Get Code", copie o código e coloque onde desejar.E pronto!
Feed! O que é isso? Como fazer um para meu blog?
As perguntas mais freqüentes sobre feed:
O que é isso?
Como fazer um para meu blog?
Para que serve?
Primeiro vamos a definição segundo o Wikipédia:
"O termo Feed vem do verbo em inglês "alimentar". Na internet, este sistema também é conhecido como "RSS Feeds" (RDF Site Summary ou Really Simple Syndication).
Na prática, Feeds são usados para que um usuário de internet possa acompanhar os novos artigos e demais conteúdo de um site ou blog sem que precise visitar o site em si. Sempre que um novo conteúdo for publicado em determinado site, o "assinante" do feed poderá ler imediatamente."
Resumindo: Feed é um sistema que você assina em vários blogs e/ou sites, assim sempre que tiver atualização neles você ficara sabendo! Sem necessidade de visitar o site ou o blog para ver se tem alguma matéria que esteja afim de ler.
Como assinar?
Procure na página pelo ícone:
ou algo do tipo. Clique sobre e assine da forma que quiser (e-mail, navegador e outros).Como colocar no seu blog?
Entre no site: Feed Burner, clique em Register, lá em cima do menu. Faça o cadastro normalmente.
Depois faça login.
Onde está escrito: "Burn a feed right this instant. Type your blog or feed address here", digite o link do seu blog, clique em "Next>>".
Preencha como achar melhor o link para o seu feed: "Feed Address". Agora clique em "Activate Feed", após isso clique em "Next>>" novamente, vai aparecer com várias opções, simples, marca todas! E clique novamente em "Next>>".
E pronto! O feed do seu blog está feito! Para assinar basta abrir o link do feed de acordo com que você ativou.
Exemplo:
The PS2 Games(link feed): http://feeds.feedburner.com/theps2games
Designer Brasil(link feed): http://feeds.feedburner.com/designerbrasil
Para analisar quantos assinantes tem seu blog ou você faz login no Feed Burner e olha ou coloque um contador igual o do Códigos Blog no seu blog!
Como?
Clique sobre "Publicize" no painel do seu feed, depois em "FeedCount", configure como quiser e coloque no layout do seu blog.
Agora explore as utilidades desse recurso!
Espero que ajude! Dúvidas? Entre em contato!
Haloscan
Para se cadastrar, acesse: Haloscan
- Depois de ter efetuado seu cadastro, clique em Install, selecione Blogger/Blogspot (New Version) - se você está usando a nova versão do blogger, óbviamente. Na mesma página, deixe marcado o sistema de trackback ou desmarque, se não lhe interessar (sugiro que deixe marcado, pois é uma excelente maneira de divulgação do seu blog). Clique em Next.
- Você pode conferir o vídeo que explica passo-a-passo como fazer a instalação do Haloscan no seu blog. Basicamente é isto:
Depois de instalar o Haloscan, vá em Setting para fazer suas configurações e em Template para escolher um modelo e uma imagem para o formulário de comentários.(Sobre a imagem: crie uma imagem de até 400x400 e hospede em algum site, depois copie o endereço da imagem e coloque no local indicado por URL of your Image:)
Em tempo: A mudança faz perder todos os comentários que já existiam no blog!
Colocando margem nos widgets do blogger
Para que as widgets (Elementos de Página) que você insere no seu blog não fiquem coladas às bordas, procure este trecho do código (baseado no Mínima, em outros templates existem pequenas variações):
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:10px;
padding:0px;
}
Basta mudar o valor da margin que lá está para esta que coloquei, 10px. Se você preferir maior ou menor distância da borda, altere este valor.
Inserindo bordas arredondadas nas colunas
Não quero desanimar, mas já vou avisando que dá um trabalho danado, viu? Estou devendo este tuto faz um tempo justamente por que sei que não é nada fácil colocar bordas arredondadas (também não é coisa prá se arrancar os cabelos....) e tenho medo do que virá...rsrs. Quando ensinei a colocar uma terceira coluna no blog, achei que estava facilitando a vida do povo, mas recebí TANTO e-mail, acabei ajeitando TANTO template, que tenho medo...
. Não que eu tenha má vontade gente, por favor, mas é que eu ando mesmo, ultimamente, sem muito tempo para me dedicar a este blog e aos outros tantos filhos (vou contar pela centésima vez: eu tenho 26 blogs!), que dirá tempo para ajeitar templates. É por isso que eu já ensino a pescar...Por isso, meus amores, sem mágoas, mas vou adiantando que a titia vai ensinar tin-tin por tin-tin, mas depois é fé em Deus e cada um por sí, ok?
Também quero dizer que vou explicar o MEU método, que aprendí na marra, xeretando os templates do blogger. Deve ter por aí milhões de tutos explicando de maneiras diferentes, mas eu não lí nenhum e posso até estar fazendo do jeito mais difícil, não sei...
Chega de preâmbulos, vamos ao que interessa.
Vá no seu blog e clique em Editar HTML. Procure no código do seu template este trecho:
/* Sidebar Content
----------------------------------------------- */
COLOQUE O CÓDIGO AQUI
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
text-align: center;
margin: 15px;
}
Pode não estar idêntico ao meu mas o título é o mesmo. Ok, acima de tudo que estiver por lá, onde eu sinalizei com a frase em vermelho, você deve colar estre trecho:
#sidebarbottom-wrap1 {
background:url("endereço da imagem do topo da coluna") no-repeat left top;
margin:0 0 px;
padding-top:10px;
}
#sidebarbottom-wrap2 {
background:url("endereço da imagem do bottom da coluna") no-repeat left bottom;
margin:0 0 px;
padding-bottom: 10px;
}
Tá, agora esquece esta parte por enquanto. Note bem: não delete nada, só acrescente o código, ok?
Salve o template. Se você visualizar, não terá mudado nada (não insira ainda nenhum endereço de imagem onde está indicado, por enquanto). Agora desmarque onde está Expandir Modelo de Widget (se estiver marcado) e encontre este trecho do código e insira o que está em vermelho:
<div id='sidebar-wrapper'>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div></div></div>
Salve o template. Agora é com a parte de edição de imagem. Abra seu editor de imagem e crie uma imagem com a largura da sidebar e altura 100px. Preencha com a cor que será a cor do background da PÁGINA (e não da coluna, ok?).
Depois de preencher com a cor de fundo da página do seu blog, escolha a seleção com bordas arredondadas do seu editor de imagem.
Veja a imagem (clique nela para expandir):
Agora selecione o quadrado como na próxima imagem e preencha a seleção com a cor que usará no fundo da SIDEBAR:
Ficou aquela pontinhas alí com a cor do fundo da página, ok? Agora corte a imagem próximo ao final desta curva da borda (mas não vá cortar demais, heim?)
Salve esta imagem como top.jpg:
Agora inverta a imagem Verticalmente e salve como bottom.jpg:
Bom, agora hospede as imagens e insira lá no primeiro código que eu passei, dentro das marcações correspondentes para topo e bottom. Visualize. Pode ser que esteja tudo fora de lugar e aí é que vem a dor de cabeça. Eu mesma não encontrei a receita mágica prá dar certo de primeira. Quando não dá, vou alterando os valores que estão em padding e margin até dar certo. Prá isso não tenho uma resposta pronta, eu mesmo apanho sempre. Por que? Porque a visualização no Firefox, geralmente, é perfeita de primeira, mas a porcaria (é, porcaria...) do Internet Explore tem a mania de acabar com a minha festa. Ou seja, tá lindo em um e tudo torto no outro. Prá conciliar ambos, leva uns bons minutos.
Gente, é isso. É muito simples, é mais uma enganação para os olhos. A imagem tá lá e não se vê por que ela tem a mesma cor do fundo. Se você cismar de mudar o background da página depois, tem que mudar as imagens. Não se esqueça de trocar a cor da sidebar pela cor que vc escolheu e colocou na imagem. Se você quiser preencher tudo com uma pattern por exemplo, é a mesma coisa, só que vai ter que ir lá no código da coluna da sidebar e colocar:
background: url('endereço da imagem do corpo da sidebar') repeat;
A imagem do 'corpo' da coluna óbviamente tem que ser a mesma que preenche as bordas, ok? Corte uma 'fatia fina' da pattern (ou imagem) que usou para as bordas, salve, hospede e coloque onde eu indiquei aí em cima.
Dúvidas nesta parte (onde tá esse código da coluna?) é só dar uma espiadinha no post sobre alterações nas colunas do template.
Sabia que ia sair um livro. Espero que tenham entendido, por que eu me acho a pessoa mais confusa do mundo prá explicar. Boa sorte à todos.
Aumentar largura das colunas
Para aumentar a largura das colunas do template:
Procure no código:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
background-color: #bgcolor;
}
#main-wrapper {
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 {
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 a largura que está estipulada em #outer-wrapper , sem ultrapassá-la, pois todos os elementos da página estão contidos em Outer-wrapper.
Atenção!
Muitas vezes, o que vemos em um navegador não é o mesmo que vemos em outro. Às vezes um template parece perfeito no Firefox e está horrivelmente desproporcional no Internet Explore e vice-versa. Toda vez que fizer qualquer alteração em seu template, tente visualizá-lo em mais de um navegador, para ter certeza de que você não é o único a achar o template lindo....
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 {
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 a largura que está estipulada em #outer-wrapper , sem ultrapassá-la, pois todos os elementos da página estão contidos em Outer-wrapper.
Atenção!
Muitas vezes, o que vemos em um navegador não é o mesmo que vemos em outro. Às vezes um template parece perfeito no Firefox e está horrivelmente desproporcional no Internet Explore e vice-versa. Toda vez que fizer qualquer alteração em seu template, tente visualizá-lo em mais de um navegador, para ter certeza de que você não é o único a achar o template lindo....
Assinar:
Comentários (Atom)
