Many of bloggers utilize the alert message on the post to gives short message to readers and it look like attention, Warning, Success etc and It provide us the reason behind it for happening.
If you have previously using the bullet style alert message I recommend you to use the any of below top alert message which attractive an unique. I have come up with modified alert messages shortcodes for blogger that you should try on upcoming days.
Let's learn how you could insert the code in your blogger , First of all you need is css code. Follow my step by step instructions to begin.
1. Open Your Dashboard and look for your blog.
2. Now Goto theme menu and edit HTML.
3. Now search for the end tag of ]]></b:skin> and place following css before this end tag.
2. Now Goto theme menu and edit HTML.
3. Now search for the end tag of ]]></b:skin> and place following css before this end tag.
You can copy whole css code from the below and place it the place as i mentioned above.
.alert ,.plain-alert{
position:relative;
padding:20px 40px;
border-radius:0px;
margin:40px 0;
}
.alert span ,.plain-alert span{
position: absolute;
top:-10px;
right:-5px;
height:32px;
width:32px;
line-height:32px;
background:rgba(0,83,70,1);
text-align:center;
color:#fff;
display: flex;
align-items:center;
justify-content:center;
border:3px solid #fff;
transform:rotate(-60deg);
border-radius:100px;
}
.bg-alert,.bg-alert span{
background:#fff;
color:#000;
box-shadow:0px 10px 29px rgba(0,0,0,0.2);
}
.sms-alert {
background:#ffe6f0;
color:#ff3385
}
.sms-alert span
{
background:#ff3385;
}
.d-alert {
background:#ff5f55;
color:#fff
}
.d-alert span {
background:#ff5f55;
}
.i-alert,.i-alert span{
background:#55acff;
color:#fff
}
.s-alert,.s-alert span{
background:#00cc66;
color:#fff
}
.w-alert,.w-alert span{
background:#ffa840;
color:#fff}
.purple-alert ,.purple-alert span{
background:#fff;
color: #5c5cd6;
border:1px solid #5c5cd6;
}
.boxed {
display:grid;
grid-template-columns: auto 1fr;
grid-gap :54px 0;
margin: 40px auto;
justify-content:center;
align-items:center;
position:relative;
}
.boxed:before {
content:"Alert";
position: absolute;
background:#639fcd;
padding:2px 5px;
border-radius:3px;
display:inline;
top:-5px;
left:-5px;
color:#fff;
border: 1px 1px solid red;
border-right:2px solid #fff;
border-bottom:2px solid #fff
}
.box-alert {
background:#e6f7ff;
}
.box-alert > div {
background:#66ccff;
color:#fff;
padding:20px;
}
.box-alert p {
background:#e6f7ff;
padding:20px;
font-size:14px
}
.boxed h1 {
font-size :15px;
text-align:center;
}
.hint-alert {
background:#ff0066;
padding:7px;
color:#fff;
}
.hint-alert p {
padding:20px;
font-size:14px
}
.hint-alert > div {
color:#fff;
padding:20px;
transform:rotate(0deg);
border-right:3px dashed #fff;
}
.none-alert {
background:#000;
padding:8px;
color:#fff;
}
.none-alert p {
background:none;
padding:20px;
font-size:14px
}
.none-alert > div {
background:none;
color:rgba(355,255,255,0.5);
padding:20px;
border-right:2px solid rgba(255,255,255,0.5)
}
@media screen and (max-width:567px) {
.boxed {
grid-template-columns:1fr auto
}
}
Now, It's time form html tag. I have provided the html and it's style with demo and just copy the html code and place it in your post and make your post more attractive and dynamic.
Read More : How to create navigation menu bar on blogger
Blogger top 10 unique alert message
I have already posted the post on how to crate navigation bar, table of content , pro and cons for blogger. And I have here to share you the most unique and tempting top 10 alert message design for blogger and here you go.# Design 1 :This is the unique design of alert message for blogger in plain background style. You can see the code and demo below.
×
Warning !! This red alert boxes indicates the warning message.
and it look like this;
×
Warning !! This red alert boxes indicates the warning message.
# Design 2 : This design has material color used which give a better looks to your blogger post and let readers clearly to understand what it's happening. Check the code and demo below.
×
Attention !! This alert boxes indicates the attention message.
and it look like this;
×
Attention !! This alert boxes indicates the attention message.
# Design 3 : This sky blue color design for alert message for blogger is also never fails to attract the readers to your blog. Let chect it below.
×
Info !! This red boxes indicates the info message.
and it look like this;
×
Info !! This alert boxes indicates the info message.
# Design 4 : If you want to put success alert message on your blog post then it might really good design for your , That plain design of alert message can attract readers to your blog. Check it out below.
×
Success!! This alert boxes indicates the success message.
and it look like this;
×
Success !! This alert boxes indicates the success message.
# Design 5 :If you need clean and neat alert message for your blogger post then following design can be best approach. Which is dynamically designed with plain white background.
×
Info !! This alert boxes indicates the flash message.
and it look like this;
×
Info !! This alert boxes indicates the flash message.
# Design 6 :Color combinations can be the reason behind attractive design and This design of alert message never fails to amaze readers. Look and use it now on your blogger post.
×
Danger !! This red alert boxes indicates the danger message.
and it look like this;
×
Danger !! This red alert boxes indicates the danger message.
# Design 7 : This design is simple and clean. You can use this design also to flash alert message that is attractive design with border on it.
×
Danger !! This red alert boxes indicates the danger message.
and it look like this;
×
Danger !! This red alert boxes indicates the danger message.
You looked for the top 7 plain and simple design. You can see the close button on the to right of the alert message which is not functional because we haven't written the JavaScript code. So, If you want to make it functional, See the code below how it works.
We have alert message with the class name .alert on it and it's child <span> So , We will create variable on the span and close it parent div using forEach() Function.
//Create variables on span
const CloseButton = document.querySelectorAll('.alert span');
//It selects all the span button inside alert class().
CloseButton.forEach((x) => {
x.onclick = () => {
x.parentElement.style.display = "none"; //hides the parent
}
});
CloseButton.forEach(() => {
for(i=0; i < CloseButton.length; i++){
var button = CloseButton[i];
button.setAttribute("onclick","this.parentElement.style.display='none'");
}
});
See the Pen Blogger alert message by Buddhalimbu (@buddhalimbu-the-lessful) on CodePen.
And Here I have modified the extra three unique design of alert message for blogger and that is really tempting and cool, I sure this will attract users towards your blog. Here are the unique alert message below.
# Design 8 : This is plain black background alert message for blogger with heading and the paragraph on the right side, That helps you to give short brief information to the users. Demo and html snippet code is below.
World24hub!!
World24hub !! is a blogger hosted website.
World24hub!!
World24hub !! is a website hosted on blogger.
World24hub!!
World24hub !! is the tech website on blogger.
World24hub!!
World24hub !! is a tech website on blogger.
World24hub!!
Info !! Follow for more tech updates.
World24hub !!
Info !! Follow for more tech updates.
These above are alert message that I designed myself. I have already post other blogger tutorial such as how to create blogger navigation menu bar, How to use sayari copy script on blogger etc and more and more tutorial are coming everyday.
Conclusion : Blogger is free platform and it has limited features. All the tutorial and code I provided here are 100% self designed with HTML, CSS and JavaScript , If you stuck on problem, Let us know on comment below.
Post a Comment