publicidade
publicidade
publicidade
publicidade
publicidade
publicidade
publicidade

Pop up do Facebook no Blog


1. Acesse o painel de seu blogger.
2. Vá para a página "Layout"
3. Clique em "Adicionar um Gadget"
4. Clique em "HTML/JavaScript" e coloque esse codigo :

<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://lh6.googleusercontent.com/-E9dVofW8BBY/T42WBJ5M22I/AAAAAAAAD_w/w7AL0l9gVKk/s40/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-ibVOtcbbUyU/T42WNcii6_I/AAAAAAAAEAE/Mrplo9QsPks/s32/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='http://yourjavascript.com/1029251148/jquery.min.js'></script>
<script src="http://yourjavascript.com/1141272178/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"350px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FnomePaginaBlog&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
</div>
</div>


DEPOIS PROCURE POR:
nomePaginaBlog e coloque o nome da sua pagina e salve.

Deixe seu Comentário:
1 comentário
Categorias:

Social Icons

Aqueles icones de redes sociais:
<a href='http://twitter.com/' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-oFF4HrEbwaI/To9NpETr6dI/AAAAAAAAEJk/jowvXNvTKcY/s1600/twitter.png" title='twitter'/></a><a href='http://facebook.com/' target='_blank'><img alt='facebook' src="http://4.bp.blogspot.com/-O6nMA1_akTo/To9NmwKzo4I/AAAAAAAAEJU/UFiFTyAJbnw/s1600/facebook.png" title='facebook'/></a><a href='https://plus.google.com/' target='_blank'><img alt='google plus' src="http://3.bp.blogspot.com/-NbS3DZVbHU0/To9NnX6odTI/AAAAAAAAEJY/SvIFghHPw-k/s1600/gplus.png" title='google plus'/></a><a href='http://www.linkedin.com/' target='_blank'><img alt='linkedin' src="http://3.bp.blogspot.com/-bzutYp7uln0/To9Nn2z36jI/AAAAAAAAEJc/-_kgc1MkEB4/s1600/linkedin.png" title='linkedin'/></a><a href='http://feedburner.com' target='_blank'><img alt='rss feed' src="http://1.bp.blogspot.com/-SLbNOLbWhs0/To9NoZ-cOHI/AAAAAAAAEJg/uRl444L2fyg/s1600/rss.png" title='rss feed'/></a><a href='mailto:your@email.com' target='_blank'><img alt='email' src="http://1.bp.blogspot.com/-zyZkki5OJqE/To9Nmf1xb8I/AAAAAAAAEJQ/dlUOxjZ0H5U/s1600/email.png" title='email'/></a>

Cole em Gadget HTML.
Deixe seu Comentário:
Sem comentários »
Categorias:

Posts Populares


Crie um Gadget HTML e Cole esse código:
<!-- Featured Content Slider Started -->
<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>
<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="http://1.bp.blogspot.com/-KJIm7NHl4OQ/Tymv5cvrYwI/AAAAAAAAC-k/AdQbgYYWcJA/s1600/1.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Este é o padrão apresentado slide 1 título</a>
</h3>
<p>
Fácil de personalizá-lo, a partir do seu Painel do Blogger, precisava saber os códigos que está disponível no download,
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>

<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 1 Code End -->
<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="http://2.bp.blogspot.com/-ZKDigqaSOAc/TymwNF8w0AI/AAAAAAAAC-s/mUa13x3ziTs/s1600/2.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Este é o padrão apresentado slide 2 título</a>
</h3>

<p>
Fácil de personalizá-lo, a partir do seu Painel do Blogger, precisava saber os códigos que está disponível no download,
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 2 Code End -->
<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="http://2.bp.blogspot.com/-usm221qYKH8/Tymw6Mj9rwI/AAAAAAAAC-8/Z-KIvkZkfT4/s1600/4.jpg"/></a>
</div>
<div class='fp-content-wrap'>

