Layout Free - Valkyon

Saudações, guardiãs!
Como vão hoje?

Hoje é uma postagem bem diferente.

Vou disponibilizar um layout inteiro para vocês, e é do Valkyon! O motivo é que esse layout eu fiz para o blog, no final por questões pessoais (cores) acabei não colocando e ficou por vários meses no baú de coisas desnecessárias daqui.
Achei melhor deixar free porque sei que vocês vão usar com cautela e sabedoria. :v

Vamos lá?
Clique em "leia mais" para ler o restante.

Avisos

- Não retire os créditos.
- Não diga que você quem fez.
- Não disponibilize por aí sem os créditos.
- Não pegue partes do código para si.
- Avise que está usando, mandando o nome do seu blog nos comentários também.
- É permitido que você mude as cores e as imagens, mas sempre respeite as regras acima.

Por favor, leia o restante desta postagem e pergunte se tiver dúvidas.

Prévia | Download

Quando terminar o download, copie todo o código e vá no layout do seu blog, depois em Tema > Editar HTML e cole o código lá.
Salve em seguida.

♥ Para editar o gadget Welcome, adicione esse código abaixo:

<style>
/** Efeito moderas by gnmh **/
.modera {-moz-transition:all 3s;opacity: 0.8; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;-o-transition:all 3s; -webkit-transition:all 3s; background:#ffc6a0; Border: 4px double #ff9853;box-shadow: inset 0px 0px 5px #C5BBD0; }
.modera:hover {opacity:0.5; filter: contrast(100%); -webkit-filter: contrast(100%); -moz-filter: contrast (100%); -o-filter: contrast(100%); -ms-filter: contrast(100%); -webkit-transition-duration: .50s; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; border-radius: 45px;background: #; box-shadow: 0px 0px 5px #F2D2A6;Border: 3px dotted #FFBEBE;}
}
</style>
<a href="LINK DO BLOG" target="blank" title="is ready?"><img class="modera" src="http://i.imgur.com/7cMnSA2.png" height="128" align="right" width="76" /></a>Uma breve descrição aqui.

Entenda o código:
- Em negrito, coloque o link (endereço) do seu blog para se a pessoa clicar na imagem, ela voltará a página inicial.
- Em itálico é o link da imagem que aparece no lado direito: NÃO MEXA NELE. Há não ser que queira usar outra imagem, aí tu tem que editar com o tamanho certo (128x76), hospedar em um site (Imgur por exemplo) e substituir no código.
- E em sublinhado você coloca a descrição falando do seu blog.

♥ Para editar os Marcadores, adicione esse código:

<style>
tags {
color:#fff;
text-shadow: 1px 1px 1px #ff9853;
background: #ffc7a1;
border: 1px solid #ffaf7a;
box-shadow: inset 0 0 6px #ffa467, 0px 1px 1px #ffa467;
outline: 2px solid #ffa467;outline-offset: -13px;
line-height:16px;
margin-bottom:1px;
display: inline-block;
padding: 5px 5px 5px 5px;
text-align: center;
text-transform:uppercase;
font-family: Muli;
font-size: 10px;
float: center;
margin:1px;
padding:1px;
height: 16px;
width: 238px;
-webkit-transition-duration: .80s;
}
tags:hover {
cursor:hand;
background: #bdbbc3;
border: 1px solid #a2a0ab;
text-shadow: 1px 1px 1px #76747e;
box-shadow: inset 0 0 6px #a2a0ab, 0px 1px 1px #a2a0ab;
outline: 1px solid #a2a0ab;outline-offset: -3px;
-webkit-transition-duration: .80s;text-align: center;
}
</style>
<a href="LINK DA TAG"><tags>NOME DA TAG</tags></a>

Entenda o código:
- Em negrito é o nome da tag que você tem no seu blog e em itálico é logicamente o link (endereço) da tag.

♥ Para editar o gadget Outros, adicione esse código abaixo e preste atenção:

PS: Use a barra de pesquisa (CTRL+F) para achar mais fácil as coisas.

<center><!-- Ínicio Menu Abas ~ By Drikoti.Net -->
<div class="tabber">
<div class="tabbertab" title="Agenda">
<br />
<candy><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7s-Ey0pCnl9G0CYzN22lKxITGKSQlQ4Cw_atkFbgYfI4A3r6_brkuBLdYjurnSp8JDFxyioSl68lvtd6VwKnxstREB2m2lJsmMo-pDU4yjJKLfERbCHalB6RD74QW89EMPhuTOjxTJo/s1600/marca3.gif" /> <a href="LINK"><candys> 00/00 </candys></a><candy1> Nenhuma notícia</candy1></candy>
<candy><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7s-Ey0pCnl9G0CYzN22lKxITGKSQlQ4Cw_atkFbgYfI4A3r6_brkuBLdYjurnSp8JDFxyioSl68lvtd6VwKnxstREB2m2lJsmMo-pDU4yjJKLfERbCHalB6RD74QW89EMPhuTOjxTJo/s1600/marca3.gif" /> <a href="LINK"><candys> 00/00 </candys></a><candy1> Nenhuma notícia</candy1></candy>
<candy><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7s-Ey0pCnl9G0CYzN22lKxITGKSQlQ4Cw_atkFbgYfI4A3r6_brkuBLdYjurnSp8JDFxyioSl68lvtd6VwKnxstREB2m2lJsmMo-pDU4yjJKLfERbCHalB6RD74QW89EMPhuTOjxTJo/s1600/marca3.gif" /> <a href="LINK"><candys> 00/00 </candys></a><candy1> Nenhuma notícia</candy1></candy>
<candy><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7s-Ey0pCnl9G0CYzN22lKxITGKSQlQ4Cw_atkFbgYfI4A3r6_brkuBLdYjurnSp8JDFxyioSl68lvtd6VwKnxstREB2m2lJsmMo-pDU4yjJKLfERbCHalB6RD74QW89EMPhuTOjxTJo/s1600/marca3.gif" /> <a href="LINK"><candys> 00/00 </candys></a><candy1> Nenhuma notícia</candy1></candy>
</div>
<div class="tabbertab" title="Visite-os">
<br />
Coloque aqui blogs que você recomenda ou que seja seu.</div>
<div class="tabbertab" title="Ask.fm">
<br />
<style>
.borda2 {
color: #bebcc4;
text-shadow: 1px 1px 0px #fff;
padding-top:6px;
padding-left:7px;
padding-right: 45px;
padding-bottom:6px;
margin-bottom: 6px;
margin-top: 6px;
text-align: center;
background: #f0f0f2; /* Cor de fundo, não precisa mudar */
border: dotted 1px #b3b1bb;
border-bottom: solid 1px transparent;
border-right: solid 1px transparent;
}
</style>
<div class="borda2"><a href="LINK DA ASK">nome do link</a></div>
</div>
<div class="tabbertab" title="Créditos">
<br />
<cred><a>Garota no mundo Html</a> <img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/02lrty.gif" />Post footer, Efeito  Modera, Marcadores, Voltar ao topo com efeito deslizante</cred>
<cred><a>Iris Jovem</a> <img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/02lrty.gif" />Modelo para sidebar</cred>
<cred><a>The Moon Reverse</a> <img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/02lrty.gif" />Modelo para tooltip</cred>
<cred><a>Paradizing</a> <img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/02lrty.gif" />Modelo para blockquote</cred>
<cred><a>Catching Fire</a> <img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/02lrty.gif" />Cursor hover</cred>
<cred><a>Chesis-Griffith</a> <img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/02lrty.gif" />Familiers pixels</cred>
<div class="borda2">Se os seus créditos não estão aqui, fale-nos imediatamente mas com pelo menos educação, pois não fazemos isso de propósito. </div>
</div>
</div>
<!-- Fim Menu Abas ~ By Drikoti.Net -->
<center><br /></center></center>

Entendendo o código:

- Em itálico é o que você tem que editar, respetivamente nome de links, o endereço, nome das notícias e colocar os seus blogs para divulgar.

NÃO RETIRE A PARTE DOS CRÉDITOS.

Adicione o código abaixo depois da penúltima tag </div> do código (lá no final) 

<div class="tabbertab" title="Nome do conteúdo">
Conteúdo aqui
</div>

Um exemplo usando o código inicial:

<div class="tabbertab" title="Nome do conteúdo">Conteúdo aqui</div></div><!-- Fim Menu Abas ~ By Drikoti.Net -->
<center><br /></center></center>

Em itálico é a última tag que fecha todo o código.

♥ Para editar o gadget Pesquise, adicione esse código abaixo:

<style>
/*** Caixa de pesquisa por gnmh ***/
input, textarea, option, select, button form{
font-family: 'Sniglet', Trebuchet MS;
font-size: 10px;
color: #F3BD87;
font-weight: 300;
text-align: center;
letter-spacing: 2px;
text-shadow: 1px 1px 1px #fff;
text-transform: uppercase;
background:#FFE4C8;border: solid 1px #FFCF9F;
height: 25px;
width: 240px;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
border-radius: 1px;cursor: pointer;}
input:focus{outline:none;}
*::-moz-selection {
background:ffdbde;
color: #B7ABBB;
text-shadow: 0 1px 0 #ffffff;
}
</style>
<form action="/search" method="get"><input type="text" name="q" value="Procure + Enter"/></form>

Entendendo o código:
- Não tem muita o que fazer e é opcional editar o que está em itálico.

♥ Para editar o gadget Até mais, adicione esse código abaixo:

<a href="LINK DO BLOG" target="blank" title="is ready?"><img class="modera" src="http://i.imgur.com/n5EMPZw.png" height="128" align="right" width="76" /></a>Sua breve descrição aqui.

♥ Para adicionar o Cursor, adicione esse código abaixo:

<style type="text/css">body  {cursor: url(http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), progress;}a:hover {cursor: url(http://media.tumblr.com/tumblr_m2umkfZJpv1qfamg6.gif), progress;}</style>

- Eu recomendo que você coloque esse gadget como último.

PS: Se você quiser mudar é só ir neste link (existe vários na internet) e em negrito, é o cursor normal e em itálico é o curso quando o mouse passar em cima de algo no blog, um link por exemplo, irá mudar.

♥ Para adicionar o Menu, adicione esse código abaixo:

PS: Caso você não percebeu nada o menu fica ao lado esquerdo da tela, simplesmente passe o seu mouse lá.

<style>
/*** Clique e navegue***/
 .menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #ffa76d; background: #efefef; color: #; top: 0; margin: 0; position: fixed; left: -200px; height: 100%; -webkit-transition: all .3s ease-out;  -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; overflow: hidden; cursor: default; font-weight: normal;  z-index: 12345; }
 .menuam:hover { border-right: 8px solid #a2a0ab; webkit-transition: all .3s ease-out;  -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;}
 .menuam:hover { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.menuam a { border: none; background: #ffa76d; color: #fff; padding: 5px; display: block; width: 100%; text-transform: uppercase; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; font-size: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }
.menuam a:hover { background: #a2a0ab; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; padding-left: 20px; text-shadow: 1 1px 0px #89aea4;}
.menuam a:first-child { margin-top: 10px; } .menuam a:last-child { margin-bottom: 0px; }
.menuam a { padding: 4px 6px; }
}
</style>
<div class="menuam">
<a rel="nofollow"><font style=" text-transform: none; font: italic 17px georgia;"><div align="left">Navegue</div></font></a>
<p>
<a href="/">volte ao início</a>
<a  href="/" onclick="changeNavigation('profile');">sobre o jogo</a>
<a href="/" onclick="changeNavigation('extras');">guias e respostas</a>
<a href="/">tutoriais e ajuda</a>
<a href="/">goodies</a>
<a href="/">layouts antigos</a>
<a href="/">teorias e entretenimento</a>
<a href="/">listinha negra</a>
<br />                  
</p></div>

Entendendo o código:

- Em negrito é o nome da página que você vai colocar.

- Em itálico é o link da página.
- Eu recomendo que você coloque o gadget em Entre colunas.

♥ Para adicionar o Voltar ao topo (Musarose), adicione esse código abaixo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://i.imgur.com/mmJ36EG.png"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Ir ao topo do Blog'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Entendendo o código:

- Em itálico é o link do voltar ao topo, que não fui eu que o fiz, só editei o tamanho mesmo.
- Eu recomendo que você coloque esse gadget lá no final onde está footer 1.

Mas e o cabeçalho?

Para quem não está ciente o cabeçalho é o que está visível no blog, onde geralmente tem o nome dele.

- Primeiro, para facilitar hospedei o .psd para quem usa o PhotoShop: clique e baixe.

- Mas já o PhotoScape é só salvarem esse fundo transparente que tem o tamanho certo que usei no layout.  Ok, não dá para ver que é realmente, mas falando sério, funciona e o resultado fica melhor do que você fazer em fundo branco.
Baixe a fonte para o texto que usei, que é a PassionTea, coloque a cor laranja (#faac78) e deixe 212 em tamanho.

É claro que é totalmente opcional você usar esse cabeçalho, você pode inventar outros ou deixar sem.