- Introduction
- Why use Blogspot (vs. Wordpress or Tumblr)?
- Removing the Navbar
- Making pages with labels
- Adding bookmarking/feeds
- Analytics, SEO
- Web Resources (links)
- Etc. (Bookmark icon, tag/label cloud)
1. IntroductionThis guide will lead you through the process of making a blogspot blog (like this one) into your own optimized website for marketing your documentary. With the help of this guide, you can add navigation and independent pages (via labels), bookmarking and feed tools, a bookmark icon, and you can get rid of that blogger nav-bar at the top of the window. This involves a little bit of patience but the payoff will be worth it. At the end of this, you will have a very customizable, professional grade website for free. I've put together all of the relevant sources here so that you don't have to go looking around for them yourself.
I am assuming that you can figure out the basics of blogger on your own and that you are comfortable with laying out a website and some basic HTML/CSS. There is extensive documentation on all of this readily available at
blogger.com and
w3schools. So from this point out, I will assume you already opened your blogger account and chose a template/theme.
One VERY important thing to do in any case: take the time to sit back and just look at the way your site looks on the screen. Compare it with others. You don't need a marketing consultant to tell you if your fonts are too small or your margins too wide. Oh, and do test your links.
If you are feeling especially lazy,
here you can download the template for this page and then paste it into your own
Layout > Edit HTML (with the widgets expanded)
if you are so inclined.
NOTE: This guide, although intended for the documentary community, could certainly be used by anyone who wants to take advantage of the blogspot/blogger publishing system without the annoying distractions/imperfections. Also note that most of the content here wasn't written by me. I tried to spruce it up a bit but the credit goes elsewhere.
[
top]
2. Wait, Why use Blogspot?Blogspot is an easy to use, versatile, and free dynamic web content management system. There are others out there but
Tumblr is not quite as expandable, and
Wordpress, although prettier at first use, doesn't allow you to edit your theme's overarching HTML/CSS for free. With Blogger, you can.
So, blogger it is. You should be able to provide organize all of your online content through this platform. If you are a little shy of CSS and HTML, try Wordpress or if you think you don't need too much structure for your site, try Tumblr (it is very easy to upload audio, video, and images there too). For now. If you are little uneasy with HTML and CSS, Wordpress might still be your best choice. (If you decide to use Wordpress, the Cutline theme is a good starting point).
[
top]
3. Removing the NavbarOk, so this first little trick simply gets rid of that navbar you see at the top of most blogspot blogs. If you are hosting your blog on a server besides blogspot, you can turn this thing off via the 'Settings' tab. But for the rest of us who don't want to pay to host our own site, you are going to need to go to 'Layout', 'Edit HTML' and then search '#navbar-iframe' and replace that section with this:
#navbar-iframe {
display: none !important;
}
Here's my source for that trick.
[
top]
4. Making pages with labelsWhenever you make a post, at the bottom of the compose form, you will see a box where you can type in labels for your post (these are called tags on other sites). But with these tags you can actually create pages within your site.
So let's say you want to have a page on your site that shows your journal entries from your shoot. Whenever you write a post for this page, you will want to label it 'journal'. Let's say you always want a page where you collect all of your mentions in the press. Let's label those 'press'.
Now here's the trick. You are going to add a new HTML section to your website that will function as a navigation section or menu. Click the 'Layout' tab on your site's blogger admin page, then click 'Add a Gadget'. Then choose the HTML/Javascript option. Now for each section or label that you have chosen, you will need to make some text and then link it to
http://yourblogname.blogspot.com/search/label/yourlabelname
This code actually is what those labels below your post already link to. But the thing is, blogger has this annoying little status message that pops up whenever you do this, telling your viewer that s/he is viewing all the posted labeled such and such. So here's a
link that shows you how to clean that up. I would copy it to here but the formatting with all those brackets is a little tricky.
[
top]
5. Add social bookmarking/feedsOK, so lots of websites, including this one, have those little buttons that allow your site viewer to quickly add your post to a variety of different feeds, share services, and social bookmark. The site
Add to Any allows you to make such a button for free and with relatively no hassle.
If you want to customize the button a bit, go
here. Click 'More Options' and then you can choose your preferred services and then they generate the code. Follow their instructions
here to paste it into your all of your posts
MINOR STEP:
Next, go to
Feedburner and register your site so that you can better syndicate your site. Some people who read a lot of different sources on the internet use RSS to get content through services like Google Reader and Feedburner optimizes your RSS feed for better searchability and tracking. Add your new Feedburner RSS feed to your blogger page by following the instructions on their webpage (the part about chicklets and blogger default feed).
Feedburner also allows you to offer your blog posts as an
Email Newsletter that your audience can subscribe to (it's under the 'Publicize' tab)
Now, get rid of the default Atom feed by going to your 'Layout' tab again, this time to 'Edit HTML' and replace this part...
.feed-links {
clear: both;
line-height: 2.5em;
}
with this...
.feed-links {display: none; }
OK. Here's my
source for that little trick. And this forms a nice little segué into out next step.
[
top]
6. Analytics / SEO (Search Engine Optimization)
OK, we now need to find a way to keep track of who is reading our site, so let's go to
Google Analytics. You will need to open a new account, tell them the name of your site, agree to their conditions, and then they will give you a snippet of code for you to paste down into another HTML/Javascript box (see above). Make sure to confirm on the Analytics page after you have done this. Within a day or two, Google Analytics will start registering your number of users, where they are from ... basically harvesting and organizing ungodly amounts of information for you to use so that you can better track who is on your site and when, from where, ETC.
Between this step, the previous and basic labeling, descriptions, and linking, you should be pretty easy for your audience to find. I might do a post on further SEO if I really think its necessary. But I probably won't. The only other thing I'd really suggest is editing your meta tag in your header (via that 'Edit HTML' tab again). Read more
here.
[
top]
7. Web Resources (links)
For video posting,
Youtube is obviously the default. It's the one that everyone will use to first try to find a trailer for your doc.
Vimeo offers higher quality (including HD) but drawbacks include some provisions about commercial enterprises, delays for non premium users, and of course a more limited albeit more video production friendly environs. They have good guides on encoding for their site too.
For pictures,
flickr is good for photos but if you are worried about public domain issues you can use Photobucket (which is also good for animated GIFs).
Also, for photo and image editing, I'd suggest
GIMP in place of Paint or Photoshop. It's free, it runs on Windows, Mac, and Linux, and it's really powerful.
Check it out. I'm a recent convert.
[
top]
8. ETC
Bookmark Icon So lots of sites have a little icon that shows up in your tab. Any site hosted on blogger has that little white-on-orange B logo as their default icon. We can hack this as well. Go
here for the instructions. That site has some serious issues with Photobucket as of my writing this but the instructions seem good if you care about the topic. I haven't tried it.
Tag CloudHere is a nice hack for the getting a tag cloud where the size of the words changes according to the occurrence of the tag.
Mail To LinkHere is a nice generator for creating a "mail to" link. You can create a form email that your viewers can use to spread the word about your project. Or you can use a mail to link to generate an
email list (just set yourself as recipient and keep an Excel file of the senders).
[
top]
OK. That about sums it all up for now. I may edit this a bit in the future but I think this serves as a good introduction for now. Some of these hacks/tricks might seem a little ridiculous or nitpicky but I think all-in-all, most of them are potentially pretty useful.
Number of Google services referred to at date of publishing: 5 (Blogger, Youtube, Feedburner, Google Analytics, and Google Analytics ... sorry Picasa)
How to make a good website for free
