Hover Trick on pre Attribute

Menanggapi pertanyaan sobat Zauma Zalfiah mengenai trick hover yang Beben Koben pasang pada pemakaian tagging pre. Dalam hasil render bila kita melakukan tag dengan kode pre secara otomatis susunan tulisan akan tampak real. Buka halaman berikut guna memahami lebih, dan tengok live demo lalu perhatikan susunan kalimat yang di-tag oleh pre coded HTML <pre> Tag.

Tampak susunan spasi, jarak antar spasi, legok ke dalam spasi :D terlihat seperti bagaimana kita menuliskannya! Namun hasil akan berbeda bila kode pre yang notabene berada didalam tag post blogger! Mengapa bisa berbeda, karena post-body blog kebanyakan sudah ditag dengan atribut float: left; Jadi result susunan pre-nya rata kiri semua :D Beben Koben si bloglang anu ganteng kalem tea tekniknya pakai jquery plugin ;) yang diterapkan di Prodigy of Head b-)

Mau dijelaskan sih sebenarnya ma Koben, tapi karena pemakaiannya yang rumet diurungkan deh ;)) :)>- Jadi teringat sobat satu lagi yang ngebet juga kepengen trick hover on pre attribute Zoro Swordsman :(|) <=- :D Example or demo:

<script type='text/javascript'>

//<![CDATA[

Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do

//]]>

</script>

Sekarang Koben akan berbagi trik serupa, namun menggunakan CSS 3 transition variable :-" DEMO

Klik buat mengambil link demo!

Bumbunya

pre{

width: 455px;

padding: 10px;

margin: 10px 0;

overflow-x: hidden !important;

background: #f4f4f4;

border: 1px solid #999;

transition:width 0.5s;

-moz-transition:width 0.5s;

-webkit-transition:width 0.5s;

-o-transition:width 0.5s;

font-family: "Courier New", Arial, Tahoma, monospace;

}

pre:hover{

width: 900px;

z-index: 100;

cursor: pointer;

position: relative;

}

Keterangan:

• width: 455px
Sesuaikan dengan lebar kolom postingan template sobat masing²
• width: 900px
Isikan dengan sesuai keperluan, asal jangan lebih kecil nominal lebarnya dari lebar pertama :))

Save

Pemakaian ketika memosting sobat tinggal pakai tag

<pre> --- CONTENT HERE --- </pre>

Semoga bermanfaat :)

Happy pre \m/