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
Download da Toolbar > Fantástica Footer Toolbar Com jQuery E CSS3
8 Responses
Excelente, mesmo!
E o bom é que com poucas linhas de código dá pra fazer adaptação a qualquer web design!
Ótimo, mas como faço para incluir isso no meu blog wordpress. Obrigado
no dreamweaver copiei o index da tollbar e colei no meu index do site e as letras ficaram 3X maiores, como faço?
tens que alterar o css que veio junto com os arquivos ou adapta-lo css( folha de estilo).
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!
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!
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.
ok, está resolvido. faltava o ficheiro style.css