Layout Free: Hime Magical

Ohayoooooo....oooo.... como vão todos? Espero que bem! Hoje venho trazer um layout para vocês. Bom ele estava guardado a muito tempo, havia criado ele para um blog de poesias rs mas acabou ficando só no layout mesmo. Então... vou compartilhar ele com vocês. O layout é bem feminino, então para não ficar meio injusto para semana vou trazer outro layout masculino. O que acham? Então vamos lá!

Layout Hime Magical

DEMO || DOWNLOAD|| HTML

::Regras de uso::

- Não dizer que foi você que fez ou pegar partes do layout.
- Proibido remover os créditos do rodapé, caso remova coloque em outro local "visível".
- Pode modificar cores, acrescentar menus, mudar imagens como: slide, banner etc...
- Nunca use como base, pós já tem disponível um layout base aqui no blog (x).
- Não disponibilizar para download.
- Se usar/baixar comente por favor.
- Qualquer plagio encontrado em algum site/blog será alertado, caso não se resolva será   "denunciado".

Códigos do template:

Se você copiar o código diretamente do pastebin e colar no seu HTML, os gadgets já vão com seu conteúdo. 

Botão de seguidores - Gadget no topo (crosscol-overflow):

<div style="position: fixed; margin-top: 90px; left:30px;">
<a href="#" target="_blank"><img src="http://static.tumblr.com/xpo2exu/bvondcv2l/follow.png" /></a></div>

A onde está # coloque o ID do seu blog, aqui eu ensino como fazer isso. Siga o tutorial a partir da etapa 2.

Olá bunnie's, bem vindos! - Primeiro gadget da sidebar:

<img src="http://static.tumblr.com/xpo2exu/GdRn56h7o/well.png" style="margin-right: 6px;" class="kouga" align="left" />
<div style="text-align: justify;">
Olá amorecos, sejam bem vindos ao Hime Magical. Eu me chamo Drw Wendy, espero que possam gostar do meu cantinho o criei para postar coisas pessoais minhas. Bem não sei bem como fazer isso, mas resolvi fazer. Então espero que gostem. Muito obrigada pela visitar, e se puder deixe um recadinho. <img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FRyfsZJdVB2zJUSVTSAeGjdSVT3N9o0FiRBYJ5peNltcV_Bmz4mWHpNBU8MmLxaXBW0V1O4XcvBlAwJrC4c9ZR2GqbjK9Sggd9tTbXZ3XnSNuz9CSZFS2HoU5lQ_TAzybdKVjGHaZS8f/s21/Emoticons%2520Japones%25C3%25AAs%2520-%2520Pequenos%2520%252819%2529.gif" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FRyfsZJdVB2zJUSVTSAeGjdSVT3N9o0FiRBYJ5peNltcV_Bmz4mWHpNBU8MmLxaXBW0V1O4XcvBlAwJrC4c9ZR2GqbjK9Sggd9tTbXZ3XnSNuz9CSZFS2HoU5lQ_TAzybdKVjGHaZS8f/s21/Emoticons%2520Japones%25C3%25AAs%2520-%2520Pequenos%2520%252819%2529.gif" /></div>

Pesquisa - Segundo Gadget da sidebar sem título: 

<div style='text-align:justify; margin-left:-6px; margin-top:-15px; margin-bottom:-19px;'>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Se encontre aqui Baby ♥' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form></div>

Postagem mais populares - Terceiro gadget (automática) :

O gadget esta embutido no HTML não há necessidade de adicionar código. 

Papo de Elevador (My Day) - Quarto Gadget:

<div style='text-align:justify; margin-left:-7px;'>
<img src="http://static.tumblr.com/xpo2exu/n81n58kxc/balon.png"/>
<div style="position: absolute; font-family: calibri; font-size:8px; margin-top: -44px; left: 55px;"> Olá! Hoje vou trazer lindas ilustrações. </div>
<div style="position: absolute;  font-family: calibri; font-size: 8px; margin-top: -34px; left: 55px;"> Vocês tem sugestão para a próxima postagem?</div>
<div style="position: absolute;  font-family: calibri; font-size: 8px; margin-top: -24px; left: 55px;">Deixe nos comentários. :)</div>

<img src="http://static.tumblr.com/xpo2exu/n81n58kxc/balon.png" />
<div style="position: absolute; font-family: calibri; font-size: 8px; margin-top: -44px; left: 55px;"> Estava pensando fazer algo diferente no blog.</div>
<div style="position: absolute;  font-family: calibri; font-size: 8px; margin-top: -34px; left: 55px;"> O que acham de um sorteio valendo um </div>
<div style="position: absolute;  font-family: calibri; font-size: 8px; margin-top: -24px; left: 55px;">domínio por um ano? </div></div>

A ideia desse gadget é recado rápidos e pequenos. 

Good-bye Baby (XOXO) - Quinto gadget:

<div style="text-align: justify;">Já esta de saída? Espero que tenha gostado do meu pequeno recanto, se ainda quiser falar comigo pode me encontrar nos seguintes sites abaixo; ah se gostou, não deixe de comentar, amarei receber um recadinho seu. Ficarei esperando por uma nova visita~<img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKYsY3tyvh010WfLHB9kQ1072xFnNo8S3nh1VJaEWGayf2BGfPjs3e7T5idwL659tOJHM8jtxOK6u-prCoMSGXylTJ5uC_-ht2OmCW4TZb2V22VgUA-wnhJVqRZ-8AkgOG3pV4KTArGZh/s23/Emoticons%2520Japones%25C3%25AAs%2520-%2520Pequenos%2520%252827%2529.gif" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKYsY3tyvh010WfLHB9kQ1072xFnNo8S3nh1VJaEWGayf2BGfPjs3e7T5idwL659tOJHM8jtxOK6u-prCoMSGXylTJ5uC_-ht2OmCW4TZb2V22VgUA-wnhJVqRZ-8AkgOG3pV4KTArGZh/s23/Emoticons%2520Japones%25C3%25AAs%2520-%2520Pequenos%2520%252827%2529.gif" /></div>
<a href="/"><links>BC</links></a>
<a href="/"><links>BD</links></a>
<a href="/"><links>Face</links></a>
<a href="/"><links>ASK</links></a>
<a href="/"><links>♥</links></a>
<a href="/"><links>TW</links></a>

Player no blog - Gadget do rodapé (footer-1):

<div style='display:scroll; position:fixed; top: 110px; left:30px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/>
<img src="http://static.tumblr.com/xpo2exu/HAUndcune/player.png" height:10px; width:10px;"/></a></div>
<style type="text/css">
#at{
position:fixed;
}
* html #at{position:relative;}
.attab{
height:70px;
width:70px;
float:left;
cursor:pointer;
margin-left: -100px;
background: url();
}
.atcontent{
float:right;
background:url() no-repeat 0 0 transparent;
width:500px;
margin-left: 370px;
margin-top: -50px;
height:460px;center scroll ;
padding:56px 0 20px 5px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
<br /><br /><br /><br /><br /><br />
<div class="menu1">
Código do incorporado do Soundcloud </div><div></div></div></div></div></div>

Não aconselho mexer muito nesse código ou ele poderá ficar torto até mesmo deixar de funcionar.

Enfim é isso!!! Espero que tenham gostado, qualquer duvida só deixar um comentário. Até aproxima queridos bunnie's.