21 de mar de 2013

Widget do Instagran oculto na lateral do blog





Para quem tem conta no Instagran e gosta de comaprtilhar suas fotos, eis aqui um widget no formato dos outros widgets apresentados nas postagens anteriores. Suas fotos ficam ocultas na lateral do blog. Fácil de implementar mas é necessário além da conta no Instagran, abrir uma conta no site Web Instagran para que seu widget funcione. Depois copie o código abaixo colando em HTML/Javascript, em seguida, coloque o seu nick de usuário do Instagran e pronto.




Meus artesanatos, decorações e comidinhas... Conheça meu blog: Festa, Sabor e Decoração

Agora clique em Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.



<!-- Widget do instagran -->
<style>
img, a {
border: 0;
}
#on {
visibility: visible;
}
#off {
visibility: hidden;
}

#instagran_div{
width: 400px;
height: 230px;
overflow: hidden;
}

#instagran_right {
z-index: 10004;
border: 6px solid #493830;
background-color: #D9D2C8;
width: 410px;
height: 220px;
position: fixed;
right: -430px;
}
#instagran_right_img {
position: absolute;
top: -2px;
left: -70px;
border: 0;
}

#instagran_left_img {
position: absolute;
top: -2px;
right: -70px;
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: -430  }, 500); }); jQuery("#instagran_right").hover(function () {  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("#instagran_right").stop(true, false).animate({   right: -430  }, 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="" style="top: 12%;">



<div id="on">
<div id="instagran_right" style="top: 18%;">
<div id="instagran_div">
<img id="instagran_right_img" src="http://3.bp.blogspot.com/-f5YAR2OdjEY/UUtBjOBezxI/AAAAAAAAT68/ITELErgVisk/s1600/Active-Instagram-3-icon.png" width="60px"  />
<iframe src="http://widget.stagram.com/in/AQUI SEU NICK NO INSTAGRAN/?s=100&w=4&h=2&b=0&p=5" allowtransparency="true" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:400px; height: 210px"></iframe>


</div>
</div>
</div></div></div>


Nenhum comentário:

Postar um comentário

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube