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 :)
