Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Compacting contents using Glider script

Using Glider.js

Thanks to Iva for requesting for this tutorial! Finally I have something to add to my long-dormant list of resources. Iva asked me over Twitter whether could I write a tutorial on how I’ve incorporated the famous Coda glider effect on my blog header. The basic function of the glider script is to replicate the effects of the Coda glider. Gliders, like accordions, are very useful in compressing/compacting contents in an area of a fixed size, and animate the process when a visitor switches between the different ‘panels’ (which involves gliding, hence the name).

My previous themes were plagued with the problem of overcrowding, where I attempt to squeeze too much information into too little screen real estate space – resulting in a rather nasty, visitor-unfriendly clutter and confusion. When I redesigned my blog, I kept that problem in mind and I was very impressed when I saw The Wojo Group‘s glider in action. It then led me to discovering the original synthesis of this idea at Coda, and to the Google Code page of Glider.js.

What is glider.js?

Glider.js is a rather lightweight javascript effect that weighs around 4kb uncompressed. So far I’ve not seen much development of the script after it’s previous update in May 2007, but for the moment being, it doesn’t have much issues with most major browsers (including IE6, surprise!). I’ve tested it in Firefox 2 and 3, Safari, Opera, Safari and Chrome, and it excelled in all these browsers. It is downloadable over here.

So are you ready to continue with the tutorial? Goodies after the jump, I promise!

Using the glider

So now let’s move on to the part that lets you implement your own glider. There is a demo link at the end of the tutorial, but it’s always better to read through the details because that’s where the majority of the explaning goes to.

What you will need

Download the Glider.js and if you don’t have, Prototype.js and Scriptaculous.js. Of course, if you’re using WordPress, you don’t have to worry about the latter because they’ve been taken care of by your WordPress installation. It’s safer to check your blog header and see if they’re loaded. If they’re not, you don’t need to actualy download them – you can simply load Google AJAX Libraries to make things easier:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
  3. <script type="text/javascript" src="glider.js"></script>

*Note: It’s absolutely important that you load the glider.js file after loading prototype and scriptaculous.

Alternatively, if you prefer to use the google.load function:

  1. <script src="http://www.google.com/jsapi"></script>
  2. <script type="text/javascript">
  3. google.load("prototype", "1.6.0.3");
  4. google.load("scriptaculous", "1.8.2");
  5. </script>
  6. <script type="text/javascript" src="glider.js"></script>

For WordPress users who prefer to place their glider.js file in their theme’s JS directory (recommended, and you can use any other names, just be sure to change the ‘/js/’ into something else – ‘/name-of-directory/’), replace the last line above with:

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/glider.js"></script>

For more information on the Google AJAX Libraries, you can read Jeff’s writeup.

Prior to setting up the glider

Glider.js relies on using classes to identify the individual gliders, so you will have to make sure that the following classes are unused in your layout (except for elements meant for the glider):

  • scroller
  • section
  • controls

*Note to advanced coders: these classes are identified in the javascript file, so if you’re planning to use other classes, do keep track of the changes and replace the class names in the file with relevant ones.

Basically, you will have a <div class="scroller"> to serve as a window around the content, and then <div class="section"> to wrap around each individual panels (which will be glided over when the event is initiated by a user mouseclick on a link – we’ll come to that later) and then a <div class="controls"> to house the control tabs. For some designers, you might want a forward and backward button to be present – if that’s the case, you can make do without the <div class="controls"> part. Here’s a summary of what the individual classes serve as:

  • scroller – serves as a window in which sections will appear, one at a time
  • section – wraps around contents in individual panels in the glider
  • controls – wraps around the tabs to allow navigation to any panel in the glider

A very basic layout, as evient in the blog header in the current design, can be seen below:

Basic layout of a glider.

Basic layout of a glider.

The basic idea is that we will have the scroller to be of the same width of the panels – it will be the ‘window’ in which the each section, or panel, is displayed. For this reason, all sections have to be of the same width. When the animation is not running, you will only see one section/panel in the window, and when you click on the navigation menu, the glider effects kicks in, fetches for the other section located outside of the window (see screenshot above) and repositions the new section in the window. That’s a mouthful! Now take a deep breath and try to digest it *burp*