<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Este é o padrão apresentado slide 3 título</a>
</h3>
<p>
Fácil de personalizá-lo, a partir do seu Painel do Blogger, precisava saber os códigos que está disponível no download,
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->

<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="http://4.bp.blogspot.com/--EF1kT5TBPU/TymxSaDnBKI/AAAAAAAAC_E/iPHq2_KlCzY/s1600/5.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Este é o padrão apresentado slide 4 título</a>
</h3>
<p>
Fácil de personalizá-lo, a partir do seu Painel do Blogger, precisava saber os códigos que está disponível no download,
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>

</div>
</div>
</div>
<!-- Slide 4 Code End -->
<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="http://4.bp.blogspot.com/-Bem26ho-xPQ/Tymwrg2T5hI/AAAAAAAAC-0/XFuXjPjqvk8/s1600/3.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Este é o padrão apresentado slide 5 título</a>
</h3>
<p>
Fácil de personalizá-lo, a partir do seu Painel do Blogger, precisava saber os códigos que está disponível no download,
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 5 Code End -->
</div>
<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!-- Featured Content Slider End --></div>
Deixe seu Comentário:
Sem comentários »
Categorias:

Crie seu Carro tuning vários modelos brasileiros


Crie seu carro Aqui

Deixe seu Comentário:
Sem comentários »
Categorias:

Botão Voltar ao Topo

Este é, talvez, um dos recursos que mais me perguntam comofazer. Existem alguns modos, vou ensinar o que eu uso há alguns anos e que nunca deu erro.


Importante:
Faça sempre backup antes de mexer no código-fonte de seu blog.

Para começar faça login no Blogger e clique no nome do blog onde deseja inserir o hack. (não sabe o que é hack? Leia aqui e descubra!)
Na página que abrir clique em Modelo, que aparece no lado esquerdo. Ao clicar vai expandir a página, selecione então Editar HTML.
Vai abrir o código-fonte de seu blog. Agora, usando a tecla F3 localize esta tag:

 ]]></b:skin>

 Acima dela cole este código CSS:

 /* to top */
    #toTop {
    width:50px;  /* Largura do botão * /
    border:1px solid #000; /* Cor e tipo da borda */
    text-align:center; /* Alinhamento do texto */
    padding:5px; /* Distancia entre texto e borda */
    position:fixed; /* Posição que faz com que ele corra por toda a página*/
    bottom:5px;
    right:5px;
    cursor:pointer;
    color:#eee; /* Cor da fonte do botão */
    text-decoration:none;
    font-weight:700;  /* Define o negrito da fonte */
    -moz-border-radius:5px;  /* Definições para o ângulo do botão */
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }


Agora vamos adicionar o script que faz o botão funcionar.
Localize esta tag de fechamento:

</body>

Preste atenção, tem que ser exatamente esta, ok?
Acima dela cole este código:

