Clique em “Continuar lendo” para ver o tutorial de como instalar esse menu no seu tema.
Para iniciantes:
Vá até a página Personalizar do seu blog e clique em “Editar HTML” para abrir o código do seu tema.
Nos próximos passos eu irei falar sobre alguns códigos que você precisa encontrar no meio do HTML do seu tema (como </head>, <body> e alguns outros). Para encontrá-los com mais facilidade, clique em qualquer parte do HTML do tema (apenas para selecionar/focar a “janela” do código) e então aperte CTRL+F (esse comando é para Windows, mas se você usa outro sistema operacional deve ser um comando bem parecido). Esse comando irá abrir uma barrinha de busca, assim:
E então, através dessa barra de busca, você poderá pesquisar pelos códigos que precisar encontrar.
Scripts:
Primeiro, você precisará ter JQuery instalado no seu tema. Se você não tem ou não sabe se tem, simplesmente copie o código a seguir e cole-o logo antes de </head>:
E depois você também precisará instalar o código dos ícones (os ícones de redes sociais). Os que eu usei nesse menu são do FontAwesome.io e para que eles funcionem no seu tema, cole o seguinte código logo depois do código do JQuery (antes de </head>):
<!-- Font Awesome Icons (http://fontawesome.io/) --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Font Awesome Icons (http://fontawesome.io/) -->
Note que, nesse código, eu coloquei alguns comentários (que vão aparecer em cor cinza no HTML do seu tema), entre os comentários <!-- links começam aqui --> e <!-- links terminam aqui --> é onde estão os códigos dos botões do menu. Eu organizei os links dos botões pra que ficasse mais fácil de entender o código, e cada linha entre <!-- links começam aqui --> e <!-- links terminam aqui --> é o código de um botão.
O que significa que se você não quiser usar todos os botões do menu, basta você apagar as linhas que não quer.
Se você quiser adicionar mais botões cole o seguinte código antes de <!-- links terminam aqui -->:
Eu destaquei algumas partes desse último código em negrito, para que você não esqueça de personalizar essas partes, caso contrário seu menu ficará com erros:
A primeira parte destacada, onde eu escrevi “Rede Social” é onde você vai colocar o título daquele botão (nome da rede social que vai ir ali);
Na segunda pate destacada, onde eu escrevi “LINK” é onde você vai colocar o link do perfil dessa sua rede social;
E a terceira parte, onde eu escrevi “NOMEDOICONE”, é onde você vai colocar o nome do ícone dessa rede social. Para saber quais são os ícones disponíveis, confira essa página, nela você poderá pegar o nome dos ícones que você quiser usar: http://fontawesome.io/icons (para pegar o nome do ícone, você precisa clicar no ícone que quer e daí você será levado para uma página que mostra o código daquele ícone, o código é mais ou menos assim: <i class="fa fa-nome" aria-hidden="true"></i>; eu coloquei “nome” ali apenas como exemplo, o que estiver no lugar de “nome” é o nome desse ícone, espero que tenha dado para entender).
CSS:
E por fim, cole o seguinte código antes de </style>:
/** MENU DE REDES SOCIAIS #03 (by www.anyhs-themes.tumblr.com) **/
#anyhs-menu-redes-sociais-03 { text-align: center; display: table; padding: 10px; position: fixed; top: 150px; right: 0px; font-family: 'Arial', sans-serif; font-size: 10px;}#anyhs-menu-redes-sociais-03 #anyhs-menu-redes-sociais-button {padding: 5px; border-radius: 100%; font-size: 30px; width: 36px; cursor: pointer;
background: #333; /** cor do fundo do botão de mais (+) **/
color: #aaa; /** cor da fonte do título do botão de mais (+) **/
} #anyhs-menu-redes-sociais-03 nav {float: right; margin-right: 5px; margin-top: 5px;}
#anyhs-menu-redes-sociais-03 nav a {transition: .5s; text-decoration: none; text-align: center; display: block; padding: 11px 0px 9px 0px; border-radius: 100%; margin-top: 5px; font-size: 14px; width: 36px;
background: #444; /** cor do fundo dos botões **/
color: #ddd; /** cor dos ícones dos botões **/
}
#anyhs-menu-redes-sociais-03 nav a:hover {
background: #111; /** cor do fundo dos botões quando passa o mouse **/
color: #fff; /** cor dos ícones dos botões quando passa o mouse **/
} /** MENU DE REDES SOCIAIS #03 (by www.anyhs-themes.tumblr.com) **/
Eu destaquei algumas partes ali no código que são os lugares onde você pode alterar as cores do menu. Se você não souber sobre cores em HTML, eu tenho um tutorial que vai te ajudar nisso bem aqui: Cores em HTML.
Se tiver sido útil, não esqueça de dar like ou reblogar;
Clique aqui para pré-visualizar o menu.
Dê like ou reblogue se for usar!
1º código:
Para instalar esse menu no seu tema, abra o código do seu tema e aperte CTRL+F, uma barrinha de pesquisa irá abrir, pesquise pela tag </head>. Quando encontrá-la, cole o seguinte código antes dela:
Neste código você deve configurar quais as redes sociais que você quer colocar no menu e também os links. Após <!-- links começam aqui --> até <!-- links terminam aqui --> é onde estão os botões do menu, eu separei os códigos para ficar mais organizado e cada linha é um botão. Em todas as linhas você encontrará isto:
As partes que eu destaquei em negrito, são as partes em que você deve prestar atenção. A primeira parte destacada é onde indica de qual rede social aquele botão é, se você não for usar este botão basta apagar a linha toda. Depois, a segunda parte destacada é uma cerquilha (#), você deve substituí-la pelo link da sua rede social.
3º código:
E por fim, pesquise pela tag </style> e cole o seguinte código antes dela:
/** MENU DE REDES SOCIAIS #02 (by www.anyhs-themes.tumblr.com) **/
#anyhs-menu-redes-sociais-02 { text-align: center; width: 100px; display: table; padding: 10px; position: fixed; top: 80px; left: -120px; transition: .5s; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 10px; z-index: 99999999;
background: #aac; /** cor do fundo do menu **/
}
#anyhs-menu-redes-sociais-02:hover {left: 0px;}#anyhs-menu-redes-sociais-02 a {width: 18px; transition: .5s; text-decoration: none; display: inline-block; padding: 5px; border-radius: 3px; margin: 2px; font-size: 12px;
background: #111; /** cor do fundo dos botões **/
color: #fff; /** cor dos ícones dos botões **/
}
#anyhs-menu-redes-sociais-02 a:hover {
background: #fff; /** cor do fundo dos botões quando passa o mouse **/
color: #111; /** cor dos ícones dos botões quando passa o mouse **/
} #anyhs-menu-redes-sociais-02 .anyhs-menu-redes-sociais-button {position: absolute; left: 100%; top: 0px; padding: 5px; transform: rotate(90deg); min-width: 100px; transform-origin: 10px 10px;
background: #aac; /** cor do fundo do título do menu **/
color: #000; /** cor da fonte do título do menu **/
}
/** MENU DE REDES SOCIAIS #02 (by www.anyhs-themes.tumblr.com) **/
Eu destaquei algumas partes ali no código que são os lugares onde você pode alterar as cores do menu. Se você não souber sobre cores em HTML, eu tenho um tutorial que vai te ajudar nisso bem aqui: Cores em HTML.
Se tiver sido útil, não esqueça de dar like ou reblogar;
Para quem não sabe, menus “tooltip” são aqueles menus que quando você passa o mouse por cima do botão ele mostra tipo uma plaquinha com alguma informação sobre o link. O estilo de menu tooltip que eu estarei disponibilizando neste post é este aqui: clique para ver o preview.
Lembre-se:
Dê like ou reblogue se usar;
Pode modificar o que for necessário;
Não precisa creditar se usar, só não remova meus créditos do código.
Estrutura:
Para pegar o código do menu clique aqui: Menu Tooltip. Copie o código e cole-o no HTML do seu theme, no lugar onde você quer que o menu apareça.
OBS: Se você entende muito pouco -- ou nada -- de HTML e não sabe como fazer para o menu ficar no lugar que você quer do seu theme, você vai precisar pedir ajuda a alguém que entenda de HTML e possa te explicar como fazer isso. Você pode me pedir ajuda através da ask, se precisar.
Personalizando a estrutura do menu:
Esse código que eu acabei de te passar possui 5 botões, eles estão separados por comentários indicando que botão eles são, dessa forma:
Repare que no código de cada botão tem umas coisas escritas em caixa alta (letras maiúsculas), tudo o que estiver em caixa alta ali é o que deve ser substituído pelo que você quer. Primeiro você deve colocar o link do botão, depois o que você quer que apareça no botão e por último a mensagem que aparecerá no tooltip do menu. Exemplo:
Você pode remover botões que não for usar do código, para isso basta apagar o código do botão que você não quer. E para adicionar mais botões basta copiar o código de um dos botões e colar logo abaixo dele. Seu menu tooltip pode ter quantos botões você quiser.
Estilo:
Agora vamos para o código CSS (o estilo) do menu. Esse código deve ser colado antes de </style> no HTML do seu theme.
Dica: Para ficar mais fácil de achar a tag </style> clique em qualquer lugar do HTML do seu theme, em seguida aperte CTRL+F e pesquise por “</style>”.
CSS do menu:
/** MENU TOOLTIP CODE BY www.anyhs-themes.tumblr.com **/ #anyhs_menu_tooltip {width: 515px; text-align: center;} #anyhs_menu_tooltip a {display: inline-block; position: relative; text-decoration: none; padding: 10px; width: 80px; font-size: 11px; text-align: center; margin: 1px -2px; transition: .5s; background: #32b38c; /** cor do fundo do botão **/ color: #fff; /** cor da fonte do botão **/ } #anyhs_menu_tooltip a span {position: absolute; width: 100%; left: 0px; top: 100%;} #anyhs_menu_tooltip a:hover {letter-spacing: 2px;} #anyhs_menu_tooltip a span u {text-decoration: none; padding: 5px; margin: 0px auto; display: table; position: relative; opacity: 0; transition: .5s; transform: scale(0.5); border-radius: 3px; font-size: 10px; z-index: 8; background: #d7787b; /** cor do fundo do tooltip **/ color: #fff; /** cor da fonte do tooltip **/ } #anyhs_menu_tooltip a span u:before {content: ""; border: 0px solid transparent; border-width: 5px; position: absolute; bottom: 100%; left: 40%; border-bottom-color: #d7787b; /** cor da setinha do tooltip **/ } #anyhs_menu_tooltip a:hover span u {opacity: 1; transform: scale(1.0); margin-top: 10px; letter-spacing: 0px;} /** MENU TOOLTIP CODE BY www.anyhs-themes.tumblr.com **/
Personalizando o estilo do menu:
Se você sabe CSS: você pode fazer as modificações que quiser no estilo do menu e você não precisa nem continuar lendo este tutorial porque agora eu só vou explicar como estilizar o menu pra quem não sabe CSS.
Se você não sabe CSS: agora eu vou explicar como mudar as cores do menu. Bom, no código CSS do menu eu deixei alguns comentários indicando onde você deve inserir as cores. Antes dos comentários no código tem um ponto vírgula (;) e antes deste ponto e vírgula tem o código da cor atual, você só precisa substituir o código da cor atual pelo código da cor que você quer.
Se você não sabe sobre cores em HTML leia este tutorial aqui. Nesse tutorial você irá aprender como saber o código hexadecimal de uma cor.
E é isso. Não vou ensinar mais opções de personalização porque seria muita coisa, mas se você quiser mais opções sem ter que fazer um curso completo de CSS eu te recomendo pesquisar sobre os seguintes códigos CSS: border, border-radius, box-shadow, text-shadow, padding, letter-spacing, font-weight, font-style, text-decoration. São códigos que te permitem colocar borda, sombra e outras coisas em elementos do HTML... Eu super indico o site W3Schools, porém ele é todo em inglês e o tradutor dele é do Google Tradutor, ou seja, não é muito bom. Mas se você der uma pesquisada você consegue encontrar outros sites que também ensinam CSS e que são em português.
Passo 2: Cole esse código entre <style> e </style>. (xx)
Passo 3: Cole esse código depois de <body>. (xx)
Feito isso, é só salvar.
Ajustem o margin-top e margin-left de acordo com a posição desejada.
Credite, dê like se gostar.
Qualquer coisa, venha na ask.
