Artigos com "script"

Mostrando postagens com marcador script. Mostrar todas as postagens

Um template Blogger pode suprir as necessidades iniciais, depois de um tempo a gente quer outras funções, as vezes outro desenho.
Eu vejo muitos casos, em que o internauta sofre para atingir o objetivo. De fato não é algo tão simples, instalar e configurar adequadamente um template. Aqui pretendo compartilhar algumas dicas, de uma maneira geral, por exemplo se tiver uma imagem em cada artigo, todos os templates e aplicativos, gadgets/widgets funcionarão bem, se não tiver imagem, alguns templates terão problema pela falta de tal imagem, então no geral é bom ter uma imagem em cada artigo. Pode ter mais de uma imagem? Sim, sem problema algum, na maioria das vezes os programas irão puxar a primeira imagem do artigo, mesmo que ela não esteja aparente no artigo, para isso pode-se por exemplo usar o estilo display:none em css.
Daí entra o segunda dica, que é ter uma noção básica do html, css e javascript, isso facilitará bastante a vida do internauta que faz uso do Blogger. Entender onde adicionar código, onde se localizam os blocos de código, da pele(skin), do corpo(body), do rodapé(footer), barra lateral(sidebar) e etc.

Outro detalhe que deve ser considerado é a idade do template, geralmente a última versão de um "software" está em teste e é chamada de "beta", isso por conter problemas ainda não resolvidos, significa que o mais novo pode não ser o melhor. Por outro lado não se deve fazer uso de algo muito antigo, com links quebrados de sites que já fecharam as portas e serviços encerrados como o GooglePlus por exemplo.
Um template que está com um ano de vida hoje, tem maiores chances de possuir uma codificação atualizada e com menos problemas para correção.
É quase que impossível estar 100%, pois as coisas mudam muito rápido e se deve considerar que até mesmo grandes sites tem problemas, falhas as vezes pequenas, que passam desapercebidas por muitos, mas que ali estão e para quem é mais detalhista se tornam algo incômodo.
Eu gosto de ver tudo funcionando bem, mas reconheço que nem sempre isso é possível. Tenho um gosto em especial que nem sequer é perceptível ao público, me refiro aqui ao painel administrativo, que é visto apenas pelo Jair, mas que me dá um gostinho quando aparece nas imagens ou nos vídeos, sei que muitos ficam se perguntando, como o painel dele é cheio de tons e gadgets diferentes?

Imagem do painel administrativo layout Blogger Verbratec.

Acredito que a maioria das pessoas, que gostam de blogar, escolhem seus templates apenas pelo desenho, mas tem uns 30% de usuários que gostam de ter funcionalidades à disposição e a tendência é que esse percentual cresça. Para isso os desenvolvedores precisam estar atentos, atualizados e dispostos para atender a demanda.
Penso que há tão pouco disponível, mas de fato não há procura suficiente. O que rege é a lei da oferta e da procura, por isso até hoje, não há suporte ao PHP no Blogger, infelizmente.
Eu dedico algum tempo pesquisando, para poder inovar, mas há alguns "freios" aqui, daí resta escrever algo lamentando a impossibilidade de fazer algo diferente, seguimos usando apenas o feed na alimentação dos gadgets, que já me parecem velhos conhecidos e que por mais criativos que sejamos, possuem as mesmas funcionalidades de anos atrás. Isso é bah!
Para efeitos de estudo e observação, como exemplos de codificação para templates Blogger, poderás acessar essa página.
Os códigos na versão 1 e 2 para um mesmo widget.
Códigos nas versões um e dois para um mesmo widget Blogger.

Por curiosidade, é possível fazer uso de até 999 widgets em um template Blogger, sendo que muitos deles são usados apenas para realizar funções, ficando invisíveis, trabalhando apenas em segundo plano.
Um abraço com o ensejo de um ótimo final de semana e até a próxima!

Ao abrir o layout do Blogger estará na parte inferior a área Menu principal links ao conteúdo. Nela existem quatro gadgets que foram projetados para receber uma quantia enorme de dados, suprindo as necessidades mais diversas.
O que vou fazer aqui é apenas exemplificar uma das muitas maneiras de configurar alguns links, com este construtor.
No topo do blog/site há dois links, um para termos de uso e o outro para política de privacidade, mas é possível inserir outros seguindo o mesmo método, lembrando que eles fazem parte do "Menu principal" enquanto em telas menores, como smartphones e tablets. Tudo será demostrado no vídeo.
Eu busquei deixar todos mais ou menos na mesma dimensão, então para o gadget Marcadores, selecionei apenas quatro itens: blogger, facebook, json e solda.
Para o segundo gadget, que também é criado automaticamente, na instalação do template, entitulado "Páginas", eu colocarei os links para as páginas que no Blogger chamamos de estáticas, escolhi deixar os seguintes links: configuração, ferramentas, política de privacidade, mapa do site, sobre e termos.
Esses links são introduzidos da forma tradicional, nome do link e url de destino, uma lista de links simples.
O terceiro gadget colocarei um link externo e uma imagem, e o quarto gadget não vou usar nesse momento.