And this brings us to the next section. Read on!

Step 1 – Adding an overall and a content wrapper

I have a habit of wrapping huge, chunky sections with a wrapper, so for this case, we will be using <div id="glider">.

  1. <div id="glider">
  2. ...
  3. </div>

Now we add in the scroller, and then the content wrapper that wraps around all the individual panels. We will also need to append the script that specifies the glider, after the entire glider element.

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. ...
  5. </div>
  6. </div>
  7. </div>
  8. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

*Note: If you have a different id for your glider container, you will have to make changes to the script – change the ‘glider’ to ‘your-own-id‘. The same applies if you want to vary the duration of transition/animation.

For the CSS, we want each section to be 500px wide and 200px tall. So we need to make the window of the same size too. In addition, we will make it such that the <div class="content"> is of a very huge width (to contain all the scrollers):

  1. .scroller {
  2. overflow: hidden;
  3. width: 500px;
  4. height: 200px;
  5. }
  6. .content {
  7. width: 10000px;
  8. }

Everything cool so far? Now we move on to the second step.

Step 2 – Adding in the sections

Now we’re done with the wrappers (div-itis alert, yes, but that’s unavoidable). We shall add in the individual sections. Let’s say we want to have 5 sections, each 500px wide and 200px tall:

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. <div id="section1" class="section">...</div>
  5. <div id="section2" class="section">...</div>
  6. <div id="section3" class="section">...</div>
  7. <div id="section4" class="section">...</div>
  8. <div id="section5" class="section">...</div>
  9. </div>
  10. </div>
  11. </div>
  12. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

*Note to those who are unfamiliar with CSS – ‘id’ and ‘class’ are two different things. A particular id can only appear in the entire document once – although modern browsers render multiple elements of the same id correctly, this should not be seen as valid XHTML. A class can appear multiple times in a document. We will apply a general style for all sections, so we target the class instead of the id.

To fix the dimensions of each section, we will have to turn to CSS for help:

  1. .section {
  2. float: left;
  3. overflow: hidden;
  4. padding: 10px;
  5. width: 480px;
  6. height: 180px;
  7. }

Some really, really important notes:

  • Float the containers to the left so that they will be arranged horizontally.
  • Hide potential overflows so that it doesn’t screw up anything, just in case.
  • The CSS box model: the total, intended height of an element is the sum of all the margins, paddings AND dimensions specificed. So if you want to have a 10px padding for contents in all sections, the width has to be reduced by 2*10px = 20px (because we have left and right paddings) and the same applies for height (because we have top and bottom paddings). For more information, read the Box Model article.

Step 3 – Adding and styling the controls

For the controls, I have used a tabbed structure to arrange the individual links to each section. We will add it outside the scroller but within the entire glider wrapper:

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. <div id="section1" class="section">...</div>
  5. <div id="section2" class="section">...</div>
  6. <div id="section3" class="section">...</div>
  7. <div id="section4" class="section">...</div>
  8. <div id="section5" class="section">...</div>
  9. </div>
  10. </div>
  11. <div class="controls">
  12. <ul>
  13. <li><a title="Go to Section 1" href="#section1">Section 1</a></li>
  14. <li><a title="Go to Section 2" href="#section2">Section 2</a></li>
  15. <li><a title="Go to Section 3" href="#section3">Section 3</a></li>
  16. <li><a title="Go to Section 4" href="#section4">Section 4</a></li>
  17. <li><a title="Go to Section 5" href="#section5">Section 5</a></li>
  18. </ul>
  19. </div>
  20. </div>
  21. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

That’s a whole bunch of code! Basically what we are doing is that we’re adding an unordered list (which is to be styled, later) underneath the ‘window’ (as seen in my blog header) to be the navigation menu. There are five sections, so normally you will need to place five tabs, in five <li> tags.

Now the styling!

  1. .controls {
  2. overflow: hidden;
  3. width: 500px;
  4. height: 30px;
  5. }
  6. .controls ul {
  7. list-style: none;
  8. margin: 0;
  9. padding: 0;
  10. width: 100%;
  11. }
  12. .controls ul li {
  13. float: left;
  14. width: 20%;
  15. }
  16. .controls ul li a {
  17. display: block;
  18. height: 20px;
  19. line-height: 20px;
  20. padding: 5px 0;
  21. text-align: center;
  22. }

