The Drudge Report style 3 column link page template

To start … 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.

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.

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.


Total: 19

Comments are temporarily closed, dealing with a spam issue ...

  1. Louisiana Steve

    October 9, 2014 at 6:32 am  • 

    Louisiana Steve says:

    Great work. I enjoy working with HTML and your template got me off on the right track. It’s clean and loads fast. HTML is the way to go. Thanks again for your time.

    Check out my latest news site using your template…

  2. Roman

    September 26, 2013 at 1:37 am  • 

    Roman says:

    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.

  3. Kalika

    August 20, 2013 at 8:30 am  • 

    Kalika says:

    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!

    • Josh

      August 29, 2013 at 3:05 pm  • 

      Josh says:

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

  4. Kathy

    April 4, 2013 at 6:37 pm  • 

    Kathy says:

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

    • Josh

      August 29, 2013 at 3:05 pm  • 

      Josh says:

      Unfortunately not without pretty heavy modification.

  5. Michael

    October 18, 2011 at 9:01 pm  • 

    Michael says:

    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?


    • Josh

      October 19, 2011 at 11:39 am  • 

      Josh says:


      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.

  6. Jeff

    October 7, 2010 at 6:21 pm  • 

    Jeff says:

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

    • Josh

      October 8, 2010 at 3:40 am  • 

      Josh says:

      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!

  7. Peter

    September 9, 2010 at 11:43 am  • 

    Peter says:

    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

      September 9, 2010 at 12:13 pm  • 

      Josh says:

      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…

  8. Malcolm

    August 25, 2010 at 9:49 am  • 

    Malcolm says:

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

    • Josh

      August 25, 2010 at 10:33 am  • 

      Josh says:

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

  9. Josh

    December 2, 2009 at 7:06 pm  • 

    Josh says:

    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 :)

  10. Dinah

    December 2, 2009 at 6:55 pm  • 

    Dinah says:

    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?

  11. Josh

    November 22, 2009 at 2:54 pm  • 

    Josh says:

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

  12. AmyV

    November 22, 2009 at 2:51 pm  • 

    AmyV says:

    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 (, 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.

Comments are closed.


If you've got something to say about the above, now is your time. I moderate for spam, relevance, and abuse but, aside from that, this is an open forum. I will not publish your email address but feel free to be anonymous. If you just have a general question or want to get in touch, my contact form is the best place for that. Thanks in advance!