Also leave the link of the source code now in this video I'll show you how to add this to your blogger website so let's get started [Music].
So this is how it works we can see that we have this input field over here and if I add any text so for example if I just type test and if I click on generate barcode we have the barcode of.
Test displayed over here if you add any other text we have that displayed over here and if I don't add any text and if I click on generate barcode we have this alert that please enter a valid text or.
Number to generate a barcode so let's go ahead and add this to our blogger website so here I have logged into a blogger dashboard and uh let's go ahe and add it inside a post so you can just.
Barcode generator and uh here the first thing you need to do is change this into the HTML view so if this is in the compos view click on this button and click on.
HTML view now here you'll be able to add your HTML CSS and Java JavaScript code so first of all let's add the CSS I'll just create a style tag for that and uh let's go to our source.
Code and let's go to the style CSS file and let's copy this styles from here so let's copy everything from this line of code till the end and let's paste it inside the style.
Tag and now let's go outside the style tag and let's add the HTML so let's go to the HTML file and let's copy this HTML code from here here and we'll also copy this script tag from here because.
This is the library that is used to generate the barcode so let's copy all of this and let's paste it over here and then we need to add the JavaScript as well so let's create a script tag for.
Posts Related:
- Everyone has the power to automate with Microsoft Power Automate
- DAX for Power BI Part 3.1 - Relationships and the Related Function Office
- 5 steps Arrows ***FREE DOWNLOAD*** Powerpoint presentation slide template Office
That and let's go to our mainroad CHS
File and let's copy this JavaScript and let's paste it over here so this is how it works we can see that we have this uh input field over here so.You can add any placeholder text you want over here and then we have this generate button and you can change the text of the button over here and then we have this barcode SVG where we are.
Displaying the barcode and we have this heading over here so this is the heading so you can make changes over here and here in the styler CSS file we are adding the colors and all the other.
Styling of the elements so you can change all of them over here we can see that we have the color and all those things over here and in the main.js file we are actually generating the barcode.
So we are using this JS barcode library and there are multiple options that we have in this Library so so I have shown everything in detail in the previous video so you can check that out so now.
Let's go ahead and uh see whether it works so let's click on publish and confirm and the post has been published let's click on view and here we can see our barcode.
Generator is being displayed and uh let's go ahead and add some text over here so I'll just type live blogger and let's click on generate barcode and here we can see that the barcode of live.
Blogger is being displayed over here let's add another text and now we can see that the barcode for test 1 2 3 4 is displayed over here and if I remove everything and click on.
Generate button we have this alert displayed over here so the barcode generator is working all right now this heading doesn't have the font weight that we added over here so let's go back.
And uh let's target The Heading so this
Is the heading you can just go ahead and type font weight of bold and update it and now if you go back and reload now we can see that we have this.Uh font weight of Bol so everything is working all right so that's basically how you can add this barcode generator to your blogger website all right so that's basically it for this video if.
You have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for.
