Botão "Voltar ao Topo" no Blogger

16 de junho de 2015

2 comentários:

Após algum tempo parado, um ano para ser mais exato, volto com uma dica bem interessante, e útil muito as vezes: a possibilidade de retornar ao topo da página apenas ao clicar sobre um botão flutuante no canto do blog, sem ter a necessidade de rolar toda a barra de rolagem ao início.

Este recurso é muito interessante quando nos deparamos com uma postagem de conteúdo extenso, seja ele textos ou imagens, criando um longo caminho a ser feito pela barra de rolagem com o scroll do mouse.

Como fazer?

O procedimento de instalação é extremamente simples, bastando apenas inserir o código através de um gadget HTML/JavaScript:

1. Faça login em sua conta e acesse o Painel do Blogger;
2. Clique em Layout, no blog desejado;
3. Clique em Adicionar um Gadget;
4. Selecione o gadget HTML/JavaScript;
5. Insira no gadget o seguinte código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://lh3.googleusercontent.com/e-nENuT-AOpATAxMTKq9hPMfCd8_kHUHEMYrF60ym2Y=s50-no"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Subir ao Topo!'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
6. Salve as alterações, e veja se o recurso já aparece em seu blog,

Observação: o link destacado em vermelho no código refere-se ao link da imagem do botão de retornar ao topo. Já deixei configurada uma imagem padrão, mas caso deseje, poderá substituí-la por outra imagem que melhor combine com seu blog.
Postagem completa ››

Vídeo - Criando postagens dentro de páginas específicas no Blogger

2 de junho de 2014

22 comentários:

Postagem complementar, esclarecendo as dúvidas da postagem anterior, que deixou algumas dúvidas por ser um conteúdo um pouco complexo para alguns leitores, mas que no entanto é simples, quando os passos são seguidos corretamente: Como criar postagens dentro de páginas no Blogger.





-
Postagem completa ››

Menu que se fixa no topo ao rolar a página no Blogger

17 de abril de 2014

44 comentários:

Este estilo de menu é o que estou usando em meu blog. Um menu que se fixa ao ao topo do blog, ao rolar a barra de rolagem da página até determinado ponto. É algo bem interessante e ao mesmo tempo diferente, deixando seu blog com uma cara moderna e atualizada. Irei dividir o tutorial em duas partes, a primeira que é a parte referente ao código do menu, e a segunda a instalação no blog, inserindo no html, e tudo mais.

Atenção! Estarei usando um modelo simples do blogger, e por isso, se estiver usando um modelo personalizado, é possível que não funciona da forma correta, ou até mesmo não encontre o trecho de código em questão. E nestas circunstâncias, será necessário que tente inserir o código do menu em outro ponto do seu blog.

Código do Menu

1. Código HTML
<div class="conteudo-menu">
<div class="menu">
<ul>
<li><a href="http://seu-link">Início</a></li>
<li><a href="http://seu-link">Sobre</a></li>
<li><a href="http://seu-link">Contato</a></li>
<li><a href="http://seu-link">Anuncie</a></li>
<li><a href="http://seu-link">Parceria</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
Nesse código, os trechos que devem ser alterados estão em negrito. Que é o link da página do blog (ou outra página, postagem ou marcador), e também o nome que será apresentado. Lembre-se que inserir os links entre aspas, pois ao contrário, o código não funcionará.

Caso queira adicionar novos links, bastará duplicar linhas de código que estão entre <li></li>, não se limitando apenas a quantidade de páginas do modelo.

2. Código CSS
.conteudo-menu { background: #ededed; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-bottom: 2px solid #ccc;}
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 880px; height: 37px;}
.menu { height: 37px;}
.menu ul { list-style: none; margin:0; }
.menu ul li {float: left; margin-top: 6px; padding: 6px; border-right: 1px dotted #ccc;}
.menu ul li:first-child { padding-left: 0;}
.menu ul li a { color: #666; text-decoration: blink;}
.menu ul li a:hover { color: #777; text-decoration: underline;}
A personalização do menu fiz por minha conta. Usei um fundo cinza bem claro, e cor de font também cinza. Deixo os trechos destacados caso queira alterar os valores:

#ededed - Substitua pela cor de fundo do menu.
880px - Substitua pela largura do seu blog. Você poderá ter acesso a essa informação em Modelo › Personalizar › Largura do blog.
#666 - Cor do texto do link.
#777 - Cor do texto do link ao passar o mouse sobre ele.

Se você possuir conhecimentos básicos (no mínimo) com relação ao CSS, saberá alterar outros campos do código, aptando-o ao seu blog.

3. Código JavaScript
<script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("document").ready(function($){
var nav = $('.conteudo-menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 168) {
nav.addClass("menu-fixo");
} else {
nav.removeClass("menu-fixo");
}
});
});
</script>
Este é o código JavaScript jQuery, que da a função de fixar o menu ao topo da página. Sem ele, seria apenas um menu normal, sem nenhum efeito diferenciado. Neste código, o único trecho a ser alterado será o de vermelho, 168, que refere-se ao valor da altera entre o topo da página e o local onde se encontra o menu.

A função deste trecho é indicar ao código, quantos pixels deveram ser rolados da barra de rolagem até que o menu fique fixo. Você deverá usar uma forma de medição, ou ir inserindo um valor e testando... até que chegue a um valor aproximado ao ideal para o menu.

Instalando em seu blog

A instalação é feita diretamente no código HTML do seu blog, e por isso, aconselho que antes de qualquer modificação, faça Backup do seu template.

1. Acesse o painel do blogger, e clique no blog desejado, e selecione Modelo e em seguida Editar HTML.
2. No editor de códigos, clique dentro da caixa de códigos e pressione as teclas Ctrl + F.
3. Procure por </header> e abaixo da tag cole o Código HTML.


4. Em seguida, procure por ]]></b:skin> e acima dela cole o Código CSS.


