How to Embed Blogger

Sunday, December 14, 2008

Requested by my lovely Koalii

Introduction

When I got sick of trying to blog with HTML, I decided to find something that would allow me to blog. There are a lot of different blogging tools out there (Cutenews, Wordpress, etc), but I have already gotten accustomed to Blogger. So I pondered...and pondered...how can I get it embedded onto my site?

First things first

First off, make sure your layout is an iFrame. Or else...there will be a different method for you to embed it.

Next, open up your dashboard. Click the 'Layout' link of whatever blog you want to code. Then you'll see a funny looking page with a bunch of boxes. Yes, Blogger's boring like that. Click "Edit HTML".



Scroll down. Click 'Revert to Classic Template'.

Coding

There! Now. The coding part for your blog. Copy and paste the following code into the box full of HTML in your "Edit HTML" tab and change the [] to the pointy brackets and the X's to settings to match your own. I recommend you set the background color to transparent because this will ensure your blog background does not block any of your layout. I will explain the blog-related parts later.

[html]
[head]
[title] TITLE OF YOUR BLOG HERE [/title]
[/head]

[style]

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

body {
background-color: transparent;

color:#XXXXXX;
font-family: XXXXXX;
font-size:XXpx;
text-align: left;
line-height: XXpt;
cursor: XXXXX; }

A:link,A:visited,A:active,b,bold,strong
{text-decoration:XXXX;
color:#XXXXXX;
font-family: XXXXXX;
font-size: XXpx;
text-align: left;
line-height: XXpt;
cursor: hand; }

A:link,A:visited,A:active,b,bold,strong
{text-decoration:XXXX;
color:#XXXXXX;
font-family: XXXXXX;
font-size: XXpx;
text-align: left;
line-height: XXpt;
cursor: XXXX;}

h1
{
font-family: XXXXXX;
color: #XXXXXX;
font-size: XXpx;
line-height: XXpt;
text-align: XXXX;
}

[/style]

[body]
[div]
[div align=left]
[blogger]
[h1][$BlogItemTitle$][/h1]
[$BlogItemBody$]
[p][div align=right]
[i]XXXXXX by,[/i][Br]
[font color=#8d7f99]YOUR NAME HERE[/font] @ [font color=#8d7f99][$BlogItemDateTime$][/font][Br]
on [font color=#8d7f99][BlogDateHeader][$BlogDateHeaderDate$][/BlogDateHeader][/font][br]
[BlogItemCommentsEnabled]
[a href="[$BlogItemCommentCreate$]"
[$BlogItemCommentFormOnClick$]]
[$BlogItemCommentCount$] cursed[/a]
[/BlogItemCommentsEnabled]
[/div align][/div align]
[p]
[/blogger]
[/div]

1. #navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
   }
   
   is to hide the stupid bar which Blogger likes to place upon blogs. Now. You don't want that there, do you?
2. [$BlogItemTitle$]
   
   is where Blogger will place what you put into the "Title" of each blog post when you update
3. [$BlogItemBody$]
   
   is, of course, the contents of each post
4. [$BlogItemDateTime$]
   
   is for the time when your post was posted
5. [BlogDateHeader][$BlogDateHeaderDate$][/BlogDateHeader]
   
   is for the date when your post was posted
6. [BlogItemCommentsEnabled]
   [a href="[$BlogItemCommentCreate$]"
   [$BlogItemCommentFormOnClick$]]
   [$BlogItemCommentCount$] cursed[/a]
   [/BlogItemCommentsEnabled]
   
   is for comment posting. You will have to go edit your comment settings (I'll cover that later) so that it will not screw up in your frame

You can always rearrange the codes (like I did) so that the date or time is else where or something.

Comments Settings

For your blog, go to Settings -- Comments. Make sure the first field is selected to "Show". Where it says Comment Form Placement, I recommend you to select "Pop-up Window". You can try the other settings and see if it works well.

Embedding

Now, to actually make your blog appear on your site, just fill out the following iframe and remember to change the settings and things appropriately!

[iframe frameborder="0" width="XXX" height="XXXX" src="URL OF BLOG" name="frame" allowtransparency="yes" scrolling="no" align="left"][/iframe]

Good luck! Have fun with embedding. Tag, leave a comment on my blog , message or email me if you need help!