segunda-feira, 16 de novembro de 2015

Twitter card Widget para Blogger

twitter-card-widget-blogger


Hoje vamos mostrar como adicionar twitter card widget no seu blogger isso é fantástico com ele você pode mostrar quantos seguidores voce tem bem como quantos tweets tem um layout diferenciado e pode ser usado no seu blogger para adicionar isso siga os passos abaixo


Para adicionar CSS 

faça login no blogger logo em seguida em menu procure por modelo então >> Editar/HTML
com as teclas combinadas CTRL+F busque por ]]></b:skin> logo acima disso cole o seguinte código

@import url(http://fonts.googleapis.com/css?family=Capriola);*{
  box-sizing: border-box;
  font-family: Calibri, sans-serif !important;
}
html{
  height: 100%;
  width: 100%;
  background:linear-gradient(to bottom right,yellow,purple),
             url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/45816/IMG_00000419.jpg');
  background-size: cover;
  background-blend-mode:overlay; 
  background-blend-mode:hue; 
  -webkit-transition: all 0.4s ease-in-out;
}
.widget{
  height: 175px;
  width: 500px;
  position: absolute;
  bottom: 15%;
  left: calc(50% - 250px);
  border-radius: 5px;
  overflow: hidden;
}
.pic{
  height: 100%;
  width: 35%;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/45816/codepen-<div class="widget">
  <div class="pic">

  </div>
  <div class="details">
    <div class="triangle"></div>
    <h1 class="title">Brian Jacklin</h1>
    <h2 class="tagline">Front-End Web Developer</h2>
    <div class="social">
      <ul>
        <li>8,000 <p>Tweets</p></li>
        <li>830 <p>Following</p></li>
        <li>581 <p>Followers</p></li>
      </ul>  
    </div>
  </div>
  
</div>pic.png'); 
  background-size: cover;
  float: left;
  position: relative;
}
.details{
  height: 100%;
  width: 65%;
  float: left;
  position: relative;
  padding: 10px;
  background: rgba(255,255,255,0.85);
}
.title{
  font-size: 22pt;
  color: #f7941e;
}
.tagline{
  font-size: 14pt;
  color: #666;
}
.triangle{
  position: relative;
  top: 70%;
  left: -20px;
  width: 0; 
height: 0; 
border-top: 10px solid transparent;
border-bottom: 10px solid transparent; 
border-right:10px solid rgba(255,255,255,0.85); 
}
.social{
  position: absolute;
  width: 100%;
  bottom: 15%;
}
.social li{
  margin-left: 3%;
  float: left;
  width: 30%;
  text-align: left;
}
li{
  color: #0099cc;
  font-size: 14pt;
}
li > p{
  color: #666;
  font-size: 8pt;
  text-transform: uppercase;
}

Agora para adicionar o html 
Você pode ir em layout adicionar novo gadget procure por Javascript/HTML ou insira direto no post na aba html o seguinte código.

<div class="widget">
  <div class="pic">

</div>
  <div class="details">
    <div class="triangle"></div>
    <h1 class="title">SEU NOME TWITTER</h1>
    <h2 class="tagline">DESCRIÇÃO</h2>
    <div class="social">
      <ul>
        <li>8,000 <p>Tweets</p></li>
        <li>830 <p>Following</p></li>
        <li>581 <p>Followers</p></li>
      </ul>  
    </div>
  </div>
  
</div>

Nota: Não esqueça de trocar o que esta em amarelo pelo link de sua imagem bem como nome do seu twitter e descrição 
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner