Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Haze
    • Announcements & Updates
    • Official Files
    • User Central
  • Web development
    • CMS & Scripts
    • Codes
    • Tutoriais
    • Work in Progress
    • Support
    • Others
  • Games Development
    • Browser Games
    • Minecraft
    • Unreal Engine
    • Unity 3D
    • Cry Engine
    • JavaScript (HTML5)
    • Publish your Project
    • Support
    • Outros
  • Desktop Development
    • Codes
    • Tutoriais
    • Work in Progress
    • Outros
  • Graphic Design
    • Tutorials
    • Resources
    • Gallery
    • Support
  • O mundo fora...
    • Sales & Purchases
    • Mídia
    • Debates
    • Taverna

Product Groups

  • Account Modifications
  • Licenses

Categories

  • Officials
  • CMS & Layouts
    • Wordpress
    • HTML/CSS
    • PHP Script
    • Outros
  • Jogos
    • Habbo Hotel
    • Minecraft
    • Engines
  • Desktop
    • C#
    • Node
  • Design
    • Editáveis
    • Recursos de Imagens
    • Others

Categories

  • games
  • TV Shows
  • Technology
  • Cinema

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


E-mail


Facebook


Twitter


Skype


Discord


WhatsApp


Behance


DeviantArt


GitHub


Codepen


Outro

