post

The Drudge Report style 3 column link page template

Looking for a Drudge style WordPress theme?

Update January 31st, 2010 In response to several people asking me about managing this template without using HTML, I created a dynamic template that uses a Google Docs spreadsheet to store the links, text and images. Installation and configuration is very simple as is adding, removing, and changing the links being displayed. The template isn’t free ($12) but a lot of time and effort went into its creation and it will save you hours of messing around with HTML code.

Also available is a free HTML template…

The Free Drudge Report Website template

In addition to the dynamic template above, I also have an HTML version available for free. This template was the basis for the one above and is easy to work with, providing you understand basic HTML.

As a side-note, the HTML on Drudge report is very poor. It was a table-style layout for no discernible reason, there were capitalized tags and attributes throughout, and it looked like it may have been avoiding CSS altogether. It’s really none of my business how other people put their sites together but it was clear I wouldn’t be drawing any inspiration from the technical construction. So I started from scratch and made this very simple, lightweight, one-file, one-page site template that mimics the layout of Drudge report with a few extra features. See the template now.

Download the free Drudge-Style Template

How to Use The Free Template

In typical Josh Can Help style, let’s walk through how to get this little guy to do what you want.

I use [[double square brackets]] around the text that needs to be changed in the file so it’s easy to find all the meta (unseen on the page) information. To add new links and change the information, you’ll want to have a bit of experience with HTML but, at the risk of a flood of new web developers taking all my clients, I’ll let you in on a little secret: HTML isn’t that hard. Here’s a real quick way to get familiar.

So, let’s customize this page:

  • Unzip the package somewhere on your desktop and open the “index.html” file with a plain text editor. If you’re in Windows, you’ll need to right-click the file and pick Notepad.
  • Start scanning for double brackets and fill in the information as needed. Make sure the <title> text has words that tell search engines what you’ve got going on the page. Fill out those meta tags too, just because.
  • Unless you’re familiar with CSS, just leave everything between the <style> and </style> tags alone. If you are familiar with CSS, go crazy!
  • The <h1> tag, by default, is invisible but still fill it out with a short (few words) description of the page. This combined with the <title> tag helps search engines figure out the main purpose of your page. If you aren’t going to use a banner image, then delete id=”page-name” and your header is now big, bold text.
  • Now, your header image. This image is centered on the page and can be any size you want. Just put the filename of the image you’re going to use after src=” and make sure the image is placed in the same directory on your host as this file. Type in a description of the image as well while you’re at it.
  • For the story of the day, do the same thing with the image and add your text where indicated in the template. The image will resize to 200 pixels wide automatically. FYI on the image, just delete the whole img tag if you don’t want to use one. You can also change “Story of the day” to something else and use that space for something different.
  • Now, you’re ready to plug in your links. Each link is in its own <li> tag to keep them on their own line and to give a little space in between. Just replace the text after href=” with the direct URL (including http://) and replace the next set of brackets with the text you want to appear on the page. You’ll notice that the first link in the left column has a paragraph right after it but before the closing tag. Make sure to follow this syntax to keep the spacing kosher.
  • Want to add another link? Just copy and paste one of those <li></li> rows wherever you want it to be. Deleting a link is the opposite.
  • Add a new separating header with <h3>...</h3> tags wherever you’d like (but, of course, within one of the columns).
  • Want to add a separator line? Figure out where it should go and stick an <hr> right there.
  • img tags can also be used in columns, just make sure they are in between the <li> and </li> tags. Style wise, it’s probably better to put img tags in between the <li> and the <a> tags.
  • Scroll down to the bottom for the footer links. Don’t want any? Just delete them all except mine :).

And that’s it! To make it live, just copy index.html to a public folder on your web host and check it out. If you already have a website going, be careful where you put this so you don’t overwrite the main site file.

Have fun! I’m happy to answer questions in the comments below.

Authored by: Josh

Josh Cunningham is a life-time geek with a passion for creating great things on-line using standards-compliant, modern techniques and open source software. Josh spent the first 6 years of his career supporting, teaching and documenting mobile technology before moving out of state to pursue a degree in chemistry. He came to his senses before graduating, however, and starting learning WordPress and front-end engineering, building up a client base before he had received his degree. For the last 5 years, Josh has been teaching, learning, designing, building, and writing about the web.

