Esse template tem um efeito interessante com script jQuery e CSS, o “Page Flip” instalado no canto superior direito da página, que dá um charme todo especial ao desenho além de chamar a atenção para a assinatura do Feed Newesletter.

Confira no Blog Demo.

 

Demo / Download

Propriedades:

• Header com Page Flip

• Menu de navegação inserido no CSS/HTML

• Caixa de busca interna personalizada

• Posts resumidos com thumbnails

• Blockquote personalizado

• Sidebar com 3 colunas

• Elementos individuais (widgets)

• Script “Scroll to top” (voltar ao topo)

Instalação:

Depois de fazer o download do documento XML para seu computador

• Faça login no Blooger

• No painel clic em “Layout”

• Clic em “Editar HTML”

• Faça um back up do blog antigo (se for o caso)

• Clic em “Enviar Arquivo”

• Clic em “Fazer Upload”

• Confirmar e Salvar

Configurações:

Direcionamento - Feed Nwesletter

Em Seu HTML, procure pelo seguinte trecho (use Ctr + F):

<div id='pageflip'>
<a href='SEUENDEREÇOFEED'><img alt='' src='http://i9.photobucket.com/albums/a65/mamanunes/page_flipPeel.png'/></a>

Menu:

Dentro do seu HTML, procure pelo seguinte código (use as teclas Ctr + F)

<ul class='solidblockmenu'>

Abaixo dele, observe o trecho abaixo. edite nos locais indicados: endereço (em verde) e nome do link (em vermelho)

<li> <a href='ENDERECODOSEUBLOG'>Home</a></li>
<li><a class='current' href='ENDEREÇODOLINK'>Contato</a></li>
<li><a href='ENDEREÇODELINK'>Link</a></li>
<li><a href='ENDEREÇODELINK'>Link</a></li>

Se quiser acrescentar mais links, repita o trecho:

<li><a href='ENDEREÇODELINK'>Link</a></li> quantas vezes forem necessárias.

Caixa de busca interna:

Procure pelo código abaixo e escreva o nome do seu blog onde está em vermelho. Ex.: mamatestes1.blogspot.com

<form action='http://SEUBLOG/search' id='searchthis' method='get' style='display: inline;'>

Configurar data de postagem

Em “Configurações” clic na aba “formatação” e em “Formato da data” deixe assim:

Ex.: 18 Setembro 2009

 

Imagens em PNG para o Page Flip

Você poderá mudar a imagem onde está a mensagem Feed. Procure em seu HTML o seguinte trecho e insira o endereço da sua imagem no campo em vermelho:

 

#pageflip .msg_block {
width: 70px; height: 70px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(ENDEREÇO DA IMAGEM) no-repeat right top;
}

 

Abaixo a imagem que está no modelo e ao lado a imagem para customização.