How To Add A Blog Button – Part 3

Here I come with the final part of how to add a blog button. We had learned about how to design a blog button in part 1. Then, continued to learn how to host the blog button using image hosting service in part 2. Now in part 3, we will learn how to put a blog button on a blog template.  



This procedures will involve a little knowledge in web programming. For those who are completely zero in it, don’t worry. I will enrich the procedures with the pictures in order to make you understand clearly.

Disclaimer
Please be informed, this procedures had been done based on my blog template. I SHOULD NOT BE responsible if any harm happen to yours during following my procedures. Please backup your blog template before doing any modification on it.

   
What You Need

1. The HTML code, which you acquire when doing part 1.
   
   
   
   
2. The HTML code, which you acquire when doing part 2.
   
   

To see both of them, please refer to the last step in both parts.

Before The Procedures

You need to modify both HTML codes above, using the following procedures

1. Remove the values for onmouseover and onmouseout in HTML code from part 1. So it will remain like below
   
   
   
   
2. Based on the picture above, replace the value cooltext529947738.png with the HTML code from part 2. So, the code finally remain like below.
   
   

The Procedures

1. Login to your blogger account –-> wait until you see your blogger dashboard.
   
   
   
   
2. Now, click Design –-> click Edit HTML.
   
   
   
   
3. On the Edit Template section, click the checkbox Expand Widget Templates in order to show the sign.
   
   
   
   
4. Now, press to display the blogger’s Find toolbar like below.
   
   
   
   
5. In the toolbar, type <div id='content-top'/> –-> then, you will see the
   yellow highlighted code in your blog template like below 
   
   
   
   
6. Now, copy and paste the HTML code that you modified before, ON TOP OF yellow highlighted code –-> click button SAVE TEMPLATE
   
   
   
   
7. Click View Blog to see the result