🤗 Hello there, How are you all?
“Want to Add a SimplAdd a Simple Text Notification Widget in your blogger website?
Here is a short article which will surely help you.”
One thing about this widget is ”Your audience will love this widget. And your competitors will be in trouble of losing their audience.”
Onboarding
In this post, I'll show you how to add a basic call-to-action notification widget to your Blogger websites, similar to this one. This Notification Widget will be responsive and will work on all devices. It's not difficult to make this widget learn basic CSS, but since it's already there, I'll copy and paste it to save time.
The Notification Widget's code is derived from Jagodesian themes. This code does not belong to me.
How to Add a Simple Text Notification Widget
Step 1 :- First Login To Your Blogger Account.
Step 2 :- Then Click on Theme Menu.
Step 3 :- After that Click on Edit Html.
Step 4 :- Then find The Below Given Code.
<Group description="Notification">
Step 5 :- Then Replace it with Below Code.
<Group description="Notification">
<Variable name="notif.height" description="Notification max height" type="length" max="60px" default="45px" value="60px"/>
<Variable name="notif.bg" description="Notification background color" type="color" default="#e1f5fe" value="#e8f0fe"/>
<Variable name="notif.color" description="Notification text color" type="color" default="#08102b" value="#3c4043"/>
<Variable name="notif.link" description="Notification link color" type="color" default="#F57C00" value="#F57C00"/>
</Group>
Step 6 :- Then find The Below Given Code.
/* Main Element */
Step 7 :- Then Paste Following Code After ending it.
/* Notif Section */ .ntfC{display:flex;align-items:center;position:relative;min-height:var(--notifH); background:var(--notifU);color:var(--notifC); padding:100px 25px; font-size:13px; transition:var(--trans-1);overflow:hidden; border-radius:20px} .ntfC .secIn{width:100%; position:relative} .ntfC .c{display:flex;align-items:center} .ntfT{width:100%; text-align:center} .ntfT a{color:var(--notifL); 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:var(--notifL);color:#fffdfc; font-size:12px;font-weight:400; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);text-decoration:none} /* Fixed/Pop-up Element */ .fixL{display:flex;align-items:center;position:fixed;left:0;right:0;bottom:0;margin-bottom:-100%;z-index:20;transition:var(--trans-1);width:100%;height:100%;opacity:0;visibility:hidden} .fixLi, .fixL .cmBri{width:100%;max-width:680px;max-height:calc(100% - 60px);border-radius:12px;transition:inherit;z-index:3;display:flex;overflow:hidden;position:relative;margin:0 auto;box-shadow:0 5px 30px 0 rgba(0,0,0,.05)} .fixLs{padding:60px 20px 20px;overflow-y:scroll;overflow-x:hidden;width:100%;background:var(--contentB)} .fixH, .mnH{display:flex;background:inherit;position:absolute;top:0;left:0;right:0;padding:0 10px;z-index:2} .fixH .cl{padding:0 10px;display:flex;align-items:center;justify-content:flex-end;position:relative;flex-shrink:0;min-width:40px} .fixH .c::after, .ntfC .c::after, .mnH .c::before{content:'\2715';line-height:18px;font-size:14px} .fixT::before{content:attr(data-text);flex-grow:1;padding:16px 10px;font-size:90%;opacity:.7} .fixT .c::before, .mnH .c::after{content:attr(aria-label);font-size:11px;margin:0 8px;opacity:.6} .fixi:checked ~ .fixL, #comment:target .fixL{margin-bottom:0;opacity:1;visibility:visible} .fixi:checked ~ .fixL .fCls, #comment:target .fixL .fCls, .BlogSearch input:focus ~ .fCls{opacity:1;visibility:visible;background:rgba(0,0,0,.2); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px)} .shBri{max-width:520px} /* display:flex */ .headI, .bIc{display:flex;align-items:center}
.ntfC{display:flex;align-items:center;position:relative;min-height:var(--notifH); background:#e8f0fe;color:var(--notifC); padding:10px 25px; font-size:13px; transition:var(--trans-1);overflow:hidden;border-radius:10px;margin:1em 0 0} .ntfC::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.15);display:block;border-radius:50%;position:absolute;top:-2px;left:-12px;opacity:.1} .ntfC .secIn{width:80%; position:relative} .ntfC .c{display:flex;align-items:center} .ntfT{width:100%; padding-right: 15px; text-align:center} .ntfT a{color:#005C60; font-weight:700} .ntfI:checked ~ .ntfC{height:0;min-height:0; margin: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-left:10px;padding:8px 12px;border-radius:3px; background:var(--notifL);color:#ffffff; font-size:12px;font-weight:400; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);text-decoration:none} .drkM .ntfC{Background:#2d2d30;} .drkM .ntfC span{color:#ffffff;} .drkM .ntfT a {color:#8775f5;} .drkM .c {color:#ffffff;}
Step 8 :- Then find The Below Given Code.
<b:tag class='blogM' name='div'>
<!--[ Main content ]-->
Step 9 :- Then Paste Following Code Above it.
<div class='secIn'>
<!--[ Notification section ]-->
<b:section cond='!data:view.isPreview' id='notif-widget' maxwidgets='1' showaddelement='false'>
<b:widget id='HTML0' locked='false' title='Notification' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>#YourText</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>
</div>
⚠️ Note: Replace #YourText with your Notification Text.
Last Words
I hope this article will helpful you in adding a Simple Text Notification Widget in your site. If you have any doubts related to this article ask me in the comment section or contact us on Telegram. Thanks for visiting and reading this post! Have a nice day!
