Up next in 10
How to Customize Blogger Template from scratch _ Median UI Theme Customization [Part-1]
375 views
Jan 28, 2024
The video titled "How to Customize Blogger Template from Scratch: Median UI Theme Customization [Part-1]" is a comprehensive tutorial for Blogger users looking to personalize their websites using the Median UI theme. This video, being part one of a series, focuses on the initial steps of customizing a Blogger template, starting from scratch with the Median UI theme. Viewers will be guided through the process of personalizing various elements, layout, and design aspects to create a unique and tailored appearance for their Blogger site. By the end of this part, users should have a solid foundation in customizing their Blogger template, laying the groundwork for further refinements in subsequent parts of the series.
View Video Transcript
0:00
Hello everyone, welcome to Ketu Blogging and on this video I will show you how you can add a custom
0:04
theme to your blogger website and customize it from scratch. So here we will use the Median UI theme, but you can use the same technique to customize any
0:14
other blogger theme. So let's go to your blogger dashboard and here as you can see, I have added a default blogger theme
0:22
So let me just delete this. So here click on Edit HTML
0:29
here Control Plus A and delete this code. Now you have to copy your custom theme code from here and paste it here
0:39
Now save your theme. So this is the code for Median UI but you can follow the same process to any other theme
0:47
So let's go back and here go to Layout section. So before that let's refresh this page
0:55
And as you can see the Median UI theme is added in this website
0:59
So go to your layout section and this is the header notification section that you see in this section
1:07
So you can either disable it or edit it to show a notification like this
1:13
So to edit this header notification, you can change the text here like download the blogger template
1:19
for free. So here as you can see, you can change this text from here and you can add a button link here
1:25
in the hash value. And you can also change the button text like download
1:29
download to click here or something like that and here you can delete this section like
1:35
you can delete this section from here. Now let's save this but I will close this wizard because I don't want this
1:44
So click on save and here refresh this page. And as you can see the header notification is gone
1:52
So let's check how you can remove this slider or edit this slider from the layout section
1:58
down and here you will see this option slider mini so click on it and here you can see
2:04
see the slider content so you can change this slider image from here like this
2:09
this is the slider image URL so you can also change the slider image like this
2:16
so this is the image URL of the second slider and you can add a link to this slider
2:23
so when someone click on the image it will give to that link so here
2:28
I don't want to add this slider. So here scroll down and click on the wizard button and click on save
2:37
Now let's refresh this page again and as you can see this slider is gone
2:44
Now let's check how you can edit this menu in this website
2:48
So here you will see this option navigation menu. So if you want to edit this navigation menu then you have to edit it in the HTML section
2:58
If you want to add a simple navigation menu, then let me just show you here click on this
3:04
button and click on Save and here activate the simple navigation menu
3:10
Now you can edit this navigation menu. So let me just delete this custom menu and let's save this
3:18
Now let's refresh this page and as you can see we have added a simple navigation menu
3:26
so that you can edit it within the layout section. So let me just add a new menu like this
3:33
So here click on add new and here I will add a section like block and I will add the
3:40
blog link here and let's save this and let's save this wizard
3:46
Now refresh this page and as you can see you will see a section called block and if you want
3:53
to edit this advanced menu then you have to go. to your theme editor
3:59
Okay, let me just show you how you can edit this advanced navigation menu in your theme
4:04
So let me just disable this simple navigation menu from here and let's turn on the advanced
4:11
navigation menu from here. Now here go to the theme section and here click on Edit HTML
4:20
So here in the drop down menu you can select like link list triple zero
4:26
So here as you can see, this is the simple navigation menu
4:30
So here scroll up and you will see this option standard menu
4:35
So let me just go to the blog post and refresh this page
4:41
And here as you can see, this is the first sub menu. So you will see the sub menu option like this
4:47
So you can change the sub menu text from here and you can change this sub menu item like
4:55
This is 4 items. So you can change this 4 item from here
4:59
So you can add this link to this 4 item and you can change this sub menu item
5:04
So let me just add it like block and let me just change the sub menu 02 to about
5:14
And you can change this sub menu 3 or 4 and you can add the sub menu like navigation
5:22
Now here scroll down and you will see this option drop down style 1
5:28
So here this is the second sub menu. So we can change the second sub menu text from here and you can change the link to the
5:37
sub menu and you can change the sub menu text like this is sub menu 05 and you can see this
5:44
is sub menu 05. So you can change it here And if you want to change this next menu like to see this next menu like to see about or contact then you can change it here So this is the about section and you can change this about link in this section
6:02
like this is the H value. And if you want to change the contact link, then you can change it here
6:08
in the Hase value. This is the contact section. So in this way you can edit your standard
6:14
menu but I prefer simple menu so here let me just save this code and let's
6:21
you press this page and here as you can see we have set this navigation
6:26
and here blog and about page so in this way you can change this menu but if you
6:32
don't want to match this code then I recommend you to use the simple navigation
6:38
menu so let me just close this and turn on the simple navigation menu
6:44
Let's save this. Here you can change the social media links. So here by default it is added Facebook, Instagram, Twitter
6:54
So here this is the social media links. So you can change the link to your own social media profile
7:01
And if you don't want to add a social media button then you can simply delete this button
7:06
So I don't want this WhatsApp button and this LinkedIn button. So there are four icons here
7:13
Let's save this and you can add this social media links here in the has value
7:19
So let's save this and let's refresh this page. And here as you can see the other icons are gone and here we have only four icons
7:30
So let's check how you can change this section. This is the author section
7:36
Here you will see this author name and a simple author description and the location and here
7:41
are the social media icons. So you can change it here. So here you will see this option called author profile
7:50
Click on it. So you can show this About Me option. So it will turn up the description
7:56
So I don't want to turn up the description. But I don't want to show this location
8:02
So click on this and let's save this. And here you can change the social media links like this
8:10
So I don't want WhatsApp from here. I don't want LinkedIn and Instagram from here
8:17
So let's save this and let's refresh this page again. And here click on author section and here as you can see there are four social media icons
8:29
and the description is showing. And that is also a dog mode facility
8:34
So here you don't need to do anything. It will work automatically when you paste the theme code
8:40
So let's check how you can edit this. latest post section. So by default there is five posts showing here. So here to edit this
8:49
blog post section you have to scroll down and see this blog post option. So click on it and
8:56
here click on 7 to 8. And here you can add the author format like by. And here you will
9:05
show this publishing time and you can show the comment count here. So here I don't want to
9:13
show the location so turn this up and let's save this page
9:19
Now let's refresh this page and this is updated. But there is no more post in this website
9:28
So there is only five blog posts in this website so that it will show only five blog posts in this section
9:34
But if your website has more blog posts then it will show that amount of blog posts that you set
9:41
in this blog post section. And if you don't want to show the author profile here, so let me just show you
9:48
Let's open a blog post and here scroll down and here you will see this author section
9:55
So if you don't want to see this author section, then you can go to this menu and click
10:01
on show author profile. So close this up and let's save this
10:06
Now let's refresh this page and scroll down and there is no author section
10:12
here. So in the same way you can disable the social share button from here like this
10:18
So just go to this option and here you can close the social share button. Let's save this
10:25
and let's refresh this page. Now scroll down and there is no social share button. So in this
10:35
way you can edit this block post section in your blogger theme. Now go to your layout section
10:43
And let's check how you can edit the sidebar. So this is the popular post wizard
10:48
So here by default it is showing five blog posts. So you can change it like suppose I want to show three blog posts in the popular section
10:59
And if you want to show the image then turn this on and let's save this
11:05
Now let's refresh this page. And here as you can see, the images is shown in the popular blog post section
11:14
So I don't prefer to show the images in this popular post
11:19
So let's close this and let's save this. Now let's refresh this page and here as you can see the images is gone
11:28
Here and this is the level section. So you can edit this level section from here
11:33
Just click on it and you can show this like in the list format or cloud format and you can also
11:39
add selected levels from here like this So I will select the all level from here and let save this Now let refresh this page and here as you can see the levels are shown in the list format
11:54
So in this way you can either use a cloud format or a list format for your levels
12:00
And let's go to your layout section and this is the sticky section
12:05
So you can add a sticky wizard like this. So let me just add a wizard from here
12:11
So I will show a pages of my blog post. So here click on add item and let me just add a page like blog and let's add a URL
12:24
Let's save this and let's again add a new section like about a section
12:31
Let's save this and let's save this wizard. Now let's refresh this page and as you can see the pages are showing and when I scroll
12:41
down this section will stick to this sidebar and this gives your website a better look
12:47
So you can add ads in this section or you can add a call to action in this section
12:54
So let me just remove this wizard and let's open the sticky ad and here you can add a ad section from here
13:03
So let me just close this and here click on Add Gazette and here let's add an image from here
13:11
So let me just search for image like social media follow and here click on the image section
13:23
and here let me just click on this image and here right click on it and let me just copy the image
13:32
address and go to the layout section and here you have to click on the image URL
13:38
and paste it here or you can directly upload it from your computer and let me just add
13:44
the link of this image so here you can add a link like this and you can add a title like
13:52
follow us and let's save this wizard now let us repress this page
14:02
And as you can see, this image is shown here. So when someone scroll down, it will stick to the right sidebar
14:11
And the best part of this theme is it will automatically generate the table of content for you
14:17
So there is no heading in this blog post. So let's open another blog post and let me just see
14:25
This blog post has no heading. So let's open another blog post
14:30
So this blog post has heading, so here click on Table of Content and it will automatically
14:35
generate the Table of Content for you. So there is some error but it will work perfectly fine for all content
14:43
So I have already added a manual table of content for this
14:47
That's why it is not working in this blog post. So let's go to the Home page
14:55
Now go to the layout section. So you have already seen how this blog post section work
15:02
So let's click on the PIN post and let's select a PIN post form here
15:07
So I will select this post and click on Save. Now let's refresh this page and as you can see there is a PIN post shown above the latest
15:18
post and you can select on the List View or Grid View in the latest post
15:24
So I hope most of the setting in the home page are completed
15:28
So let's go to the layout section and let's check how you can place ad in this theme
15:35
So if you want to add a mini ads like this, so you can paste the ad code here and turn
15:41
on this button. So it will show this ad here in the above section of the latest post
15:49
And if you want to add a middle post ad like this, then you can paste the ad code here
15:55
So when someone upon a blog post, it will show ads between the blog post
16:02
So you can add the middle ad 1 or add 2 from here
16:06
So you can also add different add unit in the sidebar. And if you want to add the mobile menu, then you can do it here
16:15
So here click on Edit and let me just open this website in Mobile View
16:21
So here click on Inspect Element and this is the Mobile Menu
16:25
So you can edit this from here. So you can add this homepage link or you can add the search link or you can add dark mode
16:35
button or delete this dark mode button. So let's cancel this. So I hope you got the idea how to edit this mobile menu in the layout section
16:48
So let's go to the blog post section and here I will show you some interesting things like
16:54
let's open this blog post and here let's click on Compose View
17:02
So if you want to add a download button, so let me just show you
17:07
So if you want to add a download button in this format, then here you have to add this code
17:13
like this. So just scroll down and here you will see this
17:17
This is the download button code. So this is the download info dip and here you have to add the download
17:24
download file name and you can set the file size here. So you will get all the code in the
17:30
official documentation website So here as you can see you can add the typography in this format So you can add image grid here like this just copy this code and here replace the image
17:43
all attribute and the source image and this grid will be automatically added to your blog post
17:49
So scroll down and you can also add lazy load by just adding a class name class equal to
17:55
lazy and it will automatically lazy load the image in this theme
18:01
And if you want to add a manual related post, then you can do this by adding this code
18:07
You can also add a post break like this. So just copy this and paste it in the HTML section and it will show a post break like this
18:16
So let's scroll down and if you want to add a table like this, then you can do this
18:22
But I don't recommend to use this table because this is not responsive
18:27
Instead of you can add a responsive HTML table and I have already
18:31
made a video about this so you can check this video link in the description
18:37
So let's scroll down and here you can add a syntax highlighter
18:42
So let me just show you how this works. So just copy this code and go to your blog post and here I want to add a code like this
18:52
So you are paste this code and here let me just add some code like this
18:57
So let me just add a paragraph here. So this is a paragraph and let me just add this paragraph and let's update this blog post
19:13
And let's see, let's see this page. And as you can see the HTML block is shown
19:21
But there is no paragraph tag shown here because you have to change it here
19:27
like this. So here let it will not recognize the less than and greater than symbol in this
19:33
code. So here you have to type like and less than LT and then semicolon. Here you have to close
19:42
this like and GT for greater than and add a semicolon. You have to follow the same process
19:51
like and LT semicolon for less than and here you have to add it to add it
19:57
like and gt semicolon. Now let's update this blog post and now let's refresh this page
20:08
And here as you can see the p tag is shown in this code. So you can add a HTML code or CSS
20:14
code or JavaScript code in this format. You can also add a show height button like this. Just copy
20:22
this code and here you have to change this title and the content from here
20:27
And if you want to add accordion to this theme, then you can use this code or you can watch
20:34
this video for adding accordion style FAQ button to your blogger website
20:40
So let's scroll down and here this is the note block. So if you want to add a note like this, then you have to add a class equal to note here
20:50
Let's copy this and let's add a note here in this blog post
20:57
So I have already added a note here. So let me just add this node in this paragraph
21:03
So last week BCCI. So here go to your edit at HTML section and search for this code
21:11
So let me just search for last week BCCI. So here you have to add this code after the P tag
21:21
So let's add this code class equal to note and let's update this blog post
21:27
Now let's refresh this page and here as you can see it is turned into a note block
21:34
So all you have to do is add a class after the P tag and if you want to show a warning note
21:41
then you have to use this class class note note alert. You can also add the same external link like this just use this class and if you want to add
21:52
button like this then you have to add the class like this
21:56
So let me just add a button like this. So I will select the icon download option
22:02
So just copy this and go to your blog post. And here let me just add this button to test it here
22:11
So here you can select this download to like click here to download and here you can add this
22:21
download link here and let's update this blog post. Now refresh this page and here as you can see the button is added
22:33
Click here to download. So in this way you can use any of the button from here
22:39
I hope you got the idea how to edit this blogger team and customize it from scratch
22:46
And here let's scroll down and let's take how you can add lazy load YouTube to your
22:51
blogger website. So you can either use this code or you can go
22:55
watch this video to lazy load your YouTube videos perfectly. And if this video help you, then make sure to hit the like button
23:04
And if you have any doubt regarding this blogger customization, then you can ask me in the
23:09
comment section or you can share your screenshot in our Telegram channel
23:14
So I will try to help you as soon as possible. And if you are new to this channel, make sure to hit the subscribe button to get notified
23:23
of every new videos that I upload. upload. I will see you in the next video. Thank you
#Blogging Resources & Services
#Skins
# Themes & Wallpapers