How to make sidebar buttons/icons (Blogger)

As a beginner in the blogging world,I was very confused with the theme and HTML.I had no idea what I was doing,I just knew I enjoyed doing it.I remember on my first theme I didn't even know how to change the picture in the sidebar.It was a random woman! But after watching tons of tutorials,I started getting the hang of it,and now I can't believe I'm the one doing a tutorial.! So for today,I'll be covering the topic of the sidebar buttons.
They play a huge importance in our blogs,because not only they attract the readers with their beauty and general matching to the theme,but they also allow us to link them anywhere and increase the blog traffic in other social media.
To begin with,you're going to design your button.As for me,I have a free program installed on my computer called PhotoScape,which I do most of my editing on.But,for buttons I'd recommend using canva ,which by the way,is also helpful for graphic design in all shapes and forms.
You can also use Picmonkey,Fotor,or BeFunky!
Using canva,I made this button:

You can take inspiration from other bloggers and how they design their social media buttons,such as cuteinstgram's ones:

But your creative soul isn't made JUST for social media buttons.You can do buttons for all kinds!Your badge,a quote,a link to your shop or your other blog,the options are really endless!

However,where most beginners are stuck on,is how to make your link pop up once you click on the button.

This is how I do it:

First of all,I upload my button picture anywhere.It doesn't matter:  facebook, twitter, photobucket, anywhere just so I can get the image address.

Then I turn it into a html code that goes like :  

<a href="https://YOUR SOCIAL MEDIA LINK" target="_blank"><img src="https://YOUR IMAGE LINK"/></a>

For example,this is my instagram button html code:

<a href="http://www.instagram.com/mypastelworld1" target="_blank"><img src="http://i1341.photobucket.com/albums/o760/dreamerandblogger/mpuq%20e%20ki3_zps3no98ssm.png"/></a>


And then,you take this html code,copy it,and go to your blog layout (on blogger).

You're going to click the "Add A Gadget" and then a list will pop up.

And then you're going to select "HTML/JavaScript",paste the code and the button will be there!
Have fun using this method!

By the way,full credits to [this video] that helped me figure out how to do my social media buttons and then I took it off on a spin.

I hope I was a little useful to any of you!Make sure to let me know if you make a button using my tutorials.XOXO


Follow

Related Items blog blogger html tips tutorial