This is what we’ve done for the CSS part:

  • Disable styles for the unordered list, set margin and padding to zero (just in case you haven’t done so in with a reset stylesheet, and defined its dimensions.
  • For the list items, we float them to the left to arrange them horizontally. There are 5 list items in total, so each of them take up 20% of the total width.
  • For the link in each list items, we set its display to block (by default, it’s in inline element) and by applying the box model, set height to 20px such that adding up the vertical paddings will be 30px. We also center the text.

We’re done with the basic structure of the glider! If you’re satisfied, you’re done for good!

Step 4 – Backward and forward buttons

The buttons can be implemented without the tabs, with the tabs or be thrown out of the window. It all boils down to personal preferences. For me, I’ve used a combination of both. So far, we’ve been doing the basic structure without taking the buttons into mind. If we want to, modifications to the structure above have to be made.

In this example, we will be adding buttons to two-sides of the scroller:

  1. <div id="glider">
  2. <div id="nav-previous" class="side-nav">
  3. <a title="Previous" href="#" onclick="my_glider.previous();return false;">Previous</a>
  4. </div>
  5. <div class="scroller">
  6. <div class="content">
  7. <div id="section1" class="section">...</div>
  8. <div id="section2" class="section">...</div>
  9. <div id="section3" class="section">...</div>
  10. <div id="section4" class="section">...</div>
  11. <div id="section5" class="section">...</div>
  12. </div>
  13. </div>
  14. <div id="nav-next" class="side-nav">
  15. <a title="Next" href="#" onclick="my_glider.next();return false;">Next</a>
  16. </div>
  17. <div class="controls">
  18. <ul>
  19. <li><a title="Go to Section 1" href="#section1">Section 1</a></li>
  20. <li><a title="Go to Section 2" href="#section2">Section 2</a></li>
  21. <li><a title="Go to Section 3" href="#section3">Section 3</a></li>
  22. <li><a title="Go to Section 4" href="#section4">Section 4</a></li>
  23. <li><a title="Go to Section 5" href="#section5">Section 5</a></li>
  24. </ul>
  25. </div>
  26. </div>
  27. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

So, we’ve added the previous and next links to the side of the scroller, and attached the javascript funciton to them to move the sections. We need to refine their appearance using CSS:

  1. .side-nav {
  2. float: left;
  3. width: 20px;
  4. height: 200px;
  5. }
  6. .side-nav a {
  7. display: block;
  8. text-indent: -9999px;
  9. width: 20px;
  10. height: 200px;
  11. }
  12. #nav-previous a {
  13. background: url(images/previous-arrow.png) no-repeat center center;
  14. }
  15. #nav-next a {
  16. background: url(images/next-arrow.png) no-repeat center center;
  17. }

Basically, what we did to the buttons is:

  • To give them a definite width and height (preferably spanning the height of scroller).
  • Display links as a block element, indent the text by -9999px so that it’s off the screen but still readable by search engine bots.
  • Customize background images for each button.

Then replace the styles for certain elements with the new ones below:

  1. .scroller {
  2. float: left;
  3. overflow: hidden;
  4. width: 500px;
  5. height: 200px;
  6. }
  7. .controls {
  8. clear: both;
  9. overflow: hidden;
  10. width: 540px;
  11. height: 30px;
  12. }
  13. .controls ul {
  14. list-style: none;
  15. margin: 0 auto;
  16. padding: 0;
  17. width: 500px;
  18. }

The modifications are necessary because:

  • We have added two 20px wide buttons on the side, so the overall width has increased to 540px.
  • The controls are widened to 540px as well, but if you want to keep the menu the same width as the scroller (at 500px), fix width to 500px as well and use automatic left and right margin to center the menu.
  • Clear the floats above the controls.

We also need to use the clearfix method to making sure that all the list items are cleared properly. Change <ul> to <ul class="clearfix">. To the CSS, add the lines:

  1. .clearfix:after {
  2. clear: both;
  3. content: ".";
  4. display: block;
  5. height: 0;
  6. visibility: hidden;
  7. }

Issues

