dicas blog
Home » , , » Como adicionar uma Barra flutuante de notificação no blogger

Como adicionar uma Barra flutuante de notificação no blogger

0
Nesse tutorial  vou  mostrar   como  adicionar  no  blog  um  barra de  notificação,  ou  se  preferir uma  barra   de  avisos,  assim  que  gosto  de  chamá-la.  com  essa barra flutuante  você  pode   colocar  um  link  para destacar  uma de  suas  postagens   que  você   ache  interessante,   ou  colocar  um  link  de  parceiros,  talvez,  links de cursos  24 horas,  publicidade,  isso  é  você   que  escolhe  outra  função  importante é  que ao  rolar  a  pagina  para  baixo  a   barra  acompanha   a  pagina  ao  subir  também,  isso  é  bom  pois  será  um  incentivo  para   destacar   seus  links  você     devi  ter   visto   isso  em  outros  blogs  por  ai  então  vamos  ao  tutorial  abaixo,  e  vamos   instalar  no  seu  blogger  uma barra de  notificação  flutuante.


Observação: adicione  um  código  de cada  vês  e  salve,  se  tentar adicionar  os três  ao mesmo  tempo poderá  gerar  erro.

 Demo

Primeiro    em  modelo  editar  HTML  e  procure  por </head> e  adicione    o  código  abaixo logo  abaixo  dela.  

<!--começo do  script MEUBLOGDICAS-->
<script type='text/javascript'>
//<![CDATA[
var MBD_arr = new Array();
var MBD_clear = new Array();
function MBDFloat(MBD) {
MBD_arr[MBD_arr.length] = this;
var MBDpointer = eval(MBD_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.MBDsrc = document.all? document.all[MBD] : document.getElementById(MBD);
this.MBDsrc.height = this.MBDsrc.offsetHeight;
this.MBDheight = this.cmode.clientHeight;
this.MBDoffset = MBDGetOffsetY(MBD_arr[MBDpointer]);
var MBDbar = 'mbt_clear['+MBDpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
MBDbar = MBDbar;
eval(MBDbar);
}
function mbtGetOffsetY(MBD) {
var mtaTotOffset = parseInt(MBD.MBDsrc.offsetTop);
var parentOffset = MBD.MBDsrc.offsetParent;
while ( parentOffset != null ) {
MBDTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return MBDTotOffset;
}
function MBDFloatInit(mbt) {
MBD.pagetop = MBD.cmode.scrollTop;
MBD.mbtsrc.style.top = MBD.pagetop - MBD.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("MBD_bar").style.visibility = "hidden";
}
//]]>
</script>
<!--final do  script MEUBLOGDICAS-->

Tutorial Atualizado:código na caixinha abaixo para copiar!


Agora  procure  por  ]]></b:skin>  e adicione  o  código  abaixo  acima dela.

<!--começo do css MEUBLOGDICAS-->
#MBD_bar{
background: #232323;
width:100%;
margin:0px auto 0px auto;
text-align:center;
padding:5px 0 5px 25px;
box-shadow: #666666 0px 1px 3px;
z-index: 9998;
height: 27px;
position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: Helvetica, sans-serif;
line-height: 24px;
border-top:1px solid #000;
border-bottom: 2px solid rgb(255, 255, 255);
}
#MBD_bar a{
text-decoration:underline;
color:#FFFC00;
font-size:12px;
font-weight:bold;
font-family: verdana, arial,"Helvetica",sans-serif;
line-height: 24px;
}
#MBD_bar a:hover{
text-decoration:underline;
}
#MBD_bar p {margin:0; list-style:none;}
#MBD_bar img {vertical-align: middle;
margin-right: 6px;}
#blog-pager, .pagenavi {
clear: both;
text-align: center;
margin: 30px auto 10px;
}
<!--final  do css MEUBLOGDICAS-->

Tutorial Atualizado:código na caixinha abaixo para copiar!


Agora  procure  por <body> e   adicione  o  código  abaixo  logo acima dela.
O código pode   estar  um pouco  diferente então  faça  a busca assim <body  e você localizara  um  código  grande é esse  mesmo,   adicione    o  código  abaixo  logo  acima  dela.

<!--começo  do html MEUBLOGDICAS-->
     <div style='z-index:999999; position:absolute; margin-right:20px;'>
    <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='20' side='right' trigger='30%'/></div>
    <div id='MBD_bar'><font style='color:#FFFC00;'/><blink> Você vai gostar
!! </blink>
    <a href='http://www.meublogdicas.com.br/' rel='nofollow'>Blogger Tutorial e novidades</a>


    <span style='padding:0px 0px 0px 6px; margin:0px;'>
    <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://2.bp.blogspot.com/--zreI5QNUl4/ULEXvOPqHwI/AAAAAAAAIFQ/-PGSrwkFHIM/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
    <br/><br/>
    <!--final código MEUBLOGDICAS--> 

Tutorial Atualizado:código na caixinha abaixo para copiar!


Agora  salve   e  visualize. 

Agora no trecho  marcado  em  vermelho adicione seu link destino.
Agora no  trecho  marcado  em  amarelo  adicione o texto  ser   exibindo.
Agora  no trecho em   roxo  adicione o  sua mensagem,  de  incentivo.

Bom erra  isso  duvidas é  só perguntar até  a  próxima.

0 comentários:

Postar um comentário