Jul 25, 2016

Announcements/Alert/Note Message Widget! Add to Blogger

Stylish Alert/Note Message Widget! Add to Blogger
To attract your readers you must have some cool looking widgets inside your blog post and in a case study we find that a designing post get more views compared to such posts that lake this. So, in our previous article when when we are publishing the Amazing Slider Demo and Download Buttons for Blogger Posts then we think we should post some more widgets for Blogger Posts.

So, after the Demo and Download button, We are going to share another widget for your blogger blog which can also give cool look to your blog post. Actually, today we are going to share Stylish Alert/Note Widget for Blogger. Alert or Note message should be present that reader could understand easily, and that highlights the main object of our goal.

Stylish Announcements Alert/Note Message Widget! Add to Blogger

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.
Many of skilled writer used these term while they write a post and it look like  as ''Attention!, Please Note!, You have successfully.....! etc'' and then provide us a solid reason behind that happening.

So, before adding it on your blogger blog see the live demo of this widget by clicking on below Demo button.

We hope you like it. If you want to add it on your blogger blog then follow below instruction carefully.

How To Add Alert/Note Message Widget to Blogger?

  • Go To Blogger Dashboard >> Template >> Edit HTML.
  • Now click inside code area and search for ]]></b:skin> tag by Pressing CTRL+F or CMD+F.
  • Paste below code just above of ]]></b:skin> tag.
/* CSS Shortcodes By MyBloggerGuides.com */
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download {padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:&#39;Open Sans&#39;,sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:all 0.3s ease-out;}
.demo {background-color:#444;}
.download {background-color:#f53b3b;}
.demo:hover {background-color:#f53b3b;color:#fff;}
.download:hover {background-color:#444;color:#fff;}
.demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.widget .post-body ul,.widget .post-body ol{line-height:1.5;font-weight:400}
.widget .post-body li{padding:0;line-height:1.5}
.alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;border-radius:2px;color:#39484d;}
.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.alert-message span{font-size:14px!important}
.alert-message i{font-size:22px;text-align:left;display:inline-block;
.alert-message.success a,.alert-message.success span{color:#fff}
.alert-message.alert a,.alert-message.alert span{color:#fff}
.alert-message.warning a,.alert-message.warning span{color:#fff}
.alert-message.error a,.alert-message.error span{color:#fff}
#flippy {text-align:center;}
#flippy button {margin:10px auto;cursor:pointer;font-weight:700;font-size:14px;font-family:&#39;Open Sans&#39;,sans-serif;background-color:#444;color:#fff!important;padding:8px 12px!important;text-transform:uppercase;border:none;border-radius:2px;transition:all 0.3s ease-out;}
#flippy button:hover, #flippy button:focus {outline:none;background-color:#f53b3b;color:#fff;}
#flippanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e9e9e9;}
#flippanel {padding:24px;display:none;}
#flippanel img {background:#f5f5f5;margin:10px auto;}

  • Now, Again search for <head> tag and paste below stylesheet lines of FontAwesome icons just below of <head> tag. If you have already added it  on your blogger template then don't paste it again. Just skip this step and go to next step.
 <link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
  • Now, save your Template.
  • Now, whenever you want to add these widget as a alert message or Notice put one of below code according to your need inside Post HTML Editor.
Alert/Note Widget Style1]

Alert Notice Widget for Blogger

<div class="alert-message success">success message : You successfully read this important message.<i class="fa fa-check-circle"></i></div><br />

Alert/Note Widget Style2]

Alert Notice Announcement Widget for Blogger Posts

<div class="alert-message alert">Alert message : This alert needs your attention.<i class="fa fa-info-circle"></i></div><br />

Alert/Note Widget Style3]

Alert Note Widget for Blogger Posts

<div class="alert-message warning">Warning message : Warning! Best check yo self.<i class="fa fa-exclamation-triangle"></i></div><br />

Alert/Note Widget Style4]

Error Message Note Widget For Blogger Posts

<div class="alert-message error">Error message : Oh snap! Change a few things up.<i class="fa fa-exclamation-circle"></i></div><br />

Required Editing:

This Color = For Change the Text.

This Color = For Changing The FontAwesome Icons. You can Get Code of your own choice from our FontAwesome CheatSheet. Click On Below Button for Find the Code of your own choice.

  • Finally, Publish or update your Post.
  • Now, open your blog post in which you have added it and see it live on your blogger blog.


So above guide is about How To Add Alert/Note Text Widget Inside Blogger Pots? We hope by this tutorial you can successfully add this widget on your blogger post. If anyhow problem persist after following all above steps the drop a comment below. We will help you out of sure. Do Share.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.