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

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

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 :


So if you like it, just follow this steps :

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

.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 a,.widgets4free.success span{color:#fff}
.widgets4free.alert a,.widgets4free.alert span{color:#fff}
.widgets4free.warning a,.widgets4free.warning span{color:#fff}
.widgets4free.error a,.widgets4free.error span{color:#fff}
.widgets4free.happy a,.widgets4free.happy span{color:#fff} a, span{color:#fff}{background-color:#F44242;color:#fff}
.widgets4free.hi a,.widgets4free.hi span{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
  • For Alert Message
<div class="widgets4free alert">
Your Message Here
  • For Warning Message
<div class="widgets4free warning">
Your Message Here
  • For Link Message
<div class="widgets4free link">
Your Message Here
  • For Error Message
<div class="widgets4free error">
Your Message Here
  • For Happy Message
<div class="widgets4free happy">
Your Message Here
  • For Hi Message
<div class="widgets4free hi">
Your Message Here

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?
There are no comment yet. Be the first.
We are moving to a new domain .net and the old one .com will not be available in the future !!.
You will be redirected to this link now :