Controlar a exibição de um elemento/widget/gadget no seu template!
Slider Orbit Para Blogger
Um slideshow que permite fazer isto é o Orbit, que funciona à base de jQuery e mostra as imagens com flechas de navegação. Mas, para além desta funcionalidade, este slide também possui, na sua parte superior esquerda, um controlador de pausa e um indicador de tempo entre cada fotografia ou imagem.
Uma das vantagens que me fazem gostar deste slider é que o script conta com uma versão curta, pelo que podemos colocar o script diretamente no código do template e assim não precisamos de recorrer a uma hospedagem.
Para adicionar o script deste slide ao seu blog, deve iniciar sessão no Blogger, depois dirija-se à aba Design (1) e ao separador Editar HTML (2).
Depois, procure pela tag abaixo:
</head>
Acima dela, cole o código a seguir:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>
Agora procure pela linha abaixo:
]]></b:skin>
Antes dela cole os seguintes estilos:
/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDHF7G7-KV40ibikGscL9PMr8pnwiETA-CSLDH0nRGMu3q3aRlTYNSalGNT_xE2Mn9wtdUanUz95iJ9JrLSxfy76BlsC6c42-XNQp_bt63zqO6GhqrUfHV-uW46Po3zWNbeLLLY6WdMMu0/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgbXUsaTAveE6WR_8QdWlJhXQk9znjRuFHbxpp8Ems5KlXjbjHlM6vhslwL51Bu-ogF3Om2B5TJ4hQlsuJTQQmZH4XfyfQxUypu4V_fgZUrNB_7hfnv5m-lP8USDkZNCcfs_oEUCbHmVPm/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAeF7tX7m8fKR6EzQLWADVYVE7ZEuoQ0sV3HZ6yaIiiJnPNClZEnIBCOJRO9oysXjOL8GBfLgSq3NFBviUlMw-uWc6_V3bcixqMkY-BOaUiwyRwbpL1cs1f7eRunp905a_NqfC_spMS-2N/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2NxQL5QRphI-cy9qxnAiw_OPCJBCt-zRPyRxdMhfttaD6hXjEO4jXCh-zVOWbMgZRQFM2GMX8SqYQb2JeFK_QUHdiqoYhiLW9ebcCH8lILFtrvRl-flMn6iFvlNlrFFFcVXPpwjiYG42/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBw3iklqysMa61MIvgh9W-hyQqFEDUEKK_irVB8-KqkbZ_MliyGTo7A1g7q707bQxXfLwBbcLl5tT9tN0eLw4MNW7sr_myuovs2XAnb_o8-fnQ75Oz9ruCdMji-zBDd7LN9gIfDad3IJj/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkDaXrSeOYZFVLyghfyQi7W_UijgNp5yuRz9NboJs_NB_X75vyeFahyphenhyphenMy48Ld9BMc4Z5JGo8TD79_0It409iSA7J9tm3aI2JtjGzOYlZMvlEchfActKD5i_V_0tukVQT17IiqYh0becbw/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }
Clique em Pré-Visualizar ou Visualizar, de acordo com o seu idioma. Se tudo estiver no seu devido lugar clique em Guardar Modelo ou Salvar Modelo.
Agora vamos adicionar a estrutura do slide, para isso dirija-se ao separador Elementos de Página (3), ainda na aba Design (1).
Escolha a parte do blog em que quer adicionar o slide, que contem as imagens, os links e as descrições das respectivas imagens, e clique em Adicionar uma miniaplicação ou Adicionar um gadget.
Será aberta uma nova janela, escolha o gadget HTML/JavaScript. A janela será atualizada.
Neste widget cole o código destacado abaixo:
<div id='featured'>
<a href="LINK_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO_IMAGEM_1</span><a href="LINK_IMAGEM_2"><img rel='foto2' src="URL_IMAGEM_2" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO_IMAGEM_2</span><a href="LINK_IMAGEM_3"><img rel='foto3' src="URL_IMAGEM_3" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO_IMAGEM_3</span><a href="LINK_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span></div>
Caracteres Especiais
Postado por
Leonardo Ramos
In
Alt mais,
Caracteres,
Caracteres Especiais,
Especiais,
Para Orkut
|
0
comentários»
Tudo sobre caracteres especiais, símbolos, figuras, emoticons... pelo teclado, ideal para enfeitar o seu nome no Orkut, twitter, MSN, chats, jogos on-line, enfim onde você quiser.
Como colocar Música no Blog
Há muitas formas de colocar música no seu blog. Entre eles vários players, em que a maioria deles utiliza a músicas hospedadas no YouTube. Para fazer um player com mésica você precisa hospedar o player (no formato swf ) . Um jeito mais fácil é utilizando os materiais citados acima já hospedados.
Colocar Menu Horizontal no topo do Blogger (2)
Postado por
Leonardo Ramos
In
blog,
Blogger,
Colocar Menu Horizontal no Topo do Blogger
|
1 comentários»
Nesse tutorial vou explicar como colocar um menu horizontal no topo do blogger. É muito simples, vá em Modelo>>Editar HTML>>Prosseguir Então procure por:
Colocar título da postagem no lugar dos links "postagens mais antigas" e "postagens mais recentes"
Postado por
Leonardo Ramos
In
Colocar título da postagem no lugar dos links postagens mais antigas e postagens mais recentes
|
1 comentários»
Algumas pessoas não gostam dos links "postagens mais antigas" e "postagens mais recentes" no pager do blogger. Para essas pessoas, disponibilizamos um tutorial muito legal, que ensina a colocar o nome do próximo post no lugar desses links.
Widget previsão do tempo
Postado por
Leonardo Ramos
In
Acessórios/Widgets,
blog,
do,
Gadget,
no,
Previsão,
Site,
tempo,
Widget previsão do tempo
|
0
comentários»
Nesse tutorial eu vou explicar como colocar o Widget de previsão do tempo em seu blog ou site. Esse Widget pode ser usado em blogs/sites de notícias, informações, pois melhora a tecnologia da sua página.
Dividir o cabeçalho do Blogger em Dois
Para dar mais espaço ao seu blog recomendamos que use esse tutorial. Além de melhorar a aparência do seu blog, pode servir como muitas outras coisas.
Adicionar Menu Horizontal fixo no topo do Blogger
Nesse tutorial vou explicar como colocar um Menu Horizontal no Topo do Blogger. O 1° Passo é aplicas o CSS. Entre No Painel do Blogger >> Personalizar >> Avançado >> Adicionar CSS;
Remover ou não remover a Navbar do Blogger?
Postado por
Leonardo Ramos
In
a,
barra,
Blogger,
do,
não,
ou,
Remover,
Remover ou não remover a Navbar do Blogger
|
0
comentários»
A Navbar do blogger é uma barra de opções que há em todos os blogs do blogger, ela serve para melhorar o tráfego e os compartilhamentos do Blog.
Remover Navbar do Blogger
Postado por
Leonardo Ramos
In
blog,
Blogger,
do,
HTML,
Navbar,
Remove,
Remover Navbar do Blogger
|
0
comentários»
Nesse tutorial vou ensinar como Remover a Navbar do Blogger. A Navbar do blogger é uma barra de opções que há em todos os blogs do blogger. Alguns blogs removem essa barra, mas a questão é Remover ou não remover a Navbar do Blogger?
Adicione transparência a imagens
O efeito de transparência (e outras formas e ações que acontecem ao passar o mouse sobre a imagem ou outro atributo html) é chamado Efeito Hover.
[Tutorial] Colocar anúncio no centro da postagem
Já mostramos aqui como colocar anúncios lado a lado nas postagens, mas dessa vez mostraremos como colocar apenas um anúncio dentro da postagem, alinhado no centro, o código é esse abaixo:
[Tutorial] Como colocar anúncios lado a lado nas postagens
O Código é basicamente o abaixo. Onde está "Código do anúncio aqui (esquerda)" você coloca o código do seu anúncio, e onde está "Código do anuncio aqui (Direita)" coloque o mesmo código de anuncio. Para o anuncio adicionado recomendamos o retângulo médio, depende das larguras do seu blog. Se o anúncio ultrapassar as larguras do seu blog e você não deseja mudá-las leia esse artigo.
[Matéria] Construa seu público
Postado por
Leonardo Ramos
In
blog,
Construa,
Construa seu público,
divulgando,
Divulgando seu blog,
público,
seu
|
0
comentários»
Divulgando seu blog
No xadrez, a coroação ocorre quando um peão alcança o oitavo quadrado. Nesse momento, seu oponente é desafiado, porque seu simples peão assume todo o poder de uma Rainha - a peça mais fatal do tabuleiro. Obviamente, o peão pode ser promovido a bispo, torre ou qualquer outra peça, mas por quê? Isso apenas dá uma dica ao outro jogador sobre seus planos secretos. No entanto, as promoções a cavalo geralmente podem ser estrategicamente úteis, dependendo da situação.
[Matéria] Sobre a guia "Ganhos" do Blogger
Postado por
Leonardo Ramos
In
Blogger,
com,
dinheiro,
Ganhar,
Ganhar dinheiro com meu blog,
meu,
Sobre a guia Ganhos do Blogger
|
0
comentários»
A guia Ganhos do Blogger facilita a ativação dos anúncios do Google AdSense em seu blog. Após a aprovação da conta, o Blogger recupera dados sobre seus ganhos, assim você não precisa acessar o painel do Google AdSense para obter as informações básicas sobre ganhos.[Tutorial] Como adicionar CSS personalizada no Blogger
Postado por
Leonardo Ramos
In
Adicionar,
Blogger,
Como,
Como adicionar CSS personalizada no Blogger,
CSS,
de,
Designer,
do,
Modelo,
no
|
4
comentários»
O Designer de modelo do Blogger permite personalizar praticamente todos os aspectos da aparência do seu blog por meio das CSS (folhas de estilos em cascata). Para adicionar snippets de CSS ao seu modelo, abra o Designer de modelo e adicione o seu código no campo localizado na guia Avançado | Adicionar CSS. [Tutorial] Designer do modelo do Blogger;
Postado por
Leonardo Ramos
In
Blogger,
Designer,
Designer do modelo do Blogger,
do,
Modelo
|
0
comentários»
O Designer de modelo do Blogger é uma maneira nova e fácil de personalizar a aparência de seu blog. Ele fornece uma variedade de modelos, imagens, cores e layouts de coluna para deixar o blog com a sua cara. Para obter o Designer de modelo, clique em Design | Designer do modelo.
Para acessar o Designer de modelo na interface atualizada, clique no menu suspenso ao lado do ícone cinza "Visualizar postagens" e selecione Modelo. A partir desse menu, você pode escolher e personalizar seu modelo.
Contato/Parceria
Para entrar em contato com a equipe do Empreendedores Blogger mande um Email para a equipe no email EmpreendedoresBlogger@live.com ou deixe um recado como comentário nesse post. Para solicitar um tutorial, ajuda ou dúvida, apenas os comentários são suficientes.
OBS: Só responderemos comentários ou Emails identificados (ou seja, comentários ou Emils anônimos não serão respondidos)
Qualquer problema avisar por Email. Se você estiver interessado em parcerias, coloque nosso banner em sua página, escolha um dos modelos abaixo, logo depois comunique pelo Email, enviando seu link, nome do blog, Twitter (se tiver) seu Nome, Banner (Se tiver). Os blogs que seguirem as seguintes normas poderão aparecer na Página Inicial como destaque:
OBS: Só responderemos comentários ou Emails identificados (ou seja, comentários ou Emils anônimos não serão respondidos)
- Localização visível e limpa do Banner;
- Ter pelo menos dois cliques por semana no banner;
- Autores que se identificarem com Nome, Email pessoal e Alguma rede Social para contato;
- Blogs/Sites sem incentivo á violência, plágio, Conteúdo explícito ou Conteúdo ofensivo;
- Blogs com conteúdo atualizado sempre que possível;
Assinar:
Postagens (Atom)