vbn

Rp. 200.000

Read more »

BBC

Hello everyone, on this occasion I will share how to create automatic watermarks on images in blogger using CSS.

A watermark is a copyright sign that can be in the form of writing or a logo, which aims to protect our work so that it cannot be reused or distributed without permission.

The watermark that I will share here uses CSS, and will automatically add a watermark on every image on the blog, like it on the homepage of the post page and related posts.

but keep in mind this watermark only uses css which means it is not permanent, if your image is downloaded then the watermark will not be included or not present, as well as if your image is found in the browser then your image has no watermark.

so it's not 100% of your images can be protected with this watermark, more precisely this is just to beautify the appearance, if you want to protect your images I recommend using a photo editor to make it permanent.

and keep in mind that it is possible that not all templates can match this css, because each template can have a different thumbnail class name, so a basic css understanding is needed here because you have to be able to adjust the class to the template you are using, ok make those of you who want to make it, let's see how below.

---

Create Automatic Watermark On Images In Blogger

please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin> if it is done don't forget to click save done

.postEntry .separator{position:relative}
.relatedPosts .itemThumbnail div{z-index:2}
.onPost .postEntry .separator:before{bottom:7px}
.postThumbnail a:before, .postEntry .separator:before,.relatedPosts .itemThumbnail > *:after{content:'Kaily';position:absolute;right:0;bottom:0;display:flex;font-size:10px;font-weight:bold;color:#fff;z-index:2;border-top-left-radius:10px;background-color:#3a3a3a;padding:5px 7px;opacity:.7}

note:
the part I marked Kaily please change with the name of your blog, and if you are not using Our template you need to adjust the class in css

ok so that 's how to make automatic watermarks on images on blogger, hopefully it's useful and thank you for visiting.

© Source Code Copyright
https://www.kaily.in

How To Add UPI Payment Gateway In Ecommerce Website

Introduction

Hi guys, Today we’re going to see how you can add the UPI payment gateway to your ecommerce website. Let’s say you have an ecommerce website and on the checkout page, you want to give your customers a way to make payments using UPI apps... like google pay. 

You can do that easily by Reading this article. So after reading this article You’ll be able to add a UPI payment option to your checkout page, And if a customer wants to purchase a product, they can scan this code on their UPI app, to make the payment. And once they make the payment, you will receive that payment on your bank account, linked to your UPI app. 

Okay! Now all you need to have, to follow this tutorial is an e-commerce website. So let’s get started, I’m Vaibhav, And let’s add the UPI payment option on your website. 

Step - I Install Plugin

So to add UPI option to this site, We’re going to do 2 steps. The first step is to Install the UPI plugin in WordPress. So to install the plugin, Let’s go to our WordPress dashboard. Now go to plugins, And click add new, Now search for a plugin called UPI  And you’ll get this plugin, This is the plugin, which is going to help us add the UPI payment option on our site. So to install the plugin, Just click install and then click activate So now we’ve successfully installed the plugin.

Step- II Set Up Plugin

Once you’ve installed the plugin, We can now go to the final step, Which is to set up this plugin. Once you set up the plugin, the UPI payment option will be added to your website. So to set up the plugin, Just click settings here. And then scroll down. Now here you need to enter the UPI Id where you want to receive your payments. So to get your UPI Id, Let’s go to our UPI app. Now let’s say your UPI app is google pay, So let’s open it, Now to get your Id, Just click here, And As you can see, we’ have got our UPI Id Once you get this Id Just type it in this field. 

So now When a customer makes a payment, you’ll receive that payment to your bank account, which is linked to this UPI Id. Okay, now here you need to choose whether you want to collect the upi address of your customer or not. So to make it easier for customers to make the payment, Just click ‘hide’. Once you’ve done that, Just scroll down, And then click save changes. So now we have we’ve successfully completed setting up our plugin.

Once you’ve set up the plugin, The UPI payment option will be added to your website, So To check that, Let’s go to our checkout page, Here you can see that before we did not have the UPI payment option. Now if we click refresh, You can see that we have we’ve now got the UPI payment here. So Now to complete the purchase of this product, fill up details, And to make the payment using UPI, Just select UPI, And then click proceed to payment, And it’ll take you to a page. Now to complete the payment, Your customer needs to scan this code on their UPI app.

So just like a customer would do open your UPI app, And then scan this code, And as you can see, we have got the product amount here, along with the order id Now if we click pay, You can see that the payment has been made. 

Now if you take your mobile, You can see that we’ve got the message saying, The money has been credited to our bank account. So this means we’ve successfully received the payment from the customer. Okay So now if a customer goes to our site, And clicks proceed, And then clicks confirm, You can see that the order has been placed successfully. 

So this is how your customer scan order your products, using the UPI payment option. Now if you go to your Inbox, You can see that we’ve got an email about the new order. And also your customer will get an email So now if we go to our customer’s inbox.

You can see that, we have got an email Now if you open this mail And here as you can see, they have a message saying the order is still on hold And your customer will now have a doubt whether their payment has been sent or not So in order to notify your customer that you have received the payment You need to change the order status on your website Before we change it, Let’s check whether we have received the payment from our customer. 

Okay, so once the customer has made the payment If you open your UPI app, Here you can see, a new name has appeared, Now if you click it, You can see that we have we’ve received the payment and you can see the order number here. Okay, Once you have received the payment. 

You can now change the order status So let’s go to our dashboard Now go to ‘woo-commerce’ And click ‘orders’ Here you can see the order using the UPI payment Now to change the order status just change the status to ‘processing’ And click ‘update’. Now your customer will receive another email from your website. So let’s go to our customer’s inbox We have got the email, Lets open that And as you can see, the order is being processed. So now you can start delivering the product to your customer.

Purchasing a product from mobile

Okay, so this is how you can add an UPI payment option on your ecommerce website. Now !... Let’s say your customer is visiting your site from their mobile. And they want to purchase this product, How will they pay, using their mobile phone? 

So next, let’s see how your customers can purchase a product from their mobile, using the UPI payment option. To purchase this product, All they have to do is Just click add to cart, Now click proceed to checkout, And here You can see that we’ve got the same UPI payment option, So now to purchase the product, All they have to do is, Fill in these details, Now to make the payment using UPI, Just select this, And click proceed, And you will get this page. 

Now to complete the payment from their mobile, All they have to do is, click ‘pay through UPI’, And it will open the UPI app, Now if they click ‘proceed to pay’, You can see that the payment is made, And they’re back on our site, Now if they click proceed, You can see that we’ve successfully placed the order. This is how your customers can purchase a product on their mobile using UPI. 

Conclusion

So that’s it, guys, Now you know how you can add the UPI payment option on your ecommerce website. Now if you want to learn more about WordPress, you can Click here

Thanks for Reading. I will see you in the next Article. Take care. Bye-bye.  

How to Create a Multilingual WordPress Site (Translate site into multiple languages)

Hi, guys. Today, we’re going to see how you can make your WordPress website multilingual. Let’s say you have a website,  And, you want to give your visitors an option to view your site in their preferred languages. You can do that easily by reading this Article. So, after reading this article, You will be able to add a translate option on your website. 

Now, when someone clicks on it, they will be able to choose a language, and your site will be translated to their preferred language. Okay. I’m Vaibhavs, and let’s get started. 

Step - I

We’re going to do 2 steps. The first step is to install the GTranslate plugin in WordPress. So, to install the plugin, go to your WordPress dashboard. Now go to Plugins, and click “Add New.” Here, search for a plugin called “GTranslate.” And, you will get the plugin. 

Now, this is the plugin which will help us translate our website into multiple languages. So, to install this plugin, click “Install Now.” And then click “Activate.” Now, you have successfully installed the GTranslate plugin in WordPress. 

Step - II

Okay. So, once you’ve installed the plugin, We can go to the second step, Which is to add the translate option to your website. Once you add this option, Your visitors will be able to choose and view the site in their your preferred language. So, to add the translate option, Just click “Settings,” And here, select the languages in which you want your visitors to view your website. 

Okay. Now, once you have selected the languages, Next, you need to choose where you want to display the translate option on your website. So, to choose that, Just click here. Now, if you want to display then translate option on your menu, Select “Primary Menu.” And, click “Save Changes.” Now, the translate option will be added to our website, And our visitors can easily view the site in their preferred languages.

Now, you can see that you have got the translate option on your site. Now, if a visitor clicks there and selects a language, You can see that your site has been translated to that particular language. Okay. This is how you can make your WordPress website multilingual. And let your visitors view the site in their preferred language.

How to add translate option to Footer ?

Next, let’s see how you can add this translate option  to your footer section. So, to add the translate option to the footer, Go back to your WordPress dashboard. Now, go to “Appearance” Then, click on “widgets” and it will take you to a page. Here, you can see the footer section. Now to add the translate option to your footer, Just drag this “GTranslate” widget, and drop it here. And as you can see, The "GTranslate" widget is added Now, Click "Done" and the translate option will be added to your footer section. Now, if we go back to your site and click “Refresh,” You can see that you have got the translate option in our footer section. And, the visitor can change your site’s language by clicking there. 

So, this is how you can add the translate option to your footer. So, now you know how to make your WordPress website multilingual. 

Automatically Translate

Next, let’s say a person from France wants to view your website, Now, by default, their browser language will be French. But when they visit your site, it will be in English. Now, instead of making the visitor select the language as French manually, What if you want to automatically change it to the visitors preferred language which is french? So, next, let’s see how you can automatically translate your website to the viewer’s browser language. So, to do that, Let’s go back to our plugin settings. Here, we have an option to automatically switch our website to the browser language. So, let’s click here to enable the option. And then, click “Save Changes.” Now, the visitors will be able to view your site in their default browser language. 

Now, let’s say a visitor who has French as their browser language wants to visit your site. Now, if they go to their browser, And enter our domain name, You can see that our site has been automatically translated to French, without selecting it manually. So, this is how you can automatically translate your site to the viewer’s default browser language. 

How you can display languages in their native names

Okay. Next, let’s see how you can display the languages in their native names. So, to display the languages in their native names, Let’s go to our plugin settings. Now, select this option toshow the native language names. And then click “Save Changes.” Now, lets go back to our website and click “Refresh,” Now if we click here You can see that the languages are displayed in their native names. 

Add country flag next to Languages

Okay. Now, to make this option more clear and user-friendly, We can display the country flags next to the language names, like this. So, to do that, Let’s go back to our plugin settings, And, go here Now, to display the flags, Just select this option And then click “Save Changes.” 

So now the flags will be added next to the language names on our translate option. So, to check that, Let’s go to your website and click “Refresh.” Now click there And, you can see that the flags are displayed next to the language names. And, it makes the option look more clear and user friendly. 

Conclusion

Okay. So, that’s it, guys. This is how you can make your WordPress website multilingual. Now if you want to learn more about WordPress, you can Click here 

Thanks for Reading. I’ll see you in the next Article. Take care. Bye-bye. 

How To Add Login & Signup Page Before Checkout

Hi guys today, we're going to see how you can add a login and sign up page before checkout on your e-commerce website. Let's say you have an e-commerce website, now if a customer wants to buy this product And adds it to cart And clicks proceed to checkout, it'll take them to a checkout page. Now, instead of showing the check out page, you want your customers to be taken to a log in page. Where they can login or create an account on your site to purchase your product. You can do that easily by reading this Article. So after reading this article, when a customer clicks proceed to checkout, it'll take them to a log in page,  now when they enter their details and click login there'll be taken to a checkout page where they can complete their purchase. So let's get started. I am Vaibhav And let's add the log in page on our ecommerce website. 

Step - I

We're going to do two steps. The first step is to enable account creation on your website. Once you enable the account creation, the signup form will be added to your site. So to enable it. Let's go to our WordPress dashboard, then go to woocommerce and click settings, now click Account  Privacy  And it will take you to this page.  Now to allow your customers to create an account in your website. just enable this option. 

Once you've done that  just scroll down And click save changes. So now we have successfully enabled the account creation. Once you have enabled it Next, let's go to step two, which is to install a plugin. So to install a plugin, let's go to plugins And click 'Add new' now here Search for 'woocommerce force authentication'. And you will get the plugin. Now, this is the plugin, which helps us to add the login and the sign up form before the checkout. So to install the plugin let's click install and then click activate. So now we've successfully installed the plugin. And our login page will be added to our website. So to check how it works. Let's go to our site. 

Now, let's say a customer wants to buy this product and adds it to the cart. Now, if they click proceed to checkout  you can see that they're taken to our account page. and now If a customer wants to complete the purchase, they need to log in or sign up on your site. Now let's say the customer already has an account on your site. So to complete the purchase, all you have to do is just enter their details and click login. So once the customer has logged in, you can see that we have now got our checkout page. 

So now your customers can go ahead and purchase the product from your website. Okay. So this is all your existing customers can log in to your site  before checkout and complete the purchase. But what if a customer does not have an account on your site How can they complete the purchase? 

Step - II

Next Let's see, how new customers can purchase your product. So let's go to our site. Now, let's say a customer wants to purchase this product. and adds it to cart. Now if they click proceed to checkout, you can see that we have got login and sign up page . now to complete the purchase Instead of logging in the customer can create an account using this sign up form. 

So to create an account, just like a customer would do let's fill up these details and click register. As soon as you click register, your account will be created. And as you can see, we now have a checkout page  much I got paid. So now your customers can go ahead and purchase the product. Okay So this how new customer can create an account and purchase the product from your site. 

Now, let's say you want to change the look of your login and sign up forms  and have a different style like this, which looks more attractive. How can you do that? So next, let's see how you can change the look of your forms. 

So to do that first, do we need to install a plugin So to install the plugin, let's go to our WordPress dashboard, then go to plugins  and click add new now search for login signup popup And you will get this plugin. This is the plugin, which is going to help us change the Look of our forms. So to install the plugin, let's click install it and then click activate. So now we have installed a plugin. Once you have installed the plugin. Let's go back to our site. Now, if we click refresh, you can see that we have changed the look of our forms. If you want to change the button, color of this form like this, you can do that by going into the plugin settings. So let's go to our WordPress dashboard. Then go to login signup, popup and click settings,  now click style and it will take you to this page   Now, if we scroll down And as you can see, we have options to style of your form. You can change the color from here. 

Okay, So that's it guys. This is how you can add the login & signup page before checkout on your WooCommerce website. Now if you want to learn more about WordPress, you can Click here

Thanks for Reading. I'll see you in the next Article. Take care. Bye-bye. 

How To Create A slider in WordPress

Hi guys, I'm Vaibhav. Today we'll be showing you how you can create a slider, in WordPress. So, after watching this video, you'll be able to create different types of sliders like a compact slider or a full screen slider. So, make sure you Article  this Article till the end to see, how you can do it. So let's get started. 

We're going to do this in 5 steps.

Step - I

The first step is to "Download the Slider Plugin" which is going to help us create our slider.

Step - II

 Okay, so now the plugin will be downloaded to your computer Once it's downloaded We can now go to step 2, Which is to Install, this plugin on our website So to install this plugin let's go to our wordpress dashboard and go to plugins and click "add new" Now click "upload plugin" And drag and drop this file 'here' and it will be selected Now let's click "Install now" And 'activate plugin' Okay! so now the plugin is installed on our website And Once it's installed, you'll see this new button, called "Smart Slider" So once you've installed the plugin, it's time to 'create' your 1st slider.

Step - III

So to create the slider let's click 'smart slider' Now, here we have 2 options to create our slider The 1st option is to create a slider manually And the 2nd which is the faster option is to choose a slider design from 'the template library' So to make the slider faster, let's click template library And, here you'll find a lot of designs for your slider Now, if you want to see only the free designs You can click here and it'll show you only the free designs And if you want to see more premium designs, you can click here, and it will show you the premium ones.

So first, let's try the free designs. So we'll click "free" Now if you want to see how the slider will look like just click it And you'll see, the preview of how the slider will look on your site. Now if you like this slider, and you want to add it to your site just close this click "import" to bring the slider into our site Okay! So now, the slider, has been imported, into our site And you can see that we have these 3 slides in the slider Now if you want to see a preview just click here And you can see how the slider looks like So now we know, how to create a slider.

Step - IV

Next let's go to step 4, which is to Add the Slider to our Website So to add this slider to our website Let's close this and then go to our site, by clicking 'visit site' Okay, so this is the site, which we created in our previous video In order to add the slider to your website, all you need to do, is to go to the page, where you want to add the slider And then click edit with elementor Now the elementor plugin will help you to create pages. 

So, once you creating pages using elementor you can add your slider to the page So let's say you want to add the slider, to your home page Just click home And click "edit with elementor" And it will take you to this editing section Now go to the place where you want to add the slider, and click the 'plus' icon And here you can see that wehave the smart slider element So let's drag this element and drop it, here And it will ask you, to choose the slider that you want to add So we'll select the slider which we created and That's it! 

You can see that the slider has been added to our page So now, to save this you just have to click 'update' and then view the page by clicking here So as you can see we have successfully added, the slider to our homepage So, now we know how to create a slider and add it to a page 

Step - V

Next, let's see how we can edit this text and this image on the slider Okay So to edit the slider let's go to 'smart slider' And then go to edit and click the name of the slider, that you want to edit Now here you can see that we have these 3 slides So, to edit any slide, just click edit And it will take you to this "editing section' Now, if you want to change this text Just click it And then change the text here So you can change "any" text the same way. 

Now if you want to change the link of this button You just click it And change the link here And you can also change the name of this button by typing your text here So, once you're done you can close this And now, if you want to change this image Just click it And then select the image And then drag and drop your image So once you're done with the changes you can save it by clicking 'save' And all the changes will be saved So now let's view the site, by clicking here And you can see that the slide has all the changes we made So, this is how you can add slider to your wordpress site.

Now if you want more designs for your slider Just go to 'smart slider' and click 'dashboard' And then go to template library again and choose 'premium' to get much better designs than we saw in the free ones So for example, you can geta slider, like this one! So if you like any of the pro sliders you can get it by purchasing the pro version here So when you buy the pro version, you'll be able to get all of the sliders listed here This is how you can add sliders to your wordpress site.

So, that's it guys. Now if you want to learn more about WordPress, you can Click here. I'll see you in the next Article Take Care Babye :)