Cara Membuat CSS3 Full Animated Show Hidden Content Onmouseover

Seolah-olah tiada habinya ilmu orang yang sepektakuler satu ini, siapa lagi kalau bukan juragan sito gimin, nih ilmunya yang patut sobat blogger ikutin "Cara Membuat CSS3 Full Animated Show Hidden Content Onmouseover"  Untuk membuat CSS3 Full Animated Show Hidden Content Onmouseover cukup mudah karena semua kode tinggal simpan di template, kemudian xHTML-nya gunakan saat posting atau di widget blog, maka segalanya akan selesai dengan teramat cepat. nah bila sobat blogger mania ingin mempraktekanya silahkan ikuti langkah langkah dibawah ini:

1.    Login to BloGGeR (Login ke BloGGeR) dengan cara Menuliskan User Name (Nama Pengguna) atau
       Email Address. Lanjutkan dengan menuliskan Password (Sandi) kemudian KLIK "Login"
2.    Beberapa saat kemudian halaman "Dasboard" akan terlihat. KLIK link "Design
      (Rancangan)".
3.    Setelah memasuki Page Element, KLIK link "Edit HTML".
4.    Back-up Template dengan cara KLIK "Download Full Template (Download Lengkap Template)
       dan SAVE/Simpan "File Template" di Folder PC.
5.    Cari kode ]]></b:skin>, kemudian simpan kode CSS dengan posisi seperti yang terlihat di kode
       CSS yang tertulis dibawah.
6.    KLIK "SAVE/Simpan Template".
7.    xHTML bisa digunakan untuk posting ataupun digunakan di widget blog. Jika untuk posting, susunlah
       kode secara rapat, sedang apabila di widget blog, lakukan penyimpanan dengan membuka terlebih
      dahulu "Page Elemen (Elemen Laman)", kemudian KLIK "Add Gadget", KLIK
      "HTML/Javascript". Setelah box penyimpanan widget terlihat, masukkan kode dengan
      copy-paste. KLIK SAVE/Simpan.
8.   Baik gambar atau link dan teks sesuaikan dengan apa yang dibutuhkan.

Kode CSS Show Hidden Content

.bgsGR_onmos {
      height: 32px;
      width: 260px;
      border: 2px solid #666666;
      background: #CCCCCC;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;
      padding: 5px 5px;
      margin: 15px auto;
      font: 11px Arial;
      color: #003366;
      overflow: hidden;
      box-shadow: 0 1px 8px #000;
      -moz-box-shadow: 0 1px 8px #000;
      -webkit-box-shadow: 0 1px 8px #000;
      }
.bgsGR_onmos:hover {
      min-height: 250px;
      border: 2px solid #333333;
      background: #111;
      box-shadow: 0 1px 15px #000;
      -moz-box-shadow: 0 1px 15px #000;
      -webkit-box-shadow: 0 1px 15px #000;
      color: #000; text-shadow: 0 1px 1px #888;
      }
.bgsGR_onmos h3, .jerohan h3 {
      font-size: 14px;
      font-family: Droid Serif;
      font-weight: bold;
      color: #000;
      text-align: center;
      text-shadow: 0px 1px 1px #fff; margin: 3px 5px;
      padding: 3px 10px;
      background: #bbb;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border: 1px solid #999;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;
      }
.bgsGR_onmos h3:hover {
      box-shadow: 0 1px 8px #000;
      -moz-box-shadow: 0 1px 8px #000;
      -webkit-box-shadow: 0 1px 8px #000;
      }
.bgsGR_onmos img.mini, .bgsGR_onmos img.minianima {
      width: 70px;
      border: 4px solid #666;
      padding: 3px;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      float: left; margin: 0 10px 5px 0;
      background: #222;
      -o-transition: all 1.5s;
      -moz-transition: all 1.5s;
      -webkit-transition: all 1.5s;
      }
.bgsGR_onmos img.mini:hover, .bgsGR_onmos img.minianima:hover {
      box-shadow: 1px 1px 15px #000;
      -moz-box-shadow: 1px 1px 15px #000;
      -webkit-box-shadow: 1px 1px 15px #000;
      border: 4px solid #CCCCCC;
      background :#666;
      -o-transform: scale(1.4);
      -moz-transform: scale(1.4);
      -webkit-transform: scale(1.4); 
      margin-top: 20px;
      margin-left: 15px;
      }
.bgsGR_onmos img.minianima:hover {
      -o-transform: scale(1.4) rotate(360deg) translate(0px);
      -moz-transform: scale(1.4) rotate(360deg) translate(0px);
      -webkit-transform: scale(1.4) rotate(360deg) translate(0px);
      }
