Trying my first Github example: Crumble

1. Welcome to Future of Social Network! Click to continue.
2. You will find daily posts about social network, product management and start-ups.
3. If you want to connect, follow me on Twitter: jaeho9kim
   Thank you!

I've been seeing many Github projects from the sideline. Not having coded for considerable time, I did not have context to jump in and try Github project myself. That's been true until today.

I saw a nifty tool called Crumble. It's flexible tooltip that can guide users through sequence of steps. I thought it might be interesting to test it out since it would be useful to guide visitors through my blog.

The result is what you are seeing on this blog entry. I thought I wanted to share the cookbook style how-to for non-technical bloggers.



1. Copy the following codes to your blog in HTML view

<!-- setting up css and javascript references -->
<link href="http://tommoor.github.com/crumble/css/grumble.min.css" rel="stylesheet"/>
<link href="http://tommoor.github.com/crumble/css/crumble.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://tommoor.github.com/crumble/js/jquery.grumble.min.js"></script>
<script src="http://tommoor.github.com/crumble/js/jquery.crumble.min.js"></script>
<script>
$(function(){
$('#tour').crumble();
});
</script>

<!-- listing the sequence of tour guide to be played -->
<ol id="tour" style="display: none;">
<li data-target="h1">Welcome to Future of Social Network! Click to continue.</li>
<li data-target=".post-header">You will find daily posts about social network, product management and start-ups.</li>
<li data-target=".profile-textblock">If you want to connect, follow me on Twitter: <a href="https://twitter.com/#!/jaeho9kim">jaeho9kim</a>Thank you!</li>
</ol> 

2. Open your blog page and do a 'view source'

3. Locate HTML tags or class attributes that you want to highlight

4. List a HTML tag or class attribute as 'data-target' and corresponding tooltip message

For non-technical bloggers, Step #3 is the most challenging piece.  Experiment with different HTML tags, like h1, p, or class attributes (i.e. string that comes after 'class="attribute-name"').  Just remember that when you are using class attribute, use a dot before the attribute-name as ".post-header" in the example.