How to embed a blog into a personal web page.

I've created a blog in blogger and now I want to embed it to my personal web page. After asking the intertubes about this question I decided to go with the iframe solution, although it is only xhtml-transitional and not supported in strict DTD. Here is my little how to.

1) (Optional) If you want, you can take out the navigation bar from blogger. Go to Layout>Edit HTML>Edit Template and add the following line of code.


#navbar-iframe {

   display: none;

}


2) Create an iframe at your personal web page to load the blog into it. The following code will do the trick,


<iframe id="myiframe" SRC="http://myblog.blogspot.com/" width="750px" height="400px" marginheight="0" frameborder="0" />



Just substitute the "myblog.blogspot.com" with the URL of your blog.

3) As you will notice, there will be a not so nice looking scrollbar on the right hand side of the iframe. In order to get rid of this scroll bar, John McKerrel has dealt with this and gives all the details on his blog here. Basically, to solve the problem you have to go to Layout>Edit HTML>Edit Template and include the following lines before the closing head tag,


<style type='text/css'>

     #inneriframe { position : absolute; top : 0px; left : 0px; visibility: hidden; }

</style>

<script type='text/javascript'>

      function test2() {

        var iframe = document.getElementById( 'inneriframe' );

        var wrapper = document.getElementById( 'wrapper' );

        var height = Math.max( document.body.offsetHeight, document.body.scrollHeight );

        iframe.src = 'http://www.mywebpage.org/iframetest-resize1.html?height='+height;

      }      

</script>


As you can see, you need to copy Jhon's file iframetest-resize1.html somewhere in your personal web page domain. This way your blog will be able to tell your page its height and your page will be able to resize the iframe accordingly.

Finally, add to your blog template the following line anywhere inside the body of the blog,


   <iframe height='10' id='inneriframe' width='10'/>


I put it just before the closing body tag.


I hope this is helpful for all those who are just looking for a simple solution without thinking on fulfilling strict DTD.