Simple text notification widget

 

Simple text notification widget

HHello to everyone, on this occasion I will share a simple text notification widget like the one used on this blog, exactly above the header.

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.

for the demo, please click the button below, ok for those of you who want to try it, let's see how.

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://blogger-store.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 darkmode adjust the class (.drK) with your template so 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;
    
    free join every one
    &lt;br /&gt;
    &lt;div style=&#39;text-align:center;&#39;&gt;&lt;a href=&#39;https://chat.whatsapp.com/BzcpKXnUk9VEflwS8vEr0v&#39; target=&#39;_blank&#39; rel=&#39;nofollow noopener noreffer&#39;&gt;Join Now&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 Notification whose name should be in the top position.

ok so that 's a simple text notification widget that I can share this time, hopefully it's useful and thanks for visiting.

Source code:
https://miusm-tech.com