How to Add Simple Text Notification Widget in Blogger

Hello Everyone, on This occasion I Will Share How to Add Simple Text Notification Widget in Blogger like the one used on this blog, exactly above the header.

The disclaimer at the beginning of this widget is the default template that I use, namely median-ui made by Jagodesain, so it’s not mine, okay.

I made this tutorial because there are some who have requested to be made and it happens that it’s been quite a while since I’ve updated the article because I’m busy with work outside of blogger so I don’t have any ideas for posting anything else.

and actually it’s not difficult to make this widget, just understand basic CSS, but since it’s already there, I’ll just copy and paste it so it’s fast.

How to Add Simple Text Notification Widget

please go to blogger > themes > edit html copy the css below and paste it above the code ]]></b:skin> or above the code </style>

/* Notif Section Source https://median-ui.jagodesain.com */
.ntfC{display:flex;align-items:center;position:relative;min-height:53px;background:#e8f0fe;color:#3c4043;padding:10px 25px;font-size:13px;transition:all .1s ease;overflow:hidden;z-index:3}
.ntfC .secIn{width:100%;position:relative}
.ntfC .c{display:flex;align-items:center}
.ntfT{width:100%;padding-right:15px;text-align:center}
.ntfT a{color:#f89000;font-weight:700}
.ntfI:checked ~ .ntfC{height:0;min-height:0;padding:0;opacity:0;visibility:hidden}
.ntfA{display:inline-flex;align-items:center;justify-content:center;text-align:initial}
.ntfA >a{flex-shrink:0;white-space:nowrap;display:inline-block;margin:0 10px;padding:8px 12px;border-radius:3px;background:#f89000;color:#fffdfc;font-size:12px;font-weight:400;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);text-decoration:none}
.ntfC .c::after{content:'\2715';line-height:18px;font-size:14px}
@media screen and (max-width:896px){.ntfC{padding-left:20px;padding-right:20px}}
/* css dark mode adjust the class (.drK) with the template so that it can run */
.drK .ntfC{background:#2d2d30;color:#989b9f}

And put this code above the <header if you can’t save an error appears change HTML0 to HTML1 and if it’s still an error, increase the number 1 and so on until it can be saved, the reason is because the id must be unique it can’t be the same if it’s the same then an error message will appear and can’t be saved.

<!--[ Notification section ]-->
        <b:section cond='!data:view.isPreview' id='notif-widget' maxwidgets='1' showaddelement='false'>
          <b:widget id='HTML0' locked='true' title='Notification' type='HTML' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='content'>&lt;div class=&#39;ntfA&#39;&gt; 
 &lt;span&gt;

Lorem Ipsum Dummy Text For Demo
&lt;br /&gt;
&lt;div style=&#39;text-align:center;&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39; rel=&#39;nofollow noopener noreffer&#39;&gt;Your Link is Here&lt;/a&gt;&lt;/div&gt;

&lt;/span&gt; 
&lt;/div&gt;</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
              <input class='ntfI hidden' id='forNft' type='checkbox'/>
              <div class='ntfC'>
                <div class='ntfT'><data:content/></div>
                <label aria-label='Close Menu' class='c' for='forNft'/>
              </div>
            </b:includable>
          </b:widget>
        </b:section>

if you have, please click save, and edit through the layout look for the name Notification should be in the top position.

Ok so that ‘s the simple text notification widget that I can share this time, hopefully it’s useful and thanks for visiting.

2 thoughts on “How to Add Simple Text Notification Widget in Blogger”

Leave a Comment