Layout Free: Harmonick

Ohayo bunnie's? E o blog adentra quase quatro anos de existência e eu continuo com essa saudação rs, tá ficando brega, néh? Mas é bom ser brega do tipo que ainda fala vai catar coquinho. Mas agora vamos ao que interessa rs, hoje venho lhes trazer mais um layout gratuito. Dessa vez o layout não é exclusivo, eu já o usei aqui no blog, por uns quatro meses. Fiz algumas modificações removendo alguns erros, e os vários menus desnecessários que ele tinha. rs  O layout é bem simples, mas é super clean e agradável de postar.

DEMO || DOWNLOAD || HTML

::Regras de uso::

- Não dizer que foi você que fez ou pegar partes do layout.
- Proibido remover os créditos do rodapé, caso remova coloque em outro local "visível".
- Pode modificar cores, acrescentar menus, mudar imagens como: slide, banner etc...
- Nunca use como base, pós já tem disponível um layout base aqui no blog (x).
- Não disponibilizar para download.
- Se usar/baixar comente por favor.
- Qualquer plagio encontrado em algum site/blog será alertado, caso não se resolva será   "denunciado".

Informações sobre layout:

* Possui três colunas, ambas colunas da sidebar possui o primeiro gadget transparente. Então o menuzinho redondo de corações é necessário estar na coluna a direita para que a sidebar de apresentação tenha fundo. A não ser que a queira transparente. 

* Para trocar os links do menu do topo, vá até seu HTML e procure por <div id='NavbarMenu'>, abaixo dele você vai encontrar a área para por os links ou trocar nome. 

Códigos:

Sidebar a esquerda:

Primeiro e único gadget: Perfil + Menu

<div id="sidebar"> <img class="imgtext" src="https://2.bp.blogspot.com/-97CvRuP6UG0/Vf-A7r0DpVI/AAAAAAAADAg/Acq_TGLTKY8/s1600/banner.png" /> <div id="descria"> <center> SEU TEXTO AQUI </center> </div> <div style="position: absolute; margin-top: 6px; left: 12px;"> <a href="/"><div class="charm"> Tutorial</div> </a> <a href="/"><div class="charm"> Utilitário</div> </a> <a href="/"><div class="charm"> Download</div> </a> <a href="/"><div class="charm"> Layout Free</div> </a> <a href="/"><div class="charm"> Sites</div> </a> <a href="/"><div class="charm"> Breve</div> </a> </div> </div>

Sidebar a direita:

Primeiro Gadget: Menu de bolinha 

<div style="position: absolute; margin-top: -27px; left: 17px;"> <a href="#"><div class="roda"> ?</div> </a> <a href="#"><div class="roda2"> ?</div> </a> <a href="#"><div class="roda"> ?</div> </a> <a href="#"><div class="roda2"> ?</div> </a> <a href="#"><div class="roda"> ?</div> </a> <a href="#"><div class="roda2"> ?</div> </a> <a href="#"><div class="roda"> ?</div> </a></div>

Segundo Gadget: Apresentação (sobre mim)

<img src="https://1.bp.blogspot.com/-FACuESfzc_s/Vf-HvCRJlAI/AAAAAAAADAw/2l9PFmtIjeY/s1600/avatar.png" style="margin-left: 6px;" class="icon" align="right" /><div style="text-align: justify;"> Seu texto aqui</div>

Terceiro Gadget: Menu afiliados + Seguidores

<a href="https://www.blogger.com/follow.g?blogID=CODIGO"><div class="afiliados"> Afiliados</div> </a> <a href="/"><div class="afiliados"> Seguir</div> </a>

A intenção desse gadget é economizar espaço. Para adicionar os afiliados, crie uma pagina e adicione o link no menu. Para adicionar os seguidores apague a palavra CODIGO pelo ID do seu blog. Para saber o ID do seu blog, vá para Painel e na sua barra de navegação (o endereço de url), terá algo assim "https://www.blogger.com/blogger.g?blogID=7586000076957850791#allposts" porém a numeração marcada em vermelho será diferente. Pegue essa numeração e cole no lugar da palavra código.

Rodapé:

O primeiro e único gadget do rodapé: Paginação numerada no rodapé

<style> #pagenavi .pages { display: none;} #blog-pager{ clear:both; margin-top: -8px; font-size: 13px; padding:10px 0; } #blog-pager-newer-link{ float: left; } #blog-pager-older-link{ float: right; } #blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{ padding: 8px 14px; text-decoration: none; font-family: 'Dosis', sans-serif; font-weight: normal; /* tipo de fonte */ color: #fff; margin: 2px; background: #99b59c; border-radius:70px; width:10px; background-position: bottom; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; font-size: 13px; } #blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageNum a:hover,.showpage a:hover{ padding: 8px 14px; color: #fff; background: #649381; border-radius:70px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .showpagePoint{ width:10px; margin: 2px; color: #fff; background: #649381; padding: 8px 14px; border-radius:70px; } .showpageOf{ display: none; } </style><script type='text/javascript'>var postperpage=02;var numshowpage=02;var upPageWord="Próxima";var downPageWord="Anterior";var urlactivepage=location.href;var home_page="/"</script> <script style='text/javascript'> var pageCount=02;var displayPageNum=02;var upPageWord="Anterior";var downPageWord="Próxima";</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script>

É isso! Espero que seja do agrado de vocês, peço por favor que não removam os créditos, também peço que deixem um comentário dizendo que usou, pois adoraria visitar seu blog. Até aproxima!!!