Barra de notificação simples, mas elegante para o Blogger

abril 26, 2020

Existem muitas barras de Notificação disponíveis para o blogspot, mas elas vêm com créditos fixos que possuem propriedades não removíveis.Portanto, hoje em dicas de sorablogging, vamos compartilhar um widget interessante, elegante e de primeira qualidade sem nenhum branding e créditos ocultos. Nos dias de hoje, tornou-se tendência a implementação desse tipo de barra de notificação flutuante em blogs, e a coisa mais importante que parece legal. Muitos blogs populares também estão usando esse tipo de barra para notificar seus leitores ou mostrar alguns itens importantes no top.it parece bom e elegante no topo do seu blog. Você pode colocar uma notificação sobre sua postagem mais recente ou popular, para que um visitante do seu blog possa facilmente entrar em contato com esse tópico ou artigo. A barra de notificação pode ser facilmente fechada e aberta com um único botão, localizado no lado direito da barra . O widget funciona muito bem porque é suportado pelo código jquery e denominado css. A personalização deste widget é muito fácil, você pode alterar facilmente o plano de fundo, a cor da borda e a cor do texto. Vamos ter uma demonstração dessa barra de notificação incrível. Você pode conferir a demonstração acima neste site.

Como instalar este widget: -

Essas etapas são tão simples e fáceis que qualquer novo blogueiro não enfrentará nenhum tipo de problema para instalá-lo em seu blog.
Vá para Blogger.com >> Seu Blog >> Modelo
agora Faça o backup do seu modelo.
Em seguida, selecione Editar HTML >> Continuar
Não se esqueça de clicar / marcar a caixa Expandir widgets do modelo.
Pesquise <head> e logo abaixo, cole o seguinte código CSS.

CSS<link href = '// maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel = 'stylesheet' />

Agora temos que adicionar o código jQuery e CSS no seu modelo, o qual será responsável pela função da barra.

Vá para o Blogger> Modelo
Faça backup do seu modelo
Clique em Editar HTML
Pesquise </head>
Cole os seguintes scripts logo acima:

JS<style> 
.tybar {width: 100%; 
margem: 0; 
altura: 50px; 
display: mesa; 
tamanho da fonte: 17 px; 
altura da linha: 50 px; 
peso da fonte: 600; 
-webkit-font-smoothing: antialias; 
cor: rgb (255, 255, 255); 
    família de fontes: Ruda; 
cor da borda: rgb (255, 255, 255); 
cor de fundo: # 0e1032; 
box-shadow: 0 1px 3px 2px rgba (0,0,0,0,15);   
alinhamento de texto: centro;} 
.tybar .bar-but {font-size: 17px; 
intensidade da fonte: Negrito; 
margem esquerda: 25 px; 
fundo: #fff; 
estofamento: 5px; 
cor: #fff; 
cor de fundo: # f2132d; 
altura da linha: 1,05; 
preenchimento: 4px 15px; 
cursor: ponteiro;
decoração de texto: nenhuma; 
raio da borda: 3px;} 
.tybar .bar-mas um {color: #fff; decoração de texto: nenhuma;} 
.tybar i { 
float: right; 
padding-right: 40px; 
cursor: ponteiro; 
altura da linha: 50 px; 
} 
body {margin-top: -49.33px;} 
body {margin-top: 49.33px; transição: 600ms; -webkit-transição: 600ms; -moz-transição: 600ms; -o-transição: 600ms;} 
.toggleclose { topo: -75px! important;} 
.togglebody {margin-top: 0! important;} 
.fa-arrow-down { 
position: fixed; 
direita: 30 px; 
superior: -2px; 
plano de fundo: # 00BE98; 
cor: #FFFFFF; 
largura: 40 px; 
altura: 30px; 
raio da borda: 3px; 
altura da linha: 26px! important;
padding-top: 10px; 
padding-right: 0! importante; 
} 
.tybar {índice-z: 99999; top: 0; transição: 600ms; -webkit-transição: 600ms; -moz-transição: 600ms; -o-transição: 600ms; posição: corrigida} 
.blink_me { 
color: # f2132d ; 
margem direita: 10 px; 
    -webkit-animation-name: pisca-pisca; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinito; 
   
    -moz-animation-name: pisca-pisca; 
    -moz-animation-duration: 1s; 
    -moz-animation-timing-function: linear; 
    -moz-animation-iteration-count: infinito; 
   
    nome da animação: pisca-pisca; 
    duração da animação: 1s; 
    função de tempo de animação: linear;
    contagem de iterações de animação: infinito; 
} 
pisca-pisca @ -moz-keyframes {  
    0% {opacidade: 1.0; } 
    50% {opacidade: 0,0; } 
    100% {opacidade: 1,0; } 
} 
pisca-pisca @ -webkit-keyframes {  
    0% {opacidade: 1.0; } 
    50% {opacidade: 0,0; } 
    100% {opacidade: 1,0; } 
} 
pisca-pisca dos @keyframes {  
    0% {opacidade: 1.0; } 
    50% {opacidade: 0,0; } 
    100% {opacidade: 1,0; } 
} 
tela @media e (largura máxima: 
800 px ) { .tybar {exibição: nenhuma;} 
corpo { 
    margin-top: 0; 
    } 
} 
</style> 
<script> 
// <! [CDATA [ 
jQuery (documento) .ready (function () {
  jQuery ('.tybar i') .click (function () { 
  jQuery ('.tybar') .toggleClass ('toggleclose'); 
  jQuery ('body') .toggleClass ('togglebody'); 
  jQuery ('.tybar i ') .toggleClass (' fa-times '); 
  jQuery (' .tybar i ') .toggleClass (' fa-seta-para baixo '); 
}); 
}); 
//]]> 
</script>

Agora vamos adicionar a parte final e importante do widget, Pesquise <body> e logo abaixo / depois de colar a seguinte codificação. se você não encontrar <body> , pesquise expr:class='data:blog.pageType'>

<div class = 'tybar'> 
<span class = 'blink_me'> Texto em vermelho </span> Texto em branco normal <span class = 'bar-but'> <a href='#'> Texto do botão </a> < / span> <i class = 'fa fa-times' /> 
</div>

Tudo pronto: agora tudo está concluído, basta salvar seu modelo pressionando o botão Salvar modelo.
Nota: Você pode alterar o texto e os botões de acordo.