Modelo Fixo para Perfil : Sky Cute

abril 05, 2017


Konnichiwa fadinhas & elfos! Como estão? Hoje venho com um modelo de perfil/autor do blog, super kawaii, lindo, pastel tumblr! Diferente de alguns ele é fixo com menu e 3 redes sociais, fica no topo e segue a rolagem do blog. Raramente vi um nesse estilo, me chamou a atenção e resolvi edita-lo e trazer para vocês, espero que gostem!

(Preview)



Vá em Tema, Editar HTML e procure por ]]></b:skin>  e  ACIMA dele cole:

.navis {cursor:Pointer;width:72px; display:inline-block; text-align:center; margin-left:-30px; padding:2px;text-transform: uppercase; font-family:tinytots; font-style:normal; font-size:8px; color: #333; background: #F6E6FF; padding-left:20px; padding-right:10px; border-radius:5px; letter-spacing: 2px; }

.navig {cursor:Pointer;width:72px; display:inline-block; text-align:center; margin-left:-30px; padding:2px;text-transform: uppercase; font-family:tinytots; font-style:normal; font-size:8px; color: #333; background:#F3FFE6; padding-left:20px; padding-right:40px; border-radius:5px; letter-spacing: 2px; }

.navih {cursor:Pointer;width:72px; display:inline-block; text-align:center; margin-left:-30px; padding:2px;text-transform: uppercase; font-family:tinytots; font-style:normal; font-size:8px; color: #333; background:#E6F4FF; padding-left:20px; padding-right:30px; border-radius:5px; letter-spacing: 2px; }

.navil {cursor:Pointer;width:72px; display:inline-block; text-align:center; margin-left:-30px; padding:2px;text-transform: uppercase; font-family:tinytots; font-style:normal; font-size:8px; color: #333; background:#FFE6E6 ; padding-left:20px; padding-right:15px; border-radius:5px;letter-spacing: 2px;  }

.imageu{width:200px;border-radius:10px;
background:url(http://1.bp.blogspot.com/-DqSrwXAl8g4/TsdDRATHTSI/AAAAAAAAADw/OngQkhgeMwI/s1600/backgroundpurple.png);background-size:360px;padding:10px;
height:100%;}


Agora para aparecer vamos em Layout, e coloque um Gadget de Html/Javascript e cole o seguinte código:


 
<div style="width:250px; position:fixed; top:70px; left:70px;">
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img src="http://data.whicdn.com/images/45594422/tumblr_ma1uflNXO51re6siso1_500_large.jpg" style="border-bottom-left-radius: 99px; border-bottom-right-radius: 99px; border-top-left-radius: 99px; border-top-right-radius: 0px; border: 0px !important; height: 120px !important; opacity: 0.9; padding: 0px !important; width: 130px !important;" /></div>
<span class="navis" onclick="document.getElementById('main').innerHTML=document.getElementById('author').innerHTML"><a href="URL AQUI">biography</a></span>
<span class="navig" onclick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML"><a href="URL AQUI">stuffies</a></span>
<span class="navih" onclick="document.getElementById('main').innerHTML=document.getElementById('etc').innerHTML"><a href="URL AQUI">chingu(s)</a></span>
<span class="navil" onclick="document.getElementById('main').innerHTML=document.getElementById('entries').innerHTML"><a href="URL AQUI">home entry</a></span><br /><br />
<a href="http://www.tumblr.com/"><img src="http://media.tumblr.com/tumblr_m7efduTpVn1qdlkyg.gif" /></a>&nbsp;
<a href="http://www.facebook.com/"><img src="http://media.tumblr.com/tumblr_m7efduTpVn1qdlkyg.gif" /></a>&nbsp;<a href="https://twitter.com/"><img src="http://media.tumblr.com/tumblr_m7efduTpVn1qdlkyg.gif" /></a>
<br /><br />
<center>
<div class="imageu">
<div class="sidebar">
Hello! Meu nome é June. Aqui compartilho tudo que é fofo e divertido! Nunca se esqueça, você é especial </div></div></center>
<br />
<center>
<div class="imageu">
<div class="sidebar">
coloque seu cbox aqui ~ width: 150px; height: 75px; </div>
</div></center>
<br /></div>

Explicando: - O primeiro elemento em <div style="width:250px; position:fixed; top:70px; left:70px;"> pode ser ajustado, caso seja necessário, top o quando ele ficara no topo do seu blog, left o quanto para esquerda .


- Você precisará editar os links, onde esta ''URL AQUI'' e as das redes sociais. (Obs: A cor do link poderá mudar caso tenha escolhido algum especifico para seu blog).


- Altere a descrição, na parte Hello, e onde tem ''coloque seu cbox aqui'' não precisa ser apenas cbox, você pode escolher o que colocar, uma boa ideia é colocar os créditos do layout (E lembre-se também de me creditar!). Qualquer duvida, é só perguntar nos comentários ok?



Por hoje é só! Espero que tenham gostado!
Kissus 


Leia também:

6 comentários

  1. Sugoi
    Cada vez com mais tutorial, eu vivo procurando eles vou me lembrar que você faz eles também, e vou caçar uns por aqui.
    Achei muito fofo.
    Já achei uns aqui interessante obrigada por fazer isso
    bjs
    Sei que estou sumida, mas

    ResponderExcluir
    Respostas
    1. Oláá!
      Que bom, eu pretendo postar mais, gosto que o blog tenha um espaço util.
      Fico feliz que encontrou aqui, obrigada você <3
      Beijiinhos, eu também, sei como é kk Obrigada pela visita!

      Excluir
  2. Olá, td bom?
    "super kawaii, lindo, pastel tumblr!" ADOREI shaushaushuashu ~le brisando no preview~
    Que tudo fácil e bem explicadinho ^^ Gosto de posts assim. (me perco total com html, n sei nadinha, dai eu chego nos bloguinho alheio e os tutos parecem estar falando outra língua).
    bjs

    Blog: Skull Minds | Twitter | Tumblr | Pinterest | WeHeartIt | Instagram Snap: maisaindia

    ResponderExcluir
    Respostas
    1. Oláá! tudo sim e vc?
      Foi difícil explicar então juntei tudo kkk brisando como assim, pro lado bom? kk Sim, bem simples, só aplicar em dois lugares e depois só colar o link que seria da pessoa ^^ Fico feliz que tenha gostado! kk depois de ver muitos tutos acaba acostumando e sabendo onde fica cada coisa não é tão complicado xD . Bjiinhos, Obrigada por visitar

      Excluir
  3. Aiii, que bonitinho! Mas morro de medo de mexer no HTML do blog, de fazer errado e ferrar tudo hahaha uma hora vou me arriscar! Ficou uma graça :D

    Beijo!
    http://tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Não precisa ter medo, só deixar seu layout salvo no pc, se der erro só voltar com o anterior, relaxa kk ^^ . Obrigada pela visita! ~Kissus

      Excluir

© 2017 Sweet Magic. Re-Design By: Juciane Damasceno. Tecnologia do Blogger.
Eu Sou do CBBlogers