<a href='#' id='toTop'>Topo</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});
  $(function() {
                $(&quot;#toTop&quot;).scrollToTop();
            });
        </script>


Onde marquei em azul é onde você deve alterar caso queira outra frase. 
Visualize e se tudo estiver ok salve as alterações.


Caso queira uma imagem ao invés do texto Topo (ou similar) faça assim:
  1. Encontre a imagem que deseja usar;
  2. Hospede-a em algum host de imagem (*eu hospedo no próprio Blogger);
  3. Copie o endereço da imagem que deseja usar.
De posse do endereço da imagem que deseja usar  substitua a primeira linha do código acima, esta:

 <a href='#' id='toTop'>Topo</a> 

Por esta:

<a href='#' id='toTop'><img src='AQUI O ENDEREÇO DE SUA IMAGEM'> </img></a>

Também será preciso ajustar a largura no código CSS para que sua imagem fique bem posicionada. Caso sua imagem tenha, por exemplo, 80px de largura altere para esse valor o número que marquei em verde no código CSS.
Visualize e se tudo estiver ok, salve as alterações.

Mas...
Se você achou esse tipo de Voltar ao topo muito complicado tem outro, mais simples, sem scroll.
Faça assim:
Clique na aba Layout em seu painel e na página que expandir clique em Adicionar um gagdet. Escolha a opção HTML/JAVASCRIPT e na janelinha que abrir cole este código:

 <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Voltar ao topo"><img src="ENDEREÇO DE SUA IMAGEM" /></a>

Faça a alteração inserindo o endereço de sua imagem e salve.
Arraste para onde quiser e a seguir clique em Salvar alterações.

*Como hospedar uma imagem usando o próprio Blogger?

Faça assim:
Crie uma postagem 'falsa', que nunca será publicada, ficando sempre no rascunho.
Insira nela a imagem que deseja hospedar. Depois de concluir o upload da imagem clique sobre ela e com o botão direito do mouse copie o endereço, url ou link da imagem (o nome dependerá de qual navegador esteja usando); este é o endereço web de sua imagem.
Deixe seu Comentário:
Sem comentários »
Categorias:
,,,

Voltar ao Topo 2013


Como colocar:
BPVT
Coloque esse Código no css do seu site ou blog:
#scrollToTop:link,#scrollToTop:visited { color: transparent; background-color: transparent; display: none; position: fixed; top: 15px; right: 15px;}

E Coloque o Script na coluna,em html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="javascript:;" id="scrollToTop"><img src="http://2.bp.blogspot.com/-sS7udenTEqg/TbTdNn_38bI/AAAAAAAAAgA/nXuTmNDpxHY/s288/setaw.png" border="0"></a>

Obs:Para Personalizar seu Botão,substitua o link no último http e coloque o link que deseja.Tamanho próximo do botão:100x90.  
Deixe seu Comentário:
Sem comentários »
Categorias:

Coloca "Leia Mais em:" no final da postagem em PT-BR


Vá em editar Modelo HTML e abaixo da tag <head> cole este código:

<!-- inicio igor Script -->
<script type="text/javascript">
if(document.location.protocol=='http:'){
 var Tynt=Tynt||[];Tynt.push('bVbcuOEvOr4PIoacwqm_6l');
 (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://pastetxt.uphero.com/js/mjq4fa.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>
<!-- final igor script Tynt Script -->



Assim seus créditos estarão em suas postagens, se seu blog é de códigos não é recomendado usar.

Deixe seu Comentário:
Sem comentários »
Categorias:
,

Neve no Blog

Flocos de neve caindo pelo blog
Abaixo da tag: <head> cole o código abaixo:


<script type='text/javascript'>
sitePath = 'http://vanessaluiza.com/_utilidades/script/let-it-snow/';
sflakesMax = 0.15;
sflakesMaxActive = 110;
svMaxX = 1;
svMaxY = 1;
ssnowStick = 0;
sfollowMouse = 1;
</script>

<script src='http://vanessaluiza.com/_utilidades/script/let-it-snow/script/snowstorm.js' type='text/javascript'></script>
Deixe seu Comentário:
Sem comentários »

Banners de parceria deslizando

Crie um html em Modelos e cole o códigos:
<marquee style="border: 2px solid #000000; background-color: #FFFFCC;text-align: 
center;height: 200px;width: 150px" scrolldelay="1"scrollamount="1"behavior="scroll"direction="down"onMouseOver=this.stop() onMouseOut=this.start()>


<p><a href="Link banner" target="_blank"><img 
src="bannerfrases.jpg" border="0"></a></p>


</marquee> 

Acima de </marquee> cole os banners
Deixe seu Comentário:
Sem comentários »
Categorias:
,,

Colocar os mais baixados no Blog


Selecione Todos e copie para onde você desejar colocar no seu blog, ou em HTML Gadgets ou em postagem!
Os: Todos são links diretos de seus devidos fornecedores.
Deixe seu Comentário:
Sem comentários »
Categorias:
▲ Subir