There are several things that might not work well with this glider script:

  • If you’re using an older version of Lightbox, you might encounter a javascript error and the glider will not work – neither will the Lightbox. If that’s the case, I recommend you to upgrade to Lightbox 2. If you’re a WordPress user, I highly recommend Lightbox 2.8.0 plugin for WordPress – not only does it work perfectly for me, it allows you to customize your lightbox as well.
  • If you’re using an <iframe> in the section that has a scrollbar, there might be a minor graphical glitch in Firefox. I am unable to reproduce the glitch in Safari, Chrome, IE (surprise!) and Opera. It seems to be an issue with Firefox?
  • Flash movie will show even when the section it is contained in is not in the ‘window’. So the conventional YouTube snippets will cause your Flash Movie to appear towards the left/right of the ‘window’. You will have to add the following lines to the code: within the <object> element, add <param name="wmode" value="transparent"></param>; and to the <embed>, add wmode="transparent".

Finally, the demo!

Yes, there is a demo file that comes with this tutorial – just follow the link to the demo page. Do not right click and download, as the download manager I’m currently using masks the original URL, so you’ll be downloading a blank file instead. If you want to get the code, just follow the link and save the page that is loaded thereafter.

Download: Glider DemoVersion 1.0 File size: 4 KB 2016 downloads

I hope the tutorial and demo is of good use to you. Have fun! If you have any queries, feel free to leave a comment. Thanks!

Burn after reading » Now you're done reading. What's next?

Related

Related posts that might interest you:

Popular

Posts that are popular among visitors:

Share it

If you've enjoyed the post, or think that it might be useful to others, do share in on a social network site that you're using. Thank you!

  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • LinkedIn
  • Reddit
  • Design Float
  • Identi.ca
  • Live
  • Ping.fm
  • Print this article!
  • Twitter
  • Netvibes
  • HackerNews
  • Slashdot

51 responses to “Compacting contents using Glider script” » Leave a response

  1. Dinesh KResponse

    Awesome Tutorial. It real made me feel happy. :)

    Thanks a tonne Terry :)

  2. Dinesh KResponse

    And another thing, I loved your site too!

  3. Dinesh KResponse

    hey Terry,

    I think your CSS …

    #nav-previous a {
    background-image: url(images/previous-arrow.png) no-repeat center center;
    }

    is incorrect!

    The Correct one would be:
    #nav-previous a {
    background: url(images/previous-arrow.png) no-repeat center center;
    }

  4. Stephen

    Awsome!!!

    Thank you, you are inspiration!!

    I.m thinking on making PS related blog on my
    mather language,
    would you mind if I feature some of your tuts
    translated in my language.
    Of course I would post from where is original tut and link it to original post.

    you are doing a great stuff.
    dont stop.

  5. Stephen

    thanks teddY for such quick reply,
    I read cc licence, great, me happy

    sorry for not introducing mysefl little bit
    my native language is croatian, Im from little country in center
    of europe, called croatia, on adriatic sea.

    Im currently quite busy on my own projects,
    but that idea that I shared with you
    is something that I want to give back to
    online comunnity in my country, where is jet a lot of people
    who doesn not speek english.
    I dont have my online portfolio jet, its under construction,

    your site is awsome,
    as I said you are inspiration,
    I am looking forward to read you on a daily basis.

    best wishes
    s.

  6. shy

    hi your tut. is very inofrmative
    i tried this script for a week now and i cant get it to work rtl.
    i save your example code directly and worked online
    and i only change this <html dir=”rtl” xmln
    and the script stops responding.
    any idea????

    i tried asking at with no response
    http://code.google.com/p/missingmethod-projects/wiki/Glider

  7. shy

    hi, yes
    thanks for the response
    but yes
    even the most basic html it wont work on rtl
    i even saved your example page and changed direction
    and it stopped working
    even if its the only thing in the page

    and definitely breaks when you switch to rtl?
    yep yes works fine till you use it in an rtl based page
    i think its in the script and css something about it coming from left to right programmed to do so or something i’m not sure got my eyes to bouggle bouggle……

  8. Stavros

    Hi,

    I have had a really strange problem – when I download prototype and scriptaculous and use them locally the script doesn’t work – but when I call it from google it does work, why is this?

  9. tetleyResponse

    Awesome tutorial. I dont think the next and previouse buttons are working though

  10. Ben Dobos

    Hi teddY,
    awesome tutorial, but I experience one big problem. I’ve attached a screenshot:
    [img]http://img412.imageshack.us/img412/9468/border.gif[/img]
    I followed your tutorial thoroughly and doublechecked everything, but I don’t happen to get that ugly border removed. Browser is Firefox 3.
    I tried adding “border: none;” to the corresponding CSS-Classes.

    Any ideas?

  11. Stefan

    Hi,

    Your tutorial really helped a lot!

    I have one question: Is it possible to enable the glide effect by hovering over the section links? Maybe one just has to replace some “onclick” with “onmouseover”, but looking at the javascript file I could not find out where to change it. Unfortunately I don’t have any experience using javascript.

    Any suggestions are highly appreciated!

    Best regards,

    Stefan

  12. Stefan

    Sorry, I did not want the html part (now “Section 1″) to be encoded, but to be displayed as is.

  13. Stefan

    Hi, I made a mistake copying the goto function to glider.js before. Now every is working fine! Thank you so much for you kind help!

  14. Samuel

    Hi Teddy,

    Thanks for the great web site. I would like to know how do you make the tabs/links active? Has anyone requested this yet?

    Thanks,
    Samuel

  15. Putra

    Hi Teddy thanks for the tutorial… helped me alot.

    would like to know how to add 2 scroller window in page with 2 sets of different controls

    tq

  16. mauricio

    Hi,
    Thanks for the tutorial, I was looking for something like this for a long time.
    Now I have a more complex situation: Is it possible to have a glider like the one you describe here but with the difference that the slides are not loaded from the very beginning? They will only load once the user clicks on the next/previous button. If they don’t click, those slides will not load. I’m planning to have diverse contents on those slides (possibly a flash player, some forms, etc.).
    If not, do you know of any scriptaculous/prototype component that I can use?
    THank you so much!!

  17. Olivier

    Hi Teddy

    Great tutorial, so hard to find, really helps !
    I’m trying to have to sliders to work on the same page.
    Any clue ?

    Thanks
    Olivier

  18. Olivier

    Works like a charm !
    Thanks so much for your help.

    Olivier

  19. Jeff StarrResponse

    An excellent tutorial, Teddy! Definitely bookmarking this one for future reference. Your thoroughness and attention to detail is inspiring. Keep up the good work!

  20. JasperResponse

    Following your great tutorial. As I have not got the glider to work yet I tried to download the demo. Unfortunately it leads me to a 404 page…

  21. Georges

    Thanks a lot.
    This matter is quite new for me but with this kind of tutorial, anybody can understand.

    PS: I’m from Belgium

  22. snsd genieResponse

    Ideal report! I am only starting out in marketing and marketing and attempting to discover to perform it very well – assets just like this article are extremely precious. As our firm is based mostly in america, it is all a little new to us.

  23. Lisa

    Thanks for this great tutorial. Any chance you might add a slider effect to the row of thumbnails above the content slider?

  24. GabeResponse

    I was looking for a slider and your tutorial and demo made things nice and easy.

    What I’ve done is changed the links to thumbnails, and when the slider cycles through, the thumbnails are highlighted.
    Using the “Click to trigger sliding” menu, added a new class for the alt_controls li and updated the glider.js moveTo: function, to set the class in the relevant alt_controls li

    Here’s the code if anyone is interested.

    Update glider.js: moveTo: function
    add following code before Position.prepare();

    for (i=0;i<this.sections.length;i++)
    {                              $('showdiv'+i).removeClassName('on');
    }
    var selectOn = (this.current._index == null) ? 0 : this.current._index;
                            $('showdiv'+selectOn).addClassName('on');
    <code>
    
    Make sure you add a suitable style. This one will simply underline a link:
    <code>
    .alt_controls ul li.on span
    {
            text-decoration:underline;
    }

    Set the class=”on” for the first display
    <li id="showdiv0" class="on">

    Thanks for taking the time to make your post Teddy

  25. GabeResponse

    Missed the backslash on the code tag above before the Make sure…
    Sorry about that.

  26. LanceResponse

    Hi Terry. Great tute. Could you tell me if it is possible to have it scrolling with a delay of 2 seconds on each section?

  27. vente bache piscineResponse

    What’s up Dear, are you genuinely visiting this web page on a regular basis, if so after that you will without doubt get nice know-how.

  28. kitchen gadgetsResponse

    We’re a group of volunteers and starting a new scheme in our community.
    Your website offered us with valuable information to work on.
    You’ve done an impressive job and our entire community will be thankful to you.

  29. all in one kitchenResponse

    Hello there! This blog post could not be written any better!
    Looking at this article reminds me of my previous roommate!
    He continually kept talking about this. I will send this post to
    him. Pretty sure he’ll have a good read. Many thanks for sharing!

  30. commercial kitchenResponse

    My partner and I absolutely love your blog and find a lot of your post’s to be just
    what I’m looking for. Does one offer guest
    writers to write content in your case? I wouldn’t mind producing a post or
    elaborating on a few of the subjects you write about here.
    Again, awesome web site!

  31. cpa networks in indiaResponse

    Interesting post, it was really helpful web site
    had been wondering more about this. I will be sure to share this so more people can
    see too.

  32. รับสอนภาษาอังกฤษResponse

    The other day, while I was at work, my cousin stole my apple ipad and
    tested to see if it can survive a twenty five foot drop, just so she can be a youtube sensation.
    My apple ipad is now destroyed and she has 83 views. I know this is entirely off topic but I
    had to share it with someone!

  33. exerciseinfo.soup.ioResponse

    Wonderful goods from you, man. I have understand your stuff previous to and you are just extremely excellent.
    I actually like what you have acquired here, really like
    what you’re saying and the way in which you say it.
    You make it enjoyable and you still care for to keep it wise.

    I can not wait to read far more from you. This is actually a tremendous
    web site.

  34. improvement tipsResponse

    My spouse and I stumbled over here coming from a different website and thought I should check things out.

    I like what I see so i am just following you.
    Look forward to looking at your web page yet again.

  35. Restaurant Furniture KelownaResponse

    Everyday household items can be easily stored in less space.

    Each fountain is made of Teak thai restaurant chairs wood furniture.
    In addition, KidSitters features replaceable, extra-long safety straps and when you need to, the grip is useful on larger maps, the Kiparis is its survey markers.
    These look hand-drawn Art Nouveau has its uses,
    this thai restaurant chairs buzzsaw-like
    SMG. However, there are definite limitations based on quality of life out of your home with common houseplants.

  36. juegos free online gamesResponse

     La Totalidad De la documentacion resulta posteada de modo clara y directa.

    Esste site es de lo mas bueno que he hallado en todo web. Muy Agradecido.

