IFRAME TAG HTML5 : How to put your blogger or Tumblr into your website 2012

This tutorial show you how to custom an iframe on a webpage or any desire with HTML.

At the moment of designing my new HTML5 website with all this CSS and JavaScript, what is the best way to lets people who visit my site to see Jaya Production still active when a site is “under construction”? a blog? Putting a Blogger or Tumblr.com is an easy to get give viewers update on portfolio or just news for companies or clients. By visiting www.jayaproduction.com, you can see that a custom blogger is attached to the index.html page. How? This is a code call “iframe”, iframe is capable to put another site into another site. Iframe is also known for their scrolling bar. So how to make a site look good using a Iframe? Below are the codes and tips (this is the HTML5 IFRAME NOT THE CSS VERSION OF IFRAME)

Hello

HOW TO PUT IFRAME INTO A WEBPAGE

I will use my own blogspot. Highlight your blogspot or tumblr. Jaya Production is run with “http://bullisot.blogspot.com”

HTML CODE BELOW 

<iframe width="1000" height="600" src="YOUR SITE"frameborder="0"></iframe>

1. Place the code where you want the iframe to be located

2. Make sure to turn off the mobile template (if site is view on mobile, your blogger will be a mobile template on your site). For Blogger go to Template and click on the icon below mobile.

CLICK NO !

3. Set your Blogger by balancing the width at 1.Template 2. Customize 3. Adjust widths

I make my width similar to my iframe width above.

4. Control your height by going to the setting in the blogger.

5. Post the code to your index.html and make sure everything work will, if you are using Dreamweaver, make sure to see a grey plate on the right or “split” section.

If you hate the scroll bar on the iframe, the code is below to remove it.

HOW TO REMOVE A SCROLL BAR IN IFRAME

HTML CODE BELOW

scrolling="no"

Scroll bar should be invisible, play with the height in the coding for the iframe to fit your site. 

FOR EXAMPLE

Dont forget to check out Jaya Production Portfolio and updates

www.jayaproduction.com