Hoje temos:
Olá meninas!
O tuto que vou ensinar hoje é mega fácil e muito fofo para o blog! Vou ensinar a colocar um botão de voltar ao topo. Talvez muitas já saibam como fazer isso, mas vai ficar valendo pra quem não sabia.. Vamos lá?
Primeiro Passo:
Vá no google imagens e pesquise por Fundo Png Transparente.
Pegue a primeira imagem que aparecer e salve no seu computador. Abra o Photoshop, ou qualquer outro editor de imagens que você use, selecione o Png que você salvou, e faça seu botão.
Esse botão só vai aparecer quando você rolar a página para baixo. Quando a página esta no topo, ele não aparece, porque no topo não tem como voltar ao topo né? rsrsrs.. Então ele só aparece depois que você rola a página o que eu acho mais fofo ainda! O meu eu fiz com o ícone da minha fan page, vejam como é:
Você pode escrever: Subir, Topo, Voltar ao Topo, ou apenas colocar uma imagem de seta. Vou deixar algumas imagens pra vocês usarem, vejam abaixo:
Se vocês quiserem utilizar outras imagens basta pesquisar pelo google imagens mas tomando sempre o cuidado de verificar se a imagem está em formato PNG
Agora vamos ao código! Hoje, não tem nada de mecher no Html do blog rsrs..
Segundo Passo:
Depois da sua imagem pronta, vá ao site Tinypic e hospede sua imagem. Clique no botão enviar agora e escreva a verificação de palavras, quando aparecer os códigos, copie onde está escrito: Link direto para Layouts.
Cole esse link no bloco de notas e deixe lá.
Terceiro Passo:
Abra o seu blog, clique em Layout, clique em adicionar um gadget, depois clique em Html, e cole o código que vou deixar abaixo. Depois que você colar ele lá, pegue o link que estava no bloco de notas e cole onde esta escrito: URL DA SUA IMAGEM AQUI. E é só salvar! Vou deixar o código abaixo:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library
(www.dynamicdrive.com)
* Modified by www.mijadinhapost.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full
source code
***********************************************/
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 (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000,
fadeduration:[500, 100]},
controlHTML: '<img
src="URL DA SUA IMAGEM AQUI"/>', //HTML for control,
which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control
relative to right/ bottom 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:'Scroll Back to Top'})
.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>
Fácil né meninas:)
Espero que tenham gostado e até o próximo tuto!
Beijos
Blog: Conto de Fadas e
Espero que tenham gostado e até o próximo tuto!
Beijos
Vocês podem me Encontrar aqui:
Espero que tenha gostado :)
Bjinhos :)
Bacana a iniciativa de ajudar os blogueiros. Parabéns.
ResponderExcluirBjão
SORTEIO DE NATAL LÁ NO BLOG, VEM PARTICIPAR!!!
http://blogdajeu.com.br/presente-de-natal-concurso-com-bella-mulher-shopping-das-maquiagens/
O botão que tenho no meu blog já veio junto com o layout que eu ganhei em um blog em um sorteio, hehe. Mas gostei de saber como é
ResponderExcluirBeijos
Gosto muito do volta ao topo
ResponderExcluiracho que fica lindo e facilita
a leitura no blog
Lindo Noite
beijokas da Nanda
Mamãe de Duas
Google+Nanda
Gostei vou tentar fazer bjos!!!
ResponderExcluirMil bjos S2
http://maedemeninoeusou.blogspot.com.br/
Super dica hein!
ResponderExcluirbjcas
www.estou-crescendo.com
Eu não sabia colocar, no meu blog tem um lindinho demais, mas não foi eu quem colocou.
ResponderExcluirwww.jessalem.blogspot.com.br
Bacana isso de ajudar outras blogueiras, não é facil mexer em Código HTML mas a gente acostuma, kkk
ResponderExcluirAbraços!
www.pipocasemaquarela.com
Excelentes dicas, usei o blogger por muito tempo, agora optei pelo WP. Beijos
ResponderExcluirCléo
http://www.eueosgemeos.com/
Adoro seus tutorias e suas dicas, parabéns Letícia!
ResponderExcluirBeijos!
islary34.blogspot.com
ótima dica! Com esse botão fica tudo mais pratico! Bjos
ResponderExcluirTatty Nunes - Mãe de Primeira Viagem
Muito bom adorei bjo
ResponderExcluirEstou adorando as dicas da Letícia, obrigada por compartilhar mais essa dica!
ResponderExcluirBeijos!
www.mahmaquiagens.blogspot.com.br
adorei, não é difícil de fazer. Vou ver se consigo.
ResponderExcluirBeijos
Que bom que estão gostando!! \o/
ResponderExcluirNossa esse tutorial é muito útil! Eu sempre preciso mexer no meu templante para fazer alguma coisa!! Queria até para pedir como faz para colocar cor no rodapé do blog procuro esse tutorial e nunca acho!!
ResponderExcluirlinda semana!
bjos
http://www.divaemaquiada.com.br/
Parabéns por compartilhar .. dicas e ajuda para nossa melhoria são sempre bem vindas .. Depois com mais calma vou tentar fazer ...
ResponderExcluirBjs Mi Gobbato
http://espacodasmamaes.blogspot.com.br/