Add Popup Animated Alert Plugin Into Blogger


Blogger Animated Alert Plugin

Blogger Animated Alert Plugin - I will share tips on adding animated alert boxes to notify visitors about blogger sites or make a warning Your blog will have more information about your blog to keep you posted by sharing information about updates on your site. 

The alert box opens with a slow and elegant effect when the button is clicked. Clicking the Close button closes. The alert box will appear on the mobile screen at the bottom of the screen so that it does not interfere with the display of the blog pages.

Adding a Blogger Animated Alert Box


1- Sign in to your Blogger account and open the template codes page of your blog by following the theme> Edit HTML on your blog's control panel. On the following page with the help of CTRL + F ]]></b:skin>or </style>locate the following code and CSS code ]]></b:skin>or </style>add on a line of code.

#warning-wrapper{position:fixed;width:100%;z-index:99}
.warning-noactive{background:#e74c4c;width:3.125em;height:3.125em;border-radius:100%;position:fixed;z-index:999;bottom:50%;left:1.25em;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:warninglink;animation-duration:5s;animation-iteration-count:infinite;animation-name:warninglink;transition:all 5s ease-in-out}
img.warningbell{margin:15px 15px 15px 15px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:warningicon;animation-duration:2s;animation-iteration-count:infinite;animation-name:warningicon;transition:all 2s ease-in-out}
img.warningclose {margin:17px 1em 0 17px}
@keyframes warninglink{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes warningicon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes warning-box{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:40%;left:4.875em}100%{transform:none;visibility:visible;opacity:1;bottom:40%;left:6.875em}}
.warning-box{padding:1.25em;border-radius:0 2px 2px 2px;position:fixed;resize:none;line-height:1.5;z-index:999;left:6.875em;bottom:40%;max-width:32.5em;background:#e74c4c;border:1px solid #e74c4c;color:#fff;font-size:13px;display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.warning-box:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-10px;border-width:0.5em;border-style:solid;border-color:#e74c4c #e74c4c transparent transparent;display:block}
.warningclose{display:none!important}
#warning-wrapper.warning-active .warningclose{display:block!important;animation-name:none!important}
#warning-wrapper.warning-active .warningbell{display:none!important}
.warning-box.warning-active{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:warning-box;animation-duration:1s;animation-iteration-count:1;animation-name:warning-box;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:42.5em){.warning-box:before{display:none}.warning-box{left:0%!important;bottom:0}
@keyframes warning-box{0%{left:0!important}100%{left:0!important}}}

2- Add the following javaScript code </body>on a line in the closing code at the bottom of the template codes page .

<script type='text/javascript'>
$(document).ready(function(){$(".warning-noactive").click(function(){$(".warning-box,#warning-wrapper").toggleClass("warning-active");});});
</script>

3- Add the following HTML code <body></body>between the codes. If you do not know where to add it, use CTRL + F <footerto find the <footeropening code and add the opening code on a line.

<div id='warning-wrapper'>
<a class='warning-noactive' href='javascript:;' title='Box Alert'><img alt='Warning Open' class='warningbell' height='20' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAhUExURQAAAP///////////////////////////////////////88h6/kAAAAKdFJOUwAgr8xzFJg1LOK8NtLzAAAAi0lEQVQ4y9WT2w7DIAxDITfA///BW1e1UyCk2uPOq02MrKQUR2fuJcMASw0EUKYrA6xbub3fH1CLdcGNPOiho8GxprA38MOAdYTMBlkr9NhaoYf+0cCzgR96mpqqCKhZwBQiCLlDFBuu7ew7w3UiSrFO3/3WGqDld4w/7I9Pkqs4vzIOfSThamOY119D3hBhoWu7CwAAAABJRU5ErkJggg==' width='20'/><img alt='Warning Close' class='warningclose' height='16' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURQAAAP///////////////////z5SrToAAAAFdFJOUwCrBFT7q7CDrQAAAGxJREFUOMvdk0sOwCAIRHGQ+1+5tWlMP2Pfvm4wzIsCOhGRTWGXWo6QvTyhVj0PvSyx6zWIERyhU5gbeV3hiVvSEI/Ui6AEHUlFUVuiwaz0SSz1K7F+3m8dAbqCiqQ2aVB//x9sHLQempfsvwGWIwaV4OjbnwAAAABJRU5ErkJggg==' width='16'/></a>
<div class='warning-box'>
Add Your Text Here
</div>
</div>


In the HTML code above, add the marked color description or disclosure text. We shared the information about creating an animated Blogger alert box with you. You can subscribe to get more information from our blog site.

No comments