HOW TO ADD ICON WEBSITES IN YOUR BLOG SITE | The Clumsy One Stories: HOW TO ADD ICON WEBSITES IN YOUR BLOG SITE

Pages

July 9, 2014

HOW TO ADD ICON WEBSITES IN YOUR BLOG SITE

I just started having my blog here and i just want to link my accounts here so that people who wants to know me better can see my other profiles, but i do not know how to link them. I search and search, it took me a huge time to know this so.. i think, maybe others needed it too.

That's why i'm sharing this to all of you. I hope this can help and please comment your other concerns here so that i may know what i have forgotten. And.. this is my first blog so please be considerate on any mistakes that you might see. Thanks! :)



1.   Create/Search a button image you want to appear in your blogger and save it in your computer.

Ex. Instagram logo, Facebook logo, Twitter logo, Tumblr logo


 2.    Next, open your blogger site and add a new post. Remember not to publish it, just save it as a draft. Insert the button images of the websites you saved in your computer thru HTML (beside compose) then choose the alignment and size. (For me, it is None for alignment and medium in size) And when you click the compose (beside html), you'll see the images.


HTML after inserting the button images

Clicking the compose and the images appear

3. Add a link to each images for you to connect it to your other sites. Click the first image then click "link", a dialogue box will appear, insert the URL of your website in the web address. Make sure the "Open this link in a new window" has a check mark. And click "Ok". Do this to other website button images. After you've done all, save your post.


4. Go back to the HTML side and copy.


5. Open a new tab and open your blogger site. Click the dropdown menu and select the "Layout".


6. Your blog layout will appear. Click the "add a gadget" and a dialogue box will appear, then click the "HTML/Javascript" and another dialogue box will appear to configure the HTML/Javascript. In the "Content" part, paste what you copied earlier and add a title then save.



7. At last, save your layout and preview your blog. :)