Since, I migrated my blog to a new account, my Profile Widget has changed into a list of contributors which has made the look became unappealing to see.
Thus, in this post, I would like to share how to make a Custom Profile Widget which would show a picture (if you want), your name, a bit of description, and also a link to your profile page from it. Mine looks like below:
Without further ado, here are the steps to reproduce your profile widget:
Step 1: Go To Your Layout
Log to your Blogger account, and click on Layout.
Step 2: Click Add a Gadget
On the right panel, you'll find a structure of your blog and a list of your installed widgets. Click on Add a Gadget.
Step 3: Choose HTML/Java Script
After clicked Add a Gadget, a Pop-up will then show on your browser contains all kinds of widget features that you can add to your blog. In order to put the codes for your profile widget, click on HTML/Javascript.
Step 4: Fill The Title You Want, and Add The Code Below
There will be two columns shown, first is Title. You can fill it with anything you want.
Step 5: Add The Code Below
The second one is Content. Copy Paste all the codes below:
1 2 3 4 5 6 7 8 9 | <a href="https://www.blogger.com/profile/17710845953662035683"><img alt="My Photo" class="profile-img" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcAEWsp71eDpspnF3pL8TByPXQwi5ROEHF4KWwxyTp_fYbiA-wrVuXasqXAKgNE97a6GSgJ7KrH4Xkz4rBn2Uza7VSz9I0LUj0ZyVNypdUH70DVHtRUKyH1gnJT7KWNJjlavHTeY7q2pD/s113/favicont.gif" width="80" /></a><dl class="profile-datablock"><dt class="profile-data"><a class="profile-name-link g-profile" href="https://www.blogger.com/profile/17710845953662035683" rel="author" style="background-image: url(//www.blogger.com/img/logo-16.png);">Your Name</a></dt><dd class="profile-textblock">Your Information</dd> </dl><br/><a class="profile-link" href="https://www.blogger.com/profile/17710845953662035683" rel="author">View my complete profile</a> |
<a href="https://www.blogger.com/profile/17710845953662035683"><img alt="My Photo" class="profile-img" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcAEWsp71eDpspnF3pL8TByPXQwi5ROEHF4KWwxyTp_fYbiA-wrVuXasqXAKgNE97a6GSgJ7KrH4Xkz4rBn2Uza7VSz9I0LUj0ZyVNypdUH70DVHtRUKyH1gnJT7KWNJjlavHTeY7q2pD/s113/favicont.gif" width="80" /></a> <dl class="profile-datablock"> <dt class="profile-data"> <a class="profile-name-link g-profile" href="https://www.blogger.com/profile/17710845953662035683" rel="author" style="background-image: url(//www.blogger.com/img/logo-16.png);"> Your Name </a> </dt> <dd class="profile-textblock">Your Information</dd> </dl><br/> <a class="profile-link" href="https://www.blogger.com/profile/17710845953662035683" rel="author">View my complete profile</a>
- On line 1, 4, and 9, you should change the Blogger ID (mine shown as 17710845953662035683) to your ID. If you want to use other profile such as Facebook, you should change the whole text inside the quotes sign (" ").
- On line 1, change the picture inside tag "img" to any picture you want to represent you.
- On line 5, fill your name.
- On line 9, fill your description.
So there you go, you have a new personalised profile widget on your Blogger.
Source:
