Just Update, Boring to Post

Kalau virus malas sudah menyerang, acara posting jadi tidak ada semangat :-s AA Koben mau melengkapi 2 artikel sebelumnya yaitu mengenai make line tree navigation pure use css dan tag pre generator. Pada artikel membuat menu navigasi line tree memakai CSS mengikutsertakan 2 buah image! Sekarang akan di buat dengan menggunakan gambar 1 buah saja ;) Source and demo bisa sobat lihat pada web keren www.basicuse.net
Dalam pembuatannya seperti yang sudah saya katakan memakai 1 buah image. Hostingkan image tree berikut...

.treeview {
  padding: 0;
}
.treeview a {
  color: #000;
  line-height: 23px;
  text-decoration: none;
}
.treeview .icon {
  width: 28px;
  height: 23px;
  float: left;
}
.treeview .icon.plain {
  background: url(TREE-IMAGE.PNG) no-repeat 0 -10px transparent;
}
.treeview .icon.pointer {
  background: url(TREE-IMAGE.PNG) no-repeat 0 -23px transparent;
}
.treeview .icon.last {
  background: url(TREE-IMAGE.PNG) no-repeat 0 -43px transparent;
}

Kode CSS memang minim, tetapi penulisan markup HTML akan rada banyak :D

<div class="treeview">
<div class="item">
<a href="">Title Paling Atas</a>
<div class="item">
<div class="icon pointer">&nbsp;</div>
<div class="title">
<a href="">Sub title 1</a>
</div>
<div class="item">
<div class="icon plain">&nbsp;</div>
<div class="icon pointer">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-1</a>
</div>
<div class="item">
<div class="icon plain">&nbsp;</div>
<div class="icon plain">&nbsp;</div>
<div class="icon last">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-1-1</a>
</div>
</div> <div class="icon plain">&nbsp;</div>
<div class="icon last">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-2</a>
</div>
<div class="item">
<div class="icon plain">&nbsp;</div>
<div class="icon ">&nbsp;</div>
<div class="icon pointer">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-2-1</a>
</div>
<div class="icon plain">&nbsp;</div>
<div class="icon ">&nbsp;</div>
<div class="icon last">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-2-2</a>
</div>
</div> </div> <div class="icon pointer">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-2</a>
</div>
<div class="item">
<div class="icon plain">&nbsp;</div>
<div class="icon pointer">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-2-1</a>
</div>
<div class="icon plain">&nbsp;</div>
<div class="icon last">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-2-2</a>
</div>
</div>
<div class="icon pointer">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-3</a>
</div>
<div class="item">
<div class="icon plain">&nbsp;</div>
<div class="icon last">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-3-1</a>
</div>
</div> </div> </div>

<div class="item">
<a href="">Sub title 1-3</a>
<div class="item">
<div class="icon pointer">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-3-1</a>
</div>
<div class="item">
<div class="icon plain">&nbsp;</div>
<div class="icon pointer">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-3-1-1</a>
</div>
<div class="item">
<div class="icon plain">&nbsp;</div>
<div class="icon plain">&nbsp;</div>
<div class="icon pointer">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-3-1-1-1</a>
</div>
<div class="icon plain">&nbsp;</div>
<div class="icon plain">&nbsp;</div>
<div class="icon last">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-3-1-1-2</a>
</div>
</div> <div class="icon plain">&nbsp;</div>
<div class="icon last">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-3-1-2</a>
</div>
<div class="item">
<div class="icon plain">&nbsp;</div>
<div class="icon ">&nbsp;</div>
<div class="icon last">&nbsp;</div>
<div class="title">
<a href="">Sub title 1-3-1-2-1</a>
</div>
</div> </div> </div> </div>

<div class="item">
<a class="bold" href="">Sub title 1-4</a>
</div>
<div class="item">
<a href="">TITLE</a>
</div>
</div>
</div>
</div>

Kalau mau line-tree full CSS silahkan meluncur ke cssdeck.com/labs/full/pure-css-tree-menu-framework

Update post yg ke dua tentang tag pre generator! Pre tag generator. Koben dapatkan dari ben-bai.blogspot.com/2012/01/encode-and-format-my-code-for-blog-post.html Berikut efek yg dihasilkan dari pre generator by master Bai Ben.

effect:
>> Encode special character '<', '>', '"', ''' and '&'.
>> Color comment line/block (starts with '//' or '/*').
>> Color doc block (starts with '/**' or '<!--').
>> No break line, has horizontal scroll bar.
Save page as to your local HD

Happy blogging \m/