search

15 junho 2020

Slide de Postagem para Blogger - 2020

15 junho 2020




Um slide funcional e responsivo para você usar no seu blog. Este slide é compatível com os mais recentes Modelos do Blogger.
*Antes de começar, não esqueça de fazer backup do seu modelo !!! 

Vamos instalar este slide no seu Blog?

clique na imagem e veja ao vivo

ALGUMAS CONSIDERAÇÕES IMPORTANTES !

  • Este Slide será instalado diretamente no seu Template.
  • Tome muito cuidado ao alterar o código fonte do seu Modelo.
  • Este slide é totalmente de minha autoria.
  • Você pode tirar duvidas pela pagina de contato do site.

Vamos lá !

obs: Você pode abrir a imagem e usar o lightbox do blogger para acompanhar as imagens explicativas.


Acesse o painel administrativo do Blogger, e abra a aba Layout


 
Clique em adicionar um GadGet

Escolha a opção: postagens mais visitadas.



Configure como preferir e salve. (escolha a posição preferida para posicionar o slide).



Agora abra o menu Temas



Clique nos tres pontinhos ao lado de 'Meu Tema'



*** Faça o backup do tema***



Após fazer o backup, repita os passos 5 e 6, e agora escolha a opção editar HTML.


Ao abrir o código, clique em ir para Widget, os quadradinhos .                  

                      


IMPORTANTE!!! -  Escolha a opção PopularPostX , o X é o numero referente a quantidade de Widget Postagens Populares você tem no seu blog, no meu caso, este que acabei de criar é o segundo, por isso PopularPost2, verifique quantos tem no seu Template, e escolha a opção adequada a ultima inclusão.



Cuidado nessa parte, você devera recolher todo o código referente ao widget, clicando na setinha correspondente a linha do código como na imagem.



Dessa forma, todo o código estará em uma única linha, selecione o código de <b:widget.. ate </b:widget>, e apague !



No lugar desse código você deverá colar o CÓDIGO 01 


    

   <b:widget  id='PopularPosts1' locked='false' title='Posts mais vistos' type='PopularPosts' version='1'>
                <b:widget-settings>
                  <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
                  <b:widget-setting name='showThumbnails'>true</b:widget-setting>
                  <b:widget-setting name='showSnippets'>true</b:widget-setting>
                  <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
                </b:widget-settings>
                <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts postsPopulares'>
          <ul class='myGalery'>
<div class='botoes'>
      <div class='anterior' onclick='alteraPost(-1)'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhipy6pvqNsZc4y62cfJuq0MJn8BqveUlG6hWDdfBpqXrbpunRH25M5c76tx-y4Y7WD7cm4uv2II8RHkTtgV4Ay5rCC12z2dN_oN0hhG4ZivrPO_Ekaf6682_oF37kQZHDO1PlEE541LZ-N/s32/arrow-left2.png'/></div>
			<div class='proximo' onclick='alteraPost(1)'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXojp2hW8uyvP0j3Qiz0efUHmcOR8LvHxx-lQ5pr33AQlJ3PRDh3w7Udyj-YI37VkAPjkMNPusxSzl1t3DZXMt8452XX-I7CxhlDFWsBISd-v3CnkVQxM9zmff5vFVIvhpXXavvrkvkqg/s32/arrow-right2.png'/></div>
		</div>
      <b:loop values='data:posts' var='post'>
      <li class='itensPosts'>
        
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
<div class='tituloPost'>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
  			<div class='linkPostSlide'><a expr:href='data:post.href'><data:blog.jumpLinkMessage/></a></div>
            </div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>


            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div>
               
                                   <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 1200,)                                  : data:post.thumbnail' var='image'>
            <img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='720' width='1280'/>
    </b:with>
      
				         </div>
      </b:if>
<div class='tituloPost'>
   <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
  <b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
   <div class='linkPostSlide'><a expr:href='data:post.href'><data:blog.jumpLinkMessage/></a></div>
           </b:if>
</div>

             
          </div>
         <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
		<script src='https://crisrocha025.github.io/slide2/DadosSlide.js' type='text/javascript'/>
  </div>
</b:includable>
              </b:widget>

    Suba o código até encontrar o começo do widget, e substitua id='PopularPost1' , pelo numero correspondente ao seu, no meu caso id='PopularPost2'.



