Up next in 10
How to Add a Custom Author Bio Box in Blogger_ _ (with Social media icons)
256 views
Jan 28, 2024
The video titled "How to Add a Custom Author Bio Box in Blogger (with Social Media Icons)" is a helpful tutorial demonstrating the process of incorporating a personalized author bio box on a Blogger website. The tutorial specifically focuses on adding social media icons to the author bio, allowing visitors to connect with the author on various platforms. Viewers can follow along with clear, step-by-step instructions to create a customized and visually appealing author bio box that adds a professional touch to their Blogger posts. This video is particularly beneficial for bloggers who want to enhance their online presence and engage with their audience through social media platforms.
View Video Transcript
0:00
In this video I will show you how you can add a custom author box to your sidebar and
0:05
edit the existing author box inside your blogger website. So let's start the video
0:12
So to change the existing author box in Blogger, you have to go to the Blogger dashboard and
0:18
here click on the setting gear. Now scroll down to the bottom and you will see an option called User Profile
0:27
So click on it. Now scroll down and here you will see an option called Introduction
0:34
So you have to add the author description here and you can add the link here in this format
0:41
So if you want to add the Twitter then you can type A tag HREF equal to and here the Twitter
0:49
link and you can add the anchor text Twitter. So in this way you can add multiple social links to your author box in blogger
0:58
You can also add external link like this. Just type external link
1:04
This social button will work for templatify theme. So if you are using any templatify theme, then you can edit the social button and you can
1:15
add an author box like this. So let's check how you can add author box to your sidebar
1:22
So to add this, go to your blogger dashboard again and here click on Layout
1:28
Now scroll down here in the sidebar click on Add gadget and here click on the HTML
1:35
Now you have to copy a code like this. So just copy this whole code and paste it here Now let save this and check it in front end Now here click on refresh and as you can see the author box is added
1:57
So let me show you how you can edit this author box with your own name and description and you can change the author image from here
2:07
So here click on the HTML slash JavaScript wizard and here you can
2:13
you will see an option called author pick. So here you have to add the author image in the source
2:19
So just upload the image in any of the blog post and then copy the image address and paste it here
2:26
in the source address. And you can also add the all tag here. Here in this case I have put
2:32
author bio image. So you can add all tag to the image and you can also edit the width and height
2:40
of the image from here. Now scroll down and here you will see the H2 tag about the author. So let
2:49
me just open it side by side. Okay, as you can see, this is the H2 tag about the author. So you can
2:58
change the H2 tag here. Now you can add the author description in the P tag. So just change the
3:06
author description from here. Now scroll down. and you have to edit the button
3:12
So here I have added the comment, customize read more button. So you have to add the button link here so that if a user click on the button, it will redirect
3:24
to that URL. Now you can add the Read More button with Learn More or something like that
3:30
Now scroll down and here this is the social media section And here you can add the social media button So you have to add the Facebook URL from here and you can also add the Twitter Telegram
3:44
and LinkedIn URL in this author section. And you can also delete one of the icons from here
3:51
Just delete the A tag like this and it will remove the icon from this author box
3:58
Now scroll down and here you can edit the icon. the style of the author image. So let me just change the border to 5 pixel. Now let me just
4:08
save this and refresh this author image. And as you can see, the border is changed to 5 pixel
4:17
And you can also change the border color and change the background color from here. So this
4:23
is the by default white is added in the background color. So you can change the background color
4:29
And you can also add border radius. So just type border radius and add like this 10px and add a semicolon
4:43
Now save this code and let's refresh this page. And as you can see the border radius is added
4:52
So in this way you can style the author box using the CSS
4:56
You can also change the background color of these. image. So by default I have put the gray color in the background. So you can add any other color
5:07
So let me just add a different color from here. Now let's change the color
5:14
Now save this code Now refresh this page And as you can see the background color is changed You can also change the button color from here Just scroll down and search for the button customization and here you will see the button color code
5:35
So if you want to find the color code then you can use a color picker Chrome extension or you can
5:41
go to the website HTML colorcoors.com and pick the color that you want to add in this
5:48
CSS code. So you will see a lot of color option from here
5:53
Just select the color and you can find the hex code here
5:57
So in this way you can customize the author box to your blogger website and add a author
6:04
box like this. So let me just change the border to 2 pixel
6:09
Now save the code and now refresh this page. And this author box is fully responsive
6:18
So let me just show you how it looks in mobile devices
6:22
So let me select Galaxy S5 and here scroll down and here as you can see the author box
6:29
is looked like this. So you can easily adjust the width of the author box and you can add background color to
6:37
this image or you can change the button color or add social buttons in your author box
6:45
I hope this video helps you add a custom author box in the sidebar and if this video help then smash that like button and if you
6:54
have any doubt regarding this then you can ask me in the comment section, I will see you in the
6:59
next video. Thank you