Camera Slideshow com Posts Automáticos para o Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4PmjdNHVXnQyu6x69VtEWusx30IY1uXfvDuBE43VDEoFcHEuV2sBB_vNTJbn1fUoVcZwJYNW_8f5lViJrwo0rMj7_5-IWnQk2rMvxgBPqAUTUPQOm8474poM7ecVNdBYArzJFHgC9woQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAHQeAhtkd5TKgDn59i9OvCjs5ohsOW0lbILEGEBFhjBj2s6eY_UVDTDY00OU4GMZylEB_HzOhcl93HOulERXBP4_KV6U6B9D3ZPmtla-6Q0p7sRO3FCtOr4gk-tZR9G7GWtgA76C0D6HF/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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5wL8SEjvjdmqHXii8vpGqcrgnnP9SYUIhgreh35g-Ot4dIDEBxsoIaIxy5FeVLqk5gMog-o-sT69ywXbOG6SdQZ26NJQtoj9TjQDLaydlizqkln2q2s0bHryxSA4EE-tdvCD2Mypg9s/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.