Embed webpage in blog with iFrame
With iFrame you can display the content of the other webpage or other web blog into your own blog page, but even you can do that you shouldn't carelessly put another webpage without have permission from the owner of the webpage/blog that you want to show on your own web blog.
Note: Embedding a webpage in an iFrame in your own blog of website is equivalent to copying that webpage into your own website or blog so it is good to ask permission of that webpage you want to embed. In the example below, I uses my another web blog so there no copyright issue as it is my own webpage.
The basic command of the iFrame is:
and the attribute are:
ALIGN = "left / right" --- To set the iFrame position.
WIDTH = "width" --- Set the width of the iFrame in pixels or percent.
HEIGHT = "high" --- To adjust the height of the iFrame in pixels or percent.
FRAMEBORDER = "lines" --- To provide line delimiters.
SCROLLING = "auto / yes / no" --- To give or not scrolling ber in iframe.
SRC = "http://wwww.knxbmt.blogspot.com/" --- source address you want in the show in an iFrame.
To make it more easier to understand, then I will give you three examples of the iFrame command functions. For example: if I want to embed http://080010527-w081.blogspot.com/ , I want the width is 500 pixels and height is 300 pixels.
1. iFrame that hasn't border and scrolling function.
The code is:
The result is like this:
It will stick on the page like an image with full html support.
2. iFrame that has borders and scrolling function.
The code is:
The result is like this:
3. iFrame that has borders and scrolling function with 100% of width.
The code is:
The result is like this:
Note:
The variables you can change are highlighted in red. It is best to leave width as 100% as then your iFrame will adjust to the available space (width) at the place you want to put your iFrame. You can also specify in exact pixels, example 360px instead but you will then have to ensure the the width you specified suits the width available. The height too you can edit to what you want.
The part highlighted in green:
<p>Your browser does not support iframes.</p>
you can leave out it with no changes and it's will work if a visitor to your webpage/blog uses a browser that doesn't support iFrame, then he/she will see a message:
Your browser does not support iFrames or enable your javascript.
rather than being mystified by a blank space.
Some important notes: The content of an iFrame will not be spidered by search engines which may be a negative point if that is what you want, but it is a plus point because it will prevent duplicate content which is not liked by search engines and which may draw a penalty.
Note: Embedding a webpage in an iFrame in your own blog of website is equivalent to copying that webpage into your own website or blog so it is good to ask permission of that webpage you want to embed. In the example below, I uses my another web blog so there no copyright issue as it is my own webpage.
The basic command of the iFrame is:
<iframe> .... content of the iframe .... </iframe>
and the attribute are:
ALIGN = "left / right" --- To set the iFrame position.
WIDTH = "width" --- Set the width of the iFrame in pixels or percent.
HEIGHT = "high" --- To adjust the height of the iFrame in pixels or percent.
FRAMEBORDER = "lines" --- To provide line delimiters.
SCROLLING = "auto / yes / no" --- To give or not scrolling ber in iframe.
SRC = "http://wwww.knxbmt.blogspot.com/" --- source address you want in the show in an iFrame.
To make it more easier to understand, then I will give you three examples of the iFrame command functions. For example: if I want to embed http://080010527-w081.blogspot.com/ , I want the width is 500 pixels and height is 300 pixels.
1. iFrame that hasn't border and scrolling function.
The code is:
<iframe align="center" frameborder="0" src="http://080010527-w081.blogspot.com/" width="500" height="700" scrolling="no">
<p>Your browser does not support iFrames or enable your javascript.</p>
</iframe>
<p>Your browser does not support iFrames or enable your javascript.</p>
</iframe>
The result is like this:
It will stick on the page like an image with full html support.
2. iFrame that has borders and scrolling function.
The code is:
<iframe align="center" frameborder="10" src="http://080010527-w081.blogspot.com/" width="500" height="300" scrolling="auto">
<p>Your browser does not support iFrames or enable your javascript.</p>
</iframe>
<p>Your browser does not support iFrames or enable your javascript.</p>
</iframe>
The result is like this:
3. iFrame that has borders and scrolling function with 100% of width.
The code is:
<iframe align="center" frameborder="10" src="http://080010527-w081.blogspot.com/" width="100%" height="300" scrolling="auto">
<p>Your browser does not support iFrames or enable your javascript.</p>
</iframe>
<p>Your browser does not support iFrames or enable your javascript.</p>
</iframe>
The result is like this:
Note:
The variables you can change are highlighted in red. It is best to leave width as 100% as then your iFrame will adjust to the available space (width) at the place you want to put your iFrame. You can also specify in exact pixels, example 360px instead but you will then have to ensure the the width you specified suits the width available. The height too you can edit to what you want.
The part highlighted in green:
<p>Your browser does not support iframes.</p>
you can leave out it with no changes and it's will work if a visitor to your webpage/blog uses a browser that doesn't support iFrame, then he/she will see a message:
Your browser does not support iFrames or enable your javascript.
rather than being mystified by a blank space.
Some important notes: The content of an iFrame will not be spidered by search engines which may be a negative point if that is what you want, but it is a plus point because it will prevent duplicate content which is not liked by search engines and which may draw a penalty.
Komentar
Posting Komentar