How to add iFrame to WordPress sidebar

Default featured post

It has been said that a good engineer can create something useful with the tools given to him, although, I do not consider myself even an half engineer but I managed to do something fun.

Anyway, let’s back to the story. Few days ago I have decided to add a sidebar/widget for Linux cheat sheet paper to my WordPress blog which makes that portion scrollable and also easy to add any text and format it. I did little bit research and found in HTML there is a tag which is called iFrame that can exactly load a page and display in a way I want. In order to reach to my objective I did following,

First I added a new text type widget which I can write my iFrame code inside of it. Below is one line HTML code I wrote.

<iframe height="500px" width="306px" src="https://7642d135d19467a356b638c09c264bc5ee1ffd33-www.googledrive.com/host/0By5_e7Q09ChHYml5eVZidXRURnc"
view raw test.html hosted with ❤ by GitHub

As you can see the address that iFrame refers to is a simple HTML page but the question is where the file is located. For making everything easy I designed a simple HTML page and then uploaded it into my Google Drive and after that I shared the link and follow this tutorial to make the webpage available on the internet.

Lastly, I have seen the font of the page does not match with my blog post, so I have decided to use Google Font with some CSS to fix everything.

Personally, I like this kind of experiment and adding a new thing because it brings knowledge to me and it is very nice when you can see the end result of your work rather than simply install one plugin. It is fun! 😀