» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Camera Slideshow com Posts Automáticos para o Blogger

camera slideshow
Camera Slideshow

Estou mudando o template do meu 1ª blog o Aukimia e estou apanhando bastante para deixar do jeito que quero.
Mas aprendi uma coisa bem legal que vou ensinar aqui:

Como Instalar o Camera Slideshow no Blogger

Este slide tem a particularidade de não precisar configurar os slides, como muitos outros, é automático e apresentando os posts do seu blog aleatoriamente ou não. Você é quem escolhe.

O autor se baseou no Camera Slideshow Free de  Manuel Masia do site Pixedelic.com.

1º Passo - Colocando o Estilo e Javascript no Template

Procure a tag </head> cole este código acima desta tag:
<!--start Camera Slideshow-->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   
      <b:if cond='data:blog.pageType != &quot;item&quot;'>    
        <style type='text/css'>    
          /* Slider */    
          .camera_wrap a,.camera_wrap img,.camera_wrap ol,.camera_wrap ul,.camera_wrap li,.camera_wrap table,.camera_wrap tbody,.camera_wrap tfoot,.camera_wrap thead,.camera_wrap tr,.camera_wrap th,.camera_wrap td    
          .camera_thumbs_wrap a,.camera_thumbs_wrap img,.camera_thumbs_wrap ol,.camera_thumbs_wrap ul,.camera_thumbs_wrap li,.camera_thumbs_wrap table,.camera_thumbs_wrap tbody,.camera_thumbs_wrap tfoot,.camera_thumbs_wrap thead,.camera_thumbs_wrap tr,.camera_thumbs_wrap th,.camera_thumbs_wrap td{background:none;border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;list-style:none}    
          .camera_wrap{display:none;float:left;position:relative;z-index:0;width:97.6%;padding:6px 7px 6px 6px;border:1px solid #e3e3e3}    
          .camera_wrap img{max-width:none!important}    
          .camera_fakehover{height:100%;min-height:100px;position:relative;width:100%;z-index:1}    
          .camera_src{display:none}    
          .cameraCont,.cameraContents{height:100%;position:relative;width:100%;z-index:1}    
          .cameraSlide{bottom:0;left:0;position:absolute;right:0;top:0;width:100%}    
          .cameraContent{bottom:0;display:none;left:0;position:absolute;right:0;top:0;width:100%}    
          .camera_target{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;text-align:left;top:0;width:100%;z-index:0}    
          .camera_overlayer{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:0}    
          .camera_target_content{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:2}    
.camera_target_content .camera_link{background:url(http://1.bp.blogspot.com/-HVkOhvZvPWE/UQlkh-TuJsI/AAAAAAAAIEI/3OoSgPgTtvk/s1600/blank.gif);display:block;height:100%;text-decoration:none}    
          .camera_loader{background:url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;background:rgba(255,255,255,0.9) url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) no-repeat center;border:1px solid #fff;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;height:36px;left:50%;overflow:hidden;position:absolute;margin:-18px 0 0 -18px;top:50%;width:36px;z-index:3}    
          .camera_bar{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:3}    
          .camera_thumbs_wrap.camera_left .camera_bar,.camera_thumbs_wrap.camera_right .camera_bar{height:100%;position:absolute;width:auto}    
          .camera_thumbs_wrap.camera_bottom .camera_bar,.camera_thumbs_wrap.camera_top .camera_bar{height:auto;position:absolute;width:100%}    
          .camera_nav_cont{height:65px;overflow:hidden;position:absolute;right:9px;top:15px;width:120px;z-index:4}    
          .camera_caption{bottom:0;display:block;position:absolute;width:100%}             .camera_caption &gt; div{padding:10px 10px}    
          .camerarelative{overflow:hidden;position:relative}    
          .imgFake{cursor:pointer}    
          .camera_prevThumbs{bottom:4px;cursor:pointer;left:0;position:absolute;top:4px;visibility:hidden;width:30px;z-index:10}    
          .camera_prevThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -160px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}    
          .camera_nextThumbs{bottom:4px;cursor:pointer;position:absolute;right:0;top:4px;visibility:hidden;width:30px;z-index:10}    
          .camera_nextThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -190px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}    
          .camera_command_wrap .hideNav{display:none}    
          .camera_command_wrap{left:0;position:relative;right:0;z-index:4}    
          .camera_wrap .camera_pag .camera_pag_ul{list-style:none;margin:0;padding:0;text-align:center}    
          .camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-align:left;text-indent:-9999px;width:16px}    
          .camera_commands_emboss .camera_pag .camera_pag_ul li{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}    
          .camera_wrap .camera_pag .camera_pag_ul li &gt; span{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:8px;left:4px;overflow:hidden;position:absolute;top:4px;width:8px}    
          .camera_commands_emboss .camera_pag .camera_pag_ul li:hover &gt; span{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}    
          .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{-moz-box-shadow:0;-webkit-box-shadow:0;box-shadow:0}    
          .camera_pag_ul li img{display:none;position:absolute}    
          .camera_pag_ul .thumb_arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid;top:0;left:50%;margin-left:-4px;position:absolute}    
          .camera_prev,.camera_next,.camera_commands{cursor:pointer;height:40px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:2}    
          .camera_prev{left:0}    
          .camera_prev &gt; span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat 0 0;display:block;height:40px;width:40px}    
          .camera_next{right:0}    
          .camera_next &gt; span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -40px 0;display:block;height:40px;width:40px}    
          .camera_commands{right:41px}    
          .camera_commands &gt; .camera_play{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -80px 0;height:40px;width:40px}    
          .camera_commands &gt; .camera_stop{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -120px 0;display:block;height:40px;width:40px}    
          .camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-indent:-9999px;width:16px}    
          .camera_thumbs_cont{-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;overflow:hidden;position:relative;width:100%}    
          .camera_commands_emboss .camera_thumbs_cont{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}    
          .camera_thumbs_cont &gt; div{float:left;width:100%}    
          .camera_thumbs_cont ul{overflow:hidden;padding:3px 4px 8px;position:relative;text-align:center}    
          .camera_thumbs_cont ul li{display:inline;padding:0 4px}    
          .camera_thumbs_cont ul li &gt; img{border:1px solid;cursor:pointer;margin-top:5px;vertical-align:bottom}    
          .camera_clear{display:block;clear:both}    
          .showIt{display:none}    
          .camera_caption a{color:#FF007F;font:18px Arial;margin:0 10px 10px 0}
          .camera_caption a:hover{color:#fff}
          .camera_caption .comt{font:11px Tahoma;margin:5px 0 0;color:#fc0; display:none}
          .camera_caption p{font:12px Arial;margin:5px 0 0}    
          .camera_clear{clear:both;display:block;height:1px;margin:-1px 0 25px;position:relative}    
          .pattern_1 .camera_overlayer{background:url(http://4.bp.blogspot.com/-mK_USJALT1w/USSK5zcb0VI/AAAAAAAAAPM/BXmbKtwCdPI/s1600/laya.png) repeat}    
          .pattern_2 .camera_overlayer{background:url(http://2.bp.blogspot.com/-VVgg8zHpY1Q/USSLGoqh93I/AAAAAAAAAPU/1L3y6jLQv3I/s1600/layb.png) repeat}    
          .pattern_3 .camera_overlayer{background:url(http://2.bp.blogspot.com/-vt97g0-7sy0/USSLQhI53RI/AAAAAAAAAPc/LUep3GmWmnI/s1600/layc.png) repeat}    
          .pattern_4 .camera_overlayer{background:url(http://1.bp.blogspot.com/-siY1U2dtkdk/USSLcJ6_iWI/AAAAAAAAAPk/P8wAOzA3Myo/s1600/layd.png) repeat}    
          .pattern_5 .camera_overlayer{background:url(http://4.bp.blogspot.com/-svWnNDcbzkQ/USSLndwFBeI/AAAAAAAAAPs/IpAgpa_YNXs/s320/laye.png) repeat}    
          .pattern_6 .camera_overlayer{background:url(http://4.bp.blogspot.com/-beOrTn_xAb0/USSL5TpKKKI/AAAAAAAAAP0/Be6TaEBGNbM/s320/layf.png) repeat}    
          .pattern_7 .camera_overlayer{background:url(http://1.bp.blogspot.com/-ZIu8sF_tT74/USSMFPPT_aI/AAAAAAAAAP8/ihrFsYG3Y4E/s320/layg.png) repeat}    
          .pattern_8 .camera_overlayer{background:url(http://1.bp.blogspot.com/-KSaEP4OQ_qw/USSMPrJ3PzI/AAAAAAAAAQE/K-3k29KDUwM/s320/layh.png) repeat}    
          .pattern_9 .camera_overlayer{background:url(http://3.bp.blogspot.com/-FilWZbFD07E/USSMiDKIURI/AAAAAAAAAQM/K7a6fvbnvGc/s1600/layi.png) repeat}    
          .pattern_10 .camera_overlayer{background:url(http://4.bp.blogspot.com/-M96ItiZRE7w/USSMiAM3xEI/AAAAAAAAAQQ/_NGNkQuKAnM/s320/layj.png) repeat}    
          .camera_caption{color:#fff}    
          .camera_caption &gt; div{background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png)}    
          .camera_wrap .camera_pag .camera_pag_ul li{background:#8cd700}    
          .camera_wrap .camera_pag .camera_pag_ul li:hover &gt; span{background:#8CD700}    
          .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{background:#222;box-shadow: 0 0 8px #e6aef8}    
          .camera_pag_ul li img{border:3px solid #f3fbfd;-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);box-shadow:0 3px 6px rgba(0,0,0,.5)}    
          .camera_pag_ul .thumb_arrow{border-top-color:#f3fbfd}    
          .camera_prevThumbs,.camera_nextThumbs,.camera_prev,.camera_next,.camera_commands,.camera_thumbs_cont{background:#f3fbfd;background:rgba(216,216,216,0.85)}    
          .camera_wrap .camera_pag .camera_pag_ul li{background:#f3fbfd;box-shadow:0 1px 3px #6ab3cc; -moz-box-shadow:0 1px 3px #6ab3cc; -webkit-box-shadow:0 1px 3px #6ab3cc}    
          .camera_thumbs_cont ul li &gt; img{border-color:1px solid #000}    
         
/*WHITE SKIN*/    
          .camera_white_skin .camera_prevThumbs div {    
            background-position: -160px -640px;}    
          .camera_white_skin .camera_nextThumbs div {    
            background-position: -190px -640px;}    
          .camera_white_skin .camera_prev &gt; span {
            background-position: 0 -640px;}    
          .camera_white_skin .camera_next &gt; span {
            background-position: -40px -640px;}    
          .camera_white_skin .camera_commands &gt; .camera_play {
            background-position: -80px -640px;}    
          .camera_white_skin .camera_commands &gt; .camera_stop {    
            background-position: -120px -640px;}    
          @media screen and (max-width: 960px) {    
            .main-wrapper{width:65.5%}    
            .sidebarleft-wrapper,.sidebar2-wrapper{display:none}}
          @media screen and (max-width: 760px) {    
            .main-wrapper{margin-right:0;width:auto;padding:10px 10px 0}    
            .sidebar-wrapper,.sidebar1-wrapper{border:none;width:auto;margin:0 auto 10px;padding:0 10px}}    
          @media screen and (max-width: 340px){    
            .camera_wrap{width:95%}
            .camera_caption p{display:none}
            .cutter{width:100px;height:70px;}}    
        </style>    
      </b:if>    
    </b:if>    
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/11325639179/camera-slider.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<!--end Camera Slideshow-->
♦ Clique em Salvar modelo.

→Está vendo o código javascript em azul » Se preferir hospede-o em um site de sua preferência. Aprenda como em: Como Hospedar Javascript no seu Googlecode

Para alterar a Cor e a Fonte do Título do Post no camera slideshow:

Encontre a linha abaixo e altere a cor ou a fonte para a que desejar:
.camera_caption a{color:#FF007F;font:18px Arial;margin:0 10px 10px 0}

2º Passo - Colocando o Camera Slideshow acima dos Posts

Procure a linha »[<b:section class='main' id='main' showaddelement='yes'>]
Obs: Se você não encontrar esta linha exatamente dessa forma, procure também por:
» [<b:section class='main' id='main' showaddelement='no'>]
»ou somente [<b:section class='main' id='main']
Cole o código abaixo▼ acima desta linha:
<b:if cond='data:blog.url == data:blog.homepageUrl'>    
<div id='randompost'>     
<script type='text/javascript'>     
//<![CDATA[     
$(document).ready(function () {     
CameraSlider({     
blogURL:'http://URL DO SEU BLOG',     
MaxPost:5,
RandompostActive:true,
idcontaint:"#randompost",     
ImageSize:500,
NumCharacter: 250,
textcom:"comments",     
Notextcom:"No Comment",     
noImage:"http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg",
timestart:2000,     
slidebylabel:false     
});     
});     
//]]>     
</script>     
</div>     
</b:if>     
<div style='clear: both;'/>
♦ Clique em Salvar modelo.

Entendendo e configurando o código acima:

Opções Modificações Possíveis
blogURL:'http://URL DO SEU BLOG', Preencha com o URL do Seu Blog.
MaxPost:5, Número máximo de posts que você deseja exibir.
RandompostActive:true, Mantenha true para que os posts se apresentem de forma aleatória e para false para que mostre os 5 últimos posts publicados. Neste caso.
ImageSize:500, Tamanho da imagem que você deseja colocar no seu camera slideshow.
NumCharacter: 250, Número de caracteres que deseja exibir no resumo do post.
noImage: "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY /NcWLPVnYEnU/s1600/no+image.jpg", Se o post não tiver nenhuma imagem irá aparecer uma imagem padrão que é a desta URL. Caso você não queira que seja esta imagem vá até este Artigo e escolha uma imagem que goste.
timestart:2000, O tempo necessário para exibir um slideshow.
slidebylabel:false Se você deseja exibir o camera slideshow com posts de apenas um marcador do seu blog deve substituir a palavra false pelo marcador, exatamente como ele está no seu blog.
Exemplo: Se o marcador estiver todo em maiúsculo deve escrever igual.  → Tipo "HACKS BLOGGER" aqui do TPV.
Atenção: para ativar o slidebylabel a opção RandompostActive:true, deve ser definida por false.

Veja 2 opções do Camera Slideshow em meus Demoplates


Demoplate2006 » Coloquei o Camera Slideshow Exibindo o 5 últimos posts publicados.

Demoplate2010 » Coloquei o Camera Slideshow Exibindo 5 Posts em ordem Aleatória
→Este demoplate é no formato 2010 do blogger baseado no tema Simple Blog, ou seja atual, e o camera slideshow funcionou corretamente.

♦Obs-1: Não consegui fazer com que o Camera Slideshow funcionasse no meu Demplate TPV. Este template já possui muitos hacks instalados e parece que algum não deixou que os slides funcionassem como deveriam. Ainda não sei o porque, se alguém souber, por favor nos diga. Assim que souber o porque atualizo este artigo.
♦Obs-2: Não consegui fazer funcionar o Camera Slideshow por marcadores, não funcionou nos testes realizados.

Fontes:
♦ Tradução e adaptação do artigo: Cara Memaseng Camera Slider di Blogger
♦ Utilizei os templates Johny Genit e Pakdhe Johny para fazer as adaptações necessárias e para ajudar no entendimento do recurso.
Camera Slideshow com Posts Automáticos para o Blogger Camera Slideshow com Posts Automáticos para o Blogger Reviewed by Aurea R C on 5/10/2013 Rating: 5

52 comentários:

  1. @Pastor RelenilsonPois é Pastor,

    Realmente pode ser que não dê certo mesmo. Comigo também aconteceu.
    Consegui que desse certo nos demoplates que não tinham muitos recursos instalados e não sei porque ainda. Talvez algum javascript que bloqueie o funcionamento deste? Não sei. Vou continuar estudando para ver o que pode ser.
    Seja bem vindo ao TPV.
    Att,
    Áurea

    ResponderExcluir
  2. Me ajudou muito, eu já tinha o slide instalado no meu blog,
    só que eu não sabia como colocar as postagens recente no slide, estavam como aleatórias.
    Obrigado !

    ResponderExcluir
    Respostas
    1. Que bom que este artigo te ajudou Klebeson,
      Fico feliz!
      Seja sempre bem vindo ao TPV!
      Att,
      Áurea

      Excluir
  3. comigo tambem nao deu certo so parece o lugar e circulos rodando dentro.

    ResponderExcluir
    Respostas
    1. Dionedos,

      Tentou em um blog de testes?
      Se o seu blog não tiver nenhum outro javascript que gere conflito com este hack, a chance de dar certo se você seguiu tudo direitinho é minima.
      Precisa seguir todos os passos exatamente da forma que está explicado aqui.
      Continue tentando em seu blog de testes.

      Excluir
  4. o slide parou de funcionar no meu blog faz uns 2 dias, por que? verifiquei no seu blog de testes e lá também não está funcionando, é por causa do código? você pode verificar por favor?? estou aguardando, muito obrigada

    ResponderExcluir
  5. olá, desculpe, verifiquei agora e o slide voltou a funcionar do nada, não entendi porque. Você sabe porque tem vezes que para desse jeito? Tem a ver com onde está hospedado o código, ou algo assim?

    ResponderExcluir
    Respostas
    1. Olá Cláudia,

      Muito provavelmente tem a ver com a largura de banda de onde o código javascript está hospedado. Que, se houverem muitos usuários o java pode ter problemas de execução.
      Sugiro que você baixe o javascript, hospede no seu googlecode ou no próprio blogger.
      Já tenho um artigo que explica como hospedar no googlecode e até indico neste artigo e me lembro de ensinar a hospedar no próprio blogger em algum hack. Vou procurar e faço um post exclusivo para esta opção.
      Um abraço,

      Excluir
    2. Olá Aurea, tudo bem? Obrigada por visitar e participar do blog!! Fico muito feliz em saber que você também é fã :D
      Eu vou fazer isso que você disse, vou hospedar esse e outros scripts do blog no google code conforme ensina o seu artigo; aliás agradeço muito a você, eu aprendi e estou aprendendo muitas coisas aqui no TPV, estou modificando literalmente t u d o no meu template e aprendi muito aqui, inclusive, como eu estou mudando várias coisas no layout, estão surgindo muitas dúvidas com relação a customização de outras partes do blog, você pode me ajudar novamente? Eu vou procurar aqui no site postagens em que os temas tenham a ver com cada dúvida minha e aí eu posto a pergunta nelas pra não misturar os assuntos, é melhor, né?? Desculpe Aurea, mas eu acho que ainda vou "encher um pouco a sua paciência" :D kkkkkk
      muito obrigada e parabéns pelo seu trabalho!

      Excluir
    3. Se eu puder ajudar Cláudia... Farei.
      Só não posso garantir que darei a resposta na mesma hora, porque tem dia que nem tenho tempo de entrar aqui.
      Vi que seu blog está bem melhor! Gostei!!!
      Grande abraço.

      Excluir
    4. Oi Aurea, obrigada, e eu entendo perfeitamente!

      Excluir
  6. nao consegui e meu blog ta estragado '-'

    ResponderExcluir
    Respostas
    1. Desculpe Luis Afonso, mas avisei da possibilidade deste hack não funcionar devido a conflitos com outros códigos javascript!

      Excluir
    2. Olá, o Camera Slideshow com Posts Automáticos para o Bloggerr estava funcionando muito bem em meu blog, mas infelismente deixou de funcionar há 3 dias. Fiz questão de visitar outros blogs que usam o mesmo slide e vi que também não não está funcionando. Devo excluir? O u será que voltará a funcionar?

      Excluir
  7. Olá Aurea, tudo bem? Vê se vc pode me ajudar. Instalei o slide, deu tudo certo e esta rodando bem. Obrigada pela dica! O problema é que agora eu não consigo mais mudar o background do blog. Não consigo nem achar a tag body no editar html. Você tem alguma dica pra me ajudar? Dá uma olhada no meu bloq www.decorviva.com.br Um beijão e obrigada, Vivi.

    ResponderExcluir
    Respostas
    1. Vivi,
      Seu site é um sucesso! Lindo! E ficou chiquérrimo com o camera slideshow!
      Uma sugestão é este artigo: Como acessar o HTML do seu blog e ativar o search Veja se este artigo e pode ser útil.
      Outra sugestão seria ativar o breadcrumb para o seu blog, vai ficar bem legal. Veja: Breadcrumb - Uma ferramenta de Usabilidade.

      Excluir
    2. Aurea querida! Obrigada pelo carinho! Fico feliz que tenha gostado do Decorviva! Com certeza com seu slider ele ficou muito melhor! :-) Infelizmente não consegui avançar muito com as dicas que vc passou. Sou muito leiga em html, css e tal e nem soube muito o que fazer. Você acha que o slider pode ter interferência no designer do modelo a ponto de eu não conseguir mais mudar a imagem de fundo? A graça do meu blog e sempre ter uma imagem de fundo de tempos e tempos e isso eh muito importante pra mim. Será que se eu mandar meu codigo fonte por email vc me indicaria onde troco o jpeg de fundo. Será que rola? Beijos mil, Vivi.

      Excluir
    3. Consegui!!!!!!! Fucei, fucei, fucei e achei!!!! Obrigada pelas dicas que me fizeram chegar lá Aurea! Vc eh top! Beijos, Vivi.

      Excluir
  8. Olá Aurea eu instalei o slide deu tudo certo mais as imagens estão ruins e grandes de mais cortando praticamente toda imagem você tem alguma dica pra me ajudar?

    ResponderExcluir
    Respostas
    1. Olá MonkTv,
      Em qual dos seus blogs você instalou o hack?
      Uma sugestão é você tentar editar o tamanho da imagem em [ImageSize:500,]→Tamanho da imagem que você deseja colocar no seu camera slideshow.
      Seja bem vindo ao TPV.

      Excluir
  9. Olá Aurea, muito útil o tutorial :) Obrigada! Gostaria de saber como faço para aumentar a largura do slideshow. Bjs!

    ResponderExcluir
    Respostas
    1. Olá Natali,
      Deve dar para alterar a largura do slideshow sim. Você terá que fazer alterações no código CSS do cameraslideshow.
      Mas não sei onde. Se você clicar com o botão direito em cima do slideshow e clicar em Inspecionar elemento vai achar qual parte do CSS deve alterar para aumentar a largura.
      Infelizmente não posso procurar por isso agora, estou com um template em andamento e quero publicá-lo ainda esta semana.
      Seja bem vinda ao TPV.

      Excluir
  10. Olá Aurea tudo joia? Obrigado pelo o excelente post, fiz tudo como descrito e tudo ok! Só não consegui diminuir mais as imagens das postagens, pois quando mexo na linha: ImageSize:500, só altera os pixels e assim distorcendo as imagens. Bom mesmo assim ta valendo.. estou me adequando aos Slides diminuindo as primeiras imagens dos posts. Obrigado.

    ResponderExcluir
    Respostas
    1. Olá Marcelo,

      Fico feliz que esteja aprendendo e dando certo com o tutorial.
      Tudo o que aprendi e ensino aqui foi desta forma. Na tentativa e erro.
      Seja sempre bem vindo ao TPV.
      Grande abraço.

      Excluir
  11. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
    Respostas
    1. Olá Maurino,
      Fui em seu blog para ver o que estava acontecendo, mas parece que você desativou o camera slideshow.
      Se voltar a ativá-lo me avise!
      Seja bem vindo ao TPV.

      Excluir
  12. Olá, eu consegui instalar tudo perfeito, porém, as imagens das setas direita/esquerda e pause não aparecenm, você o que pode ser?

    Obrigado

    ResponderExcluir
    Respostas
    1. Olá Eddy,
      Manda o link do seu blog.
      Realmente não sei o que pode ser, mas quero ver.
      Seja bem vindo ao TPV.

      Excluir
  13. O Meu apareceu perfeitamente..
    mais em seguida sumiu do meu blog mais o códico continuou incluso no HTML.
    mais só aparece uma vez , já reinstalei milhares de vezes mais apos instalar so aparece uma vez no html, pq seria?

    ResponderExcluir
    Respostas
    1. Olá A Redação,

      Sinceramente não sei responder a sua dúvida.
      Peço aos leitores se souberem, por favor nos ajudar!

      Excluir
  14. Coloquei o meu slide mas as imagens não aparecem e as minhas postagens elas tem imagens sim como faço para as imagens aparecerem no slide ?

    ResponderExcluir
    Respostas
    1. Olá Adeilson,
      Visitei o seu blog e os slides estão funcionando perfeitamente!

      Excluir
  15. Aurea, muito obrigada, estou buscando um bom slide há uns 2 anos e nenhum deles funcionava. Mas o seu ficou PERFEITO. É inacreditável. Nem sei dizer como estou feliz. Ah! também sou farmacêutica como você. Mas como sou também jornalista de moda (profissões bem diferentes), este slide foi para meu site de moda, mas em breve o adicionarei em meu site de Saúde. Muito obrigada mesmo!! :-)

    ResponderExcluir
    Respostas
    1. Olá Renata,
      Fico muito feliz em encontrar uma colega farmacêutica e blogueira.
      Que bom que este tutorial te ajudou. Espero poder ajudar mais.
      Já estou te seguindo no G+!
      Grande abraço

      Excluir
    2. Tb já te adicionei no G+ e vou te procurar no face. Vc tem? Bjs :-)

      Excluir
  16. O script é legal, porem, algumas imagens foram deletadas :/

    ResponderExcluir
    Respostas
    1. Pois é Guilherme,
      Percebi isso também.
      São as imagens do camera_prev, camera_next, camera_stop e camera_play.
      É só encontrar os links das imagens e alterá-los no código CSS do hack.
      Não estou conseguindo consertar isso agora porque estou muito atarefada e sem tempo. Mas vou procurar as imagens e aviso no post assim que conseguir.
      De qualquer forma já identifiquei o problema.
      Se quiser e puder me ajudar e enviar outras imagens para estes itens agradeceria muito.
      Um abraço e Obrigada por seu comentário!

      Excluir
  17. Obrigada pela dica, amei e ja estou usando
    teria como personalizar para colocar um background que se repetisse por cada imagem?

    ResponderExcluir
  18. Consegui, ficou muito bom, porém a seta do lado Direito e o Play/Pause não aparecem (embora eu já tenha trocado as imagens). O que deve ser?

    ResponderExcluir
    Respostas
    1. Olá Redação CEPC,
      Também tentei alterar as imagens e aconteceu o mesmo que você. Realmente ainda não sei o que fazer para corrigir isso. Vou continuar tentando!
      Seja sempre bem vindo ao TPV!

      Excluir
  19. como coloco o slide pras ultimas postagens feitas?

    ResponderExcluir
  20. Olá Aurea, tem como fazer a imagem ser clicável? para conseguir entrar na postagem quando clicar na imagem. Obrigado!!!

    ResponderExcluir
    Respostas
    1. Olá Matheus,
      Infelizmente não tem como a imagem ser clicável, isso é do próprio hack. Vou procurar outro slide show que tenha esta configuração e posso ensinar aqui!
      Seja sempre bem vindo ao TPV!

      Excluir
  21. Vlw! Deu certim. Só os botões ali de pause e de rolagem que ficaram tipo transparente. Sabe o porque?

    ResponderExcluir
  22. Olá Aurea,
    no meu blog o titulo ta aparecendo junto com a sinopse na camera slide, sabe por que?

    ResponderExcluir
  23. Oi Aurea;

    Seu slide é um sucesso e continua funcionando perfeitamente bem. Gostaria de saber como fazer para que ele apareça TAMBÉM NAS PÁGINAS DOS POSTS; além da homepage. Abçs

    ResponderExcluir
  24. Aurea; tem como o slide aparecer em TODAS AS PÁGINAS em vez de apenas na home?

    obrigada;
    Beijos

    ResponderExcluir
  25. Muito bom esse tutorial eu usei de deu super certo, estou precisando de uma ajuda quanto a uma programação do meu blog, abaixo do slideshow tem uns links e não consegui ainda configura-los para direcionar as postagens que fiz, você poderia me dar uma luz do que posso fazer?

    ResponderExcluir
  26. Ao invés de "apresentar os posts do meu blog" , gostaria de de escolher eu mesmo as fotos e textos. Posso fazer isso mudando as características deste script? Poderia me dar algumas dicas?

    Possuo "javascript" semelhante no blog em que estou montando, mas estou tendo certa dor de cabeça nesse respeito.
    ( http://isaacfotografia.blogspot.com.br )

    Grato

    ResponderExcluir
  27. Parabéns ótimo tutorial e o slide funcionou perfeitamente, hospedei o javascript no google sites e achei que ficou um pouco mais rápido.
    Vou colocar esse blog na minha lista de favoritos

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.