Widjet de notifição flutuante para blogger
 |
| Widjet de notifição flutuante para blogger |
Olá, amigos! No tutorial de hoje trago essa bela funcionalidade que deixará seu blog muito profissional. O Widget, que ficará flutuando em seu site, aparecerá uma mensagem sempre que algum leitor seu clicar. Essa mensagem pode ser tanto uma postagem quanto um texto qualquer, fica a seu critério.
Para adicionar em seu blog, vá para o painel do blogger primeiro, depois > Menu > Editar HTML/Javascript e procure por: </head>
Feito isso, copie este código e cole antes da tags </head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
Em seguida, procure por </style> ou ]]></b:skin> e copie o seguinte código antes de algumas dessas duas tags. Só poderá colocar em apenas uma,lembre-se.
.blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 10px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}
Depois, procure por </body> e antes disso, cole o seguinte código:
<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='Notifications'><i class='material-icons blanterxE7F4'></i><i class='material-icons blanterxE5CD'></i></a>
<div class='notifbox'>Aqui vai o texto do blog você pode escrever o que deseja aparecer .
</div>
</div>
*Não esqueça de fazer as devidas alterações.
Por último, cole o seguinte código também antes de </body>
<script type='text/javascript'>
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
</script>
Salve e veja o resultado. Qualquer, deixa nos comentários!