Como colocar imagem acima da Sidebar + PNGs de Anime
Konnichiwa floquinhos de neve, como estão?
![](https://lh6.ggpht.com/_NZJzdRm10Y0/TTSXTFx1HEI/AAAAAAAAAFg/whIJrGVpZVY/s800/gif17.gif)
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!![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vydjCh_pOiMTPNaFy9yYNVbrmZL7ZZxF6OmERGhK4wIXoUaTL9R1QNV_iWU87v1f7B_278fYH5t5j2ViToOqYRceRx5J9-bXyYKksGRjnpbBWZWWoQGmzBnT0=s0-d)
Estarei deixando algumas opções abaixo com o link, caso goste de algum, apenas copie e cole dentro das aspas 'LINK DA 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
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_s1bS9XpZToRZVrp5038ytOAHp07y4z7slRdlZzlOkTcBPTakO5khrU8rNxgQpue2pT9lPWZYEp07sUkBukwyckXg=s0-d)
http://i.imgur.com/0Z744wO.png
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uMQ3jZQvWiTS-6v_yfRJCrWKJx1gc6Q1ns7o5o81LPj8a499jf2HYZLre_byV9-J6k7k40VhPKKQxtPjHMDc5aKA=s0-d)
http://i.imgur.com/v1jy2PU.png
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vMGH0Ezvnp7CWgB8-G4k-lB-tarriVoSaR5j_tgvZhUEpMOJCnypvqjsv4jwoVE1tJisJkWWV5jk5mPhV95UZzGQ=s0-d)
http://i.imgur.com/wJF1zpg.png
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tva8_GwttJCXoNbfadm22hPJB7Vxt_Oh49uYvXf_6wxFndn_d0wo9fQa8be7uODyHuIPsiYg5d_eue_bVPEVOzwA=s0-d)
http://i.imgur.com/PvhyOgJ.png
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v8mH_UcV-mAD1sFlPh_4zv3tQv9ZB4_a2hL8DGIo_0x7QSFxQYhupEHMUNDZdQuZjAuDP0ERNp__sL4Ro4NzRvRg=s0-d)
http://i.imgur.com/wpVvcs4.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