How to Create a Custom Notification Alert in Blog Article

TrickPk 12/28/21  Recently , Updated

Also Read

Hello friends, you are welcome to Trickpk blog, In this article, I'll show you how to add a Custom Alert Description Styles Widget to your blogger website, so read on to find out more.

View Demo

Styles Custom Alert Description Box

In the Custom Alert Description Box, you may provide information about your blog to your viewers, as well as present your site's logo or any photo, which will improve the quality of your blog. Will be attractive, and readers who are interested in you will form a strong link with you.

Create A Custom Alert Description Styles Widget

Friends, I also implemented Custom Alert  Description Widget or Box Styles  in my blog a while ago, and it was extremely well appreciated by all of my followers, with some of them requesting that I show them how to Create A Styles Custom Alert Description Box in your blog article. So, let's see how you may make your own unique custom alert box in your blog.

Step 1. Adding CSS Codes

Add the following CSS codes just above to ]]></b:skin> tag.

/*Alert Box by TrickPk.com*/ .TrickPk-note-alert{position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;color:#3c4043; font-size:.85rem;font-family:var(--fontB);line-height:1.6em;border-radius:10px;overflow:hidden} .TrickPk-note-alert::before{content:&#39;&#39;;width:60px;height:60px;background:#81b4dc;display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .TrickPk-note-alert::after{content:&#39;\002A&#39;;position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .TrickPk-note-alert.wr{background:#ffdfdf;color:#48525c} .TrickPk-note-alert.wr::before{background:#e65151} .TrickPk-note-alert.wr::after{content:&#39;\0021&#39;}

Step 2.  Now Follow Below Steps

1. Go to blogger dashboard

2. Click to layout

3. Click to Add a Gadget

4. Click again HTML/JavaScript or

5. You can also use it in Blog articles as notification alert 

6. Now you have to copy all the code given below and paste it into the content box.

<p class='TrickPk-note-alert'>I Love TrickPk</p> <p class='TrickPk-note-alert wr'>I Love TrickPk</p>

Finally, Outcomes:

So i hope you learned How to Add Alert Box in Your Blog Articles. Now you have to add the text  about your blog or article at the marked places and save it.

I discussed How to Create a Custom Notification Alert in Blog Article. Make a comment and let us know what you think about the post, and if you have any questions, please contact us via the Contact Us page. We hope you enjoy your visit to our website.

Our all Contents are Strongly Protected By DMCA.com. Please don't plagiarise our content. All rights to TrickPk have been reverted.