Tuesday, 1 March 2016

TUTORIAL (HTML) - HOW TO HAVE CUSTOM BUTTONS!



Hi, Duane here!! :) I have some basic knowledge of HTML and as you can see my social media buttons on this Blog are custom. Those are very easy to make and this is what this tutorial is about. This Tutorial is for Blogger as I don't know how to use not inline CSS on WordPress and CSS is a pretty big part of this tutorial. So here we go.

One warning: DO NOT REMOVE ANY " FROM THE CODE AS THAT WILL BREAK THE CODE!!


Step 1

First you need to get the button icon you are going to use. This tutorial can be applied for multiple uses such as Social Media Buttons and a Blog Button. If you are designing these yourselves, I would recommend you make them bigger than you need them. For example if you are going to need a 50 pixels by 400 pixels Blog Button make it twice as big. So make it 100px by 800px. The size can be changed later by using CSS but this will ensure that you get a really good quality button. If you are not designing them yourself make sure to get buttons that are the size you want them on your blog or that are proportionally correct but don't get buttons that are smaller than what you want them to be. For this tutorial I am going to be using my own blog buttons.


Step 2

The second step is to upload them to your Blog. For this go to any post or create a new post and press on insert image:


Then upload the image file/s to your blogger and right click and press on 'Copy image address'. After each one paste them somewhere so that you find them later for later use: 




STEP 3

The next step is to go to your Blogger Overview and on the left hand side you click on layout: 

Now click on 'Add a Gadget' wherever you want it to be and 'Add a Gadget' is available: 


Now a Tab is supposed to appear. In that Tab you should find a Gadget called 'HTML/Javascript'. You need to click on the plus sign to its right:


Step 4

Now comes the actual HTML. Copy the Code below into your 'Content' area but do not save because you have to customize some things for yourself:


<html>
<head>

<style>

a {

text-decoration: none;

}

a:hover {

text-decoration: none;

}

#twitterIcon {

width: 40px; /* Change the value according to your own image. And your desired size */
height: 40px; /* Change the value according to your own image. And your desired size */
padding-left: 7px;
padding-right: 7px;

}

#twitterIcon:hover {

content: url(Enter Hover Twitter Icon Link); /* Remove the text inside the brackets and paste the desired url */

}

#goodreadsIcon {

width: 40px; /* Change the value according to your own image. And your desired size */
height: 40px; /* Change the value according to your own image. And your desired size */
padding-left: 7px;
padding-right: 7px;
}

#goodreadsIcon:hover {

content: url(Enter Hover Goodreads Icon Link); /* Remove the text inside the brackets and paste the desired url */

}

#blogLovinIcon {

width: 40px; /* Change the value according to your own image. And your desired size */
height: 40px; /* Change the value according to your own image. And your desired size */
padding-left: 7px;
padding-right: 7px;

}

#blogLovinIcon:hover {

content: url(Enter Hover Bloglovin Icon Link); /* Remove the text inside the brackets  and paste the desired url */

}

.socialPanel {

text-align: center;
margin-right: auto;
margin-left: auto;

}

.socialMedia {

text-align: center;
padding-top: 5px;
max-width: 150px; /* If you want, you can change this to change how many icons can fit in a line or the maximum size of how big an icon can be. */
margin-right: auto;
margin-left: auto;

}
</style>

</head>

<body>
       
    <div class="socialPanel">

        <div class="socialMedia">

<a href="Enter Twitter Link"  target="_blank"> <img src="Enter Twitter Icon Link" id="twitterIcon"> </a>
<a href="Enter Goodreads Link" target="_blank"> <img src="Enter Goodreads Icon Link" id="goodreadsIcon"> </a>
<a href="Enter Bloglovin' Link" target="_blank"> <img src="Enter Bloglovin' Icon Link" id="blogLovinIcon"> </a>

</div>

</div>

</body>

</html>


Step 5

The next step is to customize it. So go through the code and see the comments I left which are in between /* */. What you can also do is copy and paste the 

<a href="Enter Twitter Link" target="_blank"> <img src="Enter Twitter Icon Link" id="twitterIcon"> </a>

And create new ones. Such as Facebook. If you do so change the id to something like:

id="facebookIcon"

and go up to were there is <style> then find:

#twitterIcon {

width: 40px; /* Change the value according to your own image. And your desired size */
height: 40px; /* Change the value according to your own image. And your desired size */
padding-left: 7px;
padding-right: 7px;

}

Copy it and change the #twitterIcon to #facebookIcon or whatever you set the id as.

If you do not want to have the icon change whenever someone hovers over it you need to remove all the parts that are like so:

#twitterIcon:hover {

content: url(Enter Hover Twitter Icon Link); /* Remove the text inside and paste the desired url */

}

Now all you need to do is get the links you had saved earlier for the pics and paste them in the areas where there is 

" Enter Bloglovin' Icon Link " example: 

<img src="Enter Twitter Icon Link" id="twitterIcon"> </a>

" Enter Hover Bloglovin Icon Link " example: 

#blogLovinIcon:hover {

content: url(Enter Hover Bloglovin Icon Link); /* Remove the text inside the brackets and paste the desired url */

}

and lastly finish them by putting the links where each button is supposed to take you by replacing Enter Twitter Link to the actual link:

<a href="Enter Twitter Link"  target="_blank">

That was the last of it. Now you can click save and check to see if everything is fine.
________________________________________________________________________________________

I hope this helped you and if you have any problems or need some help with some HTML contact me on Twitter or comment on this post or you can use the Contact Form on the right and I will try my best to help you!! And tell me how I can improve Tutorials in the future!! :)
________________________________________________________________________________________

No comments:

Post a Comment