Blogger displayed over here now if you don't add any text and if I click on generate barcode we have this alert displayed over here now I have shown you how to create this from scratch using.
HTML CSS and JavaScript and a library and uh I will leave the link of the design video in the description of this video and I will also leave the link of the source code so you can just copy and.
Paste the code to your website so in this video we're going to see how to add this to our WordPress website so let's get [Applause].
[Music] started right here I have logged into my WordPress dashboard and for running this WordPress website locally I'm using this uh software called local by Flywheel so.
The dashboard of your WordPress website so this is our local WordPress website and let's add this barcode generator inside a post you can add it to a page or a post if you want to add add it to a.
Page you can just go over here to pages and click on add new page I just add it to a new post so I'll just go over here to posts and let's click on add new post and here we have the title I'll just set.
The title to barcode generator and then here you can go ahead and add the content you want and once you want to add this barcode you can.
Just go ahead and create a new custom HTML block so for that you can just click on this plus icon and uh just search for custom HTML over here or you can also simply go ahead and.
Uh type forward slash and start typing custom HTML and you'll find this option over here so let's select that and here let's add our code so first of all let's add the CSS I'll just create a style tag.
Posts Related:
- Excel Today - Cross Functional Charts in Visio
- School Graphics Prints Files Free Download Sheri Sk Prints Graphics Office
- How To Design A Responsive Portfolio Website Using HTML, CSS & JavaScript Part 5 BlogSpot
For the
CSS and uh let's close the style tag over here and let's go to our CSS in our source code so this is a source code and uh let's copy everything from this line.Of code till the end and let's paste it over here inside the style tag right now let's go ahead and paste the HTML so let's go back and let's go to the HTML file and let's copy this HTML from here.
And we'll also copy this script tag now this is a script tag for the JS barcode Library which we're going to use for generating the barcode so let's copy the HTML over here.
And let's create a script tag for the JavaScript and uh let's go back to our source code let's go to the main CHS file and let's copy this and let's paste it inside the.
Script tag all right so we have added all the code and if you go back to your source code here we can see that we have the HTML file over here and uh you can go ahead and change the heading the.
Input field placeholder and uh the button text so all these things are over here you can just go ahead and make changes to these and now let's go ahead and uh click on preview and here we can.
See how it will look in the actual website and let's go ahead and click on publish and publish and let's see whether it works so let's click on view post and here we can see we have the.
Barcode generator and uh here let's add a text so let's Ty live blocker and let's click on generate barcode and here we can see that the barcode was generated and uh let's see whether we.
Have the alert if we don't have any text let's click on generate barcode and we have the alert displayed so everything is working all right we don't have the correct color for the button text that's.
Because the theme already has some color
For the button now if you want to change this color for this particular page you can go ahead and do that in the CSS so let's go to.Inspect and here we can see that for button we can see that the theme has already added this background color of This Global color which is some dark color so if I remove this we can see.
That we have the correct correct color being displayed over here now let's go back to our CSS and let's see whether we have added the color in our button so here we can see for the button we have.
Added this background color of red so let's go ahead and add an important over here so that it will override the styles of the theme so let's tap exclamation important and.
Update and let's go back and reload and now we can see we have the correct color for the button and if I hold over this we have the black text for the button so let's add important for the h effect.
As well so here let's type important and when we hold over this we need to have the white color so let's go back and here we can see we still have the white color for the text when we.
Hold over this so let's Ty color white and uh we will make this also important and let's click on update let's go back to our post and reload and now let's hold over this and.
I think in the beginning also we need to have the white color so here also let's add an important and update let's go back and reload now you can see we have the.
Correct color for the button and the hor effect is also working all right and uh the barcode generator is working as expected so that's basically how you can add this barcode generator to your.
WordPress 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 on the like button and.
Subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day [Music] a.