O gadget Menu principal é um gadget do tipo lista de links, apenas trabalhará de uma forma um pouco diferente da tradicional, ficará bem nítido isso no vídeo. Farei minha lista da seguinte forma, lembrando que isso é apenas um exemplo.

Configuração básica do menu principal do template verbratec.
Será quase como aparece na imagem, isso por ter que criar e depois de criado, tem que voltar e editar. Já vi em alguns lugares e me conformo de não estar só na busca pela resolução do problema, o que ocorre é que se deixar chaves ou colchetes, que são usados na criação, eles irão aperecer onde não devem, como ocorreu no Facebook.
Colchetes no Facebook.
Também aconteceu no GMail, esses colchetes não deveriam aparecer ali.
Colchetes no Gmail.
Percebi o problema na pesquisa do Google e até o presente momento não tenho a solução, tudo o que posso fazer é criar com os colchetes, pois o construtor lê o que está aninhado ali, depois edito e retiro os colchetes uma vez que os dados já estarão armazenados. Creio que já deu pra entender o básico da rotina.


Bora pro vídeo então...
[youtube src="FhoPi_8CyoM"][/youtube]

Com certeza muitos dos que aqui chegarem, já conhecem tudo isso e muito mais, eu porém espero é que isso seja útil para aqueles que ainda não sabem como funciona e muitas vezes, compram templates sofisticados mas sem uma documentação edequada, acabam deixando de fazer um melhor uso do software, que dá tanto trabalho ao desenvolvedor.

Anti - caçador curioso de baleia!

Um forte abraço e o meu obrigado por sua presença aqui! Pense em dar aquela curtida para incentivar esse trabalho.

A navegação mais usada no Blogger é aquela que pega o arquivo do lado, como todos sabemos o Blogger usa data para organizar os arquivos, então de um lado há algo mais novo, de outro algo mais antigo.
O fato é que essa navegação fica bem interessante quando capturamos a imagem, desses dois arquivos e apresentamos como links no final da postagens, podendo mostrar ou não o título desses mesmos arquivos.
Para quem usa o template "simples" padrão do Blogger é até fácil de fazer as alterações necessárias, com uma boa internet e um pouco de paciência, lembrando que sempre se deve fazer a cópia do template antes de iniciar o procedimento, para que se possa retroceder sem prejuízos caso algo falhe.
Eu sempre usava um tutorial como guia passo a passo, mas infelizmente o autor resolveu retirar, o blog dele agora é fechado, com conteúdo adulto. Por isso vou tentar reproduzir aqui, mais pra me servir de guia no futuro, mas poderá lhe ser útil também.
De primeira posso prometer que, estou ajustando o script principal, o qual interfere em todas as funções do blog/site e portanto deixarei no final dessa postagem o parecer atual, erro, manutenção e sucesso serão as alternativas. Na tentiva de uma melhor condição, vou marcar essa postagem como completa, assim ocultando a coluna lateral, me parece que fica um visual mais aprazível de trabalhar e facilita a concentração no objetivo.
Acima dos comentários, ou abaixo? Mostrar para telefones ou não? Claro que se deve usar condicional Blogger para renderizar apenas nas postagens itens. Para mim o maior problema, kkkk, que fique funcional em tudo.
A pré visualização do Blogger não mostra imagem, então vou ter que publicar para ver como está ficando, vish! Blogger Ki-Bah!

Vou colocar no cabeçalho, acima da tag de fechamento o seguinte código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.halaman-kanan,.halaman-kiri{transition:all .3s ease-in-out}
.halaman{margin:0;padding:0;min-height:170px;height:auto}
.halaman-kanan,.halaman-kiri{color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0}
.halaman-kiri{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
.halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box}
.halaman-kanan{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
.current-pageright,.current-pageleft,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1}
.halaman-kanan a,.halaman-kiri a,.current-pageright,.current-pageleft{color:#fff;}
#blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important}
.panahkanan,.panahkiri,.halaman-kiri a div:before,.halaman-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;}
.panahkiri,.halaman-kiri a div:before{right:10px}
.panahkanan,.halaman-kanan a div:before{left:10px}
.halaman-kanan a:hover,.halaman-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.isihalaman-kanan img,.isihalaman-kiri img{position:absolute;top:0;width:100%;height:100%;z-index:1}
.isihalaman-kanan img{left:0}
.isihalaman-kiri img{right:0}
.halaman-kiri a div, .halaman-kanan a div,.current-pageright,.current-pageleft {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.halaman-kiri a div,.current-pageright{right:0;padding-right:40px;}
.halaman-kiri a div:before{content:'\f054';font-family: FontAwesome;}
.halaman-kanan a div,.current-pageleft  {left:0;padding-left:40px}
.halaman-kanan a div:before{content:'\f053';font-family: FontAwesome;}
.halaman-kiri a div h6,.halaman-kanan a div h6,.pager-title-right{font-weight:light}
.blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;background:-moz-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:-webkit-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:linear-gradient(to bottom,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out}
.halaman-kanan a:hover:after,.halaman-kiri a:hover:after{opacity:0}
@media screen and (max-width:414px){.halaman-kiri,.halaman-kanan{width:100%;}
}
/*]]>*/
</style>
</b:if>

Bueno! CSS adicionado, segundo o tradutor halaman-kiri é página esquerda, optei por deixar conforme encontrei, se for sua vontade traduzir, sinta-se livre.
Agora vou lá no final do código do modelo e insiro o script, antes de fechar o corpo do documento, lógico:

 <script type="text/javascript">
//<![CDATA[
(function ($) { var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
$.get(newerLink.attr('href'), function (data) { var thumb = $(data)
.find('.post-body')
.length == 1 ? "<img alt='" + $(data)
.find('.post-title')
.text() + "' src='" + $(data)
.find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
.attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
newerLink.html(thumb + '<div><h6>Próximo</h6><h5>' + $(data)
.find('.post-title')
.text() + '</h5></div>') }, "html");
$.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
.find('.post-body')
.length == 1 ? "<img alt='" + $(data2)
.find('.post-title')
.text() + "' src='" + $(data2)
.find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
.attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
olderLink.html(thumb2 + '<div><h6>Próximo</h6><h5>' + $(data2)
.find('.post-title')
.text() + '</h5></div>') }, "html") })(jQuery);
//]]>
</script>

