Modelos do Blogger AMP #01

Modelos do Blogger AMP #01


Kompi Design cria primeiro awesome HTML AMP modelo blogger

Kompi_design_amp_blogger_template_amptemplatecom
O Blogger é uma das primeiras ferramentas de publicação de blog dedicadas que é creditado para popularizar o formato. Esperávamos que o Blogger tivesse essa capacidade de carregamento móvel acelerado com o lançamento do AMP. Mas não! Não até recente pelo menos. Agora você pode fazer o download desses Modelos do Blogger do AMP gratuitamente a partir dos Modelos do AMP. O AMP agora também está disponível para usuários do Blogger.com.
Kompi Design Com Google AMP Blogger Template  é um modelo de blogger perfeito e elegante. Este modelo está pronto para o futuro, sendo totalmente compatível com os padrões HTML do Google AMP, padrões Bootstrap, design responsivo e suporte ao protocolo HTTPS. Kompi está equipado com uma alvenaria Grid na homepage. Kompi sai da caixa com html 5 totalmente válido e css amp code, pronto para impressão e HCard autor pronto.

Kompi-design-amp-blogger-template
Características do modelo do blogger Kompi AMP:

  • Compilação com páginas móveis aceleradas (AMP) HTML
  • AMP Ready Todas as páginas
  • Mobile Friendly - verificar
  • Design totalmente responsivo - verifique
  • Dados estruturados validados - verifique
  • SEO pronto - verifique
  • Homepage Custom Post com grade de alvenaria
  • Criar com HTML5
  • Criar com CSS3
  • Suporte SSL / HTTPS
  • Carregamento rápido
  • Widget popular popular do borne com Thumbnail
  • Search Column Responsive válido AMP
  • Schema.org válido
  • Página 404 de erro personalizado
  • Compatível com os principais navegadores (IE8 +, Mozilla, Chrome, Safari)

Por que usar este modelo de blogger AMP para o seu site baseado Blogspot?

AMP ou Accelerated Mobile Page é um projeto do Google que é criado como um padrão para os editores terem uma página que será carregada rapidamente em dispositivos móveis que, em 24 de fevereiro de 2016, o Google integrou oficialmente o AMP nos resultados de pesquisa do celular. AMP é uma maneira de construir uma página web para conteúdo estático que pode ser carregado rapidamente construído com três seções distintas, ou seja, AMP JS, HTML AMP e AMP GOOGLE CACHE. E, recentemente, o Google continua incentivando os editores a usar o AMP para que as páginas da web com conteúdo de vídeo, animação e gráficos possam ser carregadas com anúncios rapidamente e carregadas instantaneamente em vários tipos de celulares, tablets ou dispositivos móveis usados. Mas o Google insiste que isso não é algo que pode classificar para um site. Contudo, O Google fornecerá um rótulo AMP (lightning round pins) em sites que usam AMP para que os leitores sejam mais fáceis de escolher quais sites são rapidamente acessíveis com seus dispositivos móveis. Logicamente, se os sites com AMP podem ser carregados rapidamente com o dispositivo móvel, ele será mais rápido se acessado com um dispositivo de desktop. Para isso, os Modelos AMP conseguiram coletar modelos para o Blogger, que são válidos em todas as páginas do blog. Esta versão do modelo do blogger ainda não integrou o componente json do Blogger da AMP, por isso este modelo não suporta um sitemap, postagens relacionadas e postagens recentes ainda. Este será adicionado a partir da versão 1.1. Mas se você quiser tentar o Blogger com o Google AMP, faça o download gratuito deste Template do Blogger nesta página. A versão do Kompi AMP 1.0 é distribuída gratuitamente, mas para as atualizações da próxima versão um PREMIUM pode ser esperado.

Como personalizar este modelo de blogger AMP para atender às suas necessidades

