Expanding Codeblock

Expanding Codeblock
Memasang Expanding Codeblock, kode ini Fungsinya dapat menampilkan Teks, hampir sama dengan kode textarea, perbedaanya kode ini menggunakan efek hover, selain itu kode ini dapat dimodif menjadi textarea dengan cara menyisipkan kode textarea dibawah kode <div class="inner"> dan di tutup dengan   kode </div> penerapannya dapat diletakan di area gadged atau di entri halaman baru. dibawah ini adalah kode tersebut.

Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai

<style type="text/css">
.container {
position:relative;
}
.container:after {
text-align: center; position: absolute; background:#999;
top: 17px; right: -28px; width: 120px; height: 1.6em;
font-size: 1.1em; content: "Mys2010";
-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.outer, .outer:hover {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.outer{
color: #000; background: #DDD; overflow: hidden;
}
.outer:hover {
color: #FFF; background: #666; overflow: hidden;
}
.inner {
max-height: 110px; overflow: auto;
-webkit-transition: max-height 1.7s ease; transition: max-height 1.7s ease;
}
.outer:hover > .inner {
max-height: 1200px;
-webkit-transition: max-height 3.5s ease 0.7s; transition: max-height 3.5s ease 0.7s;
}</style>
   

<div class="container outer">
<div class="inner">
 isi Teks disini
</div>
</div>

Contoh
Expanding Codeblock Sebelum dimodif

Contoh Expanding Codeblock Setelah dimodif

<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Mari Belajar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBgYBv5m-aS4Uq74AGnGb_Kjl0RmTIhUOWPjhxK3zGgarn7C0NXWfQ805X04pRRfmt6jXAFsM7jE2FkNmwR41754yNfBDMFgK8dLCXTqerbl36gfKgVqFEMCNWobVzv6WISHTTm3xi5Y/s1600-r/backlink_mys2010.gif" alt="Mari Belajar" /></a><br />

Penjelasan :
Edit kode yang di warnai sesuai keinginan

All Sources
Edited by. Myscript2010