webmaster

Fantástica Footer Toolbar Com JQuery e CSS3

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

Fantástica Footer Toolbar Com JQuery e CSS3

Nota do Editor: Partilhem connosco as vossas dúvidas e também ideias para o desenvolvimento desta Toolbar nos comentários. Quando possível, mantenham o link na Toolbar para este artigo. Ajudem-nos a partilhar a Toolbar com a comunidade em geral e a desenvolvê-la. Contribuam com as vossas ideias. O código para download da Toolbar está no fim do artigo.

Zeeshan Rasool:

Você já deve ter visto muitos sites com um footer atrativo, com links para as redes sociais e botões de bookmark e partilha. Hoje, vou criar uma toolbar com CSS3 e jQuery que adiciona um visual fantástico ao site.

Veja a DEMO: Fantástica Footer Toolbar Com JQuery e CSS3

Código JQuery

$(document).ready(function() {

$('#close').click(function(){

$('#bottomBar').fadeOut('fast');
$('#rss').fadeOut('fast');
$('#show').fadeIn('slow');

});

$('#show').click(function(){

$('#bottomBar').fadeIn('slow');
$('#rss').fadeIn('slow');
$('#show').fadeOut('fast');

});

// watermark input fields
jQuery(function($){

$("#Newsletter").Watermark("Subscribe to RSS feed ...");
});

function UseData(){
$.Watermark.HideAll();
$.Watermark.ShowAll();
}

});

$(document).ready(function(){

$("img#download").hover(function() {
$("em").stop(true, true).animate({opacity: "show", top: "-180"}, "slow");
}, function() {
$("em").animate({opacity: "hide", top: "-200"}, "fast");
});

});

/***********************************************
* Bookmark site script- آ© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* Modified to support Opera */
function bookmarksite(title,url){
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all)// ie
window.external.AddFavorite(url, title);
}

Código HTML







Subscribe to our RSS Feed

Download da Toolbar > Fantástica Footer Toolbar Com jQuery E CSS3

footer toolbar miniatura

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

Deixe o seu comentário, participe!

8 Responses

  1. Excelente, mesmo!

    E o bom é que com poucas linhas de código dá pra fazer adaptação a qualquer web design!

  2. Ótimo, mas como faço para incluir isso no meu blog wordpress. Obrigado

  3. no dreamweaver copiei o index da tollbar e colei no meu index do site e as letras ficaram 3X maiores, como faço?

    1. tens que alterar o css que veio junto com os arquivos ou adapta-lo css( folha de estilo).

  4. Alguem poderia postar uma dica para que eu possa iniciar a Footer Toolbar fechada?

    To querendo que ela fique fechada ao invés de aberta se alguem conseguir por favor!

  5. Olá,

    Fiz o download da barra, agora gostaria de saber como faço pra inserir no index.php do meu site. Atualizo ele via Dreamweaver.

    Parabéns pela barra…ficou muito bom!

  6. Viva, eu acho que falta algo pois copiei o código todo, até fiz o download dos javascripts que o código tem, e não funciona pelo menos no IE9 nem no chrome.

Leave a Reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.