Slide vertical para blog - Rede Social | Quero Dicas | Tutoriais para seu blogs


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.
Clique e veja no botão de demostração

Gostou? Então vamos adicioná-la

  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.

Espero que tenham gostado. Beijinhos
Me Contrate!


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

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.