Template Simple Blogspot

Tentunya salah satu sobat blogger ada yang ingin mempunyai tampilan template yang simple dan cepat.
Apalagi bisa di padukan dengan adsense. hehe..  Kali ini saya akan share template buatan temen saya Emily.Josan salah satu member Devilzc0de. Templatenya simple dan ga ribet di tambah loadingnya super cepat alias maknyusssss ......ekkkkwkwk. Selain Seo Friendly juga sudah ada fitur auto readmore -nya .
Ok buat sobat blooger yang ingin mendownloadnya bisa langsung download dimari
http://adf.ly/1626022/simpleads
tunggu 3 detik dan skip ads

untuk Demonya bisa liat dimari
http://akuinginmembuat.blogspot.com/

thanks Description: Template Simple Blogspot

Template Portal blog

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
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

Hover Slide Effect with jQuery

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

Linux Style For Blogspot

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. kali ini ga jauh beda cuma yang ini bergaya linux style
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..
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