Implementations and The Effects

Here I will show you some basic overview about this template. I will reveal to you some of great features that have been implemented on this blog. I hope this basic overview can give you good idea on how to design a killer blog template in the easiest way..perhaps.

The MooTools Accordion Effect

The Accordion gives you a fancy way to only show the really needed content. You can see this effect in action on this blog by clicking the button located on the top right on every hidden entry. You can get the code from MooTools website. Feel free to try out the demos on the site.


Rokbox Implementation

RokBox, is a MooTools powered JavaScript slideshow from rocketwerx.com that allows you to quickly and easily display multiple media formats including images, videos (video sharing services also) and music. You also can use Rokbox on your blog.

Lets see some demos here. Try clicking on the images below..








Now, try click on the comments link at the bottom of this entry. It has the effect too.


YooToppanel Implementation

At the top of this template is the top panel module. It was inspired by the YooTopanel from yootheme.com. The code is originally from there, but has been modified for this blog together with a few themes that inspired by rockettheme template as well. Oops.. I'm just too lazy designing my own graphics rite now. You may want to read this entry and try it on your blog.


Style Switcher With Cookie Enabled

This template also have multiple styles that user can switch to. You can see the menu on the right. This method uses cookie to temporarily stores a very small data to your computer in order for the change remain persistent. The CSS only loads when a user click on it. Note that I'm just use this method to only change the background image. Basically you can change the entire layout using CSS. You can follow this tutorial on how to do just that.


Ok.. bye.

slideout | slidein | toggle | hide

dd

dw Use this generator

The Beautiful Typography

slideout | slidein | toggle | hide




This is the typography that used by rockettheme.com and it's has been implemented on this blog. It's exactly the same from the newest rockettheme template.

Notice Styles

This is a sample of the 'attention' style. Use this style to denote very important information to your users. To use this use the folllowing html: <span class="attention">....</span>This is a sample of the 'notice' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="notice">....</span>This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="alert">....</span>This is a sample of the 'download' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="download">....</span>This is a sample of the 'approved' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="approved">....</span>This is a sample of the 'media' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="media">....</span>This is a sample of the 'note' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="note">....</span>This is a sample of the 'cart' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="cart">....</span>This is a sample of the 'camera' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="camera">....</span>This is a sample of the 'doc' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="doc">....</span>

This is a sample <pre>...</pre> tag:

body { margin:0;  color:#7f7f7f; font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif; font-size:small; }
a:link {  color:#215670;  text-decoration:none;  }
a:visited {  color:#215670;  text-decoration:none;  }
a:hover {  color:#006699;  text-decoration:none;}
a img {  border-width:0;  }

Blockquote Styles

This is a blockquote, you will want to use the following formatting: <blockquote>....</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

This is a blockquote, you will want to use the following formatting: <blockquote class="blue">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

This is a blockquote, you will want to use the following formatting: <blockquote class="red">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

This is a blockquote, you will want to use the following formatting: <blockquote class="green">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

This is a blockquote, you will want to use the following formatting: <blockquote class="purple">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

This is a blockquote, you will want to use the following formatting: <blockquote class="orange">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

This is a blockquote, you will want to use the following formatting: <blockquote class="brown">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

This is a blockquote, you will want to use the following formatting: <blockquote class="grey">...</blockquote>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

This is blockquote, you will want to use the following formatting: <blockquote class="quotes"><p>...</p></blockquote>.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

Important Emphasis Styles

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important"><span class="important-title">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-blue"><span class="important-title-blue">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-red"><span class="important-title-red">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-green"><span class="important-title-green">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-purple"><span class="important-title-purple">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-brown"><span class="important-title-brown">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-orange"><span class="important-title-orange">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-grey"><span class="important-title-grey">Sample Title</span>...some content...</div>

Implementations and The Effects

Here I will show you some of the great features from this blog. The features are designed to matched the

The MooTools accordion effect.

The Accordion gives you a fancy way to only show the really needed content. You can see this effect on this blog by clicking the button on the top right on every hidden entry.


Rokbox implementation

RokBox, is a mootools powered JavaScript slideshow that allows you to quickly and easily display multiple media formats including images, videos (video sharing services also) and music from rocketwerx.com.

You also can use Rokbox on your blog. Lets see some demos here..




Yootoppanel Implementation
Style switcher with cookie enabled

Zooming effects for commenting purpose.

aaa