.jerohan {
      margin-top: 15px;
      height: 200px;
      overflow: auto;
      padding: 0 5px;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out; background: #CFE7E9;
      }
.jerohan:hover {
      background: #333;
      color: #eee;
      text-shadow: 0 0px 1px #fe0303;
      }
.jerohan h3 {
      margin: 20px 0;
      max-width: 204px;
      background: #66CCFF;
      box-shadow: 0 1px 12px #eee;
      -moz-box-shadow: 0 1px 12px #eee;
      -webkit-box-shadow: 0 1px 12px #eee; 
      }
.jerohan h3:hover {
      background: #888;
      border: 1px solid #666;
      box-shadow: 0 1px 12px #fff;
      -moz-box-shadow: 0 1px 12px #fff;
      -webkit-box-shadow: 0 1px 12px #fff; 
      }
.jerohan ul {
      padding: 0;
      margin: 0;
      list-style: none;
      }
.jerohan li {
      padding: 0;
      margin: 0;
      list-style: none;
      border-bottom:1px dotted #777;
      }
.jerohan li a{
      color: #03d8fe;
      padding: 0;
      margin: 0;
      text-decoration:none;
      font-size: 12px;
      -o-transition: all 1.5s;
      -moz-transition: all 1.5s;
      -webkit-transition: all 1.5s;
      }
.jerohan li a:hover {
      -o-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      color: red;
      text-shadow: 0 1px 1px #000;
      margin-left: 20px;
      }

]]></b:skin>

<!--[if IE]>
<style type="text/css">
.bgsGR_onmos {height: 30px; }
.bgsGR_onmos h3, .jerohan h3 {font-size: 13px; }
</style>
<![endif]-->

xHTML Animated Show Hidden Content

<div class="bgsGR_onmos">
<h3>CSS3 Show Hidden Content</h3>
<div class="jerohan">
<h3>CSS3 Show Hidden Content</h3>
<img class="mini" src="http://img.theomegaproject.org/thumbs/2009/11/121.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks?
<h3>New Post</h3>
<ul>
<li><a href="Link-1">Tuliskan disini : Link Title-1</a></li>
<li><a href="Link-2">Tuliskan disini : Link Title-2</a></li>
<li><a href="Link-3">Tuliskan disini : Link Title-3</a></li>
<li><a href="Link-4">Tuliskan disini : Link Title-4</a></li>
<li><a href="Link-5">Tuliskan disini : Link Title-5</a></li>
<li><a href="Link-6">Tuliskan disini : Link Title-6</a></li>
<li><a href="Link-7">Tuliskan disini : Link Title-7</a></li>
<li><a href="Link-8">Tuliskan disini : Link Title-8</a></li>
<li><a href="Link-9">Tuliskan disini : Link Title-9</a></li>
<li><a href="Link-10">Tuliskan disini : Link Title-10</a></li>
</ul>
<h3>No Image and Script</h3>
<img class="minianima" src="http://img.theomegaproject.org/thumbs/2010/06/517.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar?
</div>
</div>
</div>

<div class="bgsGR_onmos">
<h3>CSS3 Show Hidden Content</h3>
<div class="jerohan">
<h3>CSS3 Show Hidden Content</h3>
<img class="mini" src="http://img.theomegaproject.org/thumbs/2009/11/121.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini?
<h3>New Post</h3>
<ul>
<li><a href="Link-1">Tuliskan disini : Link Title-1</a></li>
<li><a href="Link-2">Tuliskan disini : Link Title-2</a></li>
<li><a href="Link-3">Tuliskan disini : Link Title-3</a></li>
<li><a href="Link-4">Tuliskan disini : Link Title-4</a></li>
<li><a href="Link-5">Tuliskan disini : Link Title-5</a></li>
<li><a href="Link-6">Tuliskan disini : Link Title-6</a></li>
<li><a href="Link-7">Tuliskan disini : Link Title-7</a></li>
<li><a href="Link-8">Tuliskan disini : Link Title-8</a></li>
<li><a href="Link-9">Tuliskan disini : Link Title-9</a></li>
<li><a href="Link-10">Tuliskan disini : Link Title-10</a></li>
</ul>
<h3>No Image and Script</h3>
<img class="minianima" src="http://img.theomegaproject.org/thumbs/2010/06/517.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks?
</div>
</div>
</div>

Selamat Mencoba dan tetap terus berkarya.................

Salam Bloggerrrrrrrrrr