Snooble.net

Orait. aku dah takda interest dgn blogspot. Now you can reach me on my new project! :)

Wolcome to Snooble.net!

RocketTheme Style for Blogger

It's been a long time no update here. I just want to tell you that I'm making some template transformation from RocketTheme to Blogger for a new professional RocketTheme style Blogger template. But it will be released after the final touch.. Check this out!

Implementations and 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 right 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.

The Beautiful Typography

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


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 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-2">....</span>This is a sample of the 'info' style. Use this style to denote very important information to your users. To use this use the folllowing html <span class="info-2">....</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="downlioad-2">....</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-2">....</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>

Later, I will show you how to implement these styles on your blog. It's easy. Stay tuned..

Background Mania

These are some of my background collections. I just collect them. That's it. You can preview and download them by selecting them from the list on the right side.

New Top Panel Theme - Burlywood

Theme name: Burlywood

Download the source code or use the Top Panel Generator.

:)

New Top Panel Theme - Bloody Red

Theme name: Bloody Red

Download the source code or use the Top Panel Generator.

:)

Top Panel Module/Widget for Bloggers

A Little Introduction

As you can see on the top, it's a top panel module for displaying any content on your blog. It's suitable for self presentation, legal information or to place any external element to enhance your blogging experience. You can put anything such as your shoutbox, videos, pictures, banners, ads, about me, ... ect. Yes, anything! You have unlimited possibilities about what you want to put on it.

The working area is 800px in the default width and 250px(the best) in the default height. But you always can modify all these parameters on the given source codes.

Browser compatibility: Firefox, IE6, IE7, Safari, Opera, Camino



Installation Steps


Method 1

1. Download the zip file.

2. Extract it to your PC.

3. Upload all files listed below to your server.

mootools.js
toppanel.js
tp_images/bullet-13.png
tp_images/panel_bg.png
tp_images/trigger_l.png
tp_images/trigger_m.png
tp_images/trigger_r.png
tp_images/bloitt_button.jpg

4. Open toppanel_html.txt and edit the path and the content to yours.

5. Copy and embed the code into your site. Done!



Method 2 - Copy & Paste (Painless)


Use this generator and you are all set!

With this method, your module will be exactly the same like on this demo page.
The size of the working area is 800px in width and 250px in height.To embed the code, just add new HTML/JavaScript gadget and paste the code into it and save.

Enjoy blogging! :)

Plugboard

As you can see on the right side of this page, there's a button labeled 'plug'. Simply click on it and plug your website address and your button URL. Your button URL will be plugged into this page together with your website address. This can help increase your website's traffic! Try it!
You also can use this system on your own website or blog. Visit plugboard.org.