Chantel Jeffries
saindo do carro (+18) - FireLink
Os melhores sites para
Safadinhos e Safadinhas (+18)
Conhece o Jogo do Texto?
Use com qualquer garota!
Sites que vocês adultos
Vão Gostar - Link Fixo

Barra de Notificações Fixada no Topo do Blogger

Nesta postagem compartilho com vocês está barra de notificação para que você possa escrever uma mensagem para passar para os que estão no seu blog...




Para colocar no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
]]></b:skin>
Tendo encontrada a tag, cole ACIMA dela o seguinte código
.notification-bar {  
    position: fixed;  
    width: 100%;  
z-index:1;
}  
.notification-text {  
    background-color: #2980B9;  
    padding: 15px;  
    color: #fff;  
    font-size: 14px;  
    text-align: center;  
    position: absolute;  
    width: 100%;  
}  
.notification-bar input {  
    display: none;  
}  
.notification-bar label {  
    cursor: pointer;  
    color: #fff;  
    position: absolute;  
    z-index: 5;  
    display: inline-block;  
    text-indent: 100%;  
    whitewhite-space: nowrap;  
    overflow: hidden;  
}  
.notification-bar label[for=hide] {  
    right: 15px;  
    top: 11px;  
    width: 24px;  
    height: 24px;  
    background: url('http://goo.gl/hYCoz') no-repeat center center;  
}  

  .help-2539 a {
display: block;
height: 12px;
width: 12px;
background: #014159;
border: 1px solid black;
color: white;
line-height: 1em;
text-align: center;
font-weight: bold;
filter: alpha(opacity=60);
opacity: 0.6;
font-size: 12px;
position: fixed;
top: 16px;
left: 13px;
    z-index:1;
}
.notification-bar label[for=show] {  
    width: 45px;  
    height: 50px;  
    border-radius: 0px 0px 3px 3px;  
    right: 10px;  
    background: url('http://demo.hongkiat.com/show-n-hide-notification-bar/img/show.png') no-repeat center center #2980B9;  
}  
.notification-bar input[value=show]:checked ~ label[for=show] {  
    -webkit-transition: ease 350ms;  
    -moz-transition: ease 350ms;  
    -o-transition: ease 350ms;  
    transition: ease 350ms;  
      
    -webkit-transform: translateY(-100%);  
    -moz-transform: translateY(-100%);  
    -o-transform: translateY(-100%);  
    transform: translateY(-100%);  
}  
.notification-bar input[value=show]:checked ~ label[for=show],  
.notification-bar input[value=hide]:checked ~ label[for=hide],  
.notification-bar input[value=hide]:checked ~ .notification-text {  
    -webkit-transition: ease 350ms;  
    -moz-transition: ease 350ms;  
    -o-transition: ease 350ms;  
    transition: ease 350ms;  
      
    -webkit-transform: translateY(-100%);  
    -moz-transform: translateY(-100%);  
    -o-transform: translateY(-100%);  
    transform: translateY(-100%);  
}  
.notification-bar input[value=hide]:checked ~ label[for=show] {  
    -webkit-transition: ease 350ms;  
    -moz-transition: ease 350ms;  
    -o-transition: ease 350ms;  
    transition: ease 350ms;  
      
    -webkit-transform: translateY(0%);  
    -moz-transform: translateY(0%);  
    -o-transform: translateY(0%);  
    transform: translateY(0%);  
}  
.notification-bar input[value=show]:checked ~ label[for=hide],  
.notification-bar input[value=show]:checked ~ .notification-text {  
    -webkit-transition: ease 350ms;  
    -moz-transition: ease 350ms;  
    -o-transition: ease 350ms;  
    transition: ease 350ms;  
      
    -webkit-transform: translateY(0%);  
    -moz-transform: translateY(0%);  
    -o-transform: translateY(0%);  
    transform: translateY(0%);  
}  
@keyframes initiate {  
    0% {  
        transform:translateY(-100%);  
    }  
    50% {  
        transform:translateY(-50%);  
    }  
    100% {  
        transform:translateY(0%);  
    }   
}  
.notification-text {
 background-color: #2980B9;
 padding: 15px;
 color: #fff;
 font-size: 14px;
 text-align: center;
 position: absolute;
 width: 100%;

 -webkit-animation: initiate 350ms ease;
 -moz-animation: initiate 350ms ease;
 -o-animation: initiate 350ms ease;
 animation: initiate 350ms ease;
}
Agora, procure pela tag
<body>
Tendo encontrada a tag, cole ABAIXO dela o seguinte código
<div class='notification-bar'>
<div class='help-2539'><a href='http://dicashot.blogspot.com.br/2013/11/barra-de-notificacoes-fixada-no-topo-do.html' target='_blank'>?</a></div>
<input id='hide' name='bar' type='radio' value='hide'/>
<input checked='checked' id='show' name='bar' type='radio' value='show'/>
<label for='hide'>hide</label>
<label for='show'>show</label>
<div class='notification-text'>SUA MENSAGEM AQUI</div>
</div>
Tendo colado o código, salve e pronto!!!

Deixe seu comentário.

Cursos 24 Horas
Barra de Notificações Fixada no Topo do Blogger Barra de Notificações Fixada no Topo do Blogger Reviewed by Muca on 11/26/2013 08:09:00 AM Rating: 5