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.

Post a Comment

1 comment:

  1. AnonymousWed Feb 27, 08:16:00 pm

    Besides the health factors and risks which are involved
    by not slimming down there were also the advantage of looking better
    which experts claim builds self-confidence. Would it mean gaining or
    slimming down after which being more active, physically or socially.
    At the end of the day (week, month, year, or decade), your body
    doesn't value your lack of planning.

    ReplyDelete

Subscribe to: Post Comments ( Atom )