Camera is a responsive/adaptive slideshow. Try to resize the browser window
It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
It's completely free (even though a donation is appreciated)
Camera slideshow provides many options to customize your project as more as possible
Sua descrição do slide aqui, Ex: Moda em 5 tons.

06/10/2016

Personalização


• PARA ALTERAR A IMAGEM DO CABEÇALHO:
- Crie uma imagem com dimensões 541 x 191 (De preferência)
- Vá no item Layout do seu blog
- Clique em editar no cabeçalho
- Insira uma imagem e selecione a opção "Em vez do título e descrição"
- Clique em Salvar

• PARA COLOCAR E ALTERAR A BARRA DE MENU:
- Vá no item Layout do seu blog
- Não esqueça de fazer o backup do layout antes de fazer qualquer alteração
- Clique em Editar no gadget HTML/JavaScript (Entre Colunas)
- Cole o seguinte código:

<style>#mymenuda {background: #dc6a38; /* Cor do background */border-left: 200px solid #dc6a38; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */width: 100%;height: 36px;position: fixed;top: 0;left: 0;z-index: 9999; }#mymenu {background: #fff; /* Cor da fonte */font-family: &#39;Arial&#39;, corsiva; /* Nome da fonte */font-size: 20px; /* Tamanho da fonte */text-transform: captalize; }#mymenu li {list-style-type: none;display: inline;float: center; /* Posicionamento do menu */padding: 0px;}#mymenu li a {color: #fff;text-decoration: none;padding-right: 24px;line-height: 37px;}#mymenu a:hover {color: #000; /* Cor da fonte em hover */}#mymenu ul {list-style: none;margin: 40px;padding: 0; background: #fff;margin-left: 40px;}#mymenu li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 120px;padding-left: -40px;}#mymenu li ul a {font-size: 12px;line-height: 24px;}#mymenu li:hover ul ul, #mymenu li:hover ul ul ul, #mymenu li.sfhover ul ul, #mymenu li.sfhover ul ul ul {left: -999em;}#mymenu li:hover ul, #mymenu li li:hover ul, #mymenu li li li:hover ul, #mymenu li.sfhover ul, #mymenu li li.sfhover ul, #mymenu li li li.sfhover ul {left: auto;}#mymenuright {float: right;color: #fff;}/* BARRA DE PESQUISA */.search{float: left; /* Flutuando a esquerda */font-family: Georgia, Tahoma; /* Nome da fonte */}.searchbar{margin-top:7px;height: 14px;width: 240px;color: #ccc; /* Cor da fonte */-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo */}.searchbut{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBvaIRIJu7C2CtGnfyjD5KToqEdrwmzsYNqvksYHREcdTfTdFv9-J-K8mhmSaQ2h-80vI5ka60lUO4q_hnmtIKZLiicM3tbxo-AW2eclqYn79S8EV-lQmzZqzziN-urur2sQX0HA8Epvw/s1600/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */width:20px;height:20px;border: 0;margin:6px;}
</style><div id="mymenuda">
<div id="mymenu">
<li><a href="http://campoeferico.blogspot.com.br/">Home</a></li>
<li><a href="Link ">Sobre</a></li>
<li><a href=" Link ">Blogroll</a></li><li><a href=" Link ">Categoria</a></li><li><a href=" Link ">Categoria</a></li><li><a href=" Link ">Categoria</a></li><li><a href=" Link ">Categoria</a></li><li><a href=" Link ">Contato</a></li></div>
</div>
• PARA INSERIR SLIDE:
- Vá no item Layout do seu blog
- Clique no Gadget em cima da area do post
- No campo conteúdo cole o seguinte código:
<!--  Camera_Slideshow Styles  --><link rel="stylesheet" id="camera-css" href="http://project.dimpost.com/camera-slideshow/css/camera.css" type="text/css" media="all" /><!-- Camera Slideshow Scripts --><script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script><script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script><script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script><script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script><script type='text/javascript'>jQuery(function() {    jQuery('#camera_wrap_1').camera({        time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one        transPeriod: 1200, // length of the sliding effect in milliseconds        thumbnails: false, // thumnails & tooltip is controlled by it        pagination: true, // only when "pagination" is set to "false" thumbnails will be visible        fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects        hover: false, // Pause on hover        height: '50%' // slideshow height (50% is default)    });});</script><style type="text/css">.fluid_container {    margin: 0 auto;    /* aling centered */    width: 100%;    max-width: 900px;    overflow: hidden;}

/* Blogger CSS Conflict Fix */
.camera_pag_ul {    border: none !important;    background: none !important;}
.camera_pag_ul li {    float: inherit !important;    padding: inherit !important;}
.camera_pag_ul {    margin: 0 !important;    border: 0 !important;}</style><div class="fluid_container">    <!-- camera_slideshow camera_wrap-->    <div class="camera_wrap" id="camera_wrap_1">        <div data-link="http://campoeferico.blogspot.com.br/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="https://lh3.googleusercontent.com/-ky-uMb5vitQ/VOzGUORyETI/AAAAAAAAHgk/hVpp-dATHmo/s740/SLIDE.png">            <div class="camera_caption fadeFromBottom">                Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>            </div>        </div>        <div data-link="http://campoeferico.blogspot.com.br/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg">            <div class="camera_caption fadeFromBottom">                It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>            </div>        </div>        <div data-link="http://campoeferico.blogspot.com.br/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg">            <div class="camera_caption fadeFromBottom">                <em>It's completely free</em> (even though a donation is appreciated)            </div>        </div>        <div data-link="http://campoeferico.blogspot.com.br/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="https://s15.postimg.org/3x21bj7cr/SLIDE.png">            <div class="camera_caption fadeFromBottom">                Camera slideshow provides many options <em>to customize your project</em> as more as possible            </div>        </div>        <div data-link="http://campoeferico.blogspot.com.br/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">            <div class="camera_caption fadeFromBottom">                Sua descrição do slide aqui, Ex: Moda em 5 tons.            </div>        </div>    </div>    <!-- #camera_wrap_1 --></div><!-- .fluid_container -->

• PARA INSERIR CAIXA DE PERFIL NA SIDEBAR:
- Vá no item Layout do seu blog
- Clique em Adicionar um Gadget na sidebar
- Selecione HTML / Javascript
- No campo conteúdo cole o seguinte código:
<div class='widget-content'><center><img src="http://demo.beautifuldawndesigns.net/elegance/wp-content/uploads/sites/53/2015/11/tumblr_nwixwmArxQ1u60tx6o1_1280.jpg" /></center><br/>This is an example of an about me image and blurb. The circular image was created using an image editing program.</div><div class='clear'></div><div class='widget-content'><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD2fa2yd5YgN_tASN_xgU2Euly2yqneiZTcp5YBeEXDQuIWSjguLhlkuOUVKrczDD2s4WMXddgeigq5nBmXmN_dxTSmj2KQQPDUf1qrNSfGnr1pFeHFG6AAR77Pt0XW970VaooeInZeNhQ/s1600/mail.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdaKoZTRd6MzG2CYBVzXot0DrvRJ6wtb3buge0y0ci-oM8CCBP1xoKm4SIXk9Wkwc2P9HdGMbWodSSedRu3VzHiVeIns_T8SfSJXN7JRNXWG6upM2PDi38eUbHVZQ4KH0oeCDqottvpegJ/s1600/bloglovin.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjU4VyRP4_ywF7ZOeZqKi3FxZQ_6HfXmfElQ1wyTNXV5yRPo-StNk5F63JVgOR1oDlMLlUGRtdmrXH1usIjZC8j-bI_sjqhpfHk3t0V5HbyLdRWWTRdP7UeJ3v9uS8JOtbih4FV8MNdO04/s1600/facebook.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZiyazIe-59kjTNpBsC7pghlYdtRUD3fl-YCUCcmI6P6g5lt8AVpp8x-oT3v4y68r6pqocx0OvziQC_xO6RnU1F65TkIqRjHVMe86-PoPIDr2EgJhUjFtErrZAWuXSlr0R3uhLeERlh8rc/s1600/twitter.png"/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggqTlJFNapyE2iVwbMU7m5vAYUTExE0avGx1xe2qIxrhrm3q7x1wgCHL6muPF_4HXxW0Zbv3e-Y9J8FKA3kmxrgRYgBm1YiEgNphh6TIEBDOwcSi9E7Uv-GjLIjyetmRbidS8Qc2-9akvJ/s1600/pinterest.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNuMl0RUGw9P61nbf8RaHD3d35sRZzWz-2Jvr_eqF9NNpuo5kN7HfmCpr4b6-vutjQrjWRQ7gutmYsIoMm1NksMOVUclzh-n3SBj0uvP2LVenouEW_vWNtEe3HcOfxxFqfrmQR_ubpnCj-/s1600/instagram.png"/></center></div><div class='clear'></div>
• PARA INSERIR CAIXA DE CATEGORIAS NA SIDEBAR:
- Vá no item Layout do seu blog
- Clique em Adicionar um Gadget na sidebar
- Selecione HTML / Javascript
- Se desejar, insira um título
- No campo conteúdo cole o seguinte código:

<div class='widget-content'>
<div id='cimg'>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh4.googleusercontent.com/-u_dp-nao_8w/VOzGU5cIkyI/AAAAAAAAHgk/3hOcBZTkE6U/s90/categoria_beleza.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh3.googleusercontent.com/-YZ4n82FkoFI/VOzGVq3MfPI/AAAAAAAAHgk/xNV3JDNSoQo/s90/categoria_cinema.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh5.googleusercontent.com/-XL8F3hfNmhQ/VOzGV_5RMkI/AAAAAAAAHgk/dvxDQwLhNfg/s90/categoria_compras.png" class="cimg"/></a>
<br/>
<a href='link do marcador' target="_blank" title=''><img src="https://lh5.googleusercontent.com/-HnrXPYhGDVk/VOzGWeiHRII/AAAAAAAAHgk/oyfWqyGp_7g/s90/categoria_decora%25C3%25A7%25C3%25A3o.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh5.googleusercontent.com/-NKseTFAGZnA/VOzGWZW3wYI/AAAAAAAAHgk/Zec_DcgSsaE/s90/categoria_dicas.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh3.googleusercontent.com/-6d80SILbB9w/VOzGWrCIiuI/AAAAAAAAHgk/4Lwa3QMzX30/s128/categoria_diy.png" class="cimg"/></a>
<br/>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh5.googleusercontent.com/-ki4kToV5WtY/VOzGW699MPI/AAAAAAAAHgk/lC-l5k8bHKQ/s128/categoria_fotografia.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh5.googleusercontent.com/-U48aZrDRvSQ/VOzGW0R1pBI/AAAAAAAAHgk/YupYFNCrbWU/s128/categoria_hemiparesia.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh6.googleusercontent.com/-wAAdtsk_u5U/VOzGXMxh7XI/AAAAAAAAHgk/wEQtSIwG6W4/s128/categoria_livros.png" class="cimg"/></a>
<br/>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh3.googleusercontent.com/-1GHdhb3nHvY/VOzGXRY10ZI/AAAAAAAAHgk/mt3wJ331PKU/s128/categoria_moda.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh6.googleusercontent.com/-EHhmtXqgA6U/VOzGXf_kPqI/AAAAAAAAHgk/T7eK182f6ZU/s128/categoria_outros.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh3.googleusercontent.com/-nQ-Br2ludX0/VOzGXqnkRFI/AAAAAAAAHgk/f_U7x26vZi0/s128/categoria_pessoal.png" class="cimg"/></a>
<br/>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh3.googleusercontent.com/-9cIulygcBik/VOzGX5-rNXI/AAAAAAAAHgk/xRTo0loKhvU/s128/categoria_tags.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh5.googleusercontent.com/-oG7q2uUg8Jo/VOzGX4NNAeI/AAAAAAAAHgk/fI4pTscoWug/s128/categoria_textos.png" class="cimg"/></a>
<a href='https://campoeferico.blogspot.com.br/' target="_blank" title=''><img src="https://lh5.googleusercontent.com/-p_yUjBCha1U/VOzGYeb7xPI/AAAAAAAAHgk/3CvF0zlo9uE/s128/categoria_tutoriais.png" class="cimg"/></a>
</div>
</div>
<div class='clear'></div> 
• PARA CONFIGURAR O ARQUIVO:
- Vá no item Layout do seu blog
- Clique em Adicionar um Gadget na sidebar
- Selecione Arquivo do blog
- Escolha um título
- Em Estilo selecione Menu suspenso


Marcadores: ,

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)