Good day guys… Today is another day with something different.. But before that, have you ever thought of promoting your affiliate link or promoting something important on your site for your readers without using any third-party services?
If you have that thought, then mashbyte.com will show you how to add this to your blog as we have on our website.. (Kindly check the bottom of this page to see the Pop up Promo bar)
What’s the importance of using this Promo Notification on my site?
There are many uses of this notification bar, but over here I wil list some of the important of it..Using this can:
1. Help in user engagement on our site… For example… You can use this.. to show or prioritize a particular post on your site, so that visitors can see it early and click to see what it contains…
2. Help in earning money by simply using it to drive traffic to our affiliates sites or shops, where if people find our products interesting they can buy ..and by doing that, we earn a commission.
3. It helps in notifying readers of new updates on the site . And many more you can think of..
Now let’s move to how we can implement this on our blog.
The following are the steps involved in adding this to our blog..
1. Go to your blog. Or visit Blogger.com to get a new blog if you don’t have one.
2. On your dashboard choose the blog you want to add this to… And click on the layout tab on the right side of your dashboard menu
3. From there click on any available widget and Click on the “add widget button” , from the Pop up menu scroll down and select JavaScript/ HTML
4. Now copy the code below and Paste it in the widget …. Of your choice…
(This code is already parse, so you can just paste it in a widget or better still you can separate the CSS from the HTML )
CSS Code to be added to the main theme or widget
/* Promo Widget by CobieGh (MashByte.com) .mashbyte{position:fixed;left:20px;bottom:20px;background-color:#fefefe;padding:12px 15px 12px 12px;border-radius:15px;box-shadow:0 4px 12px 0 rgba(9,32,76,.05);display:flex;align-items:center;max-width:300px;min-width:260px;color:#505050;overflow:hidden;z-index:50}
.mashbyte.dis-30:after{content:'-20%';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:55px;height:25px;padding-right:10px;background-color:#299afd;border-radius:80px 0 0 0;color:#505050;position:absolute;bottom:0;right:0}
.mashbyte .mashbyte-close{position:absolute;top:8px;right:8px}
.mashbyte .mashbyte-close svg{width:22px;height:22px;fill:#989b9f}
.mashbyte .mashbyte-img{width:60px;height:60px}
.mashbyte .mashbyte-img a{display:flex;align-items:center;justify-content:center;height:100%;background-color:#299afd;border-radius:8px;color:inherit;font-family:'Ubuntu', sans-serif;font-weight:700;font-size:28px}
.mashbyte .mashbyte-content{width:calc(100% - 60px);padding-left:15px}
.mashbyte .mashbyte-content a{display:block;color:inherit}
.mashbyte .mashbyte-content a .title{display:block;font-weight:700;font-size:13px}
.mashbyte .mashbyte-content a .desc{display:block;font-size:11px;margin-top:5px;color:#989b9f}HTML Code to be added to the main theme or widget
/* Promo Widget by CobieGh (MashByte.com)*/
<div class="mashbyte dis-30" id="mashbyte">
<div class="mashbyte-close" onclick="document.getElementById("mashbyte").style.display="none""><svg viewbox="0 0 512 512" xmlns="https://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div>
<div class="mashbyte-img"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><a href="https://www.alibabacloud.com/referral?referralCode=x1s1yn">A</a></font></font></div>
<div class="mashbyte-content">
<a href="https://www.alibabacloud.com/referral?referralCode=x1s1yn">
<span class="title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Buy Domain & Hosting </font></font></span>
<span class="desc"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Get a special $20 extra cloud credit from Alibaba Cloud Now!</font></font></span>
</a>
</div>
Method 2
We can use this steps to also install the widget on your site….
copy the CSS code below and paste it before/above ]]></b:skin> or parse it with <style>….</style> and paste it before the </head> tag (in some themes you can’t find </head> but its rather written <head/>) kindly take note to avoid errors.
After pasting the CSS, move to the second steps where we will be placing our HTML code (i recommend to put it in a widget section so that it can be easily modified or edited) so to do that, just copy the HTML code below and place or paste it in any widget you like on your blogger dashboard.
You can use any of the above steps… they are all aimed at doing only one thing, so no panicking..
5. Now replace the highlighted text with your own.. and but do it well to avoid any errors.
6. You can also tweak the CSS to suit your choice..
Finally save the widget and go back to your site to see it live…
Note:- We will be updating this method soon… so kindly hit the subscribe button for be abreast with the next update….
I hope you find this useful, but if in any case you find it difficult to apply this , 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 or our DMCA here to understand how our Terms works very well.
Remember to Subscribe and share…….
