Ini bukan seperti kata pepatah "malang tak dapat ditolak, mujur tak dapat diraih", tetapi lebih kepada pengertian "apa boleh buat". Yah ...., memang apa boleh buat. Akhirnya CSS3 memang harus menjadi pilihan utama untuk posting-posting di masa ke depan. Tak dapat lagi ditolak bahwa nantinya desain blog atau web yang tak banyak memerlukan fungsi-fungsi khusus akan lebih baik berkonsentrasi menggunakan CSS3. Disamping semakin banyak fungsi menarik dan atraktif berhasil diciptakan melalui kehebatannya, tentu saja yang jauh lebih penting adalah lebih mudahnya membuat berbagai desain tanpa script. Dan satu lagi tentunya adalah beban yang ditanggung blog semakin ringan.
Berbeda dengan biasanya, dimana show hidden content lebih banya menggunakan "KLIK" untuk membuka dan menutup, kali ini kita akan memanfaatkan mouseover sebagai trigger untuk mengorek apa yang tersembunyi di dalam box. Amat praktis karena hanya perlu sentuhan cursor dan semua bagian serta merta terlihat. Untuk menutup lepas saja cursor dan biarkan box menutup kembali seperti sedia kala. Lho ... jaman sekarang khan pinginnya semua serba otomatis, toh?! Ho ... ho ... bahkan mungkin akan laris jika ada orang yang bisa buat alat pemberi jodoh otomatis. He ... he ... nggak perlu lirik sana lirik-sini atau musti PDKT dan ngapel atau mungkin mak combang maka si jodoh langsung datang begitu saja. He ... he ... mau nggak?
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. He ... heh ... Mo coba? Ini dia kode yang harus kita simpan.
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? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
<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? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
</div>
</div>
</div>
Langkah Pengerjaan
- Login to BloGGeR (Login ke BloGGeR) dengan cara Menuliskan User Name (Nama Pengguna) atau Email Address. Lanjutkan dengan menuliskan Password (Sandi) kemudian KLIK "Login"
- Beberapa saat kemudian halaman "Dasboard" akan terlihat. KLIK link "Design (Rancangan)".
- Setelah memasuki Page Element, KLIK link "Edit HTML".
- Back-up Template dengan cara KLIK "Download Full Template (Download Lengkap Template) dan SAVE/Simpan "File Template" di Folder PC.
- Cari kode ]]></b:skin>, kemudian simpan kode CSS dengan posisi seperti yang terlihat di kode CSS yang tertulis di atas.
- KLIK "SAVE/Simpan Template".
- 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.
- Baik gambar atau link dan teks sesuaikan dengan apa yang dibutuhkan.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
� Happy Blogging - gubhugreyot �
