Kaliwungu Blog

14.07

HTML5 and jQuery filter images Portfolio

19/03/12 14.07

we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.

The HTML

The first step is to write down the markup of a new HTML5 document. In the head section, we will include the stylesheet for the page. The jQuery library, the Quicksand plugin and our script.js will go right before the closing body tag:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

  <!-- Enabling HTML5 tags for older IE browsers -->
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <header>
            <h1>My Portfolio</h1>
        </header>

        <nav id="filter">
   <!-- The menu items will go here (generated by jQuery) -->
  </nav>

        <section id="container">
         <ul id="stage">

    <!-- Your portfolio items go here -->
   </ul>
        </section>

        <footer>
        </footer>

  <!-- Including jQuery, the Quicksand plugin, and our own script.js -->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="assets/js/jquery.quicksand.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

In the body, there are a number of the new HTML5 elements. The header holds our h1 heading (which is styled as the logo), the section element holds the unordered list with the portfolio items (more lists are added by jQuery, as you will see later), and the nav element, styled as a green bar, acts as a content filter.

The #stage unordered list holds our portfolio items. You can see what these items should look like below. Each of them has a HTML5 data attribute, which defines a series of comma-separated tags. Later, when we use jQuery to loop through this list, we will record the tags and create categories that can be selected from the green bar.

<li data-tags="Print Design">
 <img src="assets/img/shots/1.jpg" />

</li>

<li data-tags="Logo Design,Print Design">
 <img src="assets/img/shots/2.jpg" />
</li>

<li data-tags="Web Design,Logo Design">

 <img src="assets/img/shots/3.jpg" />
</li>

You can put whatever you want in these li items and customize the portfolio further. The Quicksand plugin will handle the animated transitions of this list, so you are free to experiment.

The jQuery

What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions. The jQuery script we will be writing in this section, will loop through the portfolio items in the #stage list, and create a new (hidden) unordered list for each of the tags it finds. It will also create a new menu option, which will trigger the quicksand transition between the two lists.
First we need to listen for the ready event (the earliest point in the loading of the page where we can access the DOM), and loop through all the li items detecting the associated tags.

script.js – Part 1

$(document).ready(function(){

 var items = $('#stage li'),
  itemsByTags = {};

 // Looping though all the li items:

 items.each(function(i){
  var elem = $(this),
   tags = elem.data('tags').split(',');

  // Adding a data-id attribute. Required by the Quicksand plugin:
  elem.attr('data-id',i);

  $.each(tags,function(key,value){

   // Removing extra whitespace:
   value = $.trim(value);

   if(!(value in itemsByTags)){
    // Create an empty array to hold this item:
    itemsByTags[value] = [];
   }

   // Each item is added to one array per tag:
   itemsByTags[value].push(elem);
  });

 });

Each tag is added to the itemsByTags object as an array. This would mean that itemsByTags['Web Design'] would hold an array with all the items that have Web Design as one of their tags. We will use this object to create hidden unordered lists on the page for quicksand.

It would be best to create a helper function that will handle it for us:

script.js – Part 2

function createList(text,items){

 // This is a helper function that takes the
 // text of a menu button and array of li items

 // Creating an empty unordered list:
 var ul = $('<ul>',{'class':'hidden'});

 $.each(items,function(){
  // Creating a copy of each li item
  // and adding it to the list:

  $(this).clone().appendTo(ul);
 });

 ul.appendTo('#container');

 // Creating a menu item. The unordered list is added
 // as a data parameter (available via .data('list')):

 var a = $('<a>',{
  html: text,
  href:'#',
  data: {list:ul}
 }).appendTo('#filter');
}

This function takes the name of the group and an array with LI items as parameters. It then clones these items into a new UL and adds a link in the green bar.
Now we have to loop through all the groups and call the above function, and also listen for clicks on the menu items.

script.js – Part 3

// Creating the "Everything" option in the menu:
createList('Everything',items);

// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
 createList(k,v);
});

$('#filter a').live('click',function(e){
 var link = $(this);

 link.addClass('active').siblings().removeClass('active');

 // Using the Quicksand plugin to animate the li items.
 // It uses data('list') defined by our createList function:

 $('#stage').quicksand(link.data('list').find('li'));
 e.preventDefault();
});

// Selecting the first menu item by default:
$('#filter a:first').click();

Great! Now that we have everything in place we can move on to styling the page.

The CSS

Styling the page itself is not that interesting (you can see the CSS for this in assets/css/styles.css). However what is more interesting is the green bar (or the #filter bar), which uses the :before / :after pseudo elements to add attractive corners on the sides of the bar. As these are positioned absolutely, they also grow together with the bar.

styles.css

#filter {
 background: url("../img/bar.png") repeat-x 0 -94px;
 display: block;
 height: 39px;
 margin: 55px auto;
 position: relative;
 width: 600px;
 text-align:center;

 -moz-box-shadow:0 4px 4px #000;
 -webkit-box-shadow:0 4px 4px #000;
 box-shadow:0 4px 4px #000;
}

#filter:before, #filter:after {
 background: url("../img/bar.png") no-repeat;
 height: 43px;
 position: absolute;
 top: 0;
 width: 78px;
 content: '';

 -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
 -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
 box-shadow:0 2px 0 rgba(0,0,0,0.4);
}

#filter:before {
 background-position: 0 -47px;
 left: -78px;
}

#filter:after {
 background-position: 0 0;
 right: -78px;
}

#filter a{
 color: #FFFFFF;
 display: inline-block;
 height: 39px;
 line-height: 37px;
 padding: 0 15px;
 text-shadow:1px 1px 1px #315218;
}

#filter a:hover{
 text-decoration:none;
}

#filter a.active{
 background: url("../img/bar.png") repeat-x 0 -138px;
 box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2),
    -1px 0 0 rgba(255, 255, 255, 0.2),
    1px 0 1px rgba(0,0,0,0.2) inset,
    -1px 0 1px rgba(0,0,0,0.2) inset;
}

Description: HTML5 and jQuery filter images Portfolio

13.33

Template Portal blog

13/03/12 13.33

Kemarin sempet ada yg share di shotbox DC web malaysia catdevilcode net ternyata tampilannya lumayan keren. ahirnya saya mencoba untuk mengimplementasikannya ke dalam blogger. ahirnnya bisa juga ketawa

mungkin yang ingin mencobanya bisa liat demonya dulu

Demo : http://portalmaho.blogspot.com/

langkah untuk memasangnya
buat pengguna dasbor baru baiknya dikembalikan ke versi yg lama dulu
>> login blogger
>> rancangan
>>Edit HTML
>>Back up dulu Template aslinya
>>Expand Template
>>hapus smua code/sourcnya

Copy codenya dan pastekan
http://devilzc0de.org/forum/thread-13986-post-173572.html

simpan dan liat

untuk gambarnyar bisa di ganti sendiri
karna masih ngikut aslinya Description: Template Portal blog

13.00

Hover Slide Effect with jQuery

06/03/12 13.00

we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.

The Markup

For the HTML structure we will create a div element with the class and id “hs_container”. Inside we will place the different image areas with all possible images. The first image will have the class “hs_visible” which will make it being displayed on the top of all other images:

<div id="hs_container" class="hs_container">
 <div class="hs_area hs_area1">
  <img class="hs_visible" src="images/area1/1.jpg" alt=""/>
  <img src="images/area1/2.jpg" alt=""/>
  <img src="images/area1/3.jpg" alt=""/>
 </div>
 <div class="hs_area hs_area2">
  <img class="hs_visible" src="images/area2/1.jpg" alt=""/>
  <img src="images/area2/2.jpg" alt=""/>
  <img src="images/area2/3.jpg" alt=""/>
 </div>
 <div class="hs_area hs_area3">
  <img class="hs_visible" src="images/area3/1.jpg" alt=""/>
  <img src="images/area3/2.jpg" alt=""/>
  <img src="images/area3/3.jpg" alt=""/>
 </div>
 <div class="hs_area hs_area4">
  <img sclass="hs_visible" src="images/area4/1.jpg" alt=""/>
  <img src="images/area4/2.jpg" alt=""/>
  <img src="images/area4/3.jpg" alt=""/>
 </div>
 <div class="hs_area hs_area5">
  <img class="hs_visible" src="images/area5/1.jpg" alt=""/>
  <img src="images/area5/2.jpg" alt=""/>
  <img src="images/area5/3.jpg" alt=""/>
 </div>
</div>

Let’s take a look at the style.

The CSS

In our stylesheet, we will define all the areas and their dimensions. Since we will make them absolute, we will also define the positions for each area. Let’s start by defining the main container:

.hs_container{
 position:relative;
 width:902px;
 height:471px;
 overflow:hidden;
 clear:both;
 border:2px solid #fff;
 cursor:pointer;
 -moz-box-shadow:1px 1px 3px #222;
 -webkit-box-shadow:1px 1px 3px #222;
 box-shadow:1px 1px 3px #222;
}

It’s important that we define the overflow as hidden, since we don’t want the sliding images to be shown when they are out of this container.
Each area will also have its overflow hidden and be of position absolute

.hs_container .hs_area{
 position:absolute;
 overflow:hidden;
}

We position the images inside of the area and make them invisible:

.hs_area img{
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}

The first image will be visible, so we give it the following class:

.hs_area img.hs_visible{
 display:block;
 z-index:9999;
}

And now, we will define the borders and positions of each area:

.hs_area1{
 border-right:2px solid #fff;
}
.hs_area4, .hs_area5{
 border-top:2px solid #fff;
}
.hs_area4{
 border-right:2px solid #fff;
}
.hs_area3{
 border-top:2px solid #fff;
}
.hs_area1{
 width:449px;
 height:334px;
 top:0px;
 left:0px;
}
.hs_area2{
 width:451px;
 height:165px;
 top:0px;
 left:451px;
}
.hs_area3{
 width:451px;
 height:167px;
 top:165px;
 left:451px;
}
.hs_area4{
 width:192px;
 height:135px;
 top:334px;
 left:0px;
}
.hs_area5{
 width:708px;
 height:135px;
 top:334px;
 left:194px;
}

And that’s all the style! Let’s take a look at the JavaScript.

The JavaScript

For the effects, we will be giving the option to use some easing, so don’t forget to include the jQuery Easing Plugin if you make use of that option.

So, let’s first define some variables:

//custom animations to use
//in the transitions
var animations  = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
var total_anim  = animations.length;
//just change this one to one of your choice
var easeType  = 'swing';
//the speed of each transition
var animSpeed  = 450;
//caching
var $hs_container = $('#hs_container');
var $hs_areas  = $hs_container.find('.hs_area');

When we move the mouse over one of the areas we will animate the current image with an animation from our array, so that the next image gets visible. We will use a flag “over” to know if we can animate a certain area since we don’t want two animations to happen at the same time in one area.
We will have a case for each animation and we will define how the animation will behave.

//first preload all images
$hs_images          = $hs_container.find('img');
var total_images    = $hs_images.length;
var cnt             = 0;
$hs_images.each(function(){
 var $this = $(this);
 $('<img>').load(function(){
  ++cnt;
  if(cnt == total_images){
   $hs_areas.each(function(){
    var $area   = $(this);
    //when the mouse enters the area we animate the current
    //image (random animation from array animations),
    //so that the next one gets visible.
    //"over" is a flag indicating if we can animate
    //an area or not (we don't want 2 animations
    //at the same time for each area)
    $area.data('over',true).bind('mouseenter',function(){
     if($area.data('over')){
      $area.data('over',false);
      //how many images in this area?
      var total  = $area.children().length;
      //visible image
      var $current  = $area.find('img:visible');
      //index of visible image
      var idx_current = $current.index();
      //the next image that's going to be displayed.
      //either the next one, or the first one if the current is the last
      var $next  = (idx_current == total-1) ? $area.children(':first') : $current.next();
      //show next one (not yet visible)
      $next.show();
      //get a random animation
      var anim  = animations[Math.floor(Math.random()*total_anim)];
      switch(anim){
       //current slides out from the right
       case 'right':
        $current.animate({
         'left':$current.width()+'px'
        },
        animSpeed,
        easeType,
        function(){
         $current.hide().css({
          'z-index' : '1',
          'left'  : '0px'
         });
         $next.css('z-index','9999');
         $area.data('over',true);
        });
        break;
       //current slides out from the left
       case 'left':
        $current.animate({
         'left':-$current.width()+'px'
        },
        animSpeed,
        easeType,
        function(){
         $current.hide().css({
          'z-index' : '1',
          'left'  : '0px'
         });
         $next.css('z-index','9999');
         $area.data('over',true);
        });
        break;
       //current slides out from the top
       case 'top':
        $current.animate({
         'top':-$current.height()+'px'
        },
        animSpeed,
        easeType,
        function(){
         $current.hide().css({
          'z-index' : '1',
          'top'  : '0px'
         });
         $next.css('z-index','9999');
         $area.data('over',true);
        });
        break;
       //current slides out from the bottom
       case 'bottom':
        $current.animate({
         'top':$current.height()+'px'
        },
        animSpeed,
        easeType,
        function(){
         $current.hide().css({
          'z-index' : '1',
          'top'  : '0px'
         });
         $next.css('z-index','9999');
         $area.data('over',true);
        });
        break;
       //current slides out from the right and fades out
       case 'rightFade':
        $current.animate({
         'left':$current.width()+'px',
         'opacity':'0'
        },
        animSpeed,
        easeType,
        function(){
         $current.hide().css({
          'z-index' : '1',
          'left'  : '0px',
          'opacity' : '1'
         });
         $next.css('z-index','9999');
         $area.data('over',true);
        });
        break;
       //current slides out from the left and fades out
       case 'leftFade':
        $current.animate({
         'left':-$current.width()+'px','opacity':'0'
        },
        animSpeed,
        easeType,
        function(){
         $current.hide().css({
          'z-index' : '1',
          'left'  : '0px',
          'opacity' : '1'
         });
         $next.css('z-index','9999');
         $area.data('over',true);
        });
        break;
       //current slides out from the top and fades out
       case 'topFade':
        $current.animate({
         'top':-$current.height()+'px',
         'opacity':'0'
        },
        animSpeed,
        easeType,
        function(){
         $current.hide().css({
          'z-index' : '1',
          'top'  : '0px',
          'opacity' : '1'
         });
         $next.css('z-index','9999');
         $area.data('over',true);
        });
        break;
       //current slides out from the bottom and fades out
       case 'bottomFade':
        $current.animate({
         'top':$current.height()+'px',
         'opacity':'0'
        },
        animSpeed,
        easeType,
        function(){
         $current.hide().css({
          'z-index' : '1',
          'top'  : '0px',
          'opacity' : '1'
         });
         $next.css('z-index','9999');
         $area.data('over',true);
        });
        break;
       default:
        $current.animate({
         'left':-$current.width()+'px'
        },
        animSpeed,
        easeType,
        function(){
         $current.hide().css({
          'z-index' : '1',
          'left'  : '0px'
         });
         $next.css('z-index','9999');
         $area.data('over',true);
        });
        break;
      }
     }
    });
   });

   //when clicking the hs_container all areas get slided
   //(just for fun...you would probably want to enter the site
   //or something similar)
   $hs_container.bind('click',function(){
    $hs_areas.trigger('mouseenter');
   });
  }
 }).attr('src',$this.attr('src'));
});

Demo : http://54mp3l.blogspot.com/
modif : Emily.Josan
Download :http://www.mediafire.com/download.php?4mczccnz3bm7jjg

Description: Hover Slide Effect with jQuery

09.50

Linux Style For Blogspot

09.50

Wah dari kmrin saya mencoba bereksperimen dengan membongkar template blogspot untuk dijadikan berbagai jenis template... karna saya lagi sng ngoprek blogspot dan mngkin cm ini yang saya bs. ketawa

kali ini ga jauh beda cuma yang ini bergaya linux style ketawa

yang jlas ini blum fix, masih kurang di artikelnya. tapi karna ada salah satu member DC yg ingin mencobanya maka saya lngsng share aja.
dan untuk penambahan berikutnya nanti akan saya update.

ok langsng stebnya :

Demo : http://linuxdekstop.blogspot.com/

Seperti biasanya
login blogger >
klo menggunakan tampilan baru di kembalikan dulu ke tampilan yang lama..

kemudian ke menu rancangan lalu edit html
dan jangan lupa di Expand Template Widget.

backup dulu template aslinya, biar kagak takut klo rusak.. ketawa

kemudian hapus seluruh kode pada template dan ganti dengan kode ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection'  xmlns='http://www.w3.org/1999/xhtml'  xmlns:b='http://www.google.com/2005/gml/b'  xmlns:data='http://www.google.com/2005/gml/data'  xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

-------------------------------------------------------------

Name            : Linux Style For Blogspot
URI             : http://linuxdekstop.blogspot.com/
Author          : Awang Shellovers
Fb              : http://www.facebook.com/ononeiki.blogspot

-------------------------------------------------------------- */

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}



/* `Basic HTML
---------------*/
/* `HTML5 Reset
---------------*/

a,
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
dialog,
div,
dl,
dt,
em,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
border: 0;
margin: 0;
outline: 0;
padding: 0;
font-size: 100%;
}

html,
body {
height: 100%;
}

b,
strong {
/*
Makes browsers agree.
IE + Opera = font-weight: bold.
Gecko + WebKit = font-weight: bolder.
*/
font-weight: bold;
}

img {
font-size: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

th,
td,
caption {
font-weight: normal;
vertical-align: top;
text-align: left;
}


* {
cursor: default;
}

html,
body {
overflow: hidden;
}

body {
background-image: linear-gradient(bottom, rgb(63,66,65) 26%, rgb(40,72,82) 63%);
background-image: -o-linear-gradient(bottom, rgb(63,66,65) 26%, rgb(40,72,82) 63%);
background-image: -moz-linear-gradient(bottom, rgb(63,66,65) 26%, rgb(40,72,82) 63%);
background-image: -webkit-linear-gradient(bottom, rgb(63,66,65) 26%, rgb(40,72,82) 63%);
background-image: -ms-linear-gradient(bottom, rgb(63,66,65) 26%, rgb(40,72,82) 63%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.26, rgb(63,66,65)),
color-stop(0.63, rgb(40,72,82))
);
font: 12px/1 'Lucida Grande', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

/* `Misc
----------------------------------------------------------------------------------------------------*/

.abs {
position: absolute;
top: auto;
left: auto;
right: auto;
bottom: auto;
}

.align_center {
text-align: center;
}

.align_right {
text-align: right;
}

.float_left {
float: left;
}

.float_right {
float: right;
}

.ui-resizable-se {
background: url(http://v-shellband.tk/assets/images/gui/...orner.gif) no-repeat right bottom;
font-size: 0;
overflow: hidden;
width: 15px;
height: 15px;
right: 0;
bottom: 0;
}

div.ui-resizable-handle {
display: none !important;
visibility: hidden !important;
}

/* `Icons
----------------------------------------------------------------------------------------------------*/

.icon {
background: url(http://v-shellband.tk/assets/images/gui/...white.png) no-repeat -99999px -99999px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-background-clip: padding-box;
color: #fff;
font-size: 11px;
font-weight: bold;
line-height: 1.3;
padding: 6px 1px 6px;
text-align: center;
text-shadow: #000 0 1px 2px;
width: 80px;
}

.icon.active {
background: url(http://v-shellband.tk/assets/images/gui/...lack.png);
}

.icon img {
background: url(http://v-shellband.tk/assets/images/gui/...black.png) no-repeat -99999px -99999px;
display: block;
margin: 0 auto 5px;
width: 32px;
height: 32px;
}

.icon:hover,
.icon.ui-draggable-dragging {
background-position: 0 0;
background-repeat: repeat;
border: 1px solid #fff;
padding: 5px 0 5px;
}

.icon.ui-draggable-dragging {
z-index: 20;
}

/* `Windows
----------------------------------------------------------------------------------------------------*/

.window {
background: #fff;
border: 1px solid #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-background-clip: padding-box;
color: #000;
display: none;
width: 700px;
height: 300px;
top: 30px;
left: 120px;
z-index: 2;
}

.window.window_stack,
.window.ui-draggable-dragging {
z-index: 10;
}

.window.ui-draggable-dragging {
opacity: 0.5;
}

.window.ui-draggable-dragging .window_content,
.window.ui-draggable-dragging .window_bottom {
display: none;
}

.window_full.ui-draggable-dragging {
opacity: 1;
}

.window_full.ui-draggable-dragging .window_content,
.window_full.ui-draggable-dragging .window_bottom {
display: block;
}

.window_full {
border: 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-webkit-background-clip: padding-box;
width: 100%;
height: 100%;
}

.window_full .ui-resizable-se {
display: none;
}

.window_top {
background: #333 url(http://v-shellband.tk/assets/images/gui/bar_bottom.png) repeat-x;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-background-clip: padding-box;
color: #fff;
font-weight: bold;
overflow: hidden;
line-height: 30px;
padding: 0 10px;
text-shadow: #000 0 1px 1px;
height: 30px;
}

.window_top img {
float: left;
margin: 6px 5px 0 0;
}

.window_bottom {
background: #fff url(http://v-shellband.tk/assets/images/gui/bar_top.png) repeat-x left bottom;
border-top: 1px solid #bbb;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-background-clip: padding-box;
font-size: 11px;
font-weight: bold;
line-height: 20px;
overflow: hidden;
text-align: center;
text-shadow: #fff 0 1px 1px;
height: 20px;
left: 1px;
right: 1px;
bottom: 1px;
}

.window_min,
.window_resize,
.window_close {
background: url(http://v-shellband.tk/assets/images/gui/...ttons.gif) no-repeat;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-background-clip: padding-box;
float: left;
font-size: 0;
margin: 6px 0 0 5px;
width: 28px;
height: 15px;
}

.window_min:hover {
background-position: 0 -15px;
}

.window_resize {
background-position: -28px 0;
}

.window_resize:hover {
background-position: -28px -15px;
}

.window_close {
background-position: -56px 0;
}

.window_close:hover {
background-position: -56px -15px;
box-shadow: #f00 0 0 10px;
-moz-box-shadow: #f00 0 0 10px;
-webkit-box-shadow: #f00 0 0 10px;
}

.window_min:hover,
.window_resize:hover {
box-shadow: #09f 0 0 10px;
-moz-box-shadow: #09f 0 0 10px;
-webkit-box-shadow: #09f 0 0 10px;
}

.window_inner {
padding: 1px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.window_content {
background: url(http://v-shellband.tk/assets/images/gui/...ntent.gif) repeat-y;
line-height: 1.5;
overflow: auto;
top: 32px;
left: 1px;
right: 1px;
bottom: 23px;
}

.window_aside {
float: left;
font-size: 11px;
padding: 10px 12px 10px 10px;
width: 150px;
}

.window_main {
background: #fff;
margin: 0 0 0 173px;
min-height: 100%;
}

.window_full .window_top,
.window_full .window_bottom {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-webkit-background-clip: padding-box;
}

.window_full .window_inner {
bottom: -1px;
}

/* `Table >> Data
----------------------------------------------------------------------------------------------------*/

table.data {
width: 100%;
white-space: nowrap;
}

table.data th,
table.data td {
padding: 5px 10px;
vertical-align: middle;
}

table.data th {
background: #fff url(http://v-shellband.tk/assets/images/gui/bar_top.png) repeat-x left bottom;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
font-weight: bold;
text-shadow: #fff 0 1px 1px;
white-space: nowrap;
}

table.data th:first-child {
border-left: 0;
}

table.data img {
display: block;
}

table.data tbody tr:nth-child(even) td {
background: #def;
}

table.data tbody tr.active td {
background: #06c url(http://v-shellband.tk/assets/images/gui/..._link.png) repeat-x;
color: #fff;
}

th.shrink {
width: 1%;
}

/* `Bar >> Top + Bottom
----------------------------------------------------------------------------------------------------*/

#bar_top,
#bar_bottom {
font-weight: bold;
padding: 0 10px;
left: 0;
right: 0;
}

#bar_top {
background: #fff url(http://v-shellband.tk/assets/images/gui/bar_top.png) repeat-x left bottom;
border-bottom: 1px solid #333;
color: #999;
line-height: 25px;
padding-right: 20px;
text-shadow: #fff 0 1px 1px;
height: 25px;
top: 0;
}

#bar_bottom {
background: #333 url(http://v-shellband.tk/assets/images/gui/bar_bottom.png) repeat-x;
border-top: 1px solid #fff;
color: #fff;
font-size: 13px;
line-height: 30px;
opacity: 0.8;
overflow: hidden;
padding-top: 5px;
padding-bottom: 5px;
text-shadow: #000 0 1px 1px;
height: 30px;
bottom: 0;
}

/* `Bar >> Links
----------------------------------------------------------------------------------------------------*/

#bar_top li,
#bar_bottom li {
float: left;
}

#bar_top li a,
#bar_bottom li a {
display: block;
padding: 0 10px;
}

#bar_top li a {
background-image: url(http://v-shellband.tk/assets/images/gui/...link.png);
background-repeat: no-repeat;
background-position: -99999px -99999px;
color: #000;
overflow: hidden;
height: 25px;
min-height: 1px;
}

#bar_top a.active {
background-color: #06c;
background-position: 0 0;
background-repeat: repeat-x;
color: #fff;
text-shadow: none;
}

#bar_top ul.menu {
background: #eee;
border: 1px solid #333;
border-top-width: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-background-clip: padding-box;
display: none;
font-weight: normal;
margin: 1px 0 0 -1px;
padding: 1px 1px 0;
position: absolute;
min-width: 200px;
z-index: 30;
}

#bar_top ul.menu li {
float: none;
}

#bar_top ul.menu a {
background: #fff;
border-bottom: 1px solid #eee;
min-width: 180px;
}

#bar_top ul.menu li:last-child a {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-background-clip: padding-box;
}

#bar_top ul.menu a:hover {
background: #06c url(http://v-shellband.tk/assets/images/gui/..._link.png) repeat-x;
color: #fff;
text-shadow: none;
}

#bar_bottom li {
display: none;
margin: 0 0 10px 5px;
min-width: 150px;
}

#bar_bottom li a {
background: #333;
}

#bar_bottom a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-background-clip: padding-box;
color: #fff;
overflow: hidden;
padding: 0 10px;
height: 30px;
}

#bar_bottom a:hover {
background: #000;
}

#bar_bottom a:active {
background: #c60;
border: 1px solid #fff;
padding: 0 9px;
}

#bar_bottom li a img {
float: left;
margin: 4px 5px 0 -5px;
}

#bar_bottom .float_left img,
#bar_bottom .float_right img {
display: block;
padding: 4px 0 0;
}

/* `Wrapper + Wallpaper + Desktop
----------------------------------------------------------------------------------------------------*/

#wallpaper {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}

#desktop {
overflow: hidden;
top: 26px;
left: 0;
right: 0;
bottom: 41px;
}

#wrapper {
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 700px;
min-height: 500px;
}



-->
</style>

</head>

<!-- end outer-wrapper -->
--></style>
]]></b:skin>
<script type='text/javascript'>
<script>
jQuery(document).ready(function($) {
$('#ajax_load_trigger').click(function() {
$(this).unbind();
$('body').load('index.html #wrapper', function() {
JQD.init.clock();
JQD.init.wallpaper();
});
return false;
});
});
</script>
<script>
var _gaq = [['_setAccount', 'UA-166674-8'], ['_trackPageview']];

(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = '//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>

</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
</head>

<body>

<div class='abs' id='wrapper'>
<div class='abs' id='desktop'>
<a class='abs icon' href='#icon_dock_computer' style='left:20px;top:20px;'>
<img src='http://v-shellband.tk/assets/images/icons/icon_32_computer.png'/>
Computer
</a>
<a class='abs icon' href='#icon_dock_drive' style='left:20px;top:100px;'>
<img src='http://v-shellband.tk/assets/images/icons/icon_32_drive.png'/>
Hard Drive
</a>
<a class='abs icon' href='#icon_dock_disc' style='left:20px;top:180px;'>
<img src='http://v-shellband.tk/assets/images/icons/icon_32_disc.png'/>
Audio CD
</a>
<a class='abs icon' href='#icon_dock_network' style='left:20px;top:260px;'>
<img src='http://v-shellband.tk/assets/images/icons/icon_32_network.png'/>
Network
</a>
<div class='abs window' id='window_computer'>
<div class='abs window_inner'>
<div class='window_top'>
<span class='float_left'>
<img src='assets/images/icons/icon_16_computer.png'/>
Computer
</span>
<span class='float_right'>
<a class='window_min' href='#'/>
<a class='window_resize' href='#'/>
<a class='window_close' href='#icon_dock_computer'/>
</span>
</div>
<div class='abs window_content'>
<div class='window_aside'>
Hello. My name is Awang
</div>
<div class='window_main'>
<table class='data'>
<thead>
<tr>
<th class='shrink'>

</th>
<th>
Name
</th>
<th>
Date Modified
</th>
<th>
Date Created
</th>
<th>
Size
</th>
<th>
Kind
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_drive.png'/>
</td>
<td>
Hard Drive
</td>
<td>
Today
</td>
<td>

</td>
<td>
200 GB
</td>
<td>
Volume
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_disc.png'/>
</td>
<td>
Audio CD
</td>
<td>

</td>
<td>

</td>
<td>
2.92 GB
</td>
<td>
Media
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_network.png'/>
</td>
<td>
Network
</td>
<td>

</td>
<td>

</td>
<td>

</td>
<td>
LAN
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_folder_remote.png'/>
</td>
<td>
Shared Project Files
</td>
<td>
Yesterday
</td>
<td>
12/29/08
</td>
<td>
524 MB
</td>
<td>
Folder
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_documents.png'/>
</td>
<td>
Documents
</td>
<td>
Yesterday
</td>
<td>
12/29/08
</td>
<td>
524 MB
</td>
<td>
Folder
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_system.png'/>
</td>
<td>
Preferences
</td>
<td>

</td>
<td>

</td>
<td>

</td>
<td>
System
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_trash.png'/>
</td>
<td>
Trash
</td>
<td>
Today
</td>
<td>

</td>
<td>

</td>
<td>
Bin
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='abs window_bottom'>
Build: TK421
</div>
</div>
<span class='abs ui-resizable-handle ui-resizable-se'/>
</div>
<div class='abs window' id='window_drive'>
<div class='abs window_inner'>
<div class='window_top'>
<span class='float_left'>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_drive.png'/>
Hard Drive
</span>
<span class='float_right'>
<a class='window_min' href='#'/>
<a class='window_resize' href='#'/>
<a class='window_close' href='#icon_dock_drive'/>
</span>
</div>
<div class='abs window_content'>
<div class='window_aside'>
Storage in use: 119.1 GB
</div>
<div class='window_main'>
<table class='data'>
<thead>
<tr>
<th class='shrink'>

</th>
<th>
Name
</th>
<th>
Date Modified
</th>
<th>
Date Created
</th>
<th>
Size
</th>
<th>
Kind
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_page.png'/>
</td>
<td>
.DS_Store
</td>
<td>
Yesterday
</td>
<td>

</td>
<td>
6 KB
</td>
<td>
Hidden
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_folder_home.png'/>
</td>
<td>
Default User
</td>
<td>
Today
</td>
<td>

</td>
<td>

</td>
<td>
Folder
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_folder.png'/>
</td>
<td>
Applications
</td>
<td>
Yesterday
</td>
<td>

</td>
<td>

</td>
<td>
Folder
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_folder.png'/>
</td>
<td>
Developer
</td>
<td>
12/29/08
</td>
<td>

</td>
<td>

</td>
<td>
Folder
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_folder.png'/>
</td>
<td>
Library
</td>
<td>
09/11/09
</td>
<td>

</td>
<td>

</td>
<td>
Folder
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_folder.png'/>
</td>
<td>
System
</td>
<td>
Yesterday
</td>
<td>

</td>
<td>

</td>
<td>
Folder
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='abs window_bottom'>
Free: 80.9 GB
</div>
</div>
<span class='abs ui-resizable-handle ui-resizable-se'/>
</div>
<div class='abs window' id='window_disc'>
<div class='abs window_inner'>
<div class='window_top'>
<span class='float_left'>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_disc.png'/>
Audio CD - Title of Album
</span>
<span class='float_right'>
<a class='window_min' href='#'/>
<a class='window_resize' href='#'/>
<a class='window_close' href='#icon_dock_disc'/>
</span>
</div>
<div class='abs window_content'>
<div class='window_aside align_center'>
<img src='assets/images/misc/album_cover.jpg'/>
<br/>
<em>Title of Album</em>
</div>
<div class='window_main'>
<table class='data'>
<thead>
<tr>
<th class='shrink'>

</th>
<th class='shrink'>
Track
</th>
<th>
Song Name
</th>
<th class='shrink'>
Length
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
01
</td>
<td>
Track One
</td>
<td class='align_right'>
3:50
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
02
</td>
<td>
Track Two
</td>
<td class='align_right'>
3:50
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
03
</td>
<td>
Track Three
</td>
<td class='align_right'>
4:02
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
04
</td>
<td>
Track Four
</td>
<td class='align_right'>
3:47
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
05
</td>
<td>
Track Five
</td>
<td class='align_right'>
4:38
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
06
</td>
<td>
Track Six
</td>
<td class='align_right'>
3:16
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
07
</td>
<td>
Track Seven
</td>
<td class='align_right'>
3:53
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
08
</td>
<td>
Track Eight
</td>
<td class='align_right'>
1:41
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
09
</td>
<td>
Track Nine
</td>
<td class='align_right'>
3:40
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
10
</td>
<td>
Track Ten
</td>
<td class='align_right'>
4:33
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
11
</td>
<td>
Track Eleven
</td>
<td class='align_right'>
3:49
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
12
</td>
<td>
Track Twelve
</td>
<td class='align_right'>
1:11
</td>
</tr>
<tr>
<td class='shrink'>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_music.png'/>
</td>
<td class='align_center'>
13
</td>
<td>
Track Thirteen
</td>
<td class='align_right'>
6:17
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='abs window_bottom'>
Genre: Rock/Pop
</div>
</div>
<span class='abs ui-resizable-handle ui-resizable-se'/>
</div>
<div class='abs window' id='window_network'>
<div class='abs window_inner'>
<div class='window_top'>
<span class='float_left'>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_network.png'/>
Network
</span>
<span class='float_right'>
<a class='window_min' href='#'/>
<a class='window_resize' href='#'/>
<a class='window_close' href='#icon_dock_network'/>
</span>
</div>
<div class='abs window_content'>
<div class='window_aside'>
Local Network Resources
</div>
<div class='window_main'>
<table class='data'>
<thead>
<tr>
<th class='shrink'>

</th>
<th>
Name
</th>
<th class='shrink'>
Operating System
</th>
<th class='shrink'>
Version
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_server.png'/>
</td>
<td>
Urban Terror - <em>Game Server</em>
</td>
<td>
Linux
</td>
<td>
Ubuntu
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_folder_remote.png'/>
</td>
<td>
Shared Project Files
</td>
<td>
Linux
</td>
<td>
Red Hat
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_vpn.png'/>
</td>
<td>
Remote Desktop VPN
</td>
<td>
Windows
</td>
<td>
XP
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Michael Scott
</td>
<td>
Mac OS
</td>
<td>
10.5
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Dwight Schrute
</td>
<td>
Mac OS
</td>
<td>
10.6
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Jim Halpert
</td>
<td>
Mac OS
</td>
<td>
10.6
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Pam Beesly
</td>
<td>
Mac OS
</td>
<td>
10.5
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Ryan Howard
</td>
<td>
Mac OS
</td>
<td>
10.5
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Jan Levinson
</td>
<td>
Mac OS
</td>
<td>
10.5
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Roy Anderson
</td>
<td>
Windows
</td>
<td>
7
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Stanley Hudson
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Kevin Malone
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Angela Martin
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Oscar Martinez
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Phyllis Lapin
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Creed Bratton
</td>
<td>
Windows
</td>
<td>
7
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Meredith Palmer
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Toby Flenderson
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Darryl Philbin
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Kelly Kapoor
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
<tr>
<td>
<img src='http://v-shellband.tk/assets/images/icons/icon_16_computer.png'/>
</td>
<td>
Andy Bernard
</td>
<td>
Windows
</td>
<td>
Vista
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='abs window_bottom'>
LAN: Corporate Intranet
</div>
</div>
<span class='abs ui-resizable-handle ui-resizable-se'/>
</div>
</div>
<div class='abs' id='bar_top'>
<span class='float_right' id='clock'/>
<ul>
<li>
<a class='menu_trigger' href='#'>Category</a>
<ul class='menu'>
<li>
<a href='#'>General</a>
</li>
<li>
<a href='#'>Computer</a>
</li>
<li>
<a href='#'>Multimedia</a>
</li>
<li>
<a href='#'>Business</a>
</li>
<li>
<a href='#'>Lounge</a>
</li>

</ul>
</li>
<li>
<a class='menu_trigger' href='#'>Archive</a>
<ul class='menu'>
<li>
<a href='#'>2010</a>
</li>
<li>
<a href='#'>2011</a>
</li>
<li>
<a href='#'>2012</a>
</li>


</ul>
</li>
<li>
<a class='menu_trigger' href='#'>Rss</a>
<ul class='menu'>
<li>
<a href='#'>Post Rss</a>
</li>
<li>
<a href='#'>Comment Rss</a>
</li>

</ul>
</li>
<li>
<a class='menu_trigger' href='#'>Credits</a>
<ul class='menu'>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>

</ul>
</li>
</ul>
</div>
<div class='abs' id='bar_bottom'>
<a class='float_left' href='#' id='show_desktop' title='Show Desktop'>
<img src='http://v-shellband.tk/assets/images/icons/icon_22_desktop.png'/>
</a>
<ul id='dock'>
<li id='icon_dock_computer'>
<a href='#window_computer'>
<img src='http://v-shellband.tk/assets/images/icons/icon_22_computer.png'/>
Computer
</a>
</li>
<li id='icon_dock_drive'>
<a href='#window_drive'>
<img src='http://v-shellband.tk/assets/images/icons/icon_22_drive.png'/>
Hard Drive
</a>
</li>
<li id='icon_dock_disc'>
<a href='#window_disc'>
<img src='http://v-shellband.tk/assets/images/icons/icon_22_disc.png'/>
Audio CD
</a>
</li>
<li id='icon_dock_network'>
<a href='#window_network'>
<img src='http://v-shellband.tk/assets/images/icons/icon_22_network.png'/>
Network
</a>
</li>
</ul>
<a class='float_right'  href='http://www.facebook.com/ononeiki.blogspot' title='Awang  Shellovers'>Design by Awang Shellovers

</a>
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'>
<script src='http://v-shellband.tk/assets/javascripts/jquery.js'/>
<script src='http://v-shellband.tk/assets/javascripts/jquery.ui.js'/>
<script src='http://v-shellband.tk/assets/javascripts/jquery.desktop.js'/></script>

</body>

</html>

lalu simpan dan liat hasilnya. Description: Linux Style For Blogspot

18.02

Gratis Template Premium Wordpress versi 3

19/02/12 18.02

Company Style

Corporate style theme for your corporate website. This theme can impress your visitors with it’s slick design.
Demo | Download

The Morning After

From banner to templates, everything is strategically placed in this theme. Simple and clean.
Demo | Download

morning after 40+ Beautiful Wordpress 3.0 Ready Themes

Mystique

Light background for the content and dark background for the page give a good contrast for this theme. It has a nice tooltip in the background of actived link.
Demo | Download

Orsted Theme

Creative theme which mainly uses green, black and white colors. Image slider is very eye catching because it has green background and white frame around every image. All design elements fit very well together because they have a great color balance.
Demo | Download

AnimeStar

A dark theme with glimpse of green color effectively draws out a modern design using basic color tricks. A picture slideshow in the middle gives a perfect solution for different information to be shown in one place. Appropriate to anime, cartoon, game blogs.
Demo | Download

Black Motion

A black and white theme design never gets old and Black Motion themeis the living proof. A white color background is used for convenient content reading. This theme is efficient yet catchy because of its widgets.
Demo | Download

AutoFocus

Simplicity is the key of this theme. The only complicated thing in this theme is javascript action when you hover over the image.
Demo | Download

Gadget

Design elements, such as gradient in the header and shadow in the background make this theme elegant.
Demo | Download

Akylas

This theme is divided in four parts – top navigation, logo and banner, slider, page content.
Demo | Download

Structure Theme

A theme with its own style. Simple, but clean. Everything is in black & white, except the image.
Demo | Download

Damla

A multicolor background with a dark header backround, creates a good color combination. It is fast and easy to look through information with many widgets.
Demo | Download

Suffusion

A simple design with some cool features. White and grey is a perfect combination to create neat and sophisticated look. This theme is good for different blogs where colorful pictures are used.
Demo | Download

Funda

Black and white color combination never gets old. But this theme brings it to a higher level. Vertical stripes in the background helps to highlight the page content. Adequited for informational blogs.
Demo | Download

Mansion

A theme with unique style. Blog posts and images are arranged as in newspaper and magazine. It also has a javascript action when you hover over the blog posts or images.
Demo | Download

Magazeen

Magazeen always has been very popular theme for early WordPress versions, and it still saves its popularity. Simple and clean with style, these are the right words for this theme.
Demo | Download

Moda

If your website is about fashion then this theme is for you. Dark logo on light grey background looks very good.
Demo | Download

Leander

A conservative and simple theme with many widgets. Main attention is drawn to a page content.
Demo | Download

Coral

Orange color of this theme makes this theme very unique. Orange, grey and white colors match very well together and they make this theme brilliant looking.
Demo | Download

Shaken Grid

This theme’s content is arranged as in newspaper – in 3 separate columns. Good way to arrange your information.
Demo | Download

Side Blog

First attention goes to logo because it is big enough, it has free space around and background is dark. Rounded corners for content’s background give a good look.
Demo | Download

Simplo

According to theme’s name, this theme really is simple, without any unnecessary things. This theme would fit for blog very well.
Demo | Download

Titan

Simple and elegant theme for your blog. Brown color in header’s background gives a nice style. Gradient for navigation looks elegant as well.
Demo | Download

Oxygenous

A very simple grey design but it is taken to a new level. Red and orange colors are used to display some words or phrases. It has good widgets that create this theme look easy to navigate.
Demo | Download

Dimenzion

Dimenzion is really dimensional. Backgrounds of header, navigation and content are twisted so they give a dimensional look. Main colors for this theme are light blue, yellow and brown. Very colorful theme.
Demo | Download

Channel

This theme looks like a design for news portal. Good for blogs which are updated regulary.
Demo | Download

Fashion Press

A good theme for news blog. It has a blue background which attracts attention and light blue borders around blocks.
Demo | Download

Capella Theme

A simple theme which main color is blue. Blue is used for header and for links. This theme is for people who don’t want any flashy and shiny themes.
Demo | Download

Carbonified

Good looking corporate style theme for your company. Very simple but top image and logo draw all attention.
Demo | Download

Boronic

Boronic is another simple theme but with a little bit of its own style. Everything has its own place and free space around.
Demo | Download

Graphene

This theme best fits for a simple blog. It doesn’t have any cool or shiny design elements and that’s why it’s good for non-designer blog.
Demo | Download

Stargaze

Stargaze is very cool theme because it consists of many colors and it has some life in it.
Demo | Download

Photoblog

If you are a photographer and you’d like to publish your photos or publish some blog posts then this theme is for you. Your photos will draw more attention because of dark background and also white border around photos highlights them.
Demo | Download

Freshblog

Freshblog is a simple theme for a blog which doesn’t contain any shiny design elements but has a big simplicity.
Demo | Download

Animes

If you are creating a blog about Anime then you have, probably, found the right theme for your blog. This theme is all about Anime.
Demo | Download

Perfecta

Perfecta is very general theme, but it has a style.
Demo | Download

Magazine Basic

If you are planning to create a simple blog then this theme is for you. It doesn’t look like a mount of creativeness, but it’s simple and that means that it will load very fast.
Demo | Download

Brillyant

Nicely combined dark color in gradient makes this theme look stylish and neat. A picture slideshow in the middle is great for showing pictures. Widgets on the right helps to oversee all latest information. This theme is good for photo, cartoon, design blogs.
Demo | Download