Aprenda a destacar seus artigos de forma simples, usando imagens que tem relação com as postagens, ainda é possível adicionar uma breve descrição da postagem, aqui no Notícia e blog eu utilizo para realçar as postagens mais interessantes. Este hack é o Smooth Gallery um script de simples aplicação mais muito util veja abaixo como criar seu Gadget de destaque de postagens:
1.Faça login no Blogger
2.Vá para Layout->Editar HTML
Agora Utilizando as tecla Ctrl e F procure pelo código abaixo:
</head>E abaixo deste código adicione o código abaixo:
<script src='http://www.yourjavascript.com/12300300114/mootools.v1.11.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/10162001424/jd.gallery.js' type='text/javascript'/> <link href='http://api.ning.com:80/files/SN3eeozgUFWu*rJrzfJnsEuXtQuTxjUiS6nF2kD5NjG*p341SM0ecKKlIYZHbbNpw-19mQEl257b2cGsvHx8uVz-IyRDaVdN/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>3.Agora procure pelo código abaixo:
]]></b:skin>Antes dele adicione o trecho abaixo personalizando de acordo com a nota:
#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}
Nota: Width é a largura personalize o número de acordo com largura desejada, Height é a altura personalize a de acordo com a altura desejada.
4.Salve as alterações
5.Vá para Layout->Elementos da página->Adicionar um Gadget->HTML/JavaScript
Agora insira como conteúdo o código abaixo personalizando:
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGallery">
<div class="imageElement">
<a class="open" href="http://www.noticiaeblog.com/2009/10/hoje-um-dos-problemas-do-blogger-e-nao.html"/>
<img alt="Otimizando os títulos das postagens" src="http://i33.tinypic.com/25ppf84.png" class="full"/>
<h3>Otimizando os títulos das postagens</h3>
<p>Veja como ter seu blog bem posicionado... </p>
</a></div>
<div class="imageElement">
<a class="open" href="http://www.noticiaeblog.com/2009/12/exibindo-p.html"/>
<img src="http://imgur.com/iA61u.png" class="full"/>
<h3>Posts Randômicos</h3>
<p>Aprenda a colocar seus posts em random...</p>
</a></div>
<div class="imageElement">
<a class="open" href="http://www.noticiaeblog.com/2010/01/calcular-pagerank-verifique-seu.html"/>
<img src="http://i.imgur.com/Fi0Po.jpg" class="full"/>
<h3>Calcular PageRank - verifique seu PageRank</h3>
<p>Verifique seu PageRank...</p>
</a></div>
</div>Nota: Substitua os itens em vermelho pelas urls
6.Salve
Pronto você destacou seu artigos!
Referência: Usuário Compulsivo
Se quiser Hospedar os scripts baixe e coloque no seu servidor se não tiver veja Hospedagem Gratis
Update: Atenção se você teve algun erro ao tentar fazer o uso destes códigos refaça o tutorial pois eles foram corrigidos!
95 Comentários
Deu certo aqui cara ,muito bom o blog muito bem explicado, eu estava procurando essa galeria faz muito tempo ..vlw mesmo
Parabéns pelo Blog, vc pode tirar um dúvida?
não consigo alterar a cor das letras do título do artigo.
muito obrigado.
abraço aí
@Emerson Obrigado,
Para alterar essas cores você deve alterar as cores do Blog pois este Gadget acompanha as cores da sidebar para alterar vá para "Layout"->"Fontes e cores".
Muito boa a dica!
Se possível me tire umas dúvidas:
1 - Como faço para aparecer as setas de passagem de artigos?
2 - Como fazer para os destaques aparecerem apenas na pagina principal?
Valeu
@Team Brasil Racing , setas esse hack não permite
para aparecerem só na página inicial veja está postagem
Ola!
Muito boa a dica mas, no meu blog a seta do mouse não se transforma na "mãozinha" indicando que é um link. Fiz algo errado. Quem sabe pode me ajudar.
Valeu, até.
Parabens pelo tutorial deu tudo certo no meu blog
Olá!
Adorei a dica.
Gostaria de saber se há como aumentar a velocidade do slide.
Obrigado
muito obrigado melhor que o esperado
Não deu certo aqui! Poxa, ficou uma imagem embaixo da outra! pq?
Me ajudem! *----*
Há muito tempo tento, derrepente me deparei com esse tuto, que pra mim que não tenho experiência foi super fácil, só que tem algo errado! Me ajuda por favor!
@Wandeer Mauspherd , substitua o trecho 2 por este abaixo:
<script src='http://www.yourjavascript.com/12300300114/mootools.v1.11.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/10162001424/jd.gallery.js' type='text/javascript'/>
<link href='http://api.ning.com:80/files/SN3eeozgUFWu*rJrzfJnsEuXtQuTxjUiS6nF2kD5NjG*p341SM0ecKKlIYZHbbNpw-19mQEl257b2cGsvHx8uVz-IyRDaVdN/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>
Olha quando vi sua resposta até fiquei animado, mas continua na mesma, tudo funciona, só que as imagens fica uma embaixo da outra ao invés de slide! Me ajuda?
@Wandeer Mauspherd, desculpe! Mas não encontrei o trecho 2 no seu template tente inseri-lo e volte a comentar.Ok?
Filho eu já fiz e refiz todos os passos umas 3 vezes, e nada,a imagem fica linkada só que uma embaixo da outra! Dá uma olhadinha , esse aqui é meu blog de testes http://mauspherd.blogspot.com/ vê lá como ficou, eu fiz só pra testar isso mas num tá dando!
No ocorre o mesmo problema que o Wandeer Mauspherd. Fica um embaixo do outro...
Alguma dica?
Mesmo problema... =/
naum consegui colocar fica abaixo um do outro
naum fica em slide
me ajuda vai ...
estou precisando muito
Deu certo aqui cara , muito bem explicado e facio de fazer, eu estava procurando essa galeria faz muito tempo ..vlw..
@Dicas e blog, é que eu corrigi o código mais valeu pelo seu comentário :-)
Tem Como Trocar a Imagem que Destaca o Texto do Slide ?
@Igor, sim é só mudar a URL da imagem.
Você não Entendeu, to falando dessa Imagem :
http://img188.imageshack.us/img188/8752/capturarf.png
Eu não sei como Mudar Isso, tem como colocar uma Barra ao meu Gosto ? pq acho q essa Barra ( que é igual ao dos meus Widgets ) ta cortando o texto de baixo.
@Igor, a entendi sin este script segue o mesmo estilo dos títulos da sidebar então para alterar isto você tem que aterar o títulos do trecho de css referentes a sidebar, deve ser .sidebar h2{
Então terei que alterar minha Sidebar ? não há como alterar somente a barra do slide ?
=S
Agradeço se puder me ajudar
Caramba deu certo dessa vez , muito obrigado! Notícias e Blog , um blog de Primeira!
Como colocar essa galeria em meu site usando o editor NVU?
Parabens pelo post, deu super certo!
@Ge , Obrigado!
Só uma duvida: tem como exibir o slide apenas na pag inicial? Se possivel, seria uma boa atualizar o post com essa dica.
me ajudo bastante!!!
www.baixebrasil.com vejam o resultado!
Obrigado cara, muito boa a explicação!
Parabéns.
Eu fiz no meu blog e deu super certo . Até consegui fazer aparecer as setas .
A minha duvida é , será que dá pra diminuir a transparencia da parte onde fica o titulo e a descrição ?
Amigo so tenho a agradecer pela dica, era o que procurava a muito tempo, meu blog geracaotaku.blogspot.com ficou otimo com a widget, parabens pelo seu blogger, vou vim mais vezes e tentar comentar mais, espero sua visita no meu, teh mais^^
Olá teria como disponibilizar os arquivos em java para que a gente mesmo hospede?
vlw!
Adorei a dica!!!
Myrianna Coeli, Ok, posso sim abaixo está o arquivo zip contendo todos os java, scripts e css do hack:
Baixar Arquivos
Muitíssimo Obrigada!
=)
ensina como coloca o slid em baixo do topo e do menu ?? olha ae meu site WWW.MEGAVELOZES.TK muito bom seu site, já me ajudou muito agora me ajuda nisso ae valeeeu :D (quero o slid em cima das minhas postagens)
Boa noite!! Achei sensacional e queria saber se tem como aumentar o tamanho da letra. Obrigada, site maravilhoso ^^
Fiz tudo certinho, ficou super legal, muito obrigado pela dica.
Gostaria de saber também como alterar (aumentar) a fonte que aparece em baixo, será que existe está possibilidade? mas adorei esse post bem explicado mesmo, se quiser conferir como ficou aí vai o link;
http://somosrusticosesistematicos.blogspot.com/
muito show
obrigado
Wesley Gaspar
muito boa a dica, mas esta hack (pelo menos aki) só funciona no IE8 ou anteriores, tanto firefox e chrome não exibirão a mundança de imagem nem as legendas nas imagens.
Sabe alguma solução??? gostaria muito de por em meu blog
Ótimo blog o seu, parabens
Vlw
Acabei de testar Fernando muito bom, funcionou direitinho, só gostaria de saber como faço para aumentar o tamanho da imagem? No mais ficou ótimo e olhe já andava buscando um tuto para por slide no blog.
ei kara no meu deu td certo
eu so queria sabe se tem como aumentar a letra
no meu a letra ta mto pequena
vlw
@Marilucia
pra aumentar o tamanho da img vc vai
para Layout->Editar HTML
depois vc procura
#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}
o width é a largura
e height é a altura
então mude o num. 200 por outro e 100 tbm
Ex.
#myGallery{
width: 400px !important;
height: 400px !important;
overflow: hidden;
}
ai vai do tamanho que desejar
vlw
bbjs
nsss, eu procurava isso faz tempo, soh aqui consegui fazer!!! ficou otimo, obrigado *-*
@Matheu$
A gente é que agradece pelo seu reconhecimento. Obrigado pela visita.
O meu fico uma embaixado da outra, o que fazer?
Não tá aparecendo o título
Há como aumentar o número de slides? Ótimo tutorial e já uso no meu blog.
@Rodrigo
Tem sim!
é só repetir este trecho antes da última DIV do código 5:
<a class="open" href="http://www.noticiaeblog.com/2009/10/hoje-um-dos-problemas-do-blogger-e-nao.html"/>
<img alt="Otimizando os títulos das postagens" src="http://i33.tinypic.com/25ppf84.png" class="full"/>
<h3>Otimizando os títulos das postagens</h3>
<p>Veja como ter seu blog bem posicionado... </p>
</a></div>
Vc não poderia consertar a linha de comando para não ficar aparecendo as imagens uma por baixo da outra..obrigado
Alguem conseguiu alterar as cores do texto exibido?
Alguem conseguiu aumentar a fonte do texto? Tentei alterando o h3 no editor de CSS do blogger, mas nao deu certo :/
Fala meu camarada, eu utilizava essa ferramenta perfeitamente. Hoje, parei pra analisar o blog e percebi que ela não está mais funcionando e eu não alterei nenhum código nem nada. Pode me dar um help?
Eh, queria ajuda tbm, vinicius... =[
Cara, você é um gênio, numca pensei que conseguiria fazer isso no blogspot. Obrigado de verdade. Só uma pergunta, não tem como aumentar o tamanho da letra?
Muito bom o Artigo... Funciona mesmo...
Abraço do Ojuara, inté!
Quando coloca o mouse sobre a imagem, aparece "false". Tem como tirar essa palavra?
O Slide não funciona.. não passa da primeira imagem! Ela fica la parada! O que será?
vlw
Com faço pra deixar o título centralizado ?
http://ositiodosgifs.blogspot.com/
Fixe!
http://questoesdefutebol.blogspot.com/
Estou com o mesmo problema que o Yago, meu slide não passa da primeira imagem o que faço?
Oie...o problema eh o seguinte,nao aparece as imagens,fica carregando....e nao carrega nunca! shahsuahua....Pode me ajudar?
Blog:www.paapoentreamigas.blogspot.com
oie fala ai oque é urls 6, bom pensando bem é o meu url do meu blog nao é?
adorei muito a postagem!!!
há! eu queria dar uma dica va a sua pagina de cometarios sabe onde tem escrito detalhes entao procure por Moderação de comentários e deixe no Sempre salve as alteraçoes...
ai quando qualquer pessoa fazer um cometario no seu blog ai vai dar para vc ler, saber onde esta pessoa postou o cometario(em que post)e se voce nao gostou doque ela postou ai voce pode apar o comentario! espero ter ajudado!
omg!!!
amei o blog
Gente me ajuda adorei a postaem mais quando fui colocar no meu blog deu tb certo só que ficou com as postagens recentes desse blog,como faço para colocar as postagens recentes do meu blog? me digam rapido!!!
Oi! Fiquei animado por ter um slide mas não funcionou, as imagens ficam uma embaixo da outra. Não em slide. Me ajuda!!
@♥♥thailoket♥♥ vc tem que trocar as URLS daqui pelas URLS do seu blog!!
Todos?os que estao em vermelho?
Eu consegui e adorei, mas aparece "false" quando mexe o cursor em cimda da imagem. Você sabe como posso tirar essa palavra ???? Pode até ser outra! Clique, por exemplo. VOcê teria como me ajudar ??????????
meu site !!!
http://torlonistar.blogspot.com/
Opa...Sou André.. gostei muito do post..parabéns.. mas no meu blog não aparece a opção de clicar e mudar de imagem.. ela troca as imagens e tals.. mas não aparece a opção pra clicar... como faço para resolver isso?
Queria deixar o slide no final das postagens ao invés de deixar no topo, pois deixou o blog meio poluído. Tem como? :) obrigada!
No meu blog "Mundo Gibi ONline" sempre da errado!
Boa Noite.
Gostaria de saber como estico mais a largura do slide?Não estou conseguindo fazer isso de jeito nenhum em meu blog,poderia me ajudar?Agradeço.
Abraços e aguardo respostas!
EU TENTEI FAZER ISSO NO MEU BLOG MAIS FICA UMA IMAGEM A BAIXO DA OUTRA. TEM COMO VC FAZER UM VIDEO?
Obrigado mesmo! Show de bola o tutorial. Blog adicionado aos Favoritos ;D
A única coisa ruim é o cacete do "false" que fica aparecendo quando bota o mous eem cima das imagens ~~
E o pior é que ninguém que posta o tutorial desse slide comenta sobre isso ~~
Pow cara tu é Fera, nota 1o, não 1oo pra tu
valeu me ajudasse muito
O meu ficou ruim pq?
Deu certo aki cara, mais eu queria que ficasse só na página principal, ficou em todas as postagens tem como tirar??
Uma das setas não aparece mais, acho que foi removida do servidor, no lugar aparece uma imagem do Tinypic, falando que a imagem da seta foi movida ou removida.
Como faço para resolver isso? Você pode atualizar os códigos?
No mais, o código é maravilhoso, parabéns!
Como tira a palavra FALSE? AJUDA!
Coloquei no meu blog e achei muito bom! Apesar de ser um pouco simples, pois em outros blogs tem uns melhore, mais obrigado! E agora eu preciso saber se tem como aumentar o tamanho da fonte! Está muito pequena!
Paulo Seemann eu sei como, mais se tirar a palavra "false" vai ficar sem as cetinhas.
Você simplesmente edita o código HTML. E onde está escrito: "showArrows" você coloca "false".
Vai ficar sem a palavra "false" no meio, mais não aparece as cetinhas, eu optei por deixar sem as cetinhas!
Olá, fiz e deu tudo certinho. porém agora o slide não está funcionando, tem alguma solução pra mim. Desde já muito obrigada, aguardando uma resposta...
meu blog: http://jemsofaltavoce.blogspot.com.br
Aqui Não Pegou Ajuda Oww..
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.