in ,

How to add Ribbon Notifications to your blog Menu….

How to add Ribbon Notifications to your blog Menu....,ribbon,google,blogger,tools,coding,widgets,2020,2021

Today am going to share with you something useful that every blogger or Business site needs to have,If you pay attention to the navigation menu on the left of our blog, you can see that there is a menu with the text ‘Welcome’ ‘Code’ and ‘New’ all with different colours which aims to highlight the menu so that more users can see it early and invite more clicks.

MashByte.Com

I personally develop this so that it can help my visitors to know the current actions on the site, but if you are reading this post right now then i am going to show you how to add this like ours exactly to your blog or cite without affecting anything.

So to start… and as usual, to edit your HTML code on Blogger, firstly Backup your code first before doing any editing to it, in order to get your theme back incase you made any mistake. Ao to make everything short, follow the steps below:

HOW TO ACCESS THE FRAMEWORK?

  1. Go To Blogger.com 
  2.  Select Your Blog.
  3.  Select Theme >> 
  4. Then click on the arrow near ‘Customize’ and click on Edit HTML

Now search for “]]>< /b :skin>” then Copy and Paste the CSS code below just above it


/*coloured Beeping by mashbyte.com */
.ribs{position:center;top:4px;right:3px;font-size:10px;font-weight:900;background:red;padding:0px 4px;border-radius:3px;animation:hotBSW .4s infinite;line-height:normal}
.ribs1{position:center;top:4px;right:3px;font-size:10px;font-weight:900;background:yellow;padding:0px 4px;border-radius:3px;animation:hotBSW .6s infinite;line-height:normal}
.ribs2{position:center;top:4px;right:3px;font-size:10px;font-weight:900;background:blue;padding:0px 4px;border-radius:3px;animation:hotBSW .6s infinite;line-height:normal}
.ribs3{position:center;top:4px;right:3px;font-size:10px;font-weight:900;background:green;padding:0px 4px;border-radius:3px;animation:hotBSW .4s infinite;line-height:normal}
.ribs4{position:center;top:4px;right:3px;font-size:10px;font-weight:900;background:pink;padding:0px 4px;border-radius:3px;animation:hotBSW .6s infinite;line-height:normal}
.ribs5{position:center;top:4px;right:3px;font-size:10px;font-weight:900;background:cyan;padding:0px 4px;border-radius:3px;animation:hotBSW .6s infinite;line-height:normal}
.ribs6{position:center;top:4px;right:3px;font-size:10px;font-weight:900;background:teal;padding:0px 4px;border-radius:3px;animation:hotBSW .4s infinite;line-height:normal}
.ribs7{position:center;top:4px;right:3px;font-size:10px;font-weight:900;background:lime;padding:0px 4px;border-radius:3px;animation:hotBSW .6s infinite;line-height:normal}
.ribs8{position:center;top:4px;right:3px;font-size:10px;font-weight:900;background:orange;padding:0px 4px;border-radius:3px;animation:hotBSW .6s infinite;line-height:normal}
@keyframes hotBSW{from{opacity:0}to{opacity:1}}

After that you have the right to change any colour you want……. 

HOW TO CALL FOR THIS…..

For this to appear on your sites as ours, you need to call for the CSS, so just follow this ……

Copy and Paste the code below … to any Menu or Navigation you want.. you can place it at any position as far as it will not affect your site.

< span class=' ribs'>MashByte< /span>

Once everything is done, Save the template..

I hope you find this useful, but if in any case you find it difficult to apply it to your site, then leave a comment below for help and a quick reply, or use our Contact page for a personal assistant.

Note: You have the right to share this with anyone of your choice or on your blog….but Don’t forget to link back to MashByte.com…. Read our ToC here to understand how our Terms very well.

Remember to share……. 

What do you think?

Written by Kwabena

Kwabena is a tech freak, passionate about every new gadget and technology that comes his way. Always searching, always curios, he managed to gather an astounding experience that is very useful in his Info-Tech career.....
You can reach him by using any of his Social Media Handles below

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

Get a free Professional Email for your Domain

Easy way to add Automatic Source Link on your Blog to improve Backlink