Kompi_design_amp_blogger_template_amptemplatecom
  1. Alterar Logotipo Blog
    Substitua por favor o URL da imagem no código abaixo. Crie um logotipo com o tamanho 30px x 30px.
    1. <B: includable id = 'title' >
    2. <a expr:href ='data:blog.homepageUrl' expr:title ='data:title' itemprop ='url'> <span itemprop = 'nome' > <amp-img alt = 'Logo' expr: title = ' Dados: title ' height = ' 30 ' src = ' https://XXXXX.com/-sdadsFFSAQ/V-x2SveBi9I/AAAAAAAAnAno /oiup ^ & A0SH03H8qjoZ9mfJYCRiSgCLcB/s1600/logo.png ' width = ' 30 ' /> <Data: title /> </ span> </a>
    3. </ B: includable>
  2. Alterando Disqus Comentários Substitua
    por favor o projeto de código da companhia no código abaixo com seu blog do disqus do username.
    1. <b: includable id = 'Disqus-comments' var = 'post' > <div class = 'Disqus-comments' id = 'disqus_comments' > <amp-iframe expr: src = '& quot; https: //cdn.rawgit .com / KompiAjaib / kompi-html / master / disqus_amp2.html? Shortname = kompi-design & amp; url = & quot; + Dados: blog.canonicalUrl ' frameborder = ' 0 ' altura = ' 300 ' layout = ' responsive ' resizable = ' resizable ' sandbox = '
  3. Coloque anúncios
    A. 
    Cabeçalho de anúncios B. Anúncios acima de posts (300 x 250) 
    C. Os anúncios abaixo de posts
    1. <Div class = 'headerad' >
    2. <Amp-img alt = 'Anúncios de cabeçalho height = ' 90 ' src = ' https://4.bp.blogspot.com/-U8BOd1cfeXw/V-z24UcmKEI/AAAAAAAAoBM/cb7H0j_k8DAkxwg2cB9Y3F1ynZwu0emKQCLcB/s1600/ads.jpg ' title = ' Anúncios de cabeçalho ' width = ' 728 ' />
    3. <Div class = 'clear' />
    4. </ Div>
  4. Faça posts
    A. Miniatura para postagem, use o seguinte html e salve-o no topo. 
    B. Insira outra imagem. 
    C. Inserindo vídeo Youtube 
    D. Inserindo um controle deslizante para várias imagens 
    E. Etiqueta a ser evitado no post
    1. <Div class = "thumb-post" >
    2. <Noscript > <img src = "https://2.bp.blogspot.com/-Xk6KKtIi7JA/U8MdruSxxMI/AAAAAAAAdQM/aKG8J3BXnUs/s1600/4.jpg" width = "650" height = "350" alt = "Curabitur placerat Est sem " /> </ noscript>
    3. </ Div>
  5. Formulário de
    contato Para entrar em contato formulário usar este tutorial. Para o seu código CSS não precisa ser adicionado porque já existe.
  6. Google Analytics
    Para o código do Google Analytics, substitua UA-XXXXX-Y pelo código de conta do Google Analytics do seu blog.
    1. <Script type = 'application / json' >
    2. {
    3. "Vars": {
    4. "Conta":? UA-XXXXX-Y?
    5. },
    6. & Gt; gatilhos & quot;
    7. & Quot; trackPageview & quot ;: {
    8. "Em": "vis�el",
    9. & Quot; pedido & quot ;: & quot; vista de página & quot;
    10. }
    11. }
    12. }
    13. </ Script>
  7. Ícones links externos em posts
    Para a exceção de links internos em postagens que não têm um ícone de link externo, substitua o URL css abaixo pelo URL do blog. Existem dois grupos de CSS para postar postos de trabalho e postos móveis, substitua ambos.
    1. .post-body .separator a: after, .post-body a [href ^ = "https://kompidesign.blogspot.com/"]: depois, .post-body a [href ^ = "https: // twitter .com / intenção / tweet "]: depois {conteúdo: ''; fundo: nenhum; largura: 0; altura: 0; margem-esquerda: 0}
Especificações
Data de lançamento:23 de setembro de 2016
Ultima atualização:23 de setembro de 2016
Versão Atual:1..0
Tipo de Produto:Modelo do Blogger
Formato de arquivo:Rar
Exigências:Conta do Blogger.com
Preço:$ 0.00 $
Livre
Demonstração

Compartilhe usando

Disqus Comments