18 comments

  1. AmyV commented on November 22, 2009   —   Link      Reply

    I swear, I had been searching for this kind of template for a while. Just wanted something simple to aggregate headlines. Saved my sanity. My husband, who knows no HTML, is already using this on his site (http://buddhistgazette.com), and I’m implementing it on another site that I probably wouldn’t have bothered with if it weren’t for this template being available.

  2. Josh commented on November 22, 2009   —   Link      Reply

    Glad you like it! The site looks great… like Drudge but cleaner!

  3. Dinah commented on December 2, 2009   —   Link      Reply

    Wow, it’s looks so clean and simple! Great one!
    But I’m not so good with html, and it needs to be updated frequently if it’s going to be like a news site, so can I use this with WordPress so the updating will be easier?

  4. Josh commented on December 2, 2009   —   Link      Reply

    Unfortunately it doesn’t have that capability built in. It can be made to work with Google Docs but that takes a bit of programming. I’d be happy to give you an estimate for what you’re looking for or you can wait a while and I’ll probably end up posting it on here for free :)

  5. Malcolm commented on August 25, 2010   —   Link      Reply

    Josh – Did you ever do a version of Drudge for WordPress? Is it even possible?

    • Josh commented on August 25, 2010   —   Link      Reply

      I have not yet, no … but it’s definitely possible!

  6. Peter commented on September 9, 2010   —   Link      Reply

    Hi. I like the design. I was wondering if this can be used as a blogger template. I don’t know how to set up and host a website to blogger is idea for me.

    Any help most appreciated.

    • Josh commented on September 9, 2010   —   Link      Reply

      Blogger template? Not as it sits now… I’m going to be producing a WordPress template soon but you’d have to have your own site hosted to make that work…

  7. Jeff commented on October 7, 2010   —   Link      Reply

    Would love to see a WordPress template. You have my email. Please contact me if it ever comes about. Thanks.

    • Josh commented on October 8, 2010   —   Link      Reply

      Alright, Jeff… next project for sure. I’ve been scoping it out to figure out the easiest way for people to post and manage the links. Thanks for the comment!

  8. Michael commented on October 18, 2011   —   Link      Reply

    Hi Josh!

    I recently started a site with your html Drudge template, and I have a question:
    I inserted some pictures below some of my links, and they show up, but they move around on the page depending on how big my screen is. For example, on my 16″ laptop screen, the images appear centered and under my links, but when I view my site from my 22″ monitor, the pictures slide to the right such that they look randomly placed.

    Is there something I have to do to lock the position of the pictures in right under their respective links regardless of the viewer’s screen size?

    Thanks,
    Michael

    • Josh commented on October 19, 2011   —   Link      Reply

      Michael,

      I’m not exactly sure what’s going on there but it could be that the images are large enough to break out of the columns and wreak a little havoc on your layout. Try adding a width to the img element (say, 300 or so) and see if that helps.

  9. Kathy commented on April 4, 2013   —   Link      Reply

    I love this template. Is there any way to make it work for Blogger?

    • joshcanhelp_admin commented on August 29, 2013   —   Link      Reply

      Unfortunately not without pretty heavy modification.

  10. Kalika commented on August 20, 2013   —   Link      Reply

    Over the years I have been keeping an eye out for something like this. For whatever reasons I finally landed on your page here today.

    I am interested in the more dynamic version, which it appears to be the wpdrudge template in the link above? Unfortunately, I am not ready at this time to pay the $89 for a template, although it most likely is well worth the price. You mentioned a $12 dynamic template? Is that different from the more expensive one?

    In the meantime, I bought a domain back in 2003 that would be perfect for the html template and the DrudgeReport model.

    Thank you!

    • joshcanhelp_admin commented on August 29, 2013   —   Link      Reply

      Kalika: the dynamic version moved to a WordPress theme as you saw. There isn’t anything else available that does the same, unfortunately.

  11. Roman commented on September 26, 2013   —   Link      Reply

    I am interested in using this theme but cannot find any good live demos or sites using now… Makes me leery about spending 90.00. It also seems like you haven’t added anything in quite sometime so I wonder if it will be maintained going forward or would I be buying a dying theme.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments are held for moderation