- You have a list of links to other sites that you'd like to update occasionally without having to re-publish your entire blog (see the "Groceries" list to the right)
- You have a list that is dynamic (like a Blogroll), but it is getting too long to aesthetically fit into your template (see the "Banana Roll" list to the right)
- You have a list of links to posts in your own blog that you'd like to update occasionally without having to re-publish your entire blog (see the "Greatest Hits" list to the right)
- You want to include another blog within your blog, allowing you to post little snarky comments, short book and movie reviews, etc (see the sidebar list on this blog)
The first step is to create another html document with your dynamic content. Here's some hints:
- Start with your Blogger template. (View the template, cut and paste it into a text document, and delete out anything that you don't want in the scrolling list.) This will make the text and colors in your scrolling list look like part of the main document. Of course if you want them to look distinctly different, just ignore this suggestion.
- Anything in the new html document is going to show up in the scrolling list, so be careful not to put in large titles, extra columns, or other fancy embellishments. We're going for a list of text here. Nothing more.
- Be sure that any links you put into your new document include the text target="_blank" as part of the target identifier. This will force the link to be opened in a new window. In other words, <a href="http://www.wilkinsons.com/Bananna/index.html" target="_blank"> will open a new window with content from this blog. <a href="http://www.wilkinsons.com/Bananna/index.html"> will try to open the same window inside the little scrolling list part of your blog. Not pretty.
Oops, forgot the target="_blank"! - You may want to put a little title link at the top of your html document that links back to your main blog. The reason is that the html document may get indexed by itself in search engine and on pages that perform trackbacks. When someone loads your html document by itself, you want them to know where to go to see it in context. (See my Banana Roll page for an example.)
Next, put the html document on your webserver in the same general location as your blog. They need to be in the same domain to work well on Internet Explorer in particular (see "blog-within-a-blog" below for details why). If you're using Blogger's hosting service (your blog address is http://something.blogspot.com), this is going to be a problem for you. Sorry about that. You can either find another location to post the html document or use the "blog-inside-a-blog" technique described below. If you're using ftp posting to a webserver that you have more control over, just ftp the html document up onto that server.
For example, my blog is set up in a set of directories at http://www.wilkinsons.com/Bananna/. The main address for the blog front page is index.html. I have also posted the html document Groceries.html in the same directory. If you take a look at that page on its own, you'll notice that it's pretty basic and not worth much. But put it inside the <object> tags on the main page, and it's pretty useful, not to mention cool.
To place the html document into a scrolling box in your template, encase it in <object> </object> tags. The address of the html document is included in the "data=" parameter. You should also set the width (or it will be as wide as it can get) and the height (so that it fits in the space you've designed for it).
Here's the code in my Blogger template that puts the Groceries.html page into a scrolling box on the main page:
| <h2 class="sidebar-title">Groceries</h2> <div align="center"> <object data="http://www.wilkinsons.com/Bananna/Groceries.html" type="text/html" width="200" height="200"></object> </div> |
A Blogroll is even more interesting, since it's a page that updates automatically and requires some template coding. Here's the code that puts my Blogroll into a scrolling box.
| <h2 class="sidebar-title">Banana Roll</h2> <div align="center"> <object data="http://www.wilkinsons.com/Bananna/Bananaroll.html" type="text/html" width="200" height="200"></object> </div> |
Note the reference to the html document "Bananaroll.html". That's where my Blogroll JavaScript code is located - on a separate html document that's pulled in via the "object" tags.
For most people, that's all you need to do. Put it together and take a look at it. One suggestion is that you look at your handiwork in both Firefox and Internet Explorer, especially if Firefox is your primary browser. They both handle the <object> tags a bit differently. For example,
 |  |
here's Firefox | and here's Internet Explorer. |
Note the extra spaces around the Internet Explorer lists. Firefox is more elegant, but Internet Explorer has 85% of the market, so you'd better design with it in mind.
Blog-Inside-A-Blog
If you're doing the "blog-inside-a-blog" version of the scrolling list (the fourth example above), there are some other intricacies.
- First, Internet Explorer by default will not allow the html document inside the <object> tag to be from a different domain. So, if you're going through Blogger's hosting service and your main blog is located at http://mymainblog.blogspot.com, Internet Explorer is going to have trouble displaying content from your sidebar blog (for example, http://mysidebarblog.blogspot.com). Instruct your users to enable "access data sources across domains" to see the scrolling list content.
- Second, you're probably going to have the Blogger toolbar at the top of your inserted blog. It's going to look bad, but I don't know of any way around it. If you use their hosting service, you have to play by their rules.
For more Blogger Hacks, please see the Blogger Hacks series at Freshblog.
22 comments:
Hmmmm. Not a lot to go on there. Let me try an example using a document from this page.
In general, the document that you point to should be able to stand on its own merits. In other words, if you're using object data="http://www.wilkinsons.com/Bananna/Bananaroll.html", then you should be able to point your browser at the document inside the tag (http://www.wilkinsons.com/Bananna/Bananaroll.html) and have it load successfully. My guess is that the page inside your object tag has a problem and is what's loading all of the links.
The main page will, of course, need to load the document inside of the object tag (http://www.wilkinsons.com/Bananna/Bananaroll.html) in order to display it in the box. Surely that's not what you're referring to?
noone,
I tried all sorts of permutations on the code and I couldn't get it to do what you're describing. Can you point me to the site where you're having trouble, so I can see if it does the same thing for me? If you don't want to post it here, email me at scottw at wilkinsons.com.
Have you tried looking at the page in IE to see if that works? Just another suggestion.
We've solved noone's problem. It was related to how his web page server was set up. For anyone else who may experience the same problem, here's how it was diagnosed.
I downloaded a copy of the page so that I could fiddle with it and, indeed, every time that I loaded it, it asked me about downloading the target file (the one inside the object tags).
So, I tried viewing the file with Internet Explorer. Voila! It worked perfectly. OK, the problem is only with Firefox.
Then I tried replacing the target file with one of my own. Voila! It worked perfectly again. OK, the problem isn't in the template coding (probably).
Then, I tried to load the target file directly in Firefox. Oops! It tried to download it instead of displaying it. I think we've discovered the problem.
I tried displaying the target file in IE and it worked. So the problem was the combination of the target file and Firefox.
I tried copying the target file to my own webserver and I could view it in both Forefox and in IE. I
pointed the original master file to the copy of the target file on my webserver and it worked perfectly. Therefore, the problem appeared to be on noone's server, with Firefox.
Noone investigated, and determined that indeed he cannot externally link to files hosted within his site domain with his squarespace account. They are secured, and he may only use them within his domain. So, he loaded them to his Comcast account and it now works just fine.
Interesting investigation. I hope it will help someone else avoid this problem.
-Scott
Scott,
Is there anyway to have text or html appear in the empty box when list is viewed in Internet Explorer?
I was thinking of putting something like, "IE used click here to view..."
Sideshow,
I'm sure there's a way, but it's beyond my expertise. There's no simple way that I know of in html. This looks like a job for a nice little javascript. If anyone would like to volunteeer, it would be appreciated and you would be lauded with kudos.
There are several ways for remove the blogger's navbar:
for example:
http://www.francey.org/tutorials/64/removing-blogger-navbar
or
http://forums.digitalpoint.com/archive/index.php/removing-blogger-heading/t-29978.html
Best regards
Mario
Instead of putting target="_blank" (or target="_top", for that matter, which I personally find more useful; if someone wants to open a link in a new window I prefer to let them decide that for themselves) in every link of a blog, you can add a <base target="_blank" /> tag somewhere in the <head>...</head> portion of the page with your links, to apply that to every link in the page that doesn't have a target attribute of their own.
Great blogger hack. I really liked the idea. I've tried your dynamic scrolling lists and it worked very nicely with Firefox. As indicated in your post it did not work for IE (I am using Blogger's hosting service). I've tried a different approach using iframe that did get around the IE problem. Unfortunately because of an IE bug, that incorrectly interprets the iframe scrolling option, I had to use a bit of javascript to use a different html for IE and firefox. It is quite simple though. Take a look at: oracledmt.blogspot.com.
It has two examples in the sidebar: feeds and links. The first uses a list of images for the links.
Thanks! Worked for my MT blog very well. So nice...
http://www.hardbloglife.com
this is soooo freaking sweat
many thanks
i now feel confident to move my big messy blog to beta and not loose too much data.
www.bibliophilebullpen.com
i've created an external page to display at the side of my blog, as a scrolling box. but it doesn't look like part of my blog.
i created an plain html page with all the links i wanted to put in. no fancy stuff at all.
how should i make it look like it is actually blending into my blog ?? thanks. :)
after creating the external page n place it into the sidebar using the Object, i can't view it in IE as you had mentioned. but when i view your blog using IE, i can see yours. so i suppose it is not the problem where you wrote: Instruct your users to enable "access data sources across domains" to see the scrolling list content.
how should i fix it ?? i just paste the code you provided. don't understand why is it different. hmm .. please help. thank you. :)
Levian,
First, the reason it works on my page is because all of my pages are at the same domain (wilkinsons.com). My suspicion is that you're having the IE "across domains" problem.
As for it blending in, depends on what problem you're having. You need to use the same styles (background color, fonts, etc.) of course. As shown in the post, Firefox does a much better job of making the integrated page look integrated.
If all else fails, there's a comment by "Marcos" above that has an alternate code sample. You could try that, too.
Good luck.
HI, I got as far as getting YOUR blogroll to show up in my blog, but I'm not knowledgeable enough to know what needs to be included and what needs to be left out.
anyway to break it down in even simpler terms?
Rob,
Gee, you don't want to include my blogroll on your site? How disappointing. I could have inserted some Google Ads and made a penny or two off of it. Ah, well.
The key is that you have to have a separate webpage - different from your main page - to refer to. You have to create that page somewhere and include the blogroll code inside that separate page.
The page referred to in the instructions above it http://www.wilkinsons.comBananna/Bananaroll.html. Go there and look at that page. You'll see that it's just the text and some formatting. Once you're there, look at the source (in FireFox that command is in the "View" menu).
You'll see a bunch of formatting code at the top that you can skip over. Down at the bottom is the Blogroll code provided by Blogrolling. You need to create a webpage with your code included.
Once you get that webpage working (click on it, look at it, see that it is good), then you can reference it in your main webpage.
Does that help?
Scott,
Actually, I do want to include your blogroll on my site -- just not as MY blogroll :) Yours was showing up AS MINE and mine, well mine just disappeared. I think you may have solved it for me though. I will check out the page you referenced and see if that works!
My main reason for doing this is that I have been using blogrolling.com and it crashes every other day so I have to move on...
Rob
Oops, one more thing (and it might end up being a deal breaker for you), how exactly does one go about making an "html" page to point to?
I say the code source and all that you had but donknow how to make a page. Additionally, I saw that you use blogrolling.com -- Does it crash a lot for you?
It does for me. I actually had a scrolling blogroll for a few days but blogrolling.com crashed 3 X and now I'm trying to find a way around it.
Does this make sense?
Rob
Rob,
No, I've never had Blogrolling crash, but I'm not a heavy user. Now that the blogroll is running, I maybe modify it once every other month. I've never seen in crash in the webpage.
As for creating an html page, the simplest way is with a text editor. Html files are just text files with some special text in them. Every time you "View Source" in a browser, you're looking at the html code.
You can look at the file I pointed to earlier, "View Source", and just copy and paste into a text editor (Word, Wordpad, Notepad).
As a note, I generally avoid using Word for editing html. It adds a bunch of unnecessary junk to the file. I use Wordpad if I need to edit the html code.
Good luck,
Scott
this might be complicated for people who don't know much about HTML.
i've posted a simpler way of doing a Scrolling Blogroll in Blogger that is also easy to edit using the BlogList widget.
check out my post:
http://www.justanotherpixel.net/2008/10/how-to-make-scrolling-blogroll-bloglist.html
Blankpixels,
This post was originally written before the advent of Blogger widgets. I'm not surprised that there's an easier way with the widgets.
I still like the more fine control of the "classic" template, but to each their own.
Scott
Hi,thanks for sharing, its very nice. i like this blog.... website templates.
Post a Comment