Na imagem eu sugeri salvar, mas você pode apenar visualizar, clicando no olhinho.




Agora tecle CTRL+F e procure por '  variable  ' (sem as aspas).




Acima da primeira linha '<variable name='...' colaremos o CÓDIGO 02


     /* FONTES */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@515;600;700&family=Noto+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cuprum&display=swap');

<Group description="SlidePost">
<Variable name="bodyColor" description="Background slide color" type="color" default="#fff"  value="#ffffff"/>
<Variable name="hoverColor" description="Hover Slide Color" type="color" default="#fff" value="#cccccc"/>
<Variable name="itensColor" description="Items Slide Color" type="color" default="#fff" value="#595353"/>
<Variable name="titleColor" description="Title Slide Color" type="color" default="#000" value="#383535"/>
 <Variable name="textColor" description="Text Slide Color" type="color" default="#000" value="#4b514d"/>
 <Variable name="borderColor" description="border Slide Color" type="color" default="#000" value="#4b514d"/>
 <Variable name="linkColor" description="links Slide Color" type="color" default="#000" value="#7c7979"/>
 <Variable name="linkBtnColor" description="links Slide Buttons Color" type="color" default="#000" value="#efeded"/>
 <Variable name="linkHoverColor" description="links Slide Hover Color" type="color" default="#000" value="#a8a3a3"/>
<Variable name="shadowSlideColor" description="shadow Slide Color" type="color" default="#fff" value="#cccccc"/>

 <Variable name="titleFont" description="title Font" type="font" default="'Noto Sans SC', sans-serif" value="&#39;Cuprum&#39;, sans-serif;"/> 
 <Variable name="textFont" description="text Font" type="font" default="'Noto Sans SC', sans-serif" value="&#39;Cuprum&#39;, sans-serif;"/> 

</Group>

Agora CTRL+F novamente, e procure por ' </b:skin>' (novamente sem as aspas), e cole entre '}' e ']]' o TERCEIRO E ULTIMO CÓDIGO.


    
/*-------------------------------Slide Inicial*/
.SlideInicial{
width:95%;
height:450px;
margin:10px auto;
position:relative;
}
#PopularPosts1 .item-control{display:none;}
#PopularPosts1 h2{display:none;}
#PopularPosts1{
    width:90%;
    height:450px;
    position:relative;
    margin:0px;
}
@media (max-width: 600px){
.SlideInicial{
height: 350px;
}
#PopularPosts1{
height: 350px;
}
}
.postsPopulares{
    width: 100%;
    height:100%;
    overflow:hidden;
    position:relative;
} 
.postsPopulares ul li {
    position: absolute;
    width:100%;
    height:100%;
    transition: opacity .5s ease-in-out;
}
.postsPopulares  img{
    max-width: 200%;
    width: 150%;
    height:auto;
    transform: translate(-25%,-25%);
}
.postsPopulares ul li .tituloPost{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background: rgba(252,252,252,.7);
    padding:20px;
    text-align:center;
}

.postsPopulares ul li .tituloPost .item-title a{
    text-transform:uppercase;
	font: 30px $titleFont;
    padding-bottom:10px;
	color: $titleColor;
}
.botoes{
    background:red;
    width:100%;
    height:100%;
    font-size: 100px;
    color: $titleColor;
	font-family: $titleFont;
	
}
.proximo, .anterior{
    position:absolute;
    z-index:9;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    
}
.proximo{
    right:10px;
}
.anterior{
    left:10px;
}
@media (max-width:600px){

.postsPopulares ul li .tituloPost .item-title a{
font: 20px $titleFont;
}
.tituloPost{
width:70%;
}
.postsPopulares  img{
    max-height: 200%;
    width: auto;
    height:150%;
    transform: translate(-25%,-25%);
}
}
.linkPostSlide a{
display:block;
width:auto;
background: $itensColor;
font: 20px $titleFont;
color: $linkBtnColor;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
margin:10px auto;
text-transform:uppercase;
}

Suba o código algumas linhas até #PopularPost1, e altere para o numero correspondente, são 4 ocorrências desse código.



Vizualize, estando tudo certo; Salve !!! Prontinho !




Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)