Mostrando postagens com marcador Facebook Deslizante. Mostrar todas as postagens
Mostrando postagens com marcador Facebook Deslizante. Mostrar todas as postagens

quinta-feira, 2 de outubro de 2014

Redes Sociais em Forma de Coração Flutuante

Nesta postagem compartilho com vocês este outro código bem interessante. O código é bem chamativo e sendo assim, você poderá conseguir muito mais seguidores nas suas redes sociais.


Para coloca-lo no blog...Entre em "Modelo" - "Editar HTML" e procure pela tag
</head>
Tendo encontrada a tag, cole ACIMA dela o seguinte código
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating image script- By Virtual_Max
* Modified by Dynamic Drive for various improvements
***********************************************/

var vmin=2;
var vmax=5;
var vr=2;
var timer1;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;
}

function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;
}
else if (document.body){
pageX=iecompattest().scrollLeft;
pageW=iecompattest().offsetWidth-40;
pageY=iecompattest().scrollTop;
pageH=iecompattest().offsetHeight-20;
} 

chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;

chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;

if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();
}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();
}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();
}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();
}

document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";


chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
}
}


function pagestart(){
//Configurações
corazon1=new Chip("corazon1",47,68);
corazon2=new Chip("corazon2",47,68);
corazon3=new Chip("corazon3",47,68);
corazon4=new Chip("corazon4",47,68);

//Configurações
movechip("corazon1");
movechip("corazon2");
movechip("corazon3");
movechip("corazon4");
}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>
Agora, procure pela tag
<body>
Ou
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Tendo encontrado, ABAIXO dela cole o seguinte código
<!-- Inicio dos corações flutuando pela página do blogger -->
<div id='corazon1' style='position:absolute; z-index:80; left: -500px; width:47px; height:68px;'>
<a href='http://facebook.com/dicashot'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzoiKacj9wp5t0s1CczdbgjffMoROAQYxWr81XYcl-AcHGdl_i-Bf-_lnvOgzdmN-ULMM2KOcuMd8B7aIHa9XNsoNWDuwCYD0bPPFLgLCRI0LhbjGPbF2KlP4LMR8VB5JOfWUqC57jouc/'/></a>
</div>

<div id='corazon2' style='position:absolute; z-index:81; left: -500px; width:47px; height:68px;'>
<a href='http://twitter.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKqsr49ttc73KcdXluqodTZuAcW7LTY6oVz9WqtSkkT-sM1ebZkVv8BAvpNF2m3BRBIHoQUPTYYT5nywjzyCcXWhP5FDIwbl0qnCfZJ3SM4I-g7GhyphenhyphenDerE59xxaKGpZ878i8_rtUh36aY/'/></a>
</div>

<div id='corazon3' style='position:absolute; z-index:82; left: -500px; width:47px; height:68px;'>
<a href='http://Nome do seu blog.blogspot.com/atom.xml'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7eygPcbmjx5Q1jXtUovJoPVqkXz1acox7lWjYzrSZX8jaf_iTsda_fBkHuJ6CbKW1XSig-3X9j0lMec15FGEpJL_TXHutmCMu0anbo6DDnDr2vJtzFt1nLQrbTQ71TAeI5812Jim6J3k/'/></a>
</div>

<div id='corazon4' style='position:absolute; z-index:83; left: -500px; width:47px; height:68px;'>
<a href='URL'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8HktawWpRVCzCBQtxR57T67GBf3zee8KeprzDi2RApLv35BqFMUY-0UtSGWwJQmU47pmB2G59VG_ewEo7LtdRhQpXtPksoFEzVaVLEd627RJs5DAKFoj7XCLyTTwhK6uhMItdL9ijEtU/'/></a>
</div>
<!-- Fim de Corações flutuando pela página do blogger -->
Tendo feito isto, está pronto!!!

quinta-feira, 7 de novembro de 2013

Subir a sidebar+Facebook Deslizante

Para subir a sidebar :
1. Vá em Design >> Editar HTML >> Tecle F3 e pesquise por :

.main-inner .column-left-outer {  (se sua sidebar for do lado esquerdo)
.main-inner .column-right-outer {  ( se sua sidebar for do lado direito)

2. Quando encontrar, cole abaixo do código ..
margin-top: -100px;
Antes de Salvar é bom visualizar, se -100px estiver na altura que você quer é só salvar
mas se não, é só mudar deixando no negativo, até que fique bom pra você.. Então
Espero que tenha ajudado para quem pediu na ask.. 

Créditos desse tutorial aqui !
------------------------------------------
Agora vamos para o próximo tuto .. 

Facebook deslizante ....

Vá no seu HTML, tecle F3 e pesquise por 
</head>
e logo acima cole :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Salve ! Agora adicione um gadget HTML/JavaScript e cole:
 <script type="text/javascript">
//<!--
$(document).ready(function() {$(".box-curtir-flutuante").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.box-curtir-flutuante{background: url("url-da-imagem") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.box-curtir-flutuante div{border:none;position:relative;display:block;}
.box-curtir-flutuante span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.box-curtir-flutuante span a{color: #808080;text-decoration:none;}
.box-curtir-flutuante span a:hover{text-decoration:underline;}
</style><div class="box-curtir-flutuante" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=link-da-sua-página&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe></div></div>
Em Url da imagem você cola a Url da imagem que quer para que fique de acordo com
a cor do seu blog, e onde tem link da sua página, você coloca o link da sua página ~obvio néh~
Já está tudo destacadinho de Negrito lá no código !!

Mas emfim, também trouxe imagens para vocês vejam