5. E por fim, bastará colarmos o Código JavaScript, procurando pela tag </head> e colando o código acima dela.


6. Salve o Modelo e visualize seu blog.

Pronto! Seguindo esses passos, você está inserindo um belo menu fixo em seu blog. Sendo possível que adicione sessões e novos links a ele, ou o personalizado da maneira que achar melhor. Em caso de alguma dúvida ou questão referente a postagem deixe seu comentário, que responderei o mais breve possível!

Postagem completa ››

Como escolher a imagem de miniatura (Thumbnail) no resumo automático de postagens?

9 de abril de 2014

21 comentários:

Essa é uma dica bem interessante e rápida, que eu descobri a algum tempo, e a partir daí, venho usando com frequência, em praticamente todas as postagens do meu blog. A dica baseia-se em escolher qual imagem deve aparecer no resumo da página inicial do blog, não aparecendo dentro da postagem.


O resumo automático de postagens é configurado para inserir a primeira imagem  encontrada na postagem, e por isso muitas vezes devemos usar uma pequena miniatura no conteúdo da postagem, para que ela apareça na página inicial do blog. Eu mesmo acho isso bem chato, pois prefiro iniciar a postagem com uma estrutura limpa, apenas com as linhas de texto.

Se você ainda não configurou o resumo automático em seu blog, siga este artigo: Resumo automático de postagens "Leia mais" no Blogger.

Usando display:none para ocultar a imagem na postagem

Esse é o procedimento: usar um seletor CSS no style da imagem que for inserida no inicio do post, este por sua vez, fará com que a imagem não apareça dentro do post, mas não impedindo que seja puxada pelo resumo de postagens, que desconsidera o style aplicado a ela.

O código:
<img src="url_da_imagem" style="display:none;"/>
 O trecho a se substituir é: url_da_imagem - que refere-se ao url da imagem que você deseja ver como miniatura da postagem. Você pode hospedar a imagem de diversos servidores, mas como usamos o Blogger, convém usar o Picasa Web, que é vinculado ao serviço.

Aonde usar o código?

O uso é simples, e deve ser o primeiro elemento do código HTML da postagem. Nesta postagem que agora crio, veja como eu aplicaria o código:


Simples! Algo interessante a ressaltar é que a imagem da miniatura deve ser uma imagem quadrada (ou pelo menos nos resumos que estão configurados proporcionalmente, com mesma altura e largura), para que se ajuste corretamente a página inicial, e não fique destorcida.

Muitos podem reclamar por não ser prático, mas acho bem interessante esta possibilidade de escolha da imagem que deseja ver como miniatura, podendo após isto, criar sua postagem livremente, sem se preocupar com problemas de imagens desproporcionais, por exemplo.
Postagem completa ››

Botão de Postagem Aleatória (Random Post) no Blogger

8 de abril de 2014

5 comentários:

Um recurso bem interessante e útil em blogs com muitas postagens e com temas variados é o botão de Postagens Aleatórias, o Random Post. Este recurso tem a simples função de carregar uma postagem aleatória do seu blog, quando clicado. Não levando em consideração nenhum termo de busca ou referência para a escolha do artigo, algo realmente aleatório.

Este recurso é muito útil em blogs com temas como curiosidades, onde o número de posts é grande e nem sempre se releva a questão da data de um artigo ou se ele é recente ou não, em blogs com este tema. Para inserir o recurso você deverá inserir um gadget HTML/JavaScript, com o código deixado na postagem. Faça os passos descritos abaixo:

Insira um gadget HTML/JavaScript.

1. No painel de controle, clique em Layout.


2. Clique no link Adicionar um Gadget.
3. Será aberta uma guia, nela procure pelo gadget HTML/JavaScript.

4. Cole o código (encontrado no item seguinte) no gadget, e clique em Salvar.


Sobre o código do botão

O código do gadget é em JavaScript, com algumas alterações possíveis (caso tenha conhecimento sobre a linguagem), ao contrário será possível apenas alterar o nome de exibição ou então o nome por uma imagem. Reforço que encontrei este código na internet, e não fui eu quem o desenvolveu, e até por isso não saberei dar um suporte a dúvidas referentes a ele. Vamos ao código:
<div id="myLuckyPost"></div> <span id="preserve0494d138efe349cc96867b72108cbb45" class="wlWriterPreserve"><script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('myLuckyPost').appendChild(a); } </script></span> <span id="preserved0d51eabe3024fba8115ec3460b82bbb" class="wlWriterPreserve"><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script></span>
O trecho destacado em vermelho, o Random Post pode ser alterado por outro nome de exibição, como Postagem Aleatória, ou algo que desejar.

Se você desejar alterar o nome de exibição por uma imagem, basta apenas inserir este código no lugar do nome Random Post:
<img src="https://lh4.googleusercontent.com/-ccz7AKVrwXw/U0RpqOtrHbI/AAAAAAAAEZo/DKqgIkRDs7U/h40/img.png"/>
Deixando o código final desta maneira:
<div id="myLuckyPost"></div> <span id="preserve0494d138efe349cc96867b72108cbb45" class="wlWriterPreserve"><script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = '<img src="https://lh4.googleusercontent.com/-ccz7AKVrwXw/U0RpqOtrHbI/AAAAAAAAEZo/DKqgIkRDs7U/h40/img.png"/>'; document.getElementById('myLuckyPost').appendChild(a); } </script></span> <span id="preserved0d51eabe3024fba8115ec3460b82bbb" class="wlWriterPreserve"><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script></span>

Esta será a imagem de exibição, se desejar usar o botão com imagem, ao invés do link:

 

Se você possuir outra imagem que deseje inserir no lugar desta, bastará alterar o link em vermelho pelo link do URL da sua imagem. O uso de um link comum ou de uma imagem não afetará na exibição ou funcionamento do recurso, apenas altera seu visual, portanto isso fica a gosto de cada um. E é isso, aí. Dúvidas? Comentem!
Postagem completa ››

Como reverter aos modelos padrões do Blogger

28 de março de 2014

5 comentários:

Quando alguém tem um problema com template, códigos, e erros em geral referentes a templates e html, eu sempre sugiro que ela reverta o modelo do seu blog, ao padrão do Blogger. Isto é, alterar seu template por um template simples disponibilizado pelo Blogger.

Antes de tudo: faça backup do seu blog!

Porque reverter aos Modelos Padrão?

É simples, ao reverter os modelos ao padrão, todas as alterações, códigos, hacks, que foram inseridos no template são removidos automaticamente, dando espaço a um código novo, e sem erros. O mesmo não se aplica aos widgets, pois eles permanecem no blog, independente de reverter ou não o modelo.

Este processo é útil quando se usa um template personalizado, que está com erros de alinhamento ou redirecionamentos de página. Geralmente estes redirecionamentos são causados por códigos JavaScript, com funções camufladas por Contadores de visitas, calendários, e até mesmo relógios.

Como reverter aos modelos padrões do Blogger?

Um procedimento muito simples, creio eu que todos já tenha feito (intencionalmente ou não). No seu painel do Blogger, clique em Modelo. Será aberta uma tela com dezenas de modelos diferentes, bastará apenas selecionar um que mais lhe agradar. Bastará apenas clicar sobe o modelo e ir em Aplicar ou Personalizar (para fazer alterações no modelo selecionado para o template).



O Blogger disponibiliza os seguintes modelos: Simples, Visualizações dinâmicas, Janela de imagem, Espetacular Ltda., Marca d'água, Celestial e Viagem.

Extra: O que é um modelo clássico?

Se você rolar até o fim da página, verá que existe uma opção bem diferente: Reverter para o modelos clássicos. Estes modelos, foram os primeiros adotados pelo Blogger, e sua única diferença dos modelos atuais (além da estética e códigos desatualizados), é que não possuem a opção Layout, quando selecionados a um blog, e por isso, os deixam com uma funcionalidade bem baixa.



Algo interessante a se exaltar nestes modelos, é a possibilidade do uso de HTML livre. Sem necessariamente ser obrigado a seguir um padrão de modelo, como ocorre ao usar modelos padrões do Blogger, e esta função se torna bem útil  a blogueiros que desejem criar um blog com apenas uma página, como um blog pessoal de apresentação, ou empresarial.
Postagem completa ››