Blogger Tutorial: How to make icon contact lists

Click to Zoom

Okay. You guys can see my newly updated contact list above, right?

Well. You wanna know how to do it? Here's how. Now mainly, this is a blogger tutorial. So you guys should know where's where. Depends on what kind of person you are :P


So anyways. As you can see from the above, they're all icons. Now their size is 48x48 pixels. So yes, it's quite big, "quite". 

The bigger icon is 64x64 pixels. Yeah well, I wouldn't want to use an icon that big. 48x48 pixels is enough.

Okay. Now let's get onto the steps :D

First: Go to Design. Then there you'll see the "Add and Arrange Elements" tab. Now, go to the blank one that says "Add a Gadget".

Click to Zoom

Second: Once you've done that, scroll down to HTML/Javascript. Click on the "add button".

Click to Zoom

 










Third: Now, this is something related to the tutorial on how to make image links. 


That is precise method to do this. Once you've entered the HTML/Javascript, type in the image link code. Here:

Forth: Usually the a href location is your profile. Like for example: I have a facebook account, then I go to Profile. Yes, then I copy the URL and paste it there.

Fifth: Now. All you need is an icon. My best recommendation would be:

Sixth: Now find the icon you want. You also can use the search bar at the right-hand corner. Search for the website icon you want people to link to. Example: Facebook, Twitter, Google Buzz, Tumblr, Reddit, deviantART,etc.

Seventh: Once you've find the one you want, choose either size. Click on the one you want. Like let's say, I want a facebook icon, then I'll pick this size:

Click to Zoom

Then click the 48x48 blue text. And you can obviously tell that's a link.

So you can click that. Or...you can move your mouse over to that icon, and right-click on your mouse. And then click "Copy Image URL". 

Eighth: Then yes, paste it onto the img src location.

Ninth: Then you're done. Click "Save". Then after that, it'll look something like this:

Click to Zoom

And basically, YOU'RE DONE!!! Okay. I hope you enjoy this tutorial.

Oh yeah, and one last thing, to do another contact icon, press "Enter" twice. Which means two times. Then the icon will be like what you see above.

Okay. Unfortunately there's no video for this tutorial D: Cuz' no one thought of that. Unless for those youtubers and their websites and channels. 

Okay. So thank you for listening/reading, I hope you enjoy this tutorial. 

Remember to comment, share and get more viewers :D

Bye :)