Leave a Response » Share your thoughts or Return to top

Your name is required. Why?

  • So that I can address you personally (which I'm more than happy to do).
  • Everyone loves their name to be called, right? Nobody wants to be referred to as 'a certain someone' or Mr X (X-Men members aside).
  • If your post too much spam, your name will be imprinted on a personalised voodoo doll, completely free of charge. I'm just joking!

Your email is needed. Why?

  • Your email is, and will, never be given out to any third party under any conditions (except for people sneaking up behind me when I'm on WP admin).
  • So that I can contact you personally in case of certain issues that I wish to address personally.
  • If you post too much spam, I'll email the same spam you've posted 10 times back to you, completely free of charge.

You can always leave a personal URL behind

  • It can be anything - most people put their blog URL, their facebook page, their Twitter URL, their MySpace or etc.
  • I give love back by saying NO to no-follow. All of your webbie links are dofollows instead.

Twitter. Twitter. Twitter.

  • What is Twitter?: Twitter is a social networking and micro-blogging service that enables its users to send and read other users' updates known as tweets. Tweets are text-based posts of up to 140 bytes in length.
  • What is my Twitter ID?: To get a Twitter ID, you simply have to sign up for an account at Twitter.com. Your ID will be in the format of your profile's URL - http://twitter.com/[userid].

Comment notes

  • Gravatar: You can register for one at Gravatar.com
  • XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">
  • Codes: Wrap them up with <code></code> tags.

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching Natasha Bedingfield - Unwritten. Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence