Oculte o G+ e a Fanpage na laetral do blog.

|


Esse é um ótimo recurso de organização,aonde dará mais espaço na sua lateral do blog, sem perder as Redes Sociais do seu blog.


Ocultando Fanpage



Olá,meus amigos!!!

A Agenda dos Blogs tem sempre uma dica super especial para você e nessa postagem estarei ensinando COMO OCULTAR A FANPAGE E O G+ NA LATERAL DO BLOG.

Eles ficarão em formato de botão e dará um ar de organização no seu blog.


Então...



porque então eu não coloquei na Agenda dos Blogs?
Eu não coloquei,porque o slide que há no topo do meu blog é muito pesado e junto com esse recurso, estava demorando demais para aparecer.

Mas esse recurso é muito válido, pois dará mais espaço na sua lateral do blog.

Créditos para o blog Templates e Acessórios.

Ocultando o G+ na lateral do blog.

Copie o código abaixo e cole em HTML/JAVASCRIPT.
!-- Widget do Google Plus -->
<style>
img, a {
border: 0;
}
#on {
visibility: visible;
}
#off {
visibility: hidden;
}
#google_plus_right {
z-index: 10003;
background-color: #F2F2F2;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-right: 2px solid #0056a0;
border-left: 2px solid #0056a0;
width: 290px;
height: 250px; position: fixed;
right: -294px;
}
#google_plus_right_img {
position: absolute; top: -2px;
left: -33px;
border: 0;
}
#google_plus_div {
width: 290px;
height: 250px;
overflow: hidden;
margin-left: 5px;
margin-top: 1px;}
#NBT_div {
width: 300px;
height: 97px;
overflow: hidden;
}
#google_plus_left {
z-index: 10003;
background-color: #006ec9;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-left: 2px solid #0056a0;
border-right: 2px solid #0056a0;
width: 290px;
height: 250px;
position: fixed;
left: -294px;}
#google_plus_left_img {
position: absolute;
top: -2px;
right: -33px;
border: 0;
}

</style>




<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function ()

{ jQuery("").hover(function ()
{  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("").stop(true, false).animate({   right: -200  }, 500); }); jQuery("").hover(function () {  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("").stop(true, false).animate({   right: -250  }, 500); });


 jQuery("#google_plus_right").hover(function () {  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("#google_plus_right").stop(true, false).animate(
{   right: -294  }, 500); });});</script><br />


<div id="on">
<div id="google_plus_right" style="top: 1%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="http://2.bp.blogspot.com/-e2uAzeEjWU4/UTHxwZv6O_I/AAAAAAAAACo/IIkUjVUrtus/s1600/NBTgoogle_plus_right.png" />
<div style="float: left; margin: 10px 10px 10px 0;">     <a href='http://newbloggertips.com'>
<img alt='Tips Tricks And Tutorials' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>
<div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/NÚMERO DE SEU GOOGLE PLUS"
data-source="blogger:blog:followers" data-width="270">  </div>  <script type="text/javascript">    
(function() {          window.___gcfg = {'lang': 'en'};          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>
</div>
</div>

Aonde está em VERMELHO,altere colocando o número do seu Google+, que fica no seu perfil na barra de endereço.


Ocultando a Fanpage na lateral do blog.

<!-- Menu widget Facebook -->
<style>
img, a {
border: 0;
}
#on {
visibility: visible;
}
#off {
visibility: hidden;
}
#facebook_div {
width: 300px;
height: 340px;
overflow: hidden;
}


/* right side style */
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 300px;
height: 353px; position: fixed;
right: -305px;
}
#facebook_right img {
position: absolute;
top: -2px;
left: -35px;
}
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden; position: static;
height: 300px;
left: -2px; top: -3px;
}
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 300px;
height: 250px;
position: fixed;
left: -305px;
}
#facebook_left img {
position: absolute;
top: -2px;
right: -35px;
}
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px;
}

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function ()

{ jQuery("#facebook_right").hover(function ()
{  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("#facebook_right")
.stop(true, false).animate({   right: -305  }, 500); }); jQuery("").hover(function () {  jQuery(this)
.stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("")
.stop(true, false).animate({   right: -250  }, 500); }); jQuery("")
.hover(function () {  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("").stop(true, false).animate(
{   right: -294  }, 500); });});</script><br />

<div id="on"> <div id="facebook_right" style="top: 12%;">


<div id="facebook_div">
<img alt="" src="http://3.bp.blogspot.com/-wQUpmiGwynE/UNHJaesfqeI/AAAAAAAAItg/JQlnTuoFRnQ/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=AQUI O ENDEREÇO DE SUA PÁGINA DO FACEBOOK?ref=hl;
width=300&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"
style="border: none; height: 346px; overflow: hidden; width: 300px;"></iframe>
</div>
</div>
</div>


 Na parte em VERMELHO, alterar colocando o endereço da sua Fanpage.

Na próxima postagem, como ocultar o Twitter e o Instagram na lateral do blog.

Veja como ficou no meu blog MEGA CÓDIGOS

Comentários
8 Comentários
                       
                                                   
                                                                           

8 comentários

  1. Oi Magda, tudo bem? Passando pra ver as suas boas dicas!!! Quando puder, me faça uma nova visitinha será um prazer www.chiqueter.com.br. Beijos!

    ResponderExcluir
  2. É uma ótima alternativa pra dar mais espaço no blog, como sempre uma ótima dica para os blogueiros, bjs.

    ResponderExcluir
  3. Oi Magda! Amiga como sempre trazendo dicas super mais pra nós, adoro !
    Grande beijo♥

    ResponderExcluir
  4. Boa Tarde Magda!que dica genial,realmente é um ótimo recurso para nossos blogs,melhora a organização com certeza.Obrigada por compartilhar e ajudar a melhorar nossos blogs.Bj♥

    ResponderExcluir
  5. Que dica excelente!
    Eu adoro essas postagens que dão dicas pra blogs... eu já peguei um monte aqui que me ajudaram muito!
    Continua que eu acompanho! =)

    ResponderExcluir
  6. Oi amiga td bem gostei da postagem td muito bem explicado vc sempre arrasando beijos

    ResponderExcluir
  7. Esses códigos que deixam nossos blogs mais organizados são sempre bem vindos,
    só tenho a agradecer por estar sempre nos auxiliando passando a nós Magda!

    Bjos
    Minda ❤ 😍

    ResponderExcluir

Deixe um comentário, que ficarei muito feliz!!!!!
Abraços á todos!!!!