Found 22 results

  1. iJhefe

    Bom, o @Luan postou um desenho de uma Landing Page aqui: E ele me pediu para codar, então como um bom amigo, codei. Existem algumas mudanças sutis devido a eu ter codado sem o arquivo editável e também ter codado sem acesso nenhum a internet para buscar imagens. DEMO: Download: [Hidden Content] Minha Rede - Landing Page.zip
  2. T0E

    Oi pessoal, eu vi que o fã-site Kihabbo está voltando a atividade, e por sinal a manutenção deles é simples é bem planejada, com sincronização com a música que toca. Eu achei interessante e resolvi compartilhar com vocês. Demonstração: Clique aqui :3 Download: [Hidden Content] A manutenção tem um sistema que fica passando os personagens da equipe do fã-site para cima, para alterar os personagens que passam é só ir na pasta assets->js->main.js e alterar os nomes que estão na função var users como no print abaixo! Note que os nomes devem ser iguais ao do Habbo BR. Caso queria que o sistema funcione em hoteis piratas você deve alterar o link da Habbo Imaging na função appendAvatar que se encontra mais abaixo no mesmo arquivo. Vale lembrar que para funcionar em hóteis piratas o mesmo deve ter o sistema de API ou habbo-imaging própria, caso contrário, não deve funcionar corretamente... Créditos: Desenvolvedores Kihabbo (Equipe) T0E - Por trazer ao fórum
  3. Olá pessoal , hoje eu estou aqui para divulgar o trabalho do kaway404 como Desenvolvedor web, está criando um sistema parecido com Netflix! Projeto streamer de vídeos parecido com Netflix Projeto criado por um unico membro Créditos ao Desenvolvedor: Kaway404 Apresentação: ------------------------ Como instalar? ------------------------ Edite as conexão no /static/php/system/config.php Edite as seguintes linhas! Linha 3, 4, 5, 6, 10, 11, 12 , 13 Super simples ^^ E adicione a .sql na db Para colocar um usuario admin vá até o phpmyadmin e altere o usuario que você deseja que vira admin para admin = 1 Para acessar o cpanel você precisa estar logado em uma conta, e navegador no site.com/admin.php Créditos ao Desenvolvedor by Kaway404
  4. AhaMag é uma maneira moderna de publicar seus artigos. Bom para grandes jornais de revistas e blogs também. O AhaMag é super rápido e usa a técnica lazyload, então o conteúdo é carregado somente quando necessário. Use o AhaMag para muitas categorias, como inovações, tecnologias, política, negócios e notícias do mundo. Nós otimizamos todo o código, então ele carrega muito mais rápido que outros modelos. Este modelo HTML5 é baseado na mais recente estrutura do Bootstrap 4 e é totalmente responsivo. Os arquivos organizados do Sass ajudarão você a personalizar a aparência do seu site. AhaMag construído com metodologia BEM e código semântico limpo. Experimente o AhaMag HTML hoje e crie sua revista perfeita. Live Demo: Aha Magazine Download: [Hidden Content]
  5. Closed Design

    html/css

    Oi pessoal do Haze sou o Closed! Hoje estarei trazendo um Layout que eu tinha faz tempo, e nunca usei. Decidi editá-lo e postá-lo aqui para vocês. O Layout em si é muito simples mas muito bonito que pode ser usado em diversas áreas. Edite como quiser e desfrute do Layout do seu jeito, apenas não retire os créditos! Avisos: Em breve irei trazer uma versão em PHP, mas quem quiser já trazer em PHP só postar. Créditos: O Layout foi criado por mim (Closed), então todos os créditos a mim. Demo: IMAGEM Download: MEGA MEDIAFIRE
  6. Comente para ver o download! DEMOnstração: Download: [Hidden Content]
  7. Rafisbf

    Ei você, você mesmo que tem seu projeto que precisa de um site mas não sabe quem contratar, Agora você está no lugar certo, você acaba de conhecer @Rafisbf , e ele cobra somente 10 reais para fazer seu trabalho, agora só chamar ele no privado que seu projeto estará pronto ADIÇÕES Email para contato: R$ 5,00 Sistema de login: R$ 10,00 Hosting: R$4,00 a R$ 55,00 Dominio: .com R$ 50,00 .net R$ 50,00 (caso esteja disponivel) Outras adições: Chame PV Formas de pagamentos PayPal Portifolio
  8. Kene

    html/css

    Trago um desenho do Pikachu feito apenas em HTML e CSS. Demo: https://pika.assistir.me Download: https://pika.assistir.me/pika.zip
  9. O HTML: Vamos criar primeiro nosso html com header simples <header> <h1 class="fL"> <a href="#" title="A TURMA DO CHAVES">A TURMA DO CHAVES</a> </h1> <nav class="fR"> <ul class="l2"> <li> <a href="#Chaves" title="Chaves">Chaves</a> </li> <li> <a href="#Chiquinha" title="Chiquinha">Chiquinha</a> </li> <li> <a href="#Seu-Madruga" title="Seu Madruga">Seu Madruga</a> </li> <li> <a href="#Quico" title="Quico">Quico</a> </li> </ul> </nav> </header> Agora com o nosso html pronto, vamos fazer o primeiro teste olhando nosso html puro e formatar usando poucas linhas de css. Demo. O CSS: Como nosso header ficará sempre fixo no topo, vamos formatar da seguinte maneira: header { min-height: 60px; position: fixed; top: 0; right: 0; left: 0; border-bottom: 1px solid #ccc; background: #ECECEC; z-index: 2; } Agora com o header formatado, o segundo teste é redimensionar o navegador para perceber que o header sempre acompanha e ao diminuir muito tem quebra por falta de espaço. Demo. Montamos um header simples e funcional, com mais 3 elementos e CSS teremos um header simples e responsivo. Esses elementos são dois label’s e um checkbox, com o selector ‘~’ do css3 vamos transformar o header. Começando o responsivo Vamos adicionar os elementos antes da nav e o html fica assim: <header> <h1 class="fL"> <a href="#" title="A TURMA DO CHAVES">A TURMA DO CHAVES</a> </h1> <input type="checkbox" id="control-nav" /> <label for="control-nav" class="control-nav"></label> <label for="control-nav" class="control-nav-close"></label> <nav class="fR"> <ul class="l2"> ... </ul> </nav> </header> Nesse ponto o checkbox tem o papel de substituir o javascript. Conseguimos também por css saber se o elemento está marcado com o famoso “:checked” que todos já usaram com jQuery. Seu projeto, suas medidas Para nosso exemplo adicionei no head: <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" /> e no css: @media screen and (max-width: 767px) Quando redimensionar o navegador menor que 768px, a formatação do header vai se comportar de outra maneira e já escondida utilizando transform: @media screen and (max-width: 767px) { header .control-nav { position: absolute; right: 20px; top: 20px; display: block; width: 30px; padding: 5px 0; border: solid #333; border-width: 3px 0; z-index: 2; cursor: pointer; } header .control-nav:before { content: ""; display: block; height: 3px; background: #333; } header .control-nav-close { position: fixed; right: 0; top: 0; bottom: 0; left: 0; display: block; z-index: 1; background: rgba(0,0,0,0.4); -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); } header nav { position: fixed; top: 0; right: 0; bottom: 0; width: 250px; border-left: 1px solid #ccc; background: #fff; overflow-x: auto; z-index: 2; -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); } } Formatei o “label .control-nav” para ser o botão responsivo, o “label .control-nav-close” para ser a cortina bloqueando o fundo e o ‘nav’ para ficar fixo e redimensionável. Agora o pulo do gato Utilizando dos seletores do CSS3 que são os ‘:checked’ e ‘~’, conseguimos formatar elementos de acordo com a necessidade, veja a documentação. Sendo mais claro, com o seletor ‘~’ você consegue selecionar elemento do mesmo pai declarado depois dele. Ao marcar o input, no css usando o transform vamos exibir suavemente o menu, veja: #control-nav:checked ~ .control-nav-close { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #control-nav:checked ~ nav { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } Pronto Agora o menu é responsivo e bem simples com poucos elementos. Veja como ficou o resultado final. Veja o código completo no github. Tutorial criado por Tableless
  10. iJhefe

    html/css

    CSS Tutorial: Conhecendo SASS e SCSS Se você gosta de ficar por dentro do mundo de Desenvolvimento Web, já deve ter ouvido falar em SASS ou SCSS mas não sabia o que era, então aqui trago uma explicação resumida. SASS, SCSS e LESS são Pré-Processadores e Frameworks de CSS (folha de estilo) que auxiliam a produtividade de códigos, principalmente no quesito de repetição de uma mesma ação, diversas vezes. Você fica copiando e colando valores no CSS, se perguntando se havia uma forma mais rápida e prática para isso? A resposta é SIM, com esses Pré-Processadores. Qual a diferença entre eles? Ambos são sintaxes diferentes do SASS, mas a funcionalidade é a mesma. O Sass era originalmente a sintaxe oficial, mas era um tanto diferente do CSS e atualmente o Scss é a sintaxe oficial por se parecer com o CSS. Vejamos um exemplo de cada: SASS: #main color: #ed423f font-size: 0.8rem a font-family: Segoe font-weight: bold &:hover color: lightblue SCSS: #main { color: #ed423f; font-size: 0.8rem; a { font-family: Segoe; font-weight: bold; } &:hover { color: lightblue; } } Resultado em CSS: #main { color: #ed423f; font-size: 0.8rem; } #main a { font-family: Segoe; font-weight: bold; } #main:hover { color: lightblue; } Como podemos ver, Sass não apresenta chaves ou ponto e virgula, a regra de separação dele se deve ao espaçamento. Já o Scss, é bem parecido com CSS comum em relação a estrutura. Uso de variáveis em SCSS e SASS Para facilitar o trabalho repetitivo, ambos os processadores permitem armazenar variáveis e declara-las livremente, como: Scss $amarelo: #FFC300; $roxoEscuro: #581845; $bordaRoxoE: 1px solid #7F2364; $font-titulo: 1.5rem; $font-corpo: 0.8rem; $cor-corpo: #DCDCDC; $bg-widget: #3d3; .widget { background: $bg-widget; } .box { background: $roxoEscuro; border: $bordaRoxoE; } .box .titulo { color: $amarelo; font-size: $font-titulo; } .box p { color: $cor-corpo; font-size: font-corpo; } Quando processado para CSS, as variáveis se transformam no valor das mesmas, por exemplo, $amarelo se transforma em #FFC300. @mixin e @include Scss Com @mixin e @include você terá uma maior facilidade para construir códigos longos. O @mixin serve para "habilitar" a class a ser incluída e o @include, para incluir. Exemplo: @mixin widget { $pretoCorpo-bg: #3d3; //variavel $shadow: 0px 0px 1px #faf; //variavel $radius: 4px; //variavel background: $pretoCorpo-bg; box-shadow: $shadow; border-radius: $radius; } #widget li { @include widget; } #footer .aba { @include widget; } Isso vai fazer com que as class's receba os valores de widget. Como utilizar Para usar Sass ou Scss, é necessário uma IDE que possibilite isso, muitas são encontradas na internet, mas o que eu prefiro utilizar para Dev. Front-End é o Dreamweaver CC 2018, ele vem equipado com um conjunto de ferramentas que facilita a programação front e pré-processadores não poderiam estar de fora. Breve tutorial pra quem quiser usar o sass: ( by @Luan ) Lembrando que os arquivos .scss e .sass, são transformados em .css com o mesmo nome*, ou seja, você deverá linkar em seu projeto o arquivo .css gerado. Em caso de dúvidas, comente. Haze Fórum - iJhefe
  11. iJhefe

    Navegação com Abas

    Version 1.0.0

    5 downloads

    A navegação com abas possibilita que o usuário visualize vários conteúdos em um único lugar, mudando apenas com clique. DEMO:

    Free

  12. iJhefe

    Minha Rede Layout

    Version 1.0.0

    14 downloads

    DEMO

    Free

  13. iJhefe

    Sword Legends - Login Essa página de Entrada (login) foi codificada por mim e desenhada por Junmy, créditos estão no arquivo, essa versão é não Programada, ou seja, sem PHP, mas é totalmente responsiva e com animações Pure CSS. Demonstração: http://mystictera.com/sL-project/front/ Prints e Download: [hide]
  14. iJhefe

    Sword Legends - Login

    Version 1.0.0

    10 downloads

    Sword Legends - Login Essa página de Entrada (login) foi codificada por mim e desenhada por Junmy, créditos estão no arquivo, essa versão é não Programada, ou seja, sem PHP, mas é totalmente responsiva e com animações Pure CSS. Demonstração: http://mystictera.com/sL-project/front/

    Free

  15. Olá, agora venho deixar para vocês uma navegação em CSS3 e HTML, sem Javascript. Imagem O que é? Quando clicar em uma das categorias, o conteúdo dela é exibido. Download [Hidden Content]
  16. Olá membros do Haze Fórum, venho anunciar para vocês uma série de tutoriais onde você vai aprender a codificar um site (HTML/CSS), começando do básico ao o que eu puder ensinar. Nos tutoriais vou tentar ser o mais direto possível e você poderá tirar suas dúvidas no tópico (caso a dúvida seja simples) ou criar um tópico de Suporte no fórum que será ajudado. Para iniciar, preciso da ajuda de vocês... com o que eu começo? PS: Por ser a primeira, optei por não começar com um site completo. 1- Power Mine Landing Page 2- Neodins Landing Page 3- NeoGames Login/Register Sobre a metodologia: Ainda estou pensando em ser somente tutorial Escrito, Escrito + Vídeo ou só Vídeo. Vai depender muito de minha disponibilidade, mas prometo ter pelo menos alguns vídeos.
  17. Olá pessoal, achei isso aqui vagando pela internet, achei interessante, então eu traduzi e vou compartilhar com vocês. É um tema simples com apenas uma index feita com HTML e CSS, o mais interessante é que ele é totalmente responsivo, ou seja, funciona perfeitamente com qualquer dispositivo. Responsivo: Download: [Hidden Content] O scan o Mega.NZ já faz, mas se quiser o scan, comenta ae que eu coloco Até mais ;)
  18. For the members who installed the Kuro theme they will not have to add the CSS codes and the scripts (they are already included) Paste the following scripts before the tag </head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> $(document).ready(function() { $(".contenido_tab").hide(); $("ul.tabs li:first").addClass("activa").show(); $(".contenido_tab:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("activa"); $(this).addClass("activa"); $(".contenido_tab").hide(); var activatab = $(this).find("a").attr("href"); $(activatab).fadeIn(); return false; }); }); </script> Paste the following CSS code before the tag </b:skin> /* CSS Tabs jQuery */ .contenedor_tab{color: white;float: left;clear: both;display: block;border-radius: 7px;width: 100%;} ul.tabs{float:left;margin:0;padding:0;list-style:none;height:32px;width:600px;margin-top:-10px;} ul.tabs li{float:left;margin:0;padding:0;height:31px;line-height:31px;margin-bottom:-1px;background:#f8f8f8;overflow:hidden;position:relative;border-radius: 7px;margin-right:5px;} ul.tabs li a{font-family: Arial;text-decoration:none;color:#000;display:block;font-size:13px;padding:0 20px;outline:none;border-radius: 7px;} ul.tabs li a:hover{background:#00a0ff;} ul.tabs li.activa,ul.tabs li.activa a,ul.tabs li.activa a:hover {color:#fff;background:#00a0ff;} .contenido_tab{background-color: #00a0ff;padding: 10px;font-size: 1.2em;border-radius: 5px;} .contenido_tab img{margin:0 20px 20px 0;border:1px solid #ddd;padding:5px} Paste the HTML code into any pag/entry you want to show multiple video servers <ul class="tabs"> <li><a href="#tab1">SERVER 1</a></li> <li><a href="#tab2">SERVER 2</a></li> <li><a href="#tab3">SERVER 3</a></li> </ul> <br/> <div class="contenedor_tab"> <div id="tab1" class="contenido_tab"> <div class="embed"> <iframe src="" scrolling="no" allowfullscreen></iframe> </div> </div> <div id="tab2" class="contenido_tab"> <div class="embed"> <iframe src="" scrolling="no" allowfullscreen></iframe> </div> </div> <div id="tab3" class="contenido_tab"> <div class="embed"> <iframe src="" scrolling="no" allowfullscreen></iframe> </div> </div> </div> <div style="clear:both;"> </div> PLEASE GIVE RATE Any question about custom design please leave a comment
  19. Go to Design > Add Widget > HTML/Javascript, save the following javascript in the widget Replace images, titles, dates, etc ... <link rel="stylesheet" type="text/css" href="http://hentaila.com/assets/css/estilos.css" /> <div class="row"><h2 class="heading"><span class="head-ext"><i class="fa fa-star"></i>Last chapters</span></h2> <div id="flexbox"> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="DIES IRAE 4 SUB ESPAÑOL"> <img alt="DIES IRAE 4 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">DIES IRAE</div> <div class="overepisode">Episodio 4</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="SHOUJO SHUUMATSU RYOKOU 5 SUB ESPAÑOL"> <img alt="SHOUJO SHUUMATSU RYOKOU 5 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">SHOUJO SHUUMATSU RYOKOU</div> <div class="overepisode">Episodio 5</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="KINO NO TABI: THE BEAUTIFUL WORLD - THE ANIMATED SERIES 5 SUB ESPAÑOL"> <img alt="KINO NO TABI: THE BEAUTIFUL WORLD - THE ANIMATED SERIES 5 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">KINO NO TABI: THE BEAUTI...</div> <div class="overepisode">Episodio 5</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="NET-JUU NO SUSUME 5 SUB ESPAÑOL"> <img alt="NET-JUU NO SUSUME 5 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">NET-JUU NO SUSUME</div> <div class="overepisode">Episodio 5</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="DRAGON BALL SUPER 64 AUDIO LATINO"> <img alt="DRAGON BALL SUPER 64 AUDIO LATINO" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">DRAGON BALL SUPER</div> <div class="overepisode">Episodio 64 Latino</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="INUYASHIKI 4 SUB ESPAÑOL"> <img alt="INUYASHIKI 4 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">INUYASHIKI</div> <div class="overepisode">Episodio 4</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="OUSAMA GAME 5 SUB ESPAÑOL"> <img alt="OUSAMA GAME 5 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">OUSAMA GAME</div> <div class="overepisode">Episodio 5</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="JUST BECAUSE! 5 SUB ESPAÑOL"> <img alt="JUST BECAUSE! 5 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">JUST BECAUSE!</div> <div class="overepisode">Episodio 5</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="DRAGON BALL SUPER 63 AUDIO LATINO"> <img alt="DRAGON BALL SUPER 63 AUDIO LATINO" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">DRAGON BALL SUPER</div> <div class="overepisode">Episodio 64 Latino</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="BOKU NO KANOJO GA MAJIME SUGIRU SHOBITCH NA KEN 4 SUB ESPAÑOL"> <img alt="BOKU NO KANOJO GA MAJIME SUGIRU SHOBITCH NA KEN 4 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">BOKU NO KANOJO GA MAJIME...</div> <div class="overepisode">Episodio 4</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="AME-IRO COCOA SERIES: AME-CON!! 5 SUB ESPAÑOL"> <img alt="AME-IRO COCOA SERIES: AME-CON!! 5 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">AME-IRO COCOA SERIES...</div> <div class="overepisode">Episodio 5</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div> <div class="item"> <div class="overarchingdiv"> <a href="//url" title="TSUKIPRO THE ANIMATION 5 SUB ESPAÑOL"> <img alt="TSUKIPRO THE ANIMATION 5 SUB ESPAÑOL" src="https://zonafilesanimext.000webhostapp.com/img/no-image-blogger.png" /> <div class="hoveroverlay"> <i class="fa fa-play pgnav activehov"></i> </div> <div class="seriesoverlay"> <h3> <div class="overtitle">TSUKIPRO THE ANIMATION</div> <div class="overepisode">Episodio 5</div> </h3> <div class="recentupd">Publicado 03/11</div> </div> </a> </div> </div></div></div> PLEASE GIVE RATE Any question about custom design please leave a comment
  20. The indicator bar is for any blogger template, but if you installed the Kuro template there is no need to install the following CSS (it is recommended to download the style.css and upload it to your own hosting) They have 3 options to insert the CSS Code CSS .indicadores{background:#444;padding:11px 0;border-bottom:4px solid #00ADED} .indicadores div{display:inline-block;width:20%;text-align:center;color:#FFF;font-size:25px;vertical-align:middle} .indicadores div a{color:#FFF} .indicadores div a:hover{color:#00ADED} .indicadores div:nth-of-type(2){width:55%} HTML (Insert at the end of the entry or page) <div class="indicadores"> <div><a href="/2017/11/dragon-ball-super-8-sub-espanol.html" rel="prev"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></div> <div><a href=/2017/10/dragon-ball-super.html""><i class="fa fa-list-alt" aria-hidden="true"></i></a></div> <div><a href="/2017/11/dragon-ball-super-10-sub-espanol.html" rel="next"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></div></div> PLEASE GIVE RATE Any question about custom design please leave a comment
  21. Just follow the instructions Please enter CSS above </ style> and </ b: skin> After that go to your Page or Publication, then enter the code below. (Replace titles and images) Then save the template. If there is any problem, please comment
  22. Use the label of your post or blog, so the last post of the label you choose will be visible in the widget Just follow the instructions Go to Blogger > Themes > Edit HTML, then save the following CSS above </style> /* Latest Post Label - BunnyOlok */ .last_post ul{list-style:none;margin:0 auto;position:relative} .last_post ul li:before{content:'New';padding:5px;margin-right:5px;background:#333;font-size:12px;font-family:roboto,sans-serif;color:#FFF;border-radius:5px} .last_post ul li{margin:0 auto;padding:5px 0} .last_post ul li:nth-child(even){background:#eee} .last_post ul li:nth-child(odd){background:#FFF} Go to Design > Add Widget > HTML / Javascript, save the following javascript in the widget <script type="text/javascript"> var numposts = 10; var standardstyling = true; function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }} posttitle = posttitle.link(posturl); if (standardstyling) document.write('<li>'); document.write(posttitle);} if (standardstyling) document.write('</li>'); }</script> <div class='last_post'><ul> <script src="/feeds/posts/default/-/Tutorial?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul></div> Replace the following values var numposts = 10 Change N ° 10 to show the number of publications Tutorial Change the label you want to show example: "new"
×