Slide vertical para blog - Rede Social | Quero Dicas Quero Dicas : Slide vertical para blog - Rede Social

Quero Dicas : Slide vertical para blog - Rede Social

Slide vertical para blog - Rede Social

|




Sua sidebar está cheia de gadgets? Precisa de espaço? Essa caixa desliante é ideal para poupar espaço na sua sidebar, além de bonita e pratica também.

TUTORIAL

1 - Vá em "Layout", "Adicionar Gadget" e selecione "HTML/Javascript"

2 - Copie e cole o código abaixo

 
<div class="widget-content">
<style>
#slide-vertical{text-align:left; width:98%;}
.slideHolder { width:100%; margin:0;padding:2px;font-family:georgia, serif; float:left;}
.slideOuter { width:100%; overflow:hidden; margin:0;}
.slideOuter .slide {padding:0; margin:0; list-style:none; width:100%; overflow:hidden;}
.slideOuter .slide li {display:block; float:left; height:78px;border-bottom:2px solid #f0f0ed; width:100%; overflow:hidden;transition: 0.75s;}
.slideOuter .slide.current li {height:45px;}
.slideOuter .slide li.p1{background:#1874CD;}
.slideOuter .slide li.p2{background:#CD3333;}
.slideOuter .slide li.p3{background:#00B2EE;}
.slideOuter .slide:hover li.p1,
.slideOuter .slide:hover li.p2,
.slideOuter .slide:hover li.p3,
{height:38px;}
.slideOuter .slide:hover li.p1:hover {height:315px;}
.slideOuter .slide:hover li.p4:hover {height:330px;}
.slideOuter .slide:hover li.p2:hover {height:330px}
.slideOuter .slide:hover li.p3:hover {height:330px}
.slideOuter .slide li span {padding:0 15px; margin:0; font-size:18px;font-weight:700;line-height:48px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);cursor:pointer}
.slideOuter .slide li {color:#fff;}
.slideOuter .slide li.p2 span,
.slideOuter .slide li.p3 span {color:#fff;}
.slideOuter .slide li.p2 .content {padding:0 15px;margin:0;width:100%;}
</style>

<div id="slide-vertical">
<div class="slideHolder">
<div class="slideOuter">
<ul class="slide current">
<li class="p1">
<div>
<span> Siga no Facebook</span>
<div class="content">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOMEDASUAFANPAGE&width=240&colorscheme=light&connections=15&stream=false&header=false&height=300" style="border:none; overflow:hidden; width:266px; height:300px;"></iframe> </div>
</div>
</li>
<li class="p2 current">
<div>

<span>Siga no Google+ </span>
<div class="content">
<div class="g-plus" data-action="followers" data-height="260" data-source="blogger:blog:followers" data-href="https://plus.google.com/u/0/ID DO GOOGLE PLUS" data-width="230">

</div>
<script type='text/javascript'> 
(function() { 
window.___gcfg = {'lang': 'pt-br'}; 
var po = document.createElement('script'); 
po.type = 'text/javascript'; 
po.async = true; 
po.src = 'https://apis.google.com/js/plusone.js'; 
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(po, s); 
})(); 
</script></div>
</div>
</li>
<li class="p3">
<div>
<span>Siga no Twitter</span>
<div class="content">
<div id="twitter-box">
</div>
<script>
var tw_user = 'ID DO TWITTER';
var tw_width = 300;
var tw_height = 325;
var no_face = 9;
(function() {
var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
tw_box.src = '//www.twitter-fanbox.com/tw.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
})();
</script>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

 

3 - Agora fala as alterações:

► No Facebook - Altere NOMEDASUAFANPAGE, pelo nome da sua fan page, exemplo:
https://www.facebook.com/Quero.Dicas
O que deixei em vermelho, é o que será usado

► No Google+ - Altere ID DO GOOGLE PLUS, pelo nome do seu perfil ou pagina, exemplo:
https://plus.google.com/u/0/+BiaBarros-simsFree/posts
O que deixei em vermelho, é o que será usado

► No Twitter - Altere ID DO GOOGLE PLUS, pelo nome do seu, exemplo:
https://twitter.com/BiaBarros_BB
O que deixei em vermelho, é o que será usado

Esta caixa está configurada para o tamanho da sidebar de 300 e suas redes estão:

• No Facebook -  width:266px; height:300px;
• No Google+ - data-height="260" e data-width="230"
• No Twitter - var tw_width = 300; e var tw_height = 325;

Faça as alterações necessárias para encaixar suas redes sociais, dentro do seu slide vertical.

Beijinhos
Me Contrate!

Compartilhe


Nenhum comentário:

Postar um comentário


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Por favor, não adicione links externos nos comentários.

Beijinhos ♥

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir