How To Add A Blog Button – Part 3

Wednesday, June 15, 2011

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.  

Capture

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.

    Capture

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

    Capture

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

    Capture

  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.

    Capture



The Procedures

  1. Login to your blogger account –-> wait until you see your blogger dashboard.

    Capture

  2. Now, click Design –-> click Edit HTML.

    Capture

  3. On the Edit Template section, click the checkbox Expand Widget Templates in order to show the right sign sign.

    Capture

  4. Now, press Capture to display the blogger’s Find toolbar like below.

    Capture

  5. In the toolbar, type <div id='content-top'/>-> then, you will see the
    yellow highlighted code in your blog template like below 

    Capture

  6. Now, copy and paste the HTML code that you modified before, ON TOP OF yellow highlighted code –-> click button SAVE TEMPLATE

    Capture

  7. Click View Blog to see the result  

9 comments:

{ Cik Farah } at: June 16, 2011 at 12:26 PM said...

singgah balas jejak dan follow blog bermanfaat nie :D

{ nurra } at: June 16, 2011 at 3:39 PM said...

what a great info ..tapi pening lak tengok coding tu..will try..one day..:D

{ Zainal } at: June 16, 2011 at 3:54 PM said...

salam nurra..

takpa...baca pelan2..

{ Mister Leaf } at: June 18, 2011 at 12:24 PM said...

nice blog.
support you.

{ Tieyha } at: June 20, 2011 at 8:51 PM said...

dtg singgah..nice entry =)

{ hiyosoka } at: June 21, 2011 at 5:49 PM said...

hiii friend, it's nice artickel.....


visit my blog again in link here, Ok friend...
http://www.realitylapse.blogspot.com

{ klik } at: July 13, 2011 at 1:53 PM said...

tq...

{ *rainyscream* } at: September 8, 2011 at 1:56 PM said...

adooi.kalau edit part html mmg xlepas~ T-T
aritu ada try edit (bukan button la) tapi eror time nak view blog. pastu ada cakap xboleh save. ermmm -___-

{ vieandjoe } at: June 30, 2012 at 11:30 AM said...

nice :D

Post a Comment

Related Posts Plugin for WordPress, Blogger...