seen from Germany
seen from United States
seen from Türkiye
seen from Germany
seen from Kuwait
seen from China
seen from Germany
seen from Germany
seen from China
seen from Poland
seen from Türkiye
seen from China
seen from South Africa
seen from Germany
seen from Germany
seen from Türkiye
seen from Türkiye
seen from France
seen from Germany
seen from United States
SH Themes • #10
Preview • Download
Sobre o theme:
Theme com 4 colunas.
Theme com 5 links.
Cores e fotinha da sidebar totalmente personalizável pelo appearence.
Theme com contador e painel contendo: botão de follow, chat, dashboard e instagram.
Descrição totalmente personalizável.
Não remova e nem altere os créditos.
Modificações apenas para uso próprio.
Não repasse meus códigos.
NÃO ESQUEÇA DE AVISAR AO PEGAR O THEME.
CSS Personalizado.
Para quem não está acostumado a mexer no HTML dos temas e fica perdido na hora de colocar o código com medo de fazer errado e dar um erro enorme no tema, essa ferramenta se torna muito útil. Pois tem materiais personalizados que necessitam dessa ferramenta.
O que é CSS?
CSS é uma linguagem de folha de estilos, que tem o papel de tornar uma página apresentável na web, relacionada diretamente com o design e aparência. Ou seja, o CSS é uma camada que se usa para controlar o estilo da sua página da web.
Como adiciono o CSS Personalizado no meu tema?
Você irá até a página do Customize do seu blog do Tumblr (ex: https://www.tumblr.com/customize/URLDOSEUBLOG) e abrir as Opções Avançadas (localizada no final da página):
Após localizar essa opção, entre nela:
No espaço abaixo de CSS Personalizado, você irá colocar o seu código CSS customizado, com essa opção habilitada, todo código que colocar lá será adicionado ao tema.
Obs:. Essa ferramenta é apenas para códigos CSS, se você colocar códigos de outras linguagens (como HTML, JavaScript, etc.) elas poderão não funcionar.
E se caso, essa opção não esteja habilitada no seu tema?
Basta fazer o seguinte, é bem simples, basta adicionar um pequeno código ao HTML do seu tema, e estará ativado o CSS Personalizado.
Volte na página inicial do customize do seu tema e entre na opção EDITAR HTML:
Aperte CTRL+F para poder pesquisar a tag </style> no HTML:
Após feito isso, acima de </style>, você cola o código do CSS personalizado, que é este aqui:
{CustomCSS}
Deixe ele exatamente na ordem igual da foto (a seguir), para que todos os códigos que coloquem, funcionem corretamente:
Concluindo essa parte, salve as alterações feitas e então o CSS personalizado já estará habilitado no seu tema!
Se foi útil, dê like ou reblog.
Em caso de dúvidas, pergunte aqui
Tutorial by @shwnty
Menu Rotate - 02.
Preview (xx)
Primeiro coloque isso depois do <head>:
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
Depois coloque esse código entre <style> e </style>:
/* --• MENU #02 BY SHWNTY THEMES • NÃO COPIE, NEM REPASSE! MANTENHA OS DEVIDOS CRÉDITOS •-- */ .sh-menu {position:fixed; margin-left:0px; /* distância da esquerda */ margin-top:140px; /* distância do topo */ width:300px; /* tamanho do menu, se quiser um abaixo do outro, diminua o valor, se quer um do lado do outro, aumente! */ height:auto; cursor: hand; float:center; text-align:center;} .sh-menu a{display:inline-block; width:15px; /* largura do box menu */ height:15px; /* altura do box menu */ font-size:10px; /* tamanho da fonte */ line-height:14px; margin:2px; /* tamanho da distância entre os links */ text-align:center; padding:3px; background:#e3cab3; /* cor do fundo do menu */ color:#fff; /* cor do texto */ box-shadow:inset -1px -1px 1px rgba(255, 255, 255, .2), inset 1px 1px 1px rgba(0, 0, 0, .2); float:center; text-shadow:1px 1px 0px rgba(0, 0, 0, .3); border-radius:100%;} .sh-menu a:hover i {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;} /* --• MENU #02 BY SHWNTY THEMES • NÃO COPIE, NEM REPASSE! MANTENHA OS DEVIDOS CRÉDITOS •-- */
Coloque esse código depois de <body> ou <body onkeydown=“return false”>:
<!-- --• MENU #02 BY SHWNTY THEMES • NÃO COPIE, NEM REPASSE! MANTENHA OS DEVIDOS CRÉDITOS •-- --> <div class="sh-menu"><a href="/" title="NOME DO LINK"><i class="fa fa-home"></i></a> <a href="/" title="NOME DO LINK"><i class="fa fa-envelope"></i></a> <a href="/" title="NOME DO LINK"><i class="fa fa-pencil"></i></a> <a href="/" title="NOME DO LINK"><i class="fa fa-tags"></i></a> <a href="/" title="NOME DO LINK"><i class="fa fa-anchor"></i></a></div> <!-- --• MENU #02 BY SHWNTY THEMES • NÃO COPIE, NEM REPASSE! MANTENHA OS DEVIDOS CRÉDITOS •-- -->
Não remova e nem altere os créditos.
Modificações apenas para uso próprio.
Não repasse meus códigos.
Se foi útil, dê like ou reblog.
Em caso de dúvidas, pergunte aqui.
Menu by @shwnty
Menu Rotate.
Preview (xx)
Primeiro coloque isso depois do <head>:
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
Depois coloque esse código entre <style> e </style>:
/* --• MENU #01 BY SHWNTY THEMES • NÃO COPIE, NEM REPASSE! MANTENHA OS DEVIDOS CRÉDITOS •-- */ .sh-menu {position:fixed; margin-left:0px; /* distância da esquerda */ margin-top:180px; /* distância do topo */ width:600px; /* tamanho do menu, se quiser um abaixo do outro, diminua o valor, se quer um do lado do outro, aumente! */ height:auto; cursor: hand; float:center;} .sh-menu a{display:inline-block; width:100px; /* largura do box menu */ eight:14px; /* altura do box menu */ font-size:10px; /* tamanho da fonte */ line-height:14px; margin:2px; /* tamanho da distância entre os links */ text-align:center; padding:3px; background:#9589b8; /* cor do fundo do menu */ color:#fff; /* cor do texto */ box-shadow:inset -1px -1px 1px rgba(255, 255, 255, .2), inset 1px 1px 1px rgba(0, 0, 0, .2); float:center; text-shadow:1px 1px 0px rgba(0, 0, 0, .5); letter-spacing:2px; /* tamanho do espaço entre as letras. */} .sh-menu a:hover i {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;} /* --• MENU #01 BY SHWNTY THEMES • NÃO COPIE, NEM REPASSE! MANTENHA OS DEVIDOS CRÉDITOS •-- */
Coloque esse código depois de <body> ou <body onkeydown=“return false”>:
<!-- --• MENU #01 BY SHWNTY THEMES • NÃO COPIE, NEM REPASSE! MANTENHA OS DEVIDOS CRÉDITOS •-- --> <div class="sh-menu"><a href="/"><i class="fa fa-home"></i>  HOME </a> <a href="/"><i class="fa fa-envelope"></i>  ASK ME </a> <a href="/"><i class="fa fa-pencil"></i>  SUBMIT </a> <a href="/"><i class="fa fa-tags"></i>  AUTHORSHIPS </a> <a href="/"><i class="fa fa-anchor"></i>  BLOGROLL </a></div> <!-- --• MENU #01 BY SHWNTY THEMES • NÃO COPIE, NEM REPASSE! MANTENHA OS DEVIDOS CRÉDITOS •-- -->
Não remova e nem altere os créditos.
Modificações apenas para uso próprio.
Não repasse meus códigos.
Se foi útil, dê like ou reblog.
Em caso de dúvidas, pergunte aqui.
Menu by @shwnty
Como adicionar CSS Personalizado no tema
Nem sempre é preciso mexer direto no código do tema para adicionar alguns códigos CSS nele. A maioria dos temas, assim como os meus, possuem uma ferramenta que facilita bastante a vida de quem não está muito familiarizado com códigos HTML e fica um pouco inseguro na hora de colar um código personalizado no tema porque não sabe se está colando no lugar certo -- eu mesma passei muito por isso quando ainda não sabia HTML.
Bom, se você ainda não conhece essa ferramenta, neste post eu estarei apresentando ela pra você, pois você pode precisar dela para usar alguns dos materiais personalizados que eu disponibilizo (e que talvez vocês encontrem em outros blogs ou sites também), como por exemplo: cursores personalizados, caixas de ask e submit personalizadas e outros.
