How to add an HTML/Javascript code into your website or blog

Adding  HTML/Javascript code into your own website or blog from a third party site is something that can be done  by almost any computer illiterate dummy. In layman's language, it is simple as a pie.
You can copy and paste codes from other sites, let's say an affiliate site, to your own site in no more than two minutes.

In this post, I will be focusing on copying and pasting an HTML/Javascript code into your blogger (blogspot) blog for this tutorial's purpose. Though the procedure is no much different from when you are using wordpress or any other blogging tool.

You can add a code in two ways in your website;

  • Either as a gadget ( placed on the sidebar, header below the blog title or on the footer)
  • In your main blog content ( posts or pages) 
Adding the code as a gadget

  1. Right click the code provided, i.e for an affiliated product, from the site where you want to copy it from ( for example Amazon)
  2. Click select all on the drop down list then right click it again after selecting and then click copy
  3. On a different tab, go to your blog's dashboard and click on Layout ( Make sure you are on your blog's dashboard. You won't be able to add a gadget when your are customizing your blog's template using the template designer. That is if you had clicked on Template instead of Layout)
  4. What you see after clicking layout, is the general skeleton of your blog's layout. Click on Add gadget in any of the area you wish to add the gadget to.
  5. From the window that opens, choose HTML/Javascript. You can add a title if you want but that is optional. 
  6. Right click on the content box then choose paste. The code should automatically appear on the box. If it does not, go back to the third party site and make sure that you copy the code correctly.
  7. Click on save.
You can then re-position  the gadget by dragging and dropping. Just to make sure that the gadget is properly settled on your blog, click on preview and if it's not in order you can change it's dimensions on drag and drop it to another area. Usually you would want to put longer gadgets on the header or footer.
Note that you can only place one template below the blog title. I would therefore recommend that you place the 'Pages' here. People are used to seeing it there, you know.And it also makes your blog look more orderly. Otherwise you can place the pages on your sidebar in a drop down order. Make sure that the gadget can also be viewed in a mobile template if you had set one.


Adding the code into a post or page

  1. Copy the code from the third party site using the procedure outlined above
  2. Open a new tab and edit the post or page you want to copy the code into
  3. Switch to HTML mode 
  4. Right click and select paste. Switch back to compose mode and publish or update your page or post.
Warning!
Make sure that the codes you copy into your blog or website are from trusted sources. Some codes can be scam and a pathway to hack your site. Do not therefore paste codes from other sites because they simply claimed to have an affiliate programs that can earn you fortunes. Do not jump on mad offers!
It would also be nice that you only promote products that are related to or are in line with your blog's purpose.

0 comments:

Post a Comment