Input + Label be Awesome Work

Seperti pada episode sebelumnya snippet code input type, sekarang waktu update artikel tersebut. Jika sobat membaca sampai akhir, maka kalian akan menemukan link source dengan judul clean animated input labels by Oliver Knoblich! Sederhana namun tetap gaya, AA Koben akan berbagi hal serupa (input property) ketika mulai mengetikan kata-kata pada kotak, akan muncul kalimat yg tersembunyi. Demikian penjelasan yg membingungkan :D Original source with title float labels with CSS cdpn.io/nimFr
Source tersebut merupakan quick sketch yang mana untuk menunjukan sebuah ide saja kata si Alexandr Marinenko :P Perlu di ingat juga nih, penulisan kode yg digunakan tidak umum dan gue pikir ini code snippets kelas master. Berikut info beberapa kode snippet yg bisa kalian ketahui www.realcombiz.com/2014/02/20-useful-html5-code-snippets-you.html

Coba sekarang ketikan kata/kalimat pada kotak

First name

Second name

.wrappet {
display: inline-block;
overflow: hidden;
padding: 15px 0 0;
position: relative;
vertical-align: top;
}
.wrappet input[type=text] {
border: 1px solid #888;
padding: 10px;
width: 212px;
}
.wrappet label {
color: #2980b9;
font-size: 11px;
font-weight: bold;
left: 4px;
opacity: 0;
position: absolute;
top: 0;
}
.wrappet input[type=text]:valid + label {
opacity: 1;
}
.container {
margin: 0 0 10px;
}
.container.popup .wrappet label {
transition: opacity 0.25s ease-out, top 0.25s ease-out;
-webkit-transition: opacity 0.25s ease-out, top 0.25s ease-out;
top: 10px;
}
.container.popup .wrappet input[type=text]:valid + label {
top: 0;
}
.container.slide .wrappet label {
transition: opacity 0.25s ease-out, left 0.25s ease-out;
-webkit-transition: opacity 0.25s ease-out, left 0.25s ease-out;
left: -20%;
}
.container.slide .wrappet input[type=text]:valid + label {
left: 4px;
}

Planning HTML<div class="container popup">
<div class="wrappet">
<input type="text" placeholder="Name" required />
<label>First name</label>
</div>
</div>

<div class="container slide">
<div class="wrappet">
<input type="text" placeholder="Name" required />
<label>First name</label>
</div>
</div>Ingat kode di atas merupakan framework (ide). Sobat bisa pakai sesuai kebutuhan dan sesuai kemampuan ;)) Variabel input type text akan terlihat lebih full stylish jika pakai trik tersebut :-" Kode snippet input property ini sampai membuat seorang owner codepen.io Chris Coyier berkreasi juga dengan title label pattern with just CSS cdpn.io/CiflJ

samples.msdn.microsoft.com/iedevcenter/FormControls/scenario4.html

Happy input \m/

Make an Attractive Hover use jQuery

Mau memasang embed form action uploader edit and crop for image di situs kalian, cobalah www.croppic.net Menawarkan 3 opsi dalam tampilan upload, dan fitur² lainnya. AA Koben tidak akan membahas mengenai croppic, namun ada satu bagian pada footer web tersebut yang cukup fullstylish terlihat ;)) Pojok kanan bawah jika kalian sorot akan tampak sebuah gambar yg melejit dan tooltip sederhana dengan tujuan memberitahukan satu nama website. Itu yg akan AA share untuk sobat-sabit :P Cukup atraktif hover terjadi dalam sekali sorot! Syarat utama harus sudah ada script jQuery pada template.

Bahan-bahan:
Sediakan 3 buah gambar:

1. Gambar tooltip dengan resolusi 60 x 40 pixels.
2. Gambar logo dgn resolusi 65 x 12 pixels.
3. Gambar logo melejit dgn resolusi 50 x 49 pixels.
4. Size image by source web.

Tentukan terlebih dahulu gambar beserta resolusi yg diinginkan. Karena jika tidak, akan sedikit ribet nanti dalam menetapkan aturan dalam atribut CSS-nya.

Buka dan lakukan Save Page As .htm berikut.

Bukalah pada aplikasi kode (notepad) Koben buatkan 2 opsi pada id selector #bybbn label Sobat bisa pilih, mau memakai image tooltip atau warna saja! Sebenarnya kalau cuma edit & crop image, sobat bisa coba apps berikut github.com/blueimp/JavaScript-Load-Image :D

Happy coding \m/

Update Post Blog Kecil-kecilan

Kalau sobat memasuki link codepen master Hugo, artikel snippet code CSS input type gue dapatkan dari sana! Semuanya bagus² karya Hugo, sekarang ane comot Neon Dialog Boxes cdpn.io/yAtbx Kalau membaca kata NEON, berarti warna latar belakang haruslah warna gelap. Kalau warna terang kurang terlihat efek glow neonnya! Master hugo membuatkan dalam bahasa SCSS/Sass. Versi koben yaaa format CSS :D

Save halaman itu, kode di dalam tag <style> . . . </style> kode CSS. Markup HTML sbb<div data-title="Info Dialog" class="dialog-box info">
<em> Note: </em> blah bleh bloh here...
</div>Sebenarnya AA Koben cuma mau kasih 2 link source keren dari codepen.io/hugo/public & codepen.io/oknoblich/public

Sebagai bonus...

• grafixdesignmag.com/inspiration/20-small-tools-for-web-designer-web-based-apps
• spyrestudios.com/30-free-bootstrap-code-samples
• templatesledger.com/30-free-blogger-templates-to-download

Lagi males posting sebenarnya mah :)) Cuman update post blog kecil-kecilan ;))

Happy blogging \m/

Make Simple Editing Editor use Attribute Contenteditable

Beginilah kalau sedang tidak ada aktifitas. Sobat masih ingat dengan artikel merubah browser menjadi seperti notepad? Ternyata ada satu attribute HTML5 yang digunakan yaitu contenteditable Atribut contenteditable memiliki fungsi yakni menentukan apakah isi dari elemen dapat diedit atau tidak. Cari referensi sendiri² mengenai hal itu, banyak kok library web yg menerangkan ;)) Berikut alakadar link sources:

1. What is the Specific of Contenteditable!
2. html5demos.com/contenteditable
3. developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
4. akatov.github.io/angular-contenteditable
5. www.hongkiat.com/blog/html5-editable-content
6. codepen.io/matt-west/full/gtruC
7. simonewebdesign.it/blog/how-to-make-browser-editor-with-html5-contenteditable

Ada satu yg menggelitik dan kelupaan sama gue nih ;)) AA baca mengenai CSS live editing editor snippet dari www.webdeveloperjuice.com/2013/12/23/css-live-editing-editor-snippet Ketika melakukan penulisan bahasa CSS secara inline styles, kita dapat melakukan perubahan seketika. Berikut demo supaya jelas...

Result

My Blog

Edit Here

Coba gantikan value yg berada pada kotak Edit Here?

<p><a class="link" title="Tutorial Blog for Stylish Blogger" href="http://beben-koben.blogspot.com/">My Blog</a></p>
<style>
a.link {font-size: 21px;text-align: center;padding: 20px;display: block;}
.editable {display: block;font-size: 15px;color: #333;padding: 10px;border: 2px dashed #ccc;font-family: 'Courier New',Courier,sans-serif;white-space: pre-wrap;max-height: 212px;overflow: auto}
.editable:focus {outline: none;border: 2px solid #ccc;}
</style>
<style class="editable" contenteditable="">a.link { 
   color: #038;
   border: 2px dashed gray;
   background: lightgray; 
}</style>

Ternyata atribut contenteditable jugalah yg mendasari terciptanya Rich-Text Editing. Buka halaman berikut, scroll ke bawah dan dapatkan source kode rich-text editor example developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

Bonus:
templatespicy.com/20-best-free-blogger-templates-2014

Happy contenteditable \m/

Snippet Code CSS input type

Seiring dikembangkannya bahasa HTML dan CSS, sejalan dengan itu terlahir ide-ide penulisan snippet kode CSS. Satu artikel post yang bisa sobat pelajari tentang useful css snippets every designer should have www.hongkiat.com/blog/css-snippets-for-designers Kesempatan sekarang AA Koben akan berbagi snippet tag input Lumayan banyak attribute and value yg dapat dirangkaikan dengan tagging <input> Tag <input> menentukan field input dimana pengguna dapat memasukkan data. Sebuah field input dapat bervariasi dalam banyak cara, tergantung pada jenis atribut.

Attribute	Value	Description
type	button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week	Menentukan jenis elemen <input> untuk menampilkan.

Mari fokus kepada 2 jenis tipe input, yakni input[type="text"] & input[type="submit"]
Gue menemukan form action keren punya by master Hugo Darby-Brown cdpn.io/oBDaj Bentuk kotak pencarian yang menyembunyikan tombol search, tombol akan muncul ketika focus (mengetikan kata dalam kotak pencarian)

DEMO

Keren kan!!!

.formCus {
position: relative;
height: 3em;
margin: 0 auto;
width: 25em;
overflow: hidden;
}
.formCus input {
border: none;
height: 100%;
}
.formCus input:focus {
outline: none;
}
.formCus input[type="text"] {
padding: 0 0 0 1em;
width: 100%;
color: #777;
font-size: 19px;
}
.formCus input[type="submit"] {
background: #5096f3;
position: absolute;
right: 0;
top: 0;
width: 5em;
color: #fff;
cursor: pointer;
}
.formCus .input2:focus {
padding: 0 1em;
}
.formCus .input2:focus + .input2 {
right: 0;
}
.formCus .input2[type="submit"] {
right: -5em;
transition: 0.5s;
}
.formCus .input2[type="submit"]:focus {
right: 0;
}

Markup HTML<form action="" class="formCus" method="get" target="top">
<input class="input2" type="text" name="q" placeholder="Search something..."/>
<input class="input2" type="submit" value="Search"/>
</form>Itu baru area tombol yg menjadi fullstylish, belum lagi area input labels with clean animated b-) Label dengan efek animasi lembut yg lagi ngetrend dimana-mana. Jika kalian tertarik, silahkan pelajari codepen.io/oknoblich/pen/wFGIH The source
BONUS: cdpn.io/zcwbD - cdpn.io/dLIjt

Happy input \m/

Miscellaneous Hover Effects using CSS3

Secara pribadi jika melihat trik atau tutorial yang mungkin belum ada hentinya meliputi CSS trick hover dan jQuery script Walau tidak menutup kemungkinan sebenarnya para codinger, scripter, or developer yg entah dimana keberadaannya selalu berkreasi tanpa mengenal kata berhenti :) Dari sekian banyak efek-efek tercipta, membuat para penikmat terbuai dibuatnya...ahaaaiii...
AA Koben akan mencoba berbagi informasi meliputi links source dari hover effect of CSS3. Secara global ternyata perkembangan hasil efek hover menggunakan properti CSS berkutat dengan kode-kode yg hampir sama! Sebelum itu, harap sobat berjalan-jalan ria terlebih dahulu ya ;))

1. Free CSS3 Image Hover Effects
www.dezineguide.com/tutorial/15-free-css3-image-hover-effects
2. CSS3 Hover Effects
www.alessioatzeni.com/blog/css3-hover-effects
3. Collection of CSS3 Hover Effects
www.thomashardy.me.uk/a-collection-of-css3-hover-effects
4. Original Hover Effects
tympanus.net/Tutorials/OriginalHoverEffects
5. Caption Hover Effects
tympanus.net/Tutorials/CaptionHoverEffects/index.html
6. CSS Full Page Slider
cssdeck.com/labs/full/css-only-full-page-slider
7. 50+ Free jQuery CSS3 Image Hover Effects
bloomwebdesign.net/2014/01/50-free-jquery-css3-image-hover-effects
8. iHover 30+ Ready to use Hover Effects, built with SASS
gudh.github.io/ihover/dist/index.html

Setelah melihat itu semua, berikut links source bermacam-macam efek yang dapat di buat oleh property CSS3.

1. Hover.css
ianlunn.github.io/Hover
2. CSS3 Animation Cheat Sheet
justinaguilar.com/animations
3. Animate.css
daneden.github.io/animate.css
4. CSS animations with a soul
lvivski.com/anima
5. animo.js
labs.bigroomstudios.com/libraries/animo-js
6. Magic css3 animations
www.minimamente.com/magic-css3-animations
7. Effeckt.css
h5bp.github.io/Effeckt.css/dist
8. 55 CSS3 Animation Effects Demos
codepen.io/iPawan/pen/stAzC

Varibel efek hover dari CSS3 akan terlihat jika browser sobat sudah mendukung. Berikut 2 link source cheat sheets untuk kalian.

1. All The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuery
www.designyourway.net/drb/all-the-cheat-sheets-an-up-to-date-web-designer-needs-css3-html5-and-jquery
2. Exactly how much CSS3 does your browser support?
lea.verou.me/2012/02/exactly-how-much-css3-does-your-browser-support
3. Your browser supports....
cdpn.io/vsrhg

Demikian saja info dari gue, semoga ada manfaatnya dan sobat bisa langsung berkreasi ria :D

Happy animations \m/

Play Online or get Sources Flappy Bird Games

Dunia permainan sedang heboh dengan berita penutupan game FlappyBird. Di saat popularitas sedang menanjak, creator Flappy Bird berkebangsaan Vietnam Nguyễn Hà Đông secara tiba-tiba melakukan penutupan link download dari web apps store! Berbagai spekulasi bermunculan akibat tindakan yg dilakukannya tersebut. Ada yg bilang begini, ada yg bilang begitu...
Biarkan polemik mencari penyelesaiannya. Sebagai salah satu master .html, AA Koben akan berbagi link sources bagaimana bermain game flappy bird via browser ;)) Ada yang pakai JavaScript, jQuery, canvas and flash. Untuk penampilan burung, latar belakang, dan aksesoris game flappybird ada yg full membuat pakai properti CSS.

Hajji Tarek membuat kreasi tampilan flappy bird full use CSS cssdeck.com/labs/full/flappy_bird Jonathan Sampson brekreasi dengan hasil kerja berjudul flap, flap, flap cdpn.io/tscyf Berikut beberapa link online game burung flappy

• flappybird.io
• www.kongregate.com/games/maxblive/flappy-bird-flash
• www.plonga.com/skill/Reaction/Flappy-Bird-Online
• bird.ruosen.io
• uralozden.com/flappy

Saya sendiri sering bermain di web opsi nomor 4! Karena bertarung langsung dari negara manapun result meliputi top 30 akan terlihat :)) Jika sobat berminat dengan game ini, maka satroni saja source's berikut

• github.com/chairuosen/FlappyBird-By-JS
• ellisonleao.github.io/clumsy-bird
• github.com/ellisonleao/clumsy-bird
• codepen.io/JTParrett/pen/zwhyI
• github.com/hyspace/flappy
• github.com/uralozden/flappy-bird
• github.com/marksteve/dtmb
• cdpn.io/eukbC
• cdpn.io/gGahJ

Game sederhana klasik lain mungkin sobat mau memainkannya juga ;)

• cssdeck.com/labs/full/html5-doodle-jump
• developer.mozilla.org/en-US/demos/detail/mrmario-pro/launch
• developer.mozilla.org/en-US/demos/detail/penguin-jump/launch

Selamat bermain kesal-kesal ria =))

Edit Any Website use Editor HTML

Pernah mendengar istilah edit any website using JavaScript? Secuil script yang bisa mengedit (merubah kata/kalimat) situs apapun! Coba drag link berikut ke bookmark toolbar browser kalian Edit Any Website atau coba klik saja sapa tau bisa. Kalau cuma edit konten yang sudah jadi dan tanpa melihat perubahan yg signifikan terhadap web sasaran, kurang sreg and fullstylish? AA Koben punya satu website HTML Editor dimana kita bisa mengedit-ngedit situs meliputi HTML, CSS & JavaScript customizable.Tiga tab jajaran bawah bagian customizable area tempat meletakan kode/script. Dua tab sebelah kanan Framework dan Themes guna membutuhkan sesuatu yg mana sudah diberikan oleh si empunya web :D Dari pada bingung menjelaskan, cobalah sendiri...

Just Drag LiveGap Editor to your Bookmarks ToolBar, and when you are in the page you want to edit click it from the Bookmarks bar.

HTML editor LiveGap basicly manggunakan script keluaran dari web codemirror dot net. Asyik kan...:(|)

Sebagai bonus, Koben akan berikan 3 biji HTML editor yg sudah opensource untuk kalian. Editor ini diperuntukan bagi anda yg sudah familiar dengan penulisan syntax sbb

<!DOCTYPE html>
<html>
 <head>
  <title>TITLE</title>
<style>

</style>
 </head>
<body>

</body>
</html> 

htmleditor by mrdoob

HTMLiveCode

sand html editor

Editor buatan mrdoob ada sedikit bug jika membukanya memakai mozilla. Khusus sand editor by @_hew, gue sudah buatkan alternatif karena editor tersebut menggunakan embedding code editor by Ace. Yang mana kode editor dari Ace harus menggunakan layanan internet alias online. Saya coba buatkan versi offline-nya yah ;))

Pass: Tutorial Blog for Stylish Blogger
Sand editor ada enaknya, sudah masuk JavaScript cookies. Dengan demikian jejak terahhir akan terus ada sampai cookies/cache belum dihapus dari browser.

Happy editor \m/

Selection Good Resources February 2014

Berbagi informasi lagi... Datang dari salah satu web developer playground yakni jSDO.IT Dua postingan sebelumnya gue sudah melakukan seleksi tools dari web tersebut, yaitu: seleksi tools dari jsdo.it & extra selection tools of jsdo.it. Masih dari sana namun 1 account dengan nick akm2 AA akan bagi apps pilihan dari si akm2 itu! Yang akan saya ulas adalah tool membuat CSS keyframes dinamis menggunakan JavaScript. Demo: jsrun.it/akm2/ede6
Pada sesi demo dengan hanya melakukan klik akan langsung terlihat hasil dan kode CSS keyframes. Permasalahan timbul bagaimana cara mengambil kode CSS nya :D Generate tool ini akan menggenerate kode CSS-keyframes sesuai browser yg di pakai. Mirip dengan kinerja prefixfree script.

Koben sudah rubah dan tambahkan pada page CSS keyframes の Javascript による動的な書き換え double click untuk membuat/menentukan efek animasi, single click untuk mendapatkan kode CSS plus cursor x & y coordinates.

Pure CSS Image Generator

jsdo.it/akm2/sz2T

Generator merubah image menjadi format CSS. Hati-hati dalam menggenerate image dengan resolusi besar.

Triangulate It

jsdo.it/peko/bpkd

Generator merubah gambar menjadi ada efek triangulate (segi tiga) dengan cara di klik-klik.

Pure CSS Image Generator

jsdo.it/akm2/hQf1

Mirip dengan yg pertama, tetapi pada generator ini terdapat opsi ukuran dot (titik) yg mana efek dari mau jelas atau tidak.

Triangulation Image Generator

jsdo.it/akm2/xoYx

Generator penerus dari point ke 2 diatas, tetapi yg ini sudah otomatis tanpa harus klik-klik jebret jadi.

Triangle Mosaic

jsdo.it/akm2/nGBI

Efek lain dari tool generate triangle image dengan gaya mosaic.

Beberapa tool menarik lainnya namun tidak ada fasilitas drop image. Jadi rada repot buat ganti2 gambarnya nih :P jsdo.it/imageData/umzD - jsdo.it/imageData/kI7e - jsdo.it/akm2/iy3E
Kalau mau mencoba tools generator tetapi males pindah kesana-kemari, you have to try it coy code generator

Bonus:
dizyne.net/30-tutorials-help-master-css3 - www.webdesignersblog.net/coding/amazing-collection-animation-and-transition-effect-roundups - freakify.com/best-buttons-2014
Script cursor coordinate by www.brenz.net/snippets/xy.asp

Happy blogging \m/

It's Fullstylish Zoomerang n ImageLightbox

Koben punya dua informasi tut's unik. Tutorial lightbox dan zoom yang sama-sama sudah responsive! Kalau melihat dari nama zoom & lightbox sudah pasti berbeda, akan tetapi fitur ini hampir mempunyai kemiripan. Keduanya akan menampilkan konten ketika anda melakukan klik pada sebuah objek, dan diteruskan dengan membesar atau tampil paling depan membelakangi tampilan utama. Begitulah penjelasan singkat yg pasti kalian juga tidak akan paham :))

Zoomerang

Hostingkan javascript dan masukan ke dalam template sebelum tag </head> or </body><script src='https://raw.github.com/yyx990803/zoomerang/master/zoomerang.js' type='text/javascript'></script>Script pemanggil secara default seperti berikut<script>
Zoomerang.listen('./# UNIK-ID')
</script>Kode ./# UNIK-ID bisa sobat gantikan sesuai keinginan Ex: .zoom or #zoom Sehingga penulisan script menjadi<script>
Zoomerang.listen('.zoom')
</script>Markup HTML sbb

<img src="http://LINK-IMAGE" class="zoom" />
or
<span class="zoom">BLAH BLEH BLOH HERE</span>

Jadi zoomerang bisa digunakan membuat efek zoom terhadap property image dan text. Bila sobat mau memakai script pemanggil yg agak sedikit gaya maka penulisannya menjadi

<script>
     Zoomerang.config({
         maxHeight: 400,
         maxWidth: 400,
         bgColor: 'rgba(0,0,0,0.912)',
         bgOpacity: .85
})
.listen('.zoom')
</script>

maxHeight : Batas tinggi image ketika zoom.
maxWidth : Batas lebar image ketika zoom.
bgColor : Warna latar belakang zoom.
bgOpacity : Efek opacity/transparan zoom.

Demo dan source bisa sobat lihat yyx990803.github.io/zoomerang Untuk versi lightbox image, responsive and touch‑friendly pelajari sendiri saja yah on page osvaldas.info/image-lightbox-responsive-touch-friendly :D

Bonus:
cdpn.io/wlFqe - cdpn.io/yrCAi - cdpn.io/HlLua - cdpn.io/nCtFm - cdpn.io/EscmD - cdpn.io/fkCzh - developer.mozilla.org/en-US/demos/detail/book-note - developer.mozilla.org/en-US/demos/detail/phone-simulator

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/