Layout free: Flowers

Esse layout contém:

• Títulos de post, negrito, itálico, sublinhado, riscado, links e gadgets personalizados
• Cabeçalhos prontos + Tutorial de Slide em um cabeçalho pra o template abaixo
• Barra de rolagem personalizada
• Data personalizada
• Leia mais, Antigas, Home e Recentes personalizados
• Menu wishlist 
• Menu de Extras

Para ver o tutorial, os cabeçalhos e fazer o download clique em "Leia Mais"

Download:

Baixe o Layout Aqui

Modelos de Cabeçalho(clique para ir na base da imagem):

Cabeçalho modelo com Slide:

(onde está o Equipe você pode apagar)

Cabeçalho modelo com Mensagem de Welcome:

Cabeçalho simples, baseado no cabeçalho lindjo e seduzente do The Lovers:

Pessoinhas queridas, como podem ver em um dos modelos de cabeçalho, tem um espaço rosa. Esse espaço é caso queiram colocar slides com numeração no blog.

Primeiro, você precisa pegar uma imagem no tamanho 358x196px(pixels), colocando o nome de uma postagem que queira dar destaque.
Depois, vá em  </head> e adicione esse código acima dela:

<!-- JavaScript Slider Horizontal - Inicio-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece

$(".paging").show();

$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.

var imageWidth = $(".window").width();

var imageSum = $(".image_reel img").size();

var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size

$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function

rotate = function(){

var triggerID = $active.attr("rel") - 1; //Get number of times to slide

var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class

$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation

$(".image_reel").animate({

left: -image_reelPosition

}, 500 );

};

//Rotation + Timing Event

rotateSwitch = function(){

play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds

$active = $('.paging a.active').next();

if ( $active.length === 0) { //If paging reaches the end...

$active = $('.paging a:first'); //go back to first

}

rotate(); //Trigger the paging and slider function

}, 7000); //Timer speed in milliseconds (3 seconds)

};

rotateSwitch(); //Run function on launch

//On Hover

$(".image_reel a").hover(function() {

clearInterval(play); //Stop the rotation

}, function() {

rotateSwitch(); //Resume rotation

});

//On Click

$(".paging a").click(function() {

$active = $(this); //Activate the clicked paging

//Reset Timer

clearInterval(play); //Stop the rotation

rotate(); //Trigger rotation immediately

rotateSwitch(); // Resume rotation

return false; //Prevent browser jump to link anchor

});

});

</script>

<!-- JavaScript Slider Horizonta - Fim-->

Agora, vá em Modelo>Editar HTML e adicione o seguinte código acima de ]]></b:skin>  :

/*--Slides--*/

/*--Container geral--*/

.main_view {

float: left;

position: relative;

margin-top: -247px; /*--Quanto mais baixo o valor, mais os slides sobem --*/

margin-left: 488px; /*--Quanto mais alto o valor, mais os slides vão pra esquerda.--*/

}

/*--Estilos do container das imagens--*/

.window {

height:196px; /*-- Altura do Slide (as imagens devem ter a mesma altura */

width: 358px;  /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */

overflow: hidden;

position: relative;

}

.image_reel {

position: absolute;

top: 0;

 left: 0;

}

.image_reel img {

float: left;

}

/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/

.paging {

position: absolute;bottom: -5px; /*--Quanto mais baixo o valor em -, mais ele sobe--*/

right: 175px; /*--Quanto mais alto o valor, mais ele vai para a esquerda--*/

width: 220px;

height:41px;

z-index: 100;

text-align: center;

line-height: 40px;

-moz-border-radius-topleft: 15px;

-moz-border-radius-bottomleft: 15px;

-webkit-border-radius-bottomleft: 15px;

-webkit-border-radius-topleft: 15px;

display: none;

}

/*--Estilos do link da numeração (Estilo dos numeros)--*/

.paging a {

outline:none;

padding: 5px 10px;

text-decoration: none;color: #fff;

 /*--Cor da fonte --*/

background: #87C2CC; /*--Cor do fundo--*/

-moz-border-radius: 17px;

-khtml-border-radius: 17px;

-webkit-border-radius: 17px;

}

/*--Estilos do link ativo da numeração--*/

.paging a.active {

font-weight: bold;

color: #fff; /*--Cor da fonte --*/

background: #896356; /*--Fundo do link ativo--*/

-moz-border-radius: 17px;

-khtml-border-radius: 17px;

-webkit-border-radius: 17px;

}

/*--Estilos do link hover da numeração--*/

.paging a:hover {

font-weight: bold;

background: #F7B4BE; /*--Fundo Hover da numeração--*/

}

.feed-links {

 display: none;

}

/*--Fim dos slides--*/

 

O código já está alterado conforme o cabeçalho de modelo, então, se for trocar o cabeçalho, mude os valores do container geral e tudo que você pode querer mudar tem as informações já ao lado.

Agora, para colocar os links, você vai em Layout e vai colocar um gadget de HTML bem embaixo do cabeçalho, com esse código:

<div class="main_view"><div class="window"><div class="image_reel"><a href="LINK_1" alt="" ><img src=" URL_DA_IMAGEM_1"/></a><a href="LINK_2" alt=""><img src=" URL_DA_IMAGEM_2"/></a><a href="LINK_3" alt=""><img src=" URL_DA_IMAGEM_3"/></a><a href="LINK_4" alt=""><img src="URL_DA_IMAGEM_4"/></a></div></div><div class="paging"><a href="www.blogger.com" rel="1">1</a><a href="www.blogger.com" rel="2">2</a><a href="www.blogger.com" rel="3">3</a><a href="www.blogger.com" rel="4">4</a>
</div></div>

Modifique o que está em negrito.

Créditos ao Cherry Bomb e ao Tutoriar viu pessoas? Só foi modificado pro modelo de cabeçalho.

------------------------------------------------------

Ah, sim, para colocarem link no cabeçalho sigam esse tutorial: Mapeando facilmente uma Imagem, do Menina Nerd

Os créditos de tutoriais e itens que eu peguei: 

Cherry Bomb

Bad reputation

Kawaii World

The Lovers

We Heart It HTML

Tutoriar

Chili Piink

Single Themes

E sim, foi praticamente toda minha barra de favoritos de tutoriais aqui, lol.

Ah, e as Regras, por último:

• Podem mudar o cabeçalho e as budegas tudo, mas se usarem como base ao menos coloquem escrito ali bonitinho em um canto, sabe?
• Podem se inspirar à vontade, pelas cores ou algo do tipo, mas me mostrem depois, que eu gosto de ver essas coisas lindjas que vocês fazem.
• Se usar o template normal mesmo, não retire os créditos do rodapé, oki? Sério, plágio é uma budega tão do mal pessoinhas!

Bem, é isso. Tomara que tenham gostado.