Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

17.8.10

imageVamos aprender a criar e colocar no seu blog, um botão “Voltar ao Topo” (scroll to top) dando estilo com CSS3  e usando um script JQuery que dá um movimento bem interessante ao botão, ele acende e desliza suavemente até o início da página. Não é pesado, ou seja não vai atrapalhar o carregamento. Veja DEMO:

Código CSS:

/* to top */

#toTop {


width:50px;  /* Largura do botão * /
background: #FF0000; /* Cor do botão*/
border:1px solid #000; /* Cor da borda */
text-align:center; /* Alinhamento do texto */
padding:5px; /* Distancia entre texto e borda */
position:fixed; /* Posição que faz com que ele corra por toda a página*/
bottom:5px; 
right:5px;
cursor:pointer;
color:#eee; /* Cor da letra */
text-decoration:none;
font-weight:700;  /* Tamanho da letra */

-moz-border-radius:5px;  /* Definições para o angulo do botão */
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

O que está em negrito indica os códigos que você poderá mudar para deixar do seu gosto. Veja AQUI uma tabela de cores para escolher a que mais combina com seu layout.

Depois de ter seu modelo definido, copie e cole num bloco de notas.

Faça login no Blogger e vá em “Design” , depois “Editar HTML” e procure pelo trecho:

]]></b:skin>

Cole o código CSS ANTES/ACIMA dele.

Agora  copie o código abaixo e cole ANTES/ACIMA  da tag </body> (no final do template)

<a href='#' id='toTop'>&#9650; Topo</a>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});

  $(function() {
                $(&quot;#toTop&quot;).scrollToTop();
            });
        </script>

O trecho que eu grifei em verde é a setinha e o texto que escrevi  “▲Topo” . Você poderá mudar o texto, o símbolo ou até trocar por uma imagem, por exemplo uma seta. Nesse caso, inclua o seguinte código no lugar do texto:

<img src="ENDEREÇO-DE-IMAGEM-(SETA)"> </img>

Eu apliquei esse botão no template Retro Vintage e ficou show !

Obs. O efeito arredondado criado em CSS não aparece (ainda) no Internet Explorer (essa droga), então o botão vai aparecer quadradinho, mas funciona do mesmo jeito.

Espero que gostem!

beijo da Mama ♥

27 comentários

Mathews

vlw

Criatune

Olá Mama gostaria de parabenizá-la pelo trabalho que você faz aqui, pois nos ajuda a entender um pouco melhor de programação, por isso gostaria que tirasse uma dúvida, usei esse modelo no meu blog, segui os passos certinho, funcionou que foi uma blz, porém desabilitou a função de imagens em minha galeria "Fancy JQuery" saberia me dizer o que pode ter ocorrido, obrigado.

MamaNunes

@Criatune
É verdade, isso acontece. Esse script desabilita alguns outros, inflelizmente e eu não sei porque há essa incompatibilidade. Estou pesquisando sobre o assunto para poder entender e explicar melhor. Desculpe o transtorno.
Abraços.

' Gleison-

muuito obrigado mesmo ! o plugin funcionou muito bem no meu template !

Artes da Rose

Olá, experimentei e gostei muito, pois estava procurando já algum tempo. Caso eu queira usar a imagem base do meu site para fazer a caixinha, como devo proceder? Pode enviar email para rosemerlim07@yahoo.com.br

Anônimo

funcionou direitinho ficou show de bola obrigado um abraço e fique com Deus =)

3DN4LDO

Boa noite,

Excelente post, ja inserido no meu blog [http://3dn4ldo.blogspot.com].

Obrig@do!

Anônimo

Ótima dica! Valeu Mama.

obovio

Eu sei que faz um tempinho que esse poste ta no ar, mas como eu usei agora acabei encontrando um erro no su código!

Onde tem $("#toTop").scrollToTop(); é necessário substituir o "#toTop" por "#toTop"

Mas o resto ta ok!

Bela dica...

www.obovio.com

Rede blogger

:)

vinicius

:-)

Tiago

não funfo aki :( estou usando novo modelo de template do blogger

Viçosa do Ceará na Web

@Mathews vlw mano!!!!!!!!

Danilo

Vlw, esse tutorial foi um dos melhores! ;D

Anônimo

parabéns!!

Anônimo

harry

muito bom valew!

Anônimo

Admiring the persistence you put into your website and in depth information you present.
It's nice to come across a blog every once in a while that isn't the
same out of date rehashed information. Great read!
I've saved your site and I'm adding your RSS feeds to my Google account.


my web blog; penisadvantage exercises

Anônimo

Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I
get actually enjoyed account your blog posts. Anyway I will be subscribing to
your augment and even I achievement you access consistently quickly.


My web site; Free Ipad Giveaway Without Offers

Anônimo

Because the admin of this website is working, no question very
shortly it will be well-known, due to its feature
contents.

Check out my web-site :: best led tv for gaming

Anônimo

Simply desire to say your article is as surprising.
The clarity to your put up is simply spectacular and that i can
assume you're knowledgeable in this subject. Well along with your permission allow me to take hold of your feed to stay up to date with forthcoming post. Thanks 1,000,000 and please keep up the enjoyable work.

Visit my blog post: mike geary the truth about six pack abs

Anônimo

Pretty great post. I simply stumbled upon your weblog and wished to say that I have really loved surfing around your weblog posts.

After all I will be subscribing in your rss feed and
I'm hoping you write once more very soon!

Here is my web page should i buy backlinks

Anônimo

Hi, Neat post. There is an issue with your site in internet
explorer, could test this? IE nonetheless is the marketplace chief and a huge section of other folks will omit your magnificent writing due to this problem.


Here is my website: hostgator coupons 2009

Anônimo

Unquestionably imagine that which you said.
Your favorite justification appeared to be on the internet the easiest thing to take into accout of.
I say to you, I definitely get irked at the same
time as other folks consider concerns that they just don't realize about. You controlled to hit the nail upon the top and defined out the whole thing with no need side effect , other people can take a signal. Will probably be again to get more. Thanks

Also visit my webpage :: sanason.com

Anônimo

Hey there! I know this is somewhat off topic but I was wondering which blog platform
are you using for this site? I'm getting fed up of Wordpress because I've had problems with hackers and I'm looking at alternatives for another platform. I would be fantastic if you could point me in the direction of a good platform.

Feel free to visit my homepage :: amaretti

Anônimo

This is a topic that's near to my heart... Thank you! Where are your contact details though?

Here is my web blog :: theorist

Anônimo

Hey there this is somewhat of off topic but I was wondering
if blogs use WYSIWYG editors or if you have to manually code with HTML.
I'm starting a blog soon but have no coding know-how so I wanted to get advice from someone with experience. Any help would be greatly appreciated!

Also visit my homepage ... http://qa.ftgsystems.co.za/groups/male-impotence-healing-how-to-avoid-male-impotency/

Anônimo

Hey just wanted to give you a quick heads up. The words in your content seem to
be running off the screen in Safari. I'm not sure if this is a format issue or something to do with web browser compatibility but I figured I'd post to let you know.
The design and style look great though! Hope you get the issue fixed soon.

Many thanks

Here is my site - best cellulite treatment

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.