L
ately i see more and more web sites using the iframe toolbar technique. This technique allows a web site to present content from a different site using an iframe element
<iframe>, while still having a small part of the browser displaying a small toolbar at the top. This toolbar allows the site to interact with its users while they consume external content.
How To Add iFrame Toolbar For Blogger
- Customize the Settings as you need
- Click on "Generate" button to get code for iFrame toolbar
- Open a Notepad file and paste the above code
- Save this notepad file as *.htm For example: iFrametoolbar.htm and save it
- Now upload it on any hosting site. Dropbox’s Public folder is recommended.
After hosting you copy publish link from dropbox folder and now whenever you want to show your sites demo page or back links you need to add iFrametoolbar html link with any link as you want to show
Example :-
http://dl.dropbox.com/u/74144734/iFrametoolbar.html?iframe=http://making-different-demo-page.blogspot.in/
That’s it, that’s all there is to it. All the rest of the code is to handle the UI functionality that i decided to implement for this demo toolbar. just want to clear some points:
- Due to security reasons the browser prevent access from reading an iframe source url, so if the user has clicked a few links in the ifrmae, there is no way to find out which page is being displayed in the iframe.
- I used the jquery animation method in order to expand and collapse the toolbar.
You can see and play with the toolbar in this
demo page. if you want to change the iframe url, just change the iframe parameter to whatever you want, like so:
http://dl.dropbox.com/u/74144734/iFrametoolbar.html?iframe=YOUR URL
Drop your comments and questions below... :)
| If You Enjoyed This Post Please Take 5 Seconds To Share It. |
Title : Add & Customize iFrame Toolbar for Blogger/blog - iframe Toolbar
Description : L ately i see more and more web sites using the iframe toolbar technique. This technique allows a web site to present content from a diffe...