Ir até:
  <b:includable id='nextprev'>...</b:includable>
  
E substituir por este código:
 <b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
<div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171;Próximo artigo</a>
</span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-right panahkiri'/><span class='pager-title-right'>Próximo</span><br/>Este é o artigo mais recente.</span>
</b:if>
<div class='clear'/>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Artigo anterior&#187;</a>
</span>
<b:else/>
<span class='current-pageleft'><i class='fa fa-chevron-left panahkanan'/><span class='pager-title-right'>Anterior</span><br/>Este é o último artigo.</span>
</b:if>
<div class='clear'/>
</div>
</div>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
</div>
</div>
</b:if>
<div class='clear'/>
</b:includable>
 
Terminando!
Pra finalizar coloco o include abaixo do artigo, essa parte varia bastente de um template para outro.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>
Para um exemplo simples, dentro da includable post e abaixo do artigo:
 
 <b:includable id='post' var='post'>
<article class='post hentry'.............
..........
..........
..........
</article>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>
</b:includable>
  
[success title="Success message" icon="check-circle"] Tivemos sucesso aqui, sim, mas em partes. [/success] O trabalho continua, abraço e até a próxima! Obrigado por sua presença, o código usado aqui abaixo é o desta postagem, levemente modificado, mas com a mesma lógica.
Se seu template tiver uma codificação mais nova coloque apenas a linha include name nave-post para isSingleItem como na imagem abaixo.

[full-post]


A carga infinita para alguns casos é algo interessante.
Ao chegar no fim da página inicial, que aqui no Blogger é o arquivo index, o script renderiza um link para que o internauta solicite o carregamento de "mais artigos", rolando mais abaixo será então carregado mais uma postagem e mais outra, até mostrar todas as existentes no blog/site.
Para adicionar este recurso basta usar o botão abaixo, o Blogger irá mostrar a página add-widget escolha o blog desejado, click em 'editar conteúdo' e verifique se o código está presente, depois click no canto inferior esquerdo, em "adicionar widget".
O widget deverá ser posicionado na 'sidebar' em seu 'layout' podendo ficar totalmente oculto, servindo apenas para executar a função de rolagem.
Um abraço e em caso de dúvida entre em contato.





Mas o que é pager link?
É aquele link ao fim da postagem que geralmente está com: postagens mais recentes, postagens mais antigas.
Tem um meio fácil para mostrar o título da próxima postagem, ou anterior, ali no mesmo local, basta inserir um gadget HTML/javascript com este código:

<style type="text/css">

#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}

</style>

<script type="text/javascript">

$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});

</script>
Salvou está pronto, simples assim.
Pra facilitar ainda mais, use o botão abaixo.







Para um pager-link mais "destacado" mostrando imagem da postagem a ser visitada, veja as dicas desse blog:
https://masternetkom.blogspot.com/2017/06/blogger-post-pager-with-post-title-and.html


Obrigado por sua visita e aquele abraço!

Jair de Jesus

Estudante de música, guitarra clássica, HTML, CSS, json, Blogger e tal.{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_X8kjnFQ6gqz7mpAsGYmndUBnVFuhUwtt2T4rjn6FnitkZZUulhSIzmhVsYGWIHULCAqOObPV3xw9ru-dSPBPuWhT9PGtv-XEK1A5I6l8bJtjEjRsYYleMWoCvtjOtVhDRusviMdEFBU/s35/jair.jpg}{facebook#https://facebook.com/verbratecajuda}{youtube#https://youtube.com/@estudoviolaoclassico} {twitter#https://twitter.com/verbratecajuda}

Formulário de contato

Nome

E-mail *

Mensagem *