How To Add Alert Messages To Blogger Posts [Blogger Shortcodes]

Its my believe that a awesome design post attract reader to your blog! and in a case study I also observe that a designing post attract most reader as compared to such post that lake this.

So,in my previous article when I'm writing on optimizing blog images, I feel that a alert message should be present that reader could understand easily.And that highlights the main object of our gaol.

Many of skilled writer used these term while they write a post and it lool like  as ''Attention!,Please Note!,You have successfully.....! etc'' and then provide us a solid reason behind that happening.

So,to avoid this job and to modified your post I have some shortcodes that lessen this problem.So if you are using that bullshit or any other,then I would highly recommend you to shift to Alert Messages right now and decrease your page view.

Lets try how would you insert such shortcodes to your blogger blog posts.Follow my few instructions!

DEMO

Instruction to follow:

1. Go to Blogger Dashboard?Your Blog
2. Click Template?Click Edit HTML tab
3. Find anywhere inside template </style> or ]]></b:skin>

Now,copy the above CSS code and put it above ]]></b:skin>

CSS Code:

/* CSS Shortcodes By UrduBloggingHub */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;}
.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;}
.first-letter{float:left;color:#f77c6a;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}
.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;
position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.alert-message.success{background-color:#00acd6;color:#fff}
.alert-message.success a,.alert-message.success span{color:#fff}
.alert-message.alert{background-color:#0073b7;color:#fff}
.alert-message.alert a,.alert-message.alert span{color:#fff}
.alert-message.warning{background-color:#efa666;color:#fff}
.alert-message.warning a,.alert-message.warning span{color:#fff}
.alert-message.error{background-color:#f56c7e;color:#fff}
.alert-message.error a,.alert-message.error span{color:#fff}
.fa-check-circle:before{content:&quot;\f058&quot;}
.fa-info-circle:before{content:&quot;\f05a&quot;}
.fa-exclamation-triangle:before{content:&quot;\f071&quot;}
.fa-exclamation-circle:before{content:&quot;\f06a&quot;}
#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,Save your template.

Almost you have done,but one more thing after installing this to your blog you should using fontawesome,if your not using any of fontawesome then put it to your blog.You can insert it as fallows;

1. Go to Blogger Dashboard?Your Blog
2. Template?Edit HTML
3. Find anywhere </head>

Put below code just before it.

Code:

<link  href= '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'  rel= "stylesheet"/>

Now,Save your template.
Now,whenever you want to add such alert messages to your posts put one of code according to your need in blogger POST HTML EDITOR!

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

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

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

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

Success message : You successfully Inserted this plugin to your blogger blog!

Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)