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.

quarta-feira, 19 de outubro de 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: #bfe0e0; /* Cor do background */border-left: 200px solid #bfe0e0; /* 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('http://4.bp.blogspot.com/-yCzhuvWH6Bc/Vaa9_DyvS6I/AAAAAAAAAwQ/vF3c-qxLFIM/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://editingwithlove.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://2.bp.blogspot.com/-vGAtPhUE7-g/V5-34zgsgfI/AAAAAAAANXk/RtCBosAIx_Ud7eq02mXSrwGLfqr4lIWGQCLcB/s1600/mail.png" />

<img src="https://4.bp.blogspot.com/-9U3hgFe9rUc/V5-34qfJg8I/AAAAAAAANXg/l8R0SmVSFyM77N1d1CFLG3cJz4OyrxYsQCLcB/s1600/bloglovin.png" />

<img src="https://2.bp.blogspot.com/-aVww-041zFg/V5-34msZgKI/AAAAAAAANXY/Ji1ru8h4pBEsdDtTbPJiaMZEQ2WU10cKwCLcB/s1600/facebook.png" />

<img src="https://4.bp.blogspot.com/-Srr--Br80I4/V5-34ytBRoI/AAAAAAAANXs/--iWMWZfTPQxB6iHQ93z1Pd4FNruq8y9wCLcB/s1600/twitter.png" />

<img src="https://3.bp.blogspot.com/-rEdgSRwisHo/V5-345wgLgI/AAAAAAAANXo/nzDI5E1JDzQ1h-U6f3j0MHfOeVNAkDFaQCLcB/s1600/pinterest.png" />

<img src="https://1.bp.blogspot.com/-557yTNCeR6A/V5-34nYViRI/AAAAAAAANXc/qNOXfkmEcJorF1NLTvdLIy-_qX5_Frm7wCLcB/s1600/instagram.png"/></center>
</div>
<div class='clear'></div>

• PARA INSERIR CAIXA DE AFILIADOS 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:

<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-EsJvQQE0EAY/UU0y3STVwhI/AAAAAAAACv8/AqmdwgdC6wY/s1600/LC+-+Post8.jpg" style="opacity: 0.5;" /></a>&nbsp<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://4.bp.blogspot.com/-9WroA7GkFs4/UU0y20v7BEI/AAAAAAAACvc/ZQi9j7ePwhs/s1600/LC+-+Post5.jpg" style="opacity: 0.5;" /></a>&nbsp<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-EsJvQQE0EAY/UU0y3STVwhI/AAAAAAAACv8/AqmdwgdC6wY/s1600/LC+-+Post8.jpg" style="opacity: 0.5;" /></a>&nbsp<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://4.bp.blogspot.com/-9WroA7GkFs4/UU0y20v7BEI/AAAAAAAACvc/ZQi9j7ePwhs/s1600/LC+-+Post5.jpg" style="opacity: 0.5;" /></a>&nbsp<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-EsJvQQE0EAY/UU0y3STVwhI/AAAAAAAACv8/AqmdwgdC6wY/s1600/LC+-+Post8.jpg" style="opacity: 0.5;" /></a>&nbsp<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://4.bp.blogspot.com/-9WroA7GkFs4/UU0y20v7BEI/AAAAAAAACvc/ZQi9j7ePwhs/s1600/LC+-+Post5.jpg" style="opacity: 0.5;" /></a>&nbsp<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-EsJvQQE0EAY/UU0y3STVwhI/AAAAAAAACv8/AqmdwgdC6wY/s1600/LC+-+Post8.jpg" style="opacity: 0.5;" /></a>&nbsp<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://4.bp.blogspot.com/-9WroA7GkFs4/UU0y20v7BEI/AAAAAAAACvc/ZQi9j7ePwhs/s1600/LC+-+Post5.jpg" style="opacity: 0.5;" /></a>&nbsp<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://2.bp.blogspot.com/-EsJvQQE0EAY/UU0y3STVwhI/AAAAAAAACv8/AqmdwgdC6wY/s1600/LC+-+Post8.jpg" style="opacity: 0.5;" /></a>&nbsp<a href="URL DO AFILIADO" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://4.bp.blogspot.com/-9WroA7GkFs4/UU0y20v7BEI/AAAAAAAACvc/ZQi9j7ePwhs/s1600/LC+-+Post5.jpg" style="opacity: 0.5;" /></a>&nbsp


• 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