Como colocar imagem acima da Sidebar + PNGs de Anime


Konnichiwa floquinhos de neve, como estão?  . Essa semana foi meio corridinha para mim, nem parei em casa direito e me enrolei com as postagens. Ainda fiquei sem internet sexta. Mas podem ficar tranquilos, deixarei na sidebar uma agendinha para manter vocês informados. NOSSA JÚH ! COMO NÃO PENSOU NISSO ANTES!? (-.\) pois é! .
Então, hoje venho com um tutorial que muitos ainda não viram, eu sempre tive a curiosidade de saber como que colocava imagens acima da sidebar, após aprender coloquei aqui no blog.
Chegou a hora de compartilhar com vocês! Bora deixar o blog mais lindinho e criativo? Lets Go!

É recomendado que faça um backup do seu layout, pois se acontecer algum tipo de erro você poderá voltar ao seu layout anterior sem problemas.
Para a imagem ficar adequadamente posicionada precisará que você abaixe a sidebar, para isso vamos em Modelo, Editar HTML. Aperte Ctrl+F e para procurar o código abaixo. 


  • Se sua sidebar for do lado esquerdo procure por: .main-inner .column-left-outer { 
  • Direito: .main-inner .column-right-outer {


Encontrou? Agora abaixo dele, cole: margin-top: 200px; 

Ficará assim: 
Exemplo



Caso o 200px ainda esteja com muito/pouco espaçamento, mude esse valor até que se enquadre +/- na altura da sua imagem, quanto maior o valor mais a sidebar irá descer.


Colocando a imagem


Novamente pelo atalho Crtl+F, procure por : 

  • Sidebar Esquerda: <div class='column-left-outer'> 
  • Sidebar Direita: <div class='column-right-outer'> 


E abaixo dele cole o seguinte código: 

<center><a href='/'><img src='LINK DA IMAGEM' style='margin-top: -300px; margin-bottom: 20px; width:300px ; height= 600px'/></a></center>

Edite do seu modo, colocando o link da sua imagem. E caso sua imagem acabe ficando muito grande ou pequena mude o valor do width: referente a largura e height a altura da sua imagem. 
Prontinho! 

Estarei deixando algumas opções abaixo com o link, caso goste de algum, apenas copie e cole dentro das aspas 'LINK DA IMAGEM'


Anime PNG's

http://i.imgur.com/RPBU7JW.png

http://i.imgur.com/MnhGWnN.png

http://i.imgur.com/fPJ12cP.png

http://i.imgur.com/WSwZP6P.png

http://i.imgur.com/OWEE46z.png

http://i.imgur.com/24ZeXod.png

http://i.imgur.com/foa271R.png


http://i.imgur.com/0Z744wO.png


http://i.imgur.com/v1jy2PU.png


http://i.imgur.com/wJF1zpg.png


http://i.imgur.com/PvhyOgJ.png


http://i.imgur.com/wpVvcs4.png


Por hoje é só! Espero que tenham gostado! E fiquem atentos, farei uma enquete de uma suposta nova categoria para o blog, e gostaria de opiniões ^.^ ~Kissus


Comentários

  1. Eu nunca vi tutorial disso por ai, amei você ter feito e bem explicadinho, agora quando quiser usar ja sei como.
    bjs

    ResponderExcluir
    Respostas
    1. Née, também acho um pouco raro de se ver. Awwn que bom que gostou, tá certo! Obrigada ^.^ <3 ~Kissus

      Excluir
  2. Obrigado pelo tutorial! Procurei em todo lugar e já tinha mudado de idéia e deixei sem essa parte mesmo, mas agora achei SHAUHS Logo irei usar com certeza!

    ~ Powerful Alien Girl!

    ResponderExcluir
  3. nossa, adorei e pior que fica lindo u.u, pensei que não ia conseguir pq o blog aqui não está aceitando alguns tutos, talvez por conta do tema...
    Ainda bem que achei, vc tem mais tutos?
    Eu estava procurando como colocar o nome do autor em cima da postagem, sabe? fica lindo, mas simplesmente não entra

    ResponderExcluir
    Respostas
    1. Fico feliz em saber que você gostou! É sempre bom, pegar um tema mais base caso queira modificar algumas coisas, mas qualquer template dá, as vezes é só o nome que é diferente no seu algo assim.

      Eu parei com os tutoriais, mas penso em voltar sim! Obrigadaaa

      Excluir

Postar um comentário