In this Post, i will share with you a Beautiful Notification Messages that you can use it in your blog or website, let me show you a preview of this messages :




So if you like it, just follow this steps :

Step 1 : Go To Blogger.com >> Template >> Edit Template and search for ]]></b:skin> Tag and copy paste the code bellow before it
.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;}

Step 2 : Click Save Template
Step 3 : Copy paste your selected message code and change The Red with your Message Text
Your Message Here
<div class="widgets4free success">
Your Message Here
</div>

Your Message Here
<div class="widgets4free alert">
Your Message Here
</div>

Your Message Here
<div class="widgets4free warning">
Your Message Here
</div>

Your Message Here
<div class="widgets4free link">
Your Message Here
</div>

Your Message Here
<div class="widgets4free error">
Your Message Here
</div>

Your Message Here
<div class="widgets4free happy">
Your Message Here
</div>

Your Message Here
<div class="widgets4free hi">
Your Message Here
</div>
That's all, if you have any question ==> Just leave a Comment on this post *_*

Tags: