How To Add a Beautiful Notification Messages For Your Blog or Website

How To Add a Beautiful Notification Messages For Your Blog or Website

Hi,
Today we will learn how to add notification messages in several forms, which inevitably will need to inform your visitors of something new or change that will occur or other things, let me show you a preview of this messages :

Preview

So if you like it, just follow this steps :

Step 1 : Copy paste the code bellow before the </head> Tag

<style>
.widgets4free{position:relative;font-family:tahoma;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#39484d;text-align: center;}
.widgets4free p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.widgets4free span{font-size:14px!important}
.widgets4free i{font-size:22px;text-align:left;display:inline-block;position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.widgets4free.success{background-color:#00acd6;color:#fff}
.widgets4free.success a,.widgets4free.success span{color:#fff}
.widgets4free.alert{background-color:#0073b7;color:#fff}
.widgets4free.alert a,.widgets4free.alert span{color:#fff}
.widgets4free.warning{background-color:#efa666;color:#fff}
.widgets4free.warning a,.widgets4free.warning span{color:#fff}
.widgets4free.error{background-color:#f56c7e;color:#fff}
.widgets4free.error a,.widgets4free.error span{color:#fff}
.widgets4free.happy{background-color:#FA8734;color:#fff}
.widgets4free.happy a,.widgets4free.happy span{color:#fff}
.widgets4free.link a,.widgets4free.link span{color:#fff}
.widgets4free.link{background-color:#F44242;color:#fff}
.widgets4free.hi a,.widgets4free.hi span{color:#fff}
.widgets4free.hi{background-color:#57DF69;color:#fff}
.widgets4free:hover {background-image: linear-gradient(110deg, #766D6C 0%, #606364 50%, transparent 50%, transparent 100%);background-size: 200%;background-position: 150% 0;background-repeat: no-repeat;transition: background-position .9s ease, color .15s ease;color: #eee;}</style>


Step 2 : Copy paste your selected message code and change The Red with your Message Text

  • For Success Message
<div class="widgets4free success">
Your Message Here
</div>
  • For Alert Message
<div class="widgets4free alert">
Your Message Here
</div>
  • For Warning Message
<div class="widgets4free warning">
Your Message Here
</div>
  • For Link Message
<div class="widgets4free link">
Your Message Here
</div>
  • For Error Message
<div class="widgets4free error">
Your Message Here
</div>
  • For Happy Message
<div class="widgets4free happy">
Your Message Here
</div>
  • For Hi Message
<div class="widgets4free hi">
Your Message Here
</div>

That's all, if you have any question ==> Just leave a Comment on this post *_*



Subscribe to our Newsletter

Did you find this post useful?
100%
0%
Comments
There are no comment yet. Be the first.

Subscribe to the mailing list of our blog and get the latest lessons and topics that are sent directly to your e-mail