22/03/2017

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://3.bp.blogspot.com/-LSExxjzlo7A/Uy-JP8ehDoI/AAAAAAAAQlA/ohXsj2-CxcM/s1600/marca3.gif" /> <a href="LINK"><candys> 00/00 </candys></a><candy1> Nenhuma notícia</candy1></candy>
<candy><img src="https://3.bp.blogspot.com/-LSExxjzlo7A/Uy-JP8ehDoI/AAAAAAAAQlA/ohXsj2-CxcM/s1600/marca3.gif" /> <a href="LINK"><candys> 00/00 </candys></a><candy1> Nenhuma notícia</candy1></candy>
<candy><img src="https://3.bp.blogspot.com/-LSExxjzlo7A/Uy-JP8ehDoI/AAAAAAAAQlA/ohXsj2-CxcM/s1600/marca3.gif" /> <a href="LINK"><candys> 00/00 </candys></a><candy1> Nenhuma notícia</candy1></candy>
<candy><img src="https://3.bp.blogspot.com/-LSExxjzlo7A/Uy-JP8ehDoI/AAAAAAAAQlA/ohXsj2-CxcM/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.

2 comentários:

AS REGRAS GERAIS

1. LEIA TUDO antes de comentar alguma coisa.
2. O respeito mútuo é importante, não é permitido ofensas e brigas de qualquer tipo, seja para os dois lados (leitores e administradores).
3. É proibido spam, flood, links maldosos e outras besteiras que não são agradáveis.
4. Sempre aceitamos sugestões para futuras postagens, seja um tutorial, ajuda ou até curiosidade.
5. Se os seus créditos não estão aqui ou em qualquer outra parte do blog, nos avise imediatamente com educação porque não fazemos isso de propósito.
6. Não hesite em perguntar se tiver dúvidas. Estamos aqui para ajudar!
7. Recomendados que não dê suas informações pessoas, principalmente e-mail e endereço a qualquer pessoa, mesmo que ela fale que seja da administração.
8. Não se esqueçam que todos aqui somos uma família, portanto, não só as postadoras ajudam vocês, mas seus colegas leitores também!
POR FAVOR, PARA AJUDARMOS NÃO MANDE A MESMA MENSAGEM MAIS DE UMA VEZ.