Up next in 10
How to Load widgets or Script only in desktop or mobile devices in Blogger
474 views
Jan 25, 2024
This video tutorial demonstrates how to selectively load widgets or scripts based on the type of device (desktop or mobile) in a Blogger website. The content likely covers techniques or coding solutions to conditionally load specific elements, ensuring a more optimized and responsive user experience. By following the instructions provided in the video, Blogger users can customize their websites to load widgets or scripts selectively, tailoring the content delivery to the capabilities and requirements of either desktop or mobile devices. This approach can contribute to improved performance and better adaptability across various platforms.
View Video Transcript
0:00
Hi everyone, welcome to Keyto Blogging and in this video I will show you how you can load Blogger
0:04
wizard or script only in mobile devices or only in desktop devices
0:10
You can do that by using simple trick and we will learn in this video
0:15
And by the way, if you found this content helpful, then make sure to hit the like button
0:20
And if you want to learn blogging in Hindi, then you can subscribe to our Hindi channel also, K2 Blogging Hindi
0:27
And I will leave the link in the description. So let's start the video
0:32
So first of all, I want to display the social follow wizard only in mobile devices and I don't
0:37
want to show this social follow buttons in desktop devices. Then how I can do that
0:43
Let me just go to blogger dashboard and I will go to layout section here
0:48
And here as you can see I have added that social follow wizard in sidebar
0:52
Let me just open it and as you can see this is the coding deep class key to social follow
0:58
So let me just copy the title of this wizard and I will go to theme section here and I will
1:05
click on Edit HTML but before changing anything makes you to take backup so that you can restore
1:11
it if you do any mistake in this process. So let me just click on Edit HTML here and I will
1:18
type simply Control Plus app and I will find that wizard. So I will hit enter and as you can see
1:25
This is the Social Follow wizard and the wizard ID is HTML 2 and you can also switch wizard from here like HTML 2 from here and as you can see the title is social follow so I need to add a small condition here in this wizard to show only in
1:43
mobile devices so I will copy a code like this condition data blog is mobile request so whenever
1:51
someone request your website from mobile it will load that wizard in that device and
1:57
it will not load that wizard in desktop So I have added the condition after the B wizard tag and you can also paste it just before
2:06
the ID of the wizard. Now let me just save this code
2:11
Okay, now let's go to the front end and let me just refresh this page
2:16
Sorry, let me just remove the question mark m equal to one first and let's hit enter
2:22
And as you can see the wizard is not loading in the desktop devices
2:26
So let me just click on inspect element here and I can say that you can see
2:30
any mobile devices like iPhone AC and let me just refresh that so that it will load the
2:37
question mark m equal to one version that is for mobile and as you can see question mark
2:43
m equal to one is added now scroll down and as you can see the social follow button is there
2:49
in mobile devices let me just close this one and let me just move that question mark m equal to
2:55
one from the URL so that it will load the desktop version and as you can see the social
3:00
follow button is gone from the desktop devices. So in this way you can selectively load any particular wizard only in desktop or only in mobile So this code is for desktop and if you want to show that wizard only in desktop devices not in mobile devices then you can use this code
3:18
Condition not data block is mobile request. You have to add a node just before this code
3:25
So if you put this code in the wizard section then it will load only in desktop devices and
3:30
it will not load in mobile devices. So in this way you can tweak your wizard loading
3:36
and improve your block loading speed. And the same way you can also load the wizard or load the JavaScript or HTML code only
3:45
in desktop or only in mobile devices. So let me just show you
3:49
So as you can see, there is a progress bar at the top and I want to load the progress bar
3:55
only in desktop devices and I don't want to load that progress bar in mobile devices
4:00
Then how I can do that? So I have to use a conditional tag
4:05
So if you want to load the wizard only in desktop devices, then you have to use the
4:10
if condition. So let me just go to the template editor. So you can access this by clicking on the Edit HTML button
4:20
Now let me just find that script and as you can see I have added that script here
4:26
So let me just hit enter here and I have to copy the if condition
4:30
So I will copy this fast if condition here. block each mobile request equal to false so it will load only in desktop devices and if you
4:39
copy this true version then it will load only in mobile devices so let me just copy this one and I will paste it just above the code and I will close this if condition like this
4:52
So I will copy this B if closing B if and I will close this like this
4:59
So whatever you put in between this code it will load only in desktop devices and if you make
5:06
it true then it will load only in mobile devices. So let me just save this code
5:11
Now let me just go to the desktop and let me just refresh this first
5:16
And as you can see the progress bar is still showing in desktop devices
5:21
So let me just switch to inspect element here and I will select mobile and let me just refresh
5:27
this page so that it will load the mobile version question mark m equal to 1
5:33
So as you can see the progress bar is gone from the mobile version but if you load the desktop
5:38
version so let me just remove the question mark m equal to one from here and let's refresh
5:45
this page and as you can see it will load the desktop version so in this way you can particularly
5:51
load any script in mobile or desktop devices and if you want to use this code in your website
5:57
then you can get the download link of this code and you can just copy this code and use it in your
6:04
blogger theme and if you found this video helpful then make sure to hit the like the
6:08
button and don't forget to subscribe to our channel for more upcoming videos like this
6:14
And if you want to learn blogging in Hindi, then you can also subscribe to our Hindi channel
6:19
I will see you in the next video. Thank you
#Blogging Resources & Services
#Skins
# Themes & Wallpapers
#Software