Template Green
Template com uma sidebar e menu horizontal. Para editar os links do menu, basta clicar em Editar no retangulo Lista de Links.
Para editar as imagens do Anuncie Aqui basta clicar em editar no quadradinho correspondente (são 4 quadrados no total), adiconar a imagem (tamanho 125x125) e o link que desejar:
Se você não deseja usar esta configuração dos banners na sidebar, procure pelo trecho abaixo no código do template e retire-o:
<div id='patrocinio'>
<b:section class='patrocinio' id='patrocinio' preferred='yes'>
<b:widget id='Image6' locked='true' title='' type='Image'/>
<b:widget id='Image5' locked='true' title='' type='Image'/>
<b:widget id='Image4' locked='true' title='' type='Image'/>
<b:widget id='Image3' locked='true' title='' type='Image'/>
</b:section>
</div>
Se você deseja redistribuir este template, por favor não modifique o link para o download e considere acrescentar um link para este post, para que os leitores possam seguir as instruções.
Não retirar o créditos
1- Coloque o script abaixo depois de ]]></b:skin>:
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
2- Salve a modificação. Clique em Expandir Modelo de Widget e procure por este trecho e acrescente o que está em vermelho:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>
3- Agora procure por:
<div class='post-footer-line post-footer-line-3'>
e cole logo abaixo:
<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts'>
<h4>Posts Relacionados:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>
Salve as modificações. Para dar estilo ao título e à lista, acrescente no CSS:
.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: coloque aqui o tamanho da fonte;
color: #...coloque aqui o valor da cor para o título;
}
Para dar estilo à lista:
.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: tamanho da fonte;}
.related-posts li a{color: #....}
.related-posts li a:hover{color: #.....; text-decoration:none;}
Obs: os links dos artigos relacionados aparecem apenas nas páginas internas. Eles não aparecem se você trancar seu blog.
fontes:
UsuarioCompulsivo
Vagabundia
O pássaro azul
Para quem ainda não sabe, o Twitter - representado por um simpático pássaro azul - é um serviço de micro-blogging onde só é possível publicar 140 caracteres por vez. Parece uma bobagem um serviço que permite escrever tão pouco, mas não é. No Twitter, quem quer ler as suas frases, passa a te seguir (followers) e o número de seus 'seguidores' aparece em seu perfil, assim como o número de pessoas que você segue (following). Os seus seguidores podem enviar mensagens, opinar sobre seus escritos e até passar adiante o que você escreve, re-twittando. Parece complicado mas não é.
E o que se escreve em um lugar que permite escrever tão pouco de cada vez?
O que você quiser. Sim, você é livre pra escrever sobre absolutamente tudo, desde o que está assistindo na tv, o livro que terminou de ler ou se tem prova na escola hoje. Liberdade.
O Twitter, de início (e às vezes bem depois) dá uma sensação de estar falando sozinho, que não é ruim. Você pode indicar links interessantes, músicas, clipes, os textos do seu blog...tanto faz. Quem achar interessante acompanhar a sua rotina irá lhe seguir e você pode ou não seguir a pessoa de volta. Você não é obrigado a nada. Faça o que tu queres, já cantava o Rauzito...mas, como tudo o que é bom e cheira liberdade logo pinica...surgiram dezenas de listinhas de 'faça isso', 'não faça aquilo', 'tira a mão daí menino!' e 'senta direito!'. Você encontrará em muitos lugares textos sobre o Twitter - uns fazem profecias, outros dizem que é bom, é bom, mas que pena que vai virar várzea. O que eu acho bom no Twitter é que você pode simplesmente ignorar um chato ou bloquear um impertinente. Só as pessoas que te agradam podem entrar em contato com você. Sendo assim, eu não ligo que o 'Twitter seja invadido' e nem para todas estas idéias catastróficas que surgem cada vez que o serviço é citado em um meio de comunicação.
Eu penso o seguinte: bom senso deve ser ingerido seis vezes ao dia e mesmo assim todo mundo corre o risco de ser chato. Quando comecei com blogs não tinha a menor malícia e saia a torto e a direito fazendo convites, propostas, contatos, animada, pobre de mim. Levei alguns nãos e me toquei de algumas coisas. O que eu perdi com isso? Absolutamente nada, só ganhei. Fiquei esperta (mas não 100%), só isso.
Eu respondo a todos os que me enviam mensagens no Twitter, independente de eu seguir a pessoa ou não (cheque sempre o link com o seu nick - os replies - e o Direct Messages). Se uma pessoa não se toca e vai lá me fazer pergunta sobre códigos, eu a encaminho para o blog. Nem dói. Por que Twitter não é lugar de explicar nada, né? Se um tutorial não resolve, 140 caracteres é que não vão refrescar em nada, óbvio. E lá eu escrevo abobrinhas, as minhas abobrinhas. O que estou fazendo, um site legal, uma pérola da minha filha...sei lá ...eu nem lembro de códigos e hacks. Se mesmo assim você deseja me seguir, é só clicar no passarinho azul aí de cima ou no vermelhinho lá na sidebar. Se você ainda não tem uma conta no Twitter, cria uma e me procura se tiver dúvidas, ok?
Se você deseja mais detalhes técnicos (eu tenho preguiça de escrever o que já escreveram :D ) indico este tutorial super detalhado da Dr.Juliana: Como usar o Twitter - um guia para iniciantes.
Ah, antes de encerrar esta parte quero dar uma explicação: vocês poderão ver que o número de gente que me segue é maior do que o que sigo. Isto não tem nada a ver com arrogância, panela, seja lá o que for que inventem. Isso tem a ver com um tico e teco que não conseguem me fazer mascar chicletes e atravessar a rua ao mesmo tempo, ou seja, não consigo mesmo seguir muita gente. Por que vou avisando, quando você passa a seguir alguém, tudo o que este alguém escreve aparecerá na sua página e se você segue 300 pessoas, 300 pessoas 'falarão' ao mesmo tempo e eu realmente, com toda a pouca humildade que ainda me resta, não dou conta de seguir 100 pessoas. Já tentei seguir todo mundo que me segue e fiquei tonta. Por isso faço um rodízio: durante uma semana sigo um grupo, depois sigo outro....e assim vai. Tem gente que fica magoada, para de me seguir também e mimimi...pois é. Lá tem mimimi também. Muito. Prepare-se.
O que me leva à fábula...
...A raposa e as uvas
Conhecem a fábula da raposa e as uvas? Minha mãe me contava quando eu era criança e nem sei se a versão dela é a oficial, mas enfim...Uma raposa queria MUITO umas uvas e começou a pular feito doida para pegar mas não conseguia de jeito nenhum. Daí saiu derrotada, com raiva, falando 'nem queria mesmo estas porcarias de uvas, devem estar horríveis!'. Aí uma folha caiu e ao ouvir o barulho, a raposa se voltou imediatamente, achando que as uvas tinham caído no chão e poderia enfim apanhá-las.Pois é...tenho visto tanto isto...A coisa é assim: se você me segue/lê/concorda comigo, você é o máximo, eu te adoro, somos amigos de infância. Mas, diante de uma recusa, diante de uma opinião contrária ou atitude que fira o ego, então não gosto mais de você, não te indico, te renego.
Tenho mesmo a impressão que estamos vivendo uma época onde o orgulho está acima de tudo, de todo o bom senso, impedindo que as pessoas desfrutem de situações e contatos que poderiam enriquecer muito a vida que levam. Escuto repetirem que vivemos a era do materialismo mas este materialismo todo é apenas reflexo do orgulho infantil e imaturo que é constantemente incentivado e alimentado. Por que se status fosse ter cabelos, as pessoas se matariam para arrastar os fios pelo chão. Ninguém quer ser contrariado. Ninguém quer mais debater. Você entra em um blog, lê um texto e discorda e o autor responde que é mimimi seu, ele não pode estar nunca equivocado ou ainda, não admite em hipótese nenhuma que o ponto de vista que defende seja confrontado por outro. Catzo, não existe mais o gosto pelo debate? E falo do debate saudável, não de trocas de ofensas, de apelações, de 'você escreve errado seu estúpido'. Esta é uma das razões pelo qual deixei de comentar. As pessoas se doem. Mesmo quando sua intenção nem chega perto do desejo de humilhar, a pessoa se sente humilhada apenas por que você não concorda com ela!
A internet parece que, pelo menos para um grupo, desperta o pior. Talvez seja a distância (quantas vezes me perguntei se fulano teria coragem de dizer NA CARA de sicrano o que acabou de escrever...), a facilidade do anonimato, sei lá. Penso que um instrumento tão sensacional como a internet - que pode abrir um mundo de possibilidades, de conhecimento e oportunidades de entrar em contato com pessoas muito legais - ser usado para troca de ofensas ou pior, com o único e exclusivo intuito de sanar um complexo de inferioridade, me parece um desperdício enorme. Por que é o que eu vejo: tem gente que passa o dia inteiro na Internet contabilizando amigos imaginários. É muito legal conquistar de fato algumas coisas e muito justo comemorá-las, mas daí a ficar obsessivo com número de seguidores no Twitter...pelamor...e depois dizem que temem a 'orkutização' do serviço! Digo isso por que as pessoas se ressentem verdadeiramente quando alguém deixa de seguir seu perfil ou seguem deus e o mundo só para serem seguidos de volta e exibir...números. Você é muito interessante para Adão se o seguir e ele vai 'retribuir' seguindo você também. Mas, se por algum motivo você deixar de seguir Adão ele automaticamente deixa de te seguir (você não pode ser mais interessante que ele mesmo, né?), você falece, ele nem reponde mais seus apartes.
Eu juro, fico realmente espantada com tanto orgulho. Eu realmente não sei se uma pessoa me segue ou não, existe muitas outras coisas interessantes para procurar saber na internet. E o fato de não seguir uma determinada pessoa em absoluto significa ignorá-la. Como já contei, respondo à todos.
Não é só no Twitter que as raposas rondam, nos blogs também. Tem aquele que comenta apenas esperando ser notado e quando não recebe a atenção que julga merecer, passa a fazer críticas, retira seu link e todas estas finezas. Tem aqueles que adoram meu trabalho, me amam, rezam por mim à noite, mas que quando respondo que as encomendas são sim pagas...bem, aí a coisa muda e o meu trabalho de repente já não é assim tão incrível :) Ou então, se não posso atender imediatamente uma dúvida, ficam agressivos e desprezam o que acabaram de valorizar.
Coisas de raposa..
Conselho da titia que ninguém pediu: não se preocupar com as aparências e se jogar no que é real. Gastar o tempo trocando idéias, ao invés de ostentando números vazios. É melhor ter dois ou tres amigos legais mesmo, com que se possa falar de astrologia à fofocas inofensivas, a ter um milhão de seguidores sem rostos, ávidos por uma oportunidade em uma escalada fantasiosa e sem sentido que se criou na internet.
Este foi um post enorme e confuso que sei que pouca gente lê e que foi escrito todo de uma vez sem nenhuma revisão. Peço desculpas pelos crimes contra a nossa língua. Também amanhã posso pensar diferente sobre tudo e admitir isso sem problema nenhum. Por que se eu for amanhã exatamente igual sou hoje, cadê a graça?
Para todos um excelente feriado e comportem-se bem (mas não muito) !
Ah, os comentários estão aí para todos: os que concordam, os que discordam e para os que não tem nenhuma opinião formada. Eu realmente me interesso pela opinião de vocês, certo? Só não vale nunca ofender quem quer que seja.
Abraços!
Inspiração : layouts de outras plataformas para inspirar novos modelos.
40 modelos cleans do Wordpress
20 sites onde encontrar lindos modelos do Wordpress
Imagens
28 sites onde editar e brincar com imagens
100 (Legal) Sources for Free Stock Images (é imagem que não acaba mais mas não se esqueça de checar sempre os termos de uso!)
Free Background for Blogger
Ícones
Icons Etc
Posts Interessantes
El Scaparate - Efecto deslizante (slide) para entradas expandibles
Gem@ Blog - Footer - Imagen y color
Vagabundia - Las fuentes de texto y sus unidades
Bloggersphera - Adsense para team e outras utilizações
Leandro Ricardo.com - Lightbox no Blogger
Por hoje é isso, amanhã coloco mais links. Abraços!
Template simples com menu horizontal e uma sidebar. Para editar os links do menu, crie uma lista de links em Elementos de Página e arraste para dentro do retangulo abaixo do cabeçalho.
Não é preciso configurar os links de feeds, porém, para ativar o serviço de enviar posts por e-mail, é preciso que você tenha queimado o feed do seu blog com o FeddBurner. Feito isso, clique no link do seu blog, na página inicial do FeedBurner, clique em Publicize - Email Subscriptions, ative o serviço e copie o código fornecido. Vá no HTML do código do template e procure pela sinalização:
!--Substitua o código abaixo pelo seu código Email Subscriptions do FeedBurner --
.......código.......
!--Fim do código do FeedBurner --
Apague todo o código entre os comentários e cole o código que você copiou.
FeedBurner:
Template 3 colunas mais menu horizontal.
- Para editar os links do menu horizontal, basta criar uma lista de links e arrastar para o retangulo abaixo do cabeçalho.
- Resumos de postagem com o hack Leia Mais...; para configurar o hack, copie o código abaixo e cole em Modelo de Postagem:
Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>
- Hack de posts relacionados incluso.
- Data no formato calendário. Vá em Configurações->Formatação e escolha o formato da data como este: 14 Abril 2009
O rodapé das postagens tem uma altura determinada e por isso não comporta mais informações além das que já exibe (link de comentários e link 'Leia Mais').
Por favor, não retirem os créditos.
EDIT 06/05 - O template estava apresentando problemas no IE (pra variar...). Para corrigir o erro, procure por este trecho do código e acrescente o que está em azul:
#main-wrapper {
width: 580px;
margin-left:10px;
_margin-left: 5px;
Para editar os links do menu, basta criar uma lista de links em Elementos de Página e arrastar para o local correspondente. A formatação da data deve ser a indicada abaixo:
Este é o dia de todas nós e os homens nos felicitam e recebemos flores e frases bonitas. Hoje é o dia Internacional da Mulher mas eu não me sinto feliz ou contente com a situação da mulher no mundo. Por que o mundo não é o nosso bairro nem o nosso país. O mundo é grande demais e em muitos, muitos lugares, a mulher vale menos que um animal.
Eu gostaria que hoje fosse mais que uma data comemorativa, eu gostaria que hoje fosse um dia de libertação.
O dia das mulheres que sofrem violência em segredo.
O dia das mulheres cheias de filhos, aprisionadas por maridos que não as amam, sem ter para onde ir.
O dia das mulheres que ainda são constrangidas pela brutalidade do homem, em casa, no trabalho, nas ruas.
O dia das mulheres violentadas e que ainda são acusadas de provocar a situação.
O dia das mulheres que trabalham fora e trabalham em casa também e não recebem o reconhecimento merecido.
O dia das meninas raptadas, estupradas, descartadas.
O dia de todas as lágrimas femininas transformarem-se em voz e esta voz ser capaz de calar a violência, o abuso, a falta de respeito.
O dia em que não haverá mais 'o homem' e 'a mulher', mas pessoas que se tratam com igualdade, por que a dor é a mesma para todos.
O dia das mulheres vendidas, apedrejadas, punidas pelos erros dos homens. O dia em que nenhuma mulher mais será obrigada a fazer o que não quer.
O dia em que uma mulher não será xingada e desrespeitada por querer exatamente o que o homem quer. Fazemos parte de um mesmo grupo, porque não temos o direito de errar e de cair?
Gostaria que hoje fosse realmente o dia de todas as mulheres, até das que foram convencidas de que não merecem respeito e amor e criam seus filhos para não respeitarem outras mulheres.
O dia das que sofrem as dores do parto sorrindo, das que passam noites e noites em claro, vigiando a respiração de seus filhos, garantindo a continuidade da espécie.
O dia das prostitutas, das loucas, das agressivas, das autoritárias, das estúpidas, das cruéis. Por que mulher não é este personagem criado pelo homem, doce, submisso e tolo. Ela é parte da mesma espécie e deve ter todo o direito de sentir as mesmas coisas, cometer os mesmos erros, sem ser punida.
Eu queria que hoje fosse um dia realmente especial, um dia de mudança, de transformação. Porque eu tenho uma filha e me dói ter que ensinar certas coisas para ela, prepara-la para a possibilidade de sofrer violência, desprezo, abandono.
Mulheres, tanto quanto for possível, não nos submetamos a condição de inferioridade em relação ao homem. Lutemos, mesmo que isso custe amizades, mesmo que isso desperte rancores. Vivemos em uma localidade do planeta onde ainda existe muito abuso, mas podemos nos expressar, podemos mostrar o rosto e gritar. Utilizemos esta liberdade em favor das que não podem nem ao menos mostrar os olhos. Vamos revolucionar o mundo, rejeitar estereótipos, educar nossos filhos para amarem e respeitarem as mulheres. Não nos submetamos aos caprichos dos homens, façamos exatamente o que desejamos fazer, sempre. Abandonemos as velhas idéias de que mulher honesta é mulher que não deseja, não luta, não vive só. Podemos fazer tudo o que queremos e isso não subtrai absolutamente nada do nosso valor.
Chega de aceitar que um homem promíscuo é garanhão e uma mulher promíscua é vagabunda. Chega de lutar contra outras mulheres, de disputar a atenção de um homem ferindo outras mulheres. Chega de condenar, difamar e enxergar o mesmo gênero como ameaça e concorrência. Vamos nos unir contra toda violência e contra toda falta de respeito.
Que hoje não seja um dia de flores e frases melosas, seja um dia de transformação.
Parabéns a todas as mulheres: é preciso muita força, muita coragem e muita determinação para sobreviver, dia após dia, neste mundo dos homens.
Antes de tudo, vai o conselho amigo da titia:
Não faça experiências com seu blog oficial! Crie um blog de testes, coloque nele uns quatro posts Lorem Ipsum (uma encheção de linguiça que soa latim), uma imagem em cada post (acima dos textos) e brinque à vontade.Primeiro vamos mudar as medidas do template (use o Mínima). Procure por #Outer-wrapper e mude o width para: 990px; Mude #header-wrapper width:100%.Mude ainda #main-wrapper width: 700px;
Agora vamos ao hack que alterna as cores/background dos posts. Este hack foi criado por JMiur e é uma variação do hack que faz uma contagem dos comentários.Procure por este trecho do código e insira o que está em vermelho:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Coloque acima de </head> o script:
<script type='text/javascript'>
//<![CDATA[
function ContarP(cual) {
var resto;
resto = contadorPosts % 2;
if (resto == 0)
document.getElementById(cual).className='entradaPar';
else
document.getElementById(cual).className='entradaImpar';
}
//]]>
</script>
e também o estilo para os posts:
<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>
Procure por este trecho do código:
<b:loop values='data:posts' var='post'>
e cole ACIMA dele:
<script type='text/javascript'>var contadorPosts=0;</script> <!-- contador a cero -->
acrescente ainda os trechos em vermelho entre os seguintes códigos:
Quem quiser conferir no original, o post é esse: Jugando con los posts.<b:loop values='data:posts' var='post'>.......<b:if cond='data:blog.pageType != "item"'><!-- no ejecutamos la función en las páginas individuales --><script type='text/javascript'>contadorPosts=contadorPosts+1;ContarP('post-<data:post.id/>');</script></b:if></b:loop>.......
</b:includable>
Visualize: se os posts aparecerem em cores diferentes (branco e preto), você fez tudo corretamente. Salve.
Bem, agora vá até o blog da Rô e leia este post onde ela ensina a colocar um hack de resumo automático de posts, com miniaturas das imagens utilizadas. Eu realmente adorei este hack e foi o mesmo que usei no Clean Magazine. Para hospedar o script, a própria Rô mostra alternativas e dentre elas, estou usando o Dropbox e até agora não tenho do que me queixar.
Só para constar, no hack para o resumo dos posts, no meu exemplo, usei estes valores:
summary_noimg = 450;
summary_img = 400;
Não se esqueça: quando colocar o hack para resumo dos posts, mantenha a configuração para os posts pares e ímpares, que passei acima:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
Muito bem, depois de instalar o resumo automático, vamos dar estilo aos posts.O trecho que nos interessa para determinar as cores e/ou imagens que usaremos, é este:
<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>
No meu exemplo, criei duas imagens de tamanho 700x190px, hospedei no TinyPic e deixei assim o código:
.entradaImpar {height:190px;background: url(http://i41.tinypic.com/2im64m.jpg) no-repeat top left; padding: 20px 35px;}
.entradaPar {height:190px;background: url(http://i40.tinypic.com/1z1rcqh.jpg) no-repeat top left; padding: 20px 35px;}
Note que além de acrescentar o link das imagens, estabeleci uma altura fixa para os resumos (height:190px) e um afastamento do texto para a borda da imagem de 20px para o topo e base e 35px para as laterais.
Mas podemos ir além disso. Podemos acrescentar outros estilos para os nossos resumos e para tanto é preciso acrescentar o seguinte código em vermelho:
<b:if cond='data:blog.pageType != "item"'>Tudo o que for colocado entre as linhas em vermelho aparecera apenas na página inicial, não afetando em nada as páginas individuais. Sendo assim, deixei o meu código desta maneira:<style></b:if>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>
<b:if cond='data:blog.pageType != "item"'><style>
.entradaImpar {height:190px;background: url(http://i41.tinypic.com/2im64m.jpg) no-repeat top left; padding: 20px 35px;}
.entradaPar {height:190px;background: url(http://i40.tinypic.com/1z1rcqh.jpg) no-repeat top left; padding: 20px 35px;}
.post-footer{display:none}.post{margin: 0 auto; padding: 0; text-align:justify}h2.date-header {display:none}
</style>
</b:if>
Em roxo: determinei que todo o conteúdo de footer não apareça na página inicial;
Em verde: eliminei o estilo para margin e padding que existe no template Mínima para os posts, aproximando-os e eliminando a borda da base. Justifiquei o texto;
Em azul: determinei que a data não apareça na página inicial.
Para terminar, eu queria que o título do blog ficasse dentro da moldura que criei para os posts e não fora dela, como naturalmente deve ficar. Para alterar a posição do título, procure este trecho:
<b:if cond='data:post.title'>E desloque ele para baixo de :
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
Lembre-se:
Estas modificações afetarão apenas a página inicial. Para criar estilos para as páginas individuais, é preciso modificar os códigos .post e .post-body do Mínima.
Quando for acrescentar o hack para resumos automáticos, não se esqueça de manter o hack para posts pares e ímpares, que passei primeiro. O código completo, com os dois hacks, e o deslocamento do título, deve ficar assim:
<div class='post-header-line-1'/>No próximo artigo trarei novas sugestões para personalizar os posts.
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span id='showlink'><a expr:href='data:post.url'> [ ... ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
O local para editar os links do menu está sinalizado no código do template.
Primeiro faça o download do pacote que contém as imagens e códigos para os 4 menus: download.
Copie o código CSS (ver abaixo) para o menu escolhido: Blue, Green, Red ou Purple e cole em qualquer lugar antes de ]]></b:skin>
Hospede as duas imagens que são pedidas para cada menu. Por exemplo, se você escolheu o Red, hospede redslate_background e redslate_backgroundOVER e coloque assim no código:
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(aqui o link da primeira imagem/code/slate/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(aqui o link da segunda imagem/code/slate/images/redslate_backgroundOVER.gif) no-repeat top center;}
Não mude nada entre os parenteses, apenas acrescente o link das imagens, como indicado.
Agora copie o trecho do HTML do código do menu :
<div class='red'>
<div id='slatenav'>
<ul>
<li><a class='current' href='http://seu link aqui' title=''>Home</a></li>
<li><a href='http://seu link aqui' title=''>About Us</a></li>
<li><a href='http://seu link aqui' title=''>Services</a></li>
<li><a href='http://seu link aqui' title=''>Our Work</a></li>
<li><a href='http://seu link aqui' title=''>Contact Us</a></li>
</ul>
</div>
</div>
e cole abaixo ou acima de:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Cabeçalho)' type='Header'/>
</b:section>
</div>
O meu ficou assim.
Espero ter ajudado.
Antes de tudo é preciso que você encontre um local para hospedar os scripts que serão utilizados. Eu recomendo o Dropbox, que estou utilizando para guardar todos os scripts que uso. Siga o tutorial da Rô e crie sua conta. Feito isto, faça o download dos scripts utilizados para conseguir o efeito:
jQuery.js
s3Slider.js
Hospede os scripts e copie os urls oferecidas. Vá no código do seu template e antes de </head> cole o seguinte código:
<script src='url-do-arquivo-jquery.js' type='text/javascript'/>
<script src='url-do-arquivo-s3Slider.js' type='text/javascript'/>
Logo abaixo, acrescente este código:
<script type='text/javascript'>Alterando o valor em timeOut (negrito) você pode mudar o tempo de transição das imagens.
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
Salve as modificações. Agora, antes de ]]></b:skin> acrescente o estilo para o slide:
/* s3slider
----------------------------------------------- */
#s3slider {
width: 720px; /* largura total do slide*/
height: 300px; /* altura total do slide*/
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 720px; /* importante que as imagens devem ter a mesma largura ou mais */
position: absolute; /* important */
top: 0; /* important */
padding: 0px;
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 15px/20px Arial, Helvetica, sans-serif;
padding: 30px 13px;
width: 720px;
background-color: #000; /*cor de fundo do slide*/
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;
/*
Nesta última linha em negrito, determina se a caixa de texto aparecerá na parte superior ou inferior das imagens
top: 0; -> a caixa de texto aparecerá na parte superior
si ponemos
bottom: 0; -> a caixa de texto aparecerá na parte inferior
*/
}
.clear {
clear: both;
}
Salve as modificações. Agora você deve posicionar o slide no blog com o código html. Um bom local é a div crosscol, que fica logo abaixo do cabeçalho. Certifique-se de que ela está visível para acrescentar o código, procurando por este trecho (não é preciso expandir modelo de widget):
<div id='content-wrapper'>Em showaddelement deve estar yes . Se o seu template não contiver este trecho, basta acrescentar, abaixo de <div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
Salve a modificação e vá para a aba Layout. Acrescente o seguinte código em crosscol (abaixo do cabeçalho):
<div id="s3slider">Para tantas forem as imagens a serem exibidas, repita o trecho :
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="url-imagem" />
<span>texto-a-ser-exibido</span>
</li>
<li class="s3sliderImage">
<img src="url-imagem" />
<span>texto-a-ser-exibido</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
<li class="s3sliderImage">
<img src="url-imagem" />
<span>texto-a-ser-exibido</span>
</li>
Se você desejar transformar as imagens em links, basta colocar:
<a href="url-link"><img src="url-imagem"></a>
Revolution Lifestyle
Demo | Download
Seabreeze
Demo | Download
Styleicious
Demo | Download
Notepad Chaos
Demo | Download
Color Paper
Demo | Download
Butterfly
Demo | Download
Black Splat
Demo | Download
Cellar Heat
Demo | Download
Creative Art
Demo | Download
Zinmag Remedy
Demo | Download
Demo | Download
Seabreeze
Demo | Download
Styleicious
Demo | Download
Notepad Chaos
Demo | Download
Color Paper
Demo | Download
Butterfly
Demo | Download
Black Splat
Demo | Download
Cellar Heat
Demo | Download
Creative Art
Demo | Download
Zinmag Remedy
Demo | Download
Veja como funciona no Demo do Template Black:
Para habilitar o hack no Template Black, vá em Configurações -) Formatação e desça toda a página. Em Modelo de Postagem, cole o seguinte código:
<p>Resumo do post</p><a href='javascript:void(0);' onclick='return verocultar(this);'>Leia Mais...</a><div style='display: none;'><p>Resto do Post</p></div>
Salve a modificação. Toda vez que você iniciar uma nova postagem, o código aparecerá (no modo HTML) e basta que você coloque o resumo e o restante do post onde está indicado. Cuidado para não apagar nenhum <p> .Você pode, inclusive, modificar o link (Leia Mais...) ao seu gosto, com outras palavras e até imagens.
Para quem deseja utilizar o hack sem trocar de template, proceda da maneira descrita acima. Depois vá em Editar HTML e antes de </head> cole o seguinte código:
<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>
Salve a modificação.
Obs: é possível que apareça um espaço grande entre o resumo e o restante do post. Para evitá-lo, tente deixar o texto unido ao código, sem pular linhas.
Atenção: Para quem já utiliza o outro hack Leia Mais e deseja trocar por esse, apague a formatação anterior em Modelo de Postagem e coloque o código descrito neste post. Depois, vá em Editar HTML , clique em Expandir Modelo de HTML e procure por:
<b:if cond='data:blog.pageType == "item"'>Apague tudo e coloque no lugar:
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Leia Mais…</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div class='post-body entry-content'>
<data:post.body/>
Aproveite e apague o script que você usou anteriormente (antes de </head> ) para que esse hack (o antigo) funcionasse. Visualize e se tudo estiver ok, salve.
É proibido retirar os créditos, ok?
Copie o trecho de div.corner (mas retire o div) e cole abaixo de .post, ficando assim:
.corner {Hospede a imagem correspondente e coloque no local indicado. Este trecho, como vocês podem ver com o Firebug, refere-se ao detalhe no canto superior direito de cada post, que é como se fosse uma dobra de papel. Para inserir este trecho, não basta apenas o CSS, é preciso colocar esta div class no HTML. Para isso, salve as modificações, depois clique em Expandir Modelo de Widget. Procure por: <div class='post hentry uncustomized-post-template'> e cole logo abaixo :
float: right;
width: 88px;
height: 79px;
background: url(images/corner.gif) no-repeat;
display: block;
margin-top: -16px;
margin-right: -16px;
}
<div class='corner'/>
Veja que é uma div vazia, não há conteúdo nela. Ela serve apenas para exibir a imagem. Visualize; a imagem deve aparecer no topo dos posts.
Copie o trecho referente a div.big-post h2 a e cole em .post h3, a correspondência é a mesma. Deve ficar assim:
.post h3 a{
text-decoration: none;
color: #333;
font-size: 19px;
line-height: 1.2em;
letter-spacing: -1px;}
div.big-post h3 corresponde ao estilo das letras nas informações abaixo do título. Para conseguir alinhar estas informações, criei um novo bloco para contê-los, que chamei de post-info. Pegue as informações para div.big-post h3 e cole em post-info, assim:
#post-info{No próximo capítulo vou ensinar como modificar a posição destas informações, no HTML.
margin: 0 auto 0;
display:block;
height:25px;
width: 640px;
text-decoration: none;
color: #777;
font-size: 12px;
padding: 5px 0;
text-transform: uppercase;
font-weight: lighter;
border-bottom: 1px dotted #ccc;
}
As linhas em negrito são informações que eu acrescentei, para que o bloco obedecesse às dimensões que constam no tema original. Nem tudo é copiar e colar, por isso é que expliquei, no início, que é necessário algum conhecimento de HTML e CSS para fazer a conversão. Nem sempre copiar e colar basta. É preciso entender as diferenças entre os temas e a necessidade de inserir informações, quando for preciso. Sigamos...
Copie todo o trecho para a.redmore e cole, renomeando para #showlink, pois este é o nome da div no hack Leia Mais..., que usaremos aqui. Deve ficar assim:
#showlink {Hospede e coloque a imagem no local apropriado.
padding: 11px;
padding-left: 55px;
font-size: 12px;
background: url(images/readmore.gif) no-repeat left;
text-decoration: none;
color: #444;
border-right: 1px solid #ccc;
}
Copie todo o trecho para #footer e #footer-wrapper e substitua o trecho correspondente no Blogger. Salve as modificações. Desça a página toda e lá no final, antes de </body>, você encontrará a parte do HTML de Footer. Apague todo o trecho e cole no lugar:
<!-- Footer -->
<div id='footer'>
<div id='footer-wrapper'>
<big>
<big>
<strong>© 2009 My Web Blog</strong>
</big>
</big>
<br/>
<small>
<strong>
<a href='http://www.freethemelayouts.com/' style='color: rgb(255, 255, 255); text-decoration: none;'>Wordpress Theme</a>
designed by DT
<a href='http://www.dreamtemplate.com' style='color: rgb(255, 255, 255); text-decoration: none;'>Website Templates</a>
<strong/>
</strong>
</small>
</div>
</div>
Slave as modificações. Continua no próximo post.
Veja também: Convertendo tema do Wordpress para o Blogger I
Também espero que me ajudem, apontando falhas que possam aparecer em outros navegadores; eu só testei no FF e IE7.
Depois de passar tres dias trabalhando nas mudanças, vou descansar um pouquinho com minha família e curtir este final de domingo. Semana que vem publico a segunda parte do tutorial sobre como converter o tema do wordpress e outras novidades.
Abraços!
Leia as explicações de como colocar seus links nos menus:
Menu Horizontal
Procure por este trecho no código do template e edite nos locais indicados:<!-- Menu coloque seus links do menu aqui! -->
<div class='topnavi'>
<ul>
<li class='current_page_item'>
<a href='http://seublog.blogspot.com'> Home </a>
</li>
<li class='page_item page-item-2'>
<a href='http://link' title='About'>About</a>
</li>
<li class='page_item page-item-3'>
<a href='http://link' title='Contato'>Contato</a>
</li>
</ul>
</div>
<!-- Fim do menu -->
Para editar o titulos do menu superior à esquerda:
procure por este trecho e edite nos locais indicados:
<!-- Títulos do menu superior lado esquerdo -->
<div class='dfeader_mid_01_navi'>
<ul>
<li><a class='dfhead_hili' href='javascript:toggleHead(1);' id='lfta1' onFocus='this.blur();'>Titulo Primeiro</a></li>
<li><a href='javascript:toggleHead(2)' id='lfta2' onFocus='this.blur();'>Titulo Segundo</a></li>
<li><a href='javascript:toggleHead(3)' id='lfta3' onFocus='this.blur();'>Titulo Terceiro</a></li>
</ul>
</div>
Para colocar os links do Titulo Primeiro:
<!-- Links do Titulo Primeiro -->
<div class='dfeader_mid_innercont' id='lft1' style='display:block;'>
<ul>
<li><a href='http://'>Link 01</a></li>
<li><a href='http://'>Link 02</a></li>
<li><a href='http://'>Link 03</a></li>
<li><a href='http://1'>Link 04</a></li>
</ul>
</div>
Links do Titulo Segundo e Terceiro estão sinalizados da mesma maneira.
<!-- Titulos Menu lado Direito -->
<div class='dfeader_mid_02_navi'>
<ul>
<li><a class='dfhead_hilia' href='javascript:toggleHeadrt(1)' id='rta1' onFocus='this.blur();'>Titulo Primeiro</a></li>
<li><a href='javascript:toggleHeadrt(2)' id='rta2' onFocus='this.blur();'>Titulo Segundo</a></li>
<li><a href='javascript:toggleHeadrt(3)' id='rta3' onFocus='this.blur();'>Search</a></li>
</ul>
</div>
A sinalização para colocar os link/texto é idêntica para o lado esquerdo. Se utilizar um dos espaços para inserir texto, como é sugerido, coloque-o entre as tags <p> e </p>
Formatação da data dos posts:
- Faça o download do tema que será convertido aqui e guarde o link da visualização do tema(é o décimo segundo, de cima para baixo - GreenDark)
- Se você ainda não tem, baixe um editor de HTML. Recomendo o MAX's HTML Beauty++
- Baixe o Firebug, uma extensão indispensável do Firefox (ou seja, use o Firefox). Este item é muito importante, pois o Firebug nos dá uma visão rápida e clara da hierarquia da div's e classes.
- Providencie um local para guardar as imagens: recomendo o TinyPic, que ao contrário do ImageShack e do Photobucket, nunca me deixou na mão.
- Crie um blog só para isso, assim você não perde nada importante e pode errar à vontade. Coloque nele algum conteúdo falso, para poder visualizar bem as mudanças que irá fazendo. Você pode criar posts só com Lorem Ipsum. Copie e cole trechos deste texto sem sentido, para enxertar conteúdo no blog vazio. Crie lista para a sidebar, umas tres de preferência.
Abra o demo do tema em uma aba do seu navegador e visualize a hierarquia das div's e classes com o Firebug:
Note que quando você coloca o cursor sobre o nome de uma Div, ou Class, o espaço correspondente se destaca no template, em azul. Isto dá uma visão muito clara das correspondências e dimensões de cada elemento.
Mas, primeiro, vamos passar para o Blogger o documento CSS do tema do Wordpress. Muitas pessoas, quando fazem conversões, utilizam os nomes dos seletores originais do tema convertido. Penso que isso dificulta bastante o usuário do Blogger a fazer modificações futuras, pois não encontrará denominações correspondentes em nenhum tutorial de ajuda. Por exemplo, se no tema do wordpress a div main-wrapper é chamada SCC, eu mantenho o nome main-wrapper, apenas altero os códigos como manda o arquivo style.
Só para relembrar, a sintaxe de uma regra CSS é esta:
seletor{propriedade: valor }
O que faço é manter, tanto quanto possível, os seletores originais do Blogger.
1- Body e Outer-Wrapper
Abra o arquivo style no editor html. Logo no topo você encontrará os créditos do template. Sempre se certifique se o autor permite alterações no tema. Sempre mantenha os créditos! Copie todo o trecho e cole junto aos créditos originais do seu template (escolha o Mínima):
Agora copie todo o trecho que vai de * {margin: 0;padding: 0;} até a {color: #728fa1;font-weight: bold;} do documento style, e cole, substituindo todos estes do seu blog:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
O que estamos fazendo é substituir um estilo por outro, apenas isso. Note que body do tema wordpress pede uma imagem de fundo:
background: url(images/background.gif) repeat-x top #fff;
Esta imagem se encontra na pasta Images, com o mesmo nome: background. Hospede a imagem e coloque o link entre os parenteses.
Logo abaixo no documento style, você verá:
#wrapper {
width: 900px;
margin: 0 auto;
text-align: left;
}
Usando o Firebug você notará que esta div vem logo após body e que o correspondente no Blogger é Outer-Wrapper. Copie e cole o trecho no lugar de Outer-wrapper (e mantenha o nome do seletor, para não precisar alterar no html) ficando assim:
#outer-wrapper{
width:900px;
margin: 0 auto;
text-align:left}
2 - Header, Search, Subscribe, Nav
Copie a propriedade e o valor para #header e passe para #header-wrapper:
#header-wrapper{height: 140px;}
Em seguida, no documento style, aparece o seletor #logo. Veja com o Firebug que ele corresponde a #header:
Transfira as propriedades e valores de #logo para #header, ficando assim:
#header {float: left;width: 300px;height: 100px;padding: 37px 10px;padding-bottom: 0;}
Novamente visualizando com o Firebug, você verá que #logo h1 a corresponde ao título do blog, o que no blogger se apresenta como #header h1. Faça a transferência das propriedades e valores de um para o outro, ficando assim:
#header h1 {
text-decoration: none;
color: #fff;
font-size: 26px;
letter-spacing: -1px;}
#logo h2 refere-se a descrição do blog. No Blogger este seletor se apresenta como #header .description. Faça a conversão:
#header .description {
color: #fff;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: lighter; }
Apague os seguintes trechos do seu blog (não há correspondência entre eles e o tema do wordpress):
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;}
Copie completamente todo o código referente a #search, #subscribe e #nav e cole logo abaixo de #header .description. Hospede as imagens que são pedidas e coloque os links nos locais correspondentes. Salve as modificações. Com o Firebug novamente, note que #logo, #search e #subscribe estão contidas na div #header. #logo, ( título e descrição do blog), não precisa ser inserido no código (lembra que mantivemos os nomes dos seletores do blogger: #header h1 e #header .description? Foi justamente para não precisar modificar o HTML à toa). Copie então os códigos html para #search e #subscribe (clique no sinal de + para expandir totalmente o código) e cole dentro da div #header:
Note na imagem que copiei até o final, incluindo a tag que fecha a div #header
No seu blog esta tag de fechamento já existe, portanto, ao copiar o código, cuidado para não deixar duas tags de fechamento e receber em troca uma mensagem que impeça a visualização.O código no HTML deve ficar como se apresenta na imagem abaixo:
Visualize e veja como ficou o cabeçalho.
Copie o código para #nav no documento style e cole no CSS, abaixo do código para #subscribe. Hospede a imagem para #nav ul li a:hover
e coloque o link no local correspondente. Volte ao Firebug e copie o código HTML de #nav, colando no seu blog abaixo da div #header (atenção: fora da div #header!>. Lembre de expandir todo o código clicando em todos os sinais de +. Visualize.
3- Content, Sidebar e Main
Veja que a div #content no tema wordpress corresponde a div #content-wrapper do Blogger. Como ela já existe no HTML, acrescente apenas no CSS, assim:
#content-wrapper {
clear: both;
padding-top: 20px;}
Copie as propriedades e valores para #sidebar e substitua as que se encontram no seu blog, sem apagar os trechos em negrito:
#sidebar-wrapper {
width: 220px;
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 */
}
*Estes códigos em negrito, grosso modo, garantem que o texto não extrapolará os limites da coluna no IE. Por isso, não apague estas linhas.
Veja que na verdade, a única diferença entre os dois é a flutuação, que no tema do wordpress é à esquerda.
Novamente usando o Firebug, veja que div.sidebar corresponde a cada bloco de widget da sidebar. No Blogger, este código já existe e se apresenta como:
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Aqui as propriedades e valores são os mesmos para as widgets da sidebar e de main, por isso vamos separar os dois, já colocando as especificações para sidebar que há no tema wordpress, assim:.sidebar .widget{
padding: 15px;
background: url(images/sidebar.gif) repeat-x bottom #fff;
border: 1px solid #ccc;
margin-bottom: 10px;}
.main .widget{
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Copie os códigos para #sidebar h2 , #sidebar ul li e #sidebar li (este último está mais abaixo no documento style, depois de #footer) e substitua os que se encontram no blog, que são:
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
Hospede e coloque as imagens nos locais correspondentes. Visualize.
#column corresponde a main-wrapper. Copie as propriedades e valores e substitua as que se encontram no Mínima, sem alterar as linhas word-wrap: break-word; e overflow: hidden; ficando assim:
#main-wrapper {
width: 650px;
float: right;
padding-left: 20px;
word-wrap: break-word;
overflow: hidden;
}
div.big-post e div.small-post correspondem a .post no blogger. Os dois tem as mesmas propriedades e valores, com exceção do título da postagem, que em big é maior que small. Eu sinceramente não soube como fazer esta divisão, deixando só os dois primeiros posts com o título maior e o restante com título menor. Por isso, optei por small para todos. Copie as propriedades e valores para div.small-post e coloque em .post, ficando assim:
.post {
padding: 15px;
padding-bottom: 13px;
background: url(images/post.gif) repeat-x bottom #fff;
border: 1px solid #ccc;
width: 600px;
margin: 5px;
float: left;
vertical-align: top;
}
Hospede e coloque o link da imagem dentro do parêntese.
Continua no próximo post.
São 05:30hs (olha a hora...) e acabei de converter o tema do Wordpress que escolhi para explicar para vocês. Passei a semana tentando muitos temas e de quebra acabei convertendo também o DFOriginal, que era o tema que o Deziner Folio usava até bem pouco tempo ( que eu sempre namorei...) e que agora colocaram à disposição para download. Ainda preciso fazer uns ajustes e provavelemente esta semana já coloco o link para baixar.
Mas o tema que escolhi para converter com vocês é este: GreenDark. Óbviamente escolhi um mais simples para começar, pois temas no estilo magazine ou com slides são mais complicados. O tema já está convertido (acabei agora...) e pode ser visto aqui. Já testei em vários navegadores e claro, no IE6 não ficou bom, mas decidi não mais me importar com um navegador tão ultrapassado.
Nota rápida para iniciantes:
Se você está começando agora a navegar na Internet, entenda uma coisa: quando você adquire um computador, ele vem com um navegador, geralmente o Internet Explore 6, que está completamente ultrapassado! Você não é obrigado a usar apenas ele para entrar na internet. Você pode e deve trocar de navegador! Basta fazer o download de outro: Internet Explore7, Firefox, Ópera...Os downloads são ultra rápidos, indolores e você descobrirá uma internet mais bonita, muito mais rápida e fácil de navegar. Vai por mim, você ainda vai me agradecer por este toque :D
Enfim, continuando...para quem deseja acompanhar as explicações que começarei a postar amanhã, se prepare:
- Faça o download do tema que será convertido aqui e guarde o link da visualização do tema.
- Se você ainda não tem, baixe um editor de HTML. Recomendo o MAX's HTML Beauty++
- Baixe o Firebug, uma extensão indispensável do Firefox (ou seja, use o Firefox). Este item é muito importante, pois o Firebug nos dá uma visão rápida e clara da hierarquia da div's e classes.
- Providencie um local para guardar as imagens: recomendo o TinyPic, que ao contrário do ImageShack e do Photobucket, nunca me deixou na mão.
- Crie um blog só para isso, assim você não perde nada importante e pode errar à vontade. Coloque nele algum conteúdo falso, para poder visualizar bem as mudanças que irá fazendo. Você pode criar posts só com Lorem Ipsum. Copie e cole trechos deste texto sem sentido, para enxertar conteúdo no blog vazio. Crie lista para a sidebar, umas tres de preferência.
***********************************************************************************
E pra encerrar, queria só escrever mais umas linhas sobre uma coisa que pensei todo o dia, enquanto convertia o tema: algumas pessoas me enviam e-mails com agradecimentos muito especiais, que me emocionam bastante. São pessoas que estão passando por momentos complicados, ou que se sentiam solitárias, depressivas e até inúteis. Elas me contam que graças a estas explicações que dou aqui, encontraram uma nova e agradável ocupação e se sentem melhores e acham que devem me agradecer por isso. Eu não tenho o costume de me expor, este blog nem Perfil tem, mas vou contar uma coisa: eu não me sinto tocada por que penso que estou fazendo um bem pra humanidade ou coisa do tipo. Eu me sinto tocada por que eu estava em depressão profunda quando ganhei meu primeiro computador, e me ocupar de blogs e layouts me tirou de um buraco que vocês nem podem imaginar. Eu entendo perfeitamente quem me escreve.
Encontrar uma nova ocupação que seja agradável, que dê imediata e positiva resposta às nossas tentativas (como no caso de enfeitar blogs), pode ser a salvação da lavoura quando estamos nos sentindo mal, solitários ou inúteis. Por isso, eu não ligo se me chamam de fazedora de templates ou o que inventarem. Eu sou uma pessoa que se sentia muito, muito mal e que encontrou uma simples ocupação que faz com que eu me sinta bem, muito bem. Só isso.
Pode parecer uma bobagem, mas para muitas, muitas pessoas, manter um blog ou criar templates, gifs, tubes, seja o que for, é uma terapia ocupacional importantíssima para manter a tristeza e a solidão afastadas. Nem todo mundo tá ligando pra rankings e blogosfera. Muita gente só quer blogar e esquecer dos problemas.
Por isso, se você quer tentar mas fica aí pensando que não sabe nada, que não consegue, que não pode...deixe de coisas e tente! Eu não sabia ligar um computador, ok? Eu tenho 35 anos e só fui ver o que era a internet em 2004. Até hoje eu apanho, apanho muuuuito para fazer ou converter um template. Mas, e daí? Dai que passo meu tempo fazendo algo trabalhoso mas gratificante. Me ocupo do que é bonito e não mais de tristeza. Se eu posso, você também pode, ué!
E não me venham com 'eu já tô velha(o), não consigo entender...' Deixe de desânimo! Eu sou uma balzaquiana muito xereta e teimosa e não me imponho limites, não! Também não ligue para as críticas : é impossível agradar todo mundo e também tá cheio de gente por ai que só fica feliz quando consegue tombar alguém. Encosto a gente canta pra subir :D
Vocês que me agradecem, saibam que eu sei exatamente o que vocês sentem. Eu é que tenho muito a agradecer à todos vocês, que passam aqui todos os dias, que escrevem coisas lindas e que me fazem me sentir tão bem. Obrigada
Amanhã começamos a converter o tema: todo mundo tentando junto e os comentários estarão abertos para que vocês tirem todas as dúvidas e o que eu souber respondo.
Perdoem as dezenas de erros, centenas de vírgulas inúteis e etc, por que a esta hora não vou nem ler o que escrevi :D
abraços!
Pois é, a Blogo.it , rede italiana de sites cujo primeiro blog brasileiro, o Fofocando Blog , está completando 1 ano no ar, está procurando por pessoas que curtam blogar e que tenham disciplina para escrever com frequência. Veja bem, eles estão dispostos a pagar para que você escreva sobre o que gosta. Vai me dizer que não é tentador!?
Enfim, para concorrer a esse emprego dos sonhos de todo blogueiro, siga as instruções:
1 - Visite os blogs da Blogo.it e procure saber com qual dos assuntos você tem mais familiariedade. Estes são os links:
- Viajandaun - Viagens
- Carango Blog - Automóveis
- Cria Design - Design
- Eletronicoblog - Eletrônica
- Bela Vida - Cultura Italiana
- Das Marias - Universo Feminino
- Horóscopo do Dia - Astrologia
2 - Além destes, a Blogo.it também lançará em breve blogs sobre os seguintes assuntos: jogos, música, motos, cinema e cultura gay. Mande um email para brasil@blogo.it, explicando sobre qual assunto você quer escrever, e qual a sua experiência. Envie alguns exemplos de textos seus, e não se esqueça de deixar seus contatos (e-mail, msn, telefone....).
Você poderá bater um papo com o pessoal da Blogo.it, para tirar dúvidas e se apresentar, visitando o Campus Party 2009, que será realizada em São Paulo, no Centro Imigrantes. A equipe da Blogo.it estará lá no dia 24/01, apresentando seus sites a partir das 14 horas no Campus Blog.
Obs: não precisa de uma formação ou faculdade e muito menos um C.V em pdf.
Essa é uma excelente oportunidade de aumentar sua renda, fazer o que gosta e se tornar um blogueiro profissional!
Este é um post patrocinado.
- Depois de ler a opinião do pessoal nos comentários, sobre converter temas do wordpress, decidi fazer um tuto mais um vídeo, mostrando como faço a conversão. Já quero adiantar que é algo muito simples - o que faço é ir transplantando os códigos de um para outro, apenas isso. Não é nenhuma fórmula mágica, nenhum truque sensacional. Apenas vou passando o código de um para o outro, só. Provavelmente o post sai no começo da semana que vem. Ando com pouco tempo - as férias escolares aumentam a carga horária de mãe :) - mas já estou quase terminando.
- Apesar de ter deixado um aviso no formulário de comentários de que não estou respondendo perguntas por enquanto, elas chegam aos montes, todos os dias. Não é por maldade que não respondo, é falta de tempo mesmo. Geralmente as perguntas são sobre detalhes muito específicos de um blog, o que me obriga a acessar a página, olhar o código fonte, etc. Por isso, peço a compreensão de vocês, mais uma vez.
- O blog CSSPadrões (excelente, por sinal ) criou uma nova página, o Notícias Blogosfera, que pretende nos informar sobre todas as novidades do meio. O post de estréia é uma entrevista comigo (pode?) o que me deixou super hiper ultra honrada, mesmo. Agradeço muito as palavras elogiosas e espero poder ainda fazer jus a tanta generosidade comigo.
- Não sou dada a memes e correntes mas este meme que o Marcos Lemos do Ferramentas Blog me passou é muito interessante: Blogs que ajudam a blogar. A idéia é listar cinco blogs que ajudam outros blogueiros a criarem e manterem suas páginas, com dicas, truques e templates. A idéia original partiu do Aberto do Mestre Blogger. Sem mais delongas, aqui vai minha listinha (tentando sair um pouco fora das minhas indicações costumeiras, selecionei blogs escritos em castelhano, ok?):
Gem@Blog - outro blog excelente, com dicas super úteis e cheio de simpatia. Ajuda e muito!
La Bloguería - outro blog excelente, cheio de dicas imperdíveis.
El Escaparate - o subtítulo já avisa 'Ayuda para tu blog'. Quer aprender a colocar emoticons no blogger? Faça uma visita!
Randomness - Dicas muito úteis e templates muito bonitos.
Repasso o meme para:
Templates para você
Templates e acessórios
Gem@Blog
Vagabundia
CSS Padrões
- Dia 19/01 começa o Campus Party Brasil 2009, uma concentração enorme de blogueiros de todo o pais. Eu até me programei para ir, mas infelizmente não vai dar... Fica para 2010. Mas, acompanharei as notícias e novidades transmitidas por quem vai, inclusive a nossa querida Dr.Juliana. Dia 16 agora se encerra a fase de votação do Best Bogs Brazil 2008. O Templates Novo Blogger não vai levar nem prêmio de consolação (vige, tá em penúltimo! :D) mas, quero agradecer muito, muito mesmo os votos obtidos: 69 pessoas se deram ao trabalho de se cadastrar no site só para dar seu voto ao Templates. Gente, acho isso o máximo e agradeço mesmo, de coração.
Mas, de qualquer maneira, para quem deseja aprender sobre o assunto, pensei em colocar um vídeo, só não sei se será suficiente. Acredito que ficaria muito longo e não sei se teriam interesse em assistir. Teriam? Pensei até em criar um grupo para transmitir informações, mas também não sei de que maneira entraria em contato com o grupo.
Como tenho interesse em ensinar, mas não sei ainda como, abro o espaço dos comentários para saber quantos tem interesse sobre o assunto e para que me passem sugestões de como transmitir as informações para vocês. Fico aguardando.
Obs: é necessário que você tenha pelo menos um conhecimento básico de CSS e HTML. Também já adianto que é algo trabalhoso, até mesmo cansativo, por isso, deixe seu nome se você realmente tiver interesse em aprender, ok?
Clique no canto inferior direito do video para ampliar e em HD para vê-lo em alta definição.
Menu Horizontal from Ariane on Vimeo.
Link direto para a página onde o vídeo está hospedado: Vimeo - Menu Horizontal
