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.

Carregando atualizações...

Barra de Notificações Fixada no Topo do Blogger

DESTAQUES DO MÊS