Up next in 10
Stylish Link List using HTML & CSS (Compatible with Blogger, Wordpress & Other CMS)
12K views
Jan 24, 2024
In this tutorial video, viewers will be guided through the process of creating a stylish link list using HTML and CSS, with compatibility for Blogger, WordPress, and other content management systems (CMS). Released in 2023, the content provides a step-by-step guide, making it accessible for users of varying expertise. Whether you're a web developer, blogger, or someone looking to enhance the visual appeal of your link lists, this tutorial offers practical insights and clear demonstrations on crafting a stylish and customizable design. Learn how to create an aesthetically pleasing link list for your website or blog with the guidance provided in this tutorial.
View Video Transcript
0:00
Hi everyone, welcome to Ketu blogging and in this video I will show you how you can add a link list to your blogger and WordPress website
0:07
As you can see that, there is a link list like this and you can also see there is a link list like this
0:14
Here you can see that 1, 2, 3, 4, the numbering is done in this list and it's looking quite good
0:21
So let's check how you can add this list to your blogger and WordPress website
0:26
So this link list is created using HTML and CSS. So you can use it in any website, whether it is blogger or any other CMS platform
0:34
So let me just show you how you can create this link list. So let's create a link list like this first and then I will show you how you can create a link
0:44
list like this. So let's go to the blogger dashboard and let's go to the layout
0:49
Now here I am using the Filetro Pro theme. So the process will be pretty same in all the themes
0:56
So here in the sidebar let me just add a gallery. it here and here I can search for link list and I can add some list in this so let me
1:07
just add a link like home and let's add some link like about all right I have
1:24
added some link in the link list wizard and let me just save it
1:29
So, in some theme there is some styling applied to the link list, but in this theme as you
1:34
can see, there is no styling applied to the link list. So let's add our own custom style
1:41
So what I can do is I will right click on here and click on inspect
1:47
And here I will select the list element here and I will click on plus icon here
1:54
Now I need to target the specific list in this wizard. So what I can do is I will copy this ID of this wizard here and I will select the list
2:05
I will click on plus and let's add the link list with list item and let's add a background
2:13
color here and let add a blue background here Let add the has value to target the ID here let me just add the background
2:28
color from here so let me just pick the color from here and let's add the color
2:34
here like this as you can see that the background color is applied so let's
2:40
add a padding here and let's add a padding of 10 pixel
2:46
and let's add 15 pixel from right and left. Now let's add the margin bottom here and let's add the margin bottom to 4 pixel
3:04
And as you can see that there is a spacing between these list element
3:10
Now let's add a border left here. And let's add the 2 pixel solid blue
3:23
And as you can see that the border left is applied here
3:28
Now if you want to remove this dot from this list, then you can also do that
3:33
So I will type like list tile. I will add the non-property here
3:39
And I can add a margin left. Let's add the minus 20 pixel here like this
3:52
And as you can see that we have added the list like this
3:56
So if you want to use it in the sidebar, then you can just copy this CSS code and use it
4:03
in your theme code. Or if you want to add a link list like this, then you can also do that
4:10
So to add this, let me just go to the post here and let's create a new post here
4:16
And I will provide the download link of this code. So let me just simply copy the code from here and I will paste it here
4:26
And as you can see that, you can add the text here and you can change the link in the has value
4:33
So let me just copy this link here and let me just add the link in the has value
4:40
Now let me just publish this page and let me just open this page And as you can see that the link is added like this and if I click on this link it will open
4:55
the link in the same tab and if you want to open this in a new tab then you can add a property
5:01
here in the anchor tag target equal to and in double code you have to add underscore blank
5:09
like this let me just update it and let's refresh this page and let's click on here and you can see that
5:21
the link is opened in a new tab so if you want to add more list element then you can simply
5:28
copy this list element here and you can paste it here multiple times so let's change it to two
5:36
and let's change it to three like this now let me just update it and let me just refresh it
5:46
and as you can see that the list is adding like this so there is one two three four five six
5:52
seven eight so it will count the list in this way and you can add as many links as you want
6:00
and you can also use the same code in your sidebar as well so what i can do is i will
6:06
I will go to the layout here and I will go to the sidebar and let's click on Add
6:11
Gazette let's add a HTML slash JavaScript wizard and I will copy the code from
6:18
here and I will save the code now let me just go to the website and let's go to the
6:27
home page and as you can see that the link list is added and if you want to use the
6:32
same code in WordPress then let's go to the WordPress dashboard. Let's go to the post here
6:37
Let's open a post from here and let me just add a custom HTML wizard
6:44
So I can simply search for custom HTML and I will paste the code like this
6:49
So let me just copy this code from here and let me just preview it
6:56
And as you can see that it is cutting from the left. So we can add a left margin here
7:02
So what I can do is I will addALL I will add a margin left here Let add a margin of 20 pixel
7:17
Now let's preview it and as you can see that now it is looking good
7:20
But there is one problem, there is the link underline is showing here
7:25
So you can fix that. So what I can do is I will copy this element here and I will duplicate it
7:31
And I will add an anchor tag here to target the anchor tag and in the property I will add like
7:39
text decoration. I will add the text decoration to none
7:50
Now let's preview it and as you can see that the underline in the link is gone
7:55
So in this way you can customize it. So let me just update it and let's click on viewpost here and as you can see that you
8:01
the link list is added to our WordPress website as well. So I will leave the link of both link lists in the description
8:09
So you can check out and you can easily customize the link list
8:13
Like if you want to change the color, then you can simply click on inspect here and here
8:19
let's click on list here and as you can see that you can change the color, change the margin
8:25
So let's click on before here and you can change the background color of this button like this
8:31
So if you want to make it like red, then you can easily do that
8:36
Simply just go to the Edit Post here and here you will see this option, link list before
8:44
and here you will see the background to simply change it to red
8:50
Like this, let's preview it and as you can see that the red color is added in this button
8:57
So in this way you can easily customize this list and you can change the color with padding
9:01
imagine according to your website layout. So the list man look very from theme to theme, so you need to adjust it according to your theme
9:11
So I hope this video helps you add a stylist link list to your blogger and WordPress website
9:17
And if you found this video helpful, then make sure to hit the like button. And if you are new to this channel and want to learn more about blogging and SEO, then make sure
9:26
to hit the subscribe button. I will see you in the next video. Thank you
#Blogging Resources & Services
#Online Goodies
#Skins
# Themes & Wallpapers