Mini Pop do Facebook

Essa Mini Pop up e Muito Legal Para Divulgamos Nossa Web rádio quero Compartilha com Vocês

Ao Clica Em curti Ajuda Nossa web radio a chega a Mais Amigos

Sendo Assim um Nosso Fan da Nossa web rádio.

PARA ADICIONA UMA MINI POP UP 

QUE APARECE QUANDO ROLA O MOUSE ABAIXO

 PEDIDO PARA CURTI  A SUA PAGINA OU SITE 

(OBS):NÃO ESQUECER DE MUDA O ENDEREÇO

PARA O SEU BLOGUE AONDE ESTA ESCRITO "NOMEDOSEUBLOG"

Esse Botão e Bem Fácil de instala
 você vai Fazer os seguintes passos.

1º Passo - Acesse o Painel do seu Blog e clique Layout.

2º Passo - Em seguida clique Em Adiciona um Gadget.

3º Passo - Agora Localize HTML/JavaScript como Essa Image Abaixo.

4º Passo - Agora cole o seguinte código:

Depois Salve e Veja como Ficou.

<div class='clear'> </div> <style> #mbsocial{background:#f3f3f3;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:100px;} .getmore a{display: inline-block;font-weight: normal;text-decoration: none;font-size:9px;color:#333!important; float:right;} .getmore a:visited{ color:#ddd;} </style> <div style="display: none;" id="mbsocial"> <a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBsocial();">(X)</a> <span style="font-family: Verdana; font-size: 15px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;font-weight:bold;color:#555;">Curta nossa Fan Page!</span><br /> <a> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOMEDOSEUBLOG&width=230&height=62&show_faces=false&colorscheme=light&stream=false&border_color&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:62px;" allowtransparency="true"></iframe> </a> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mbsocial").show("slow");else $("#mbsocial").hide("slow");});function closeMBsocial(){$('#mbsocial').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>

Botão ir ao top Modelo 2 com poucos efeitos JQuery

Esse Botão e Bem Fácil de instala ele você vai Fazer os seguintes passos.

1º Passo - Acesse o Painel do seu Blog e clique Layout.

2º Passo - Em seguida clique Em Adiciona um Gadget.

3º Passo -  Agora Localize HTML/JavaScript como esse imagem Abaixo.

4º Passo - Agora cole o seguinte código:

Depois salva e Veja como Ficou.

Veja Exemplo:

Se Quiser Mudar e Copia a Url da Imagem.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript">//** jQuery Scroll to Top Control script- (c) I made this script myself (Kyle Monk) and it is hosted on my personal site so would appreciate if you followed my blog at kylemonk.tumblr.com if you use it or for details on how to change the location. //** Graphic originally from tumbler dashboard, for details on how to change graphic colour, contact me at kylemonk.tumblr.com //** v1.1 (April 7th, 10'): //** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead. //** 2) Fixes scroll animation not working in Opera. var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5SeaW6O81ih8Ewlbq0B2o-mZ4ujLRE9tWDnxohp_EH9W8r-MNr-IWq5sSgehCL8zqLTLpnJG7kuFG6fa784qT4qGVK2ujiUaW0Nfewxw0Rgi74AQVuS0DUTkCIDUoa35r_QAkYG4wvzcc/h120/btn.png" style="filter:alpha(opacity=70); -moz-opacity:0.7;" width="-90"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:40, offsety:35}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol"> '+mainobj.controlHTML+'</div> ') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'back to top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init()</script>

Botão de Rede Social Flutuante Com Efeito JQuery No lado Esquerdo do Blogue!

Esse Botão e Bem Fácil de instala ele você vai Fazer os seguintes passos.

1º Passo - Acesse o Painel do seu Blog e clique Layout.

2º Passo - Em seguida clique Em Adiciona um Gadget.

3º Passo -  Agora Localize HTML/JavaScript como esse imagem Abaixo.

4º Passo - Agora cole o seguinte código:
Depois salva e Veja como Ficou.

<style type='text/css'> @import url(http://weloveiconfonts.com/api/?family=entypo); [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } /* ---------- GENERAL ---------- */ #social-sidebar a { text-decoration: none; } #social-sidebar ul { list-style: none; margin: 0; padding: 0; } /* ---------- Social Sidebar ---------- */ #social-sidebar { left: 0; margin-top: -75px; /* (li * a:width) / -2 */ position: fixed; top: 50%; } #social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; } #social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; } #social-sidebar ul li a { background: #121212; color: #fff; display: block; height: 50px; font-size: 18px; line-height: 50px; position: relative; text-align: center; width: 50px; } #social-sidebar ul li a:hover span { left: 130%; opacity: 1; } #social-sidebar ul li a span { border-radius: 3px; line-height: 24px; left: -100%; margin-top: -16px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; padding: 4px 8px; position: absolute; -webkit-transition: opacity .3s, left .4s; -moz-transition: opacity .3s, left .4s; -ms-transition: opacity .3s, left .4s; -o-transition: opacity .3s, left .4s; transition: opacity .3s, left .4s; top: 50%; z-index: -1; } #social-sidebar ul li a span:before { content: ""; display: block; height: 8px; left: -4px; margin-top: -4px; position: absolute; top: 50%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 8px; z-index: -2; } #social-sidebar ul li a[class*="twitter"]:hover, #social-sidebar ul li a[class*="twitter"] span, #social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; } #social-sidebar ul li a[class*="gplus"]:hover, #social-sidebar ul li a[class*="gplus"] span, #social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; } #social-sidebar ul li a[class*="tumblr"]:hover, #social-sidebar ul li a[class*="facebook"]:hover, #social-sidebar ul li a[class*="facebook"] span, #social-sidebar ul li a[class*="facebook"] span:before { background: #234999; } #social-sidebar ul li a[class*="rss"]:hover, #social-sidebar ul li a[class*="rss"] span, #social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; } </style> <div id='social-sidebar'> <ul> <li> <a class='entypo-twitter' href='https://twitter.com/aqui seu nome do twitter' target='_blank'> <span>Twitter</span> </a> </li> <li> <a class='entypo-gplus' href='https://plus.google.com/aqui seu numero do seu google+' target='_blank'> <span>google+</span> </a> </li> <li> <a class='entypo-facebook' href='https://www.facebook.com/aqui seu nome da sua fan page ou do pefil' target='_blank'> <span>facebook</span> </a> </li> <li> <a class='entypo-rss' href='http://feeds.feedburner.com/' target='_blank'> <span>feedburner</span> </a> </li> </ul> </div>

Fonte: allbloggertricks Web Design By Fabiokaua