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.
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.
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
.fr_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;
}
.fr_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;
}
.fr_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;
}
.fr_onmos h3:hover {
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
}
.fr_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;
}
.fr_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;
}
.fr_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);
}
.bawah {
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;
}
.bawah:hover {
background: #333;
color: #eee;
text-shadow: 0 0px 1px #fe0303;
}
.bawah 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;
}
.bawah 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;
}
.bawah ul {
padding: 0;
margin: 0;
list-style: none;
}
.bawah li {
padding: 0;
margin: 0;
list-style: none;
border-bottom:1px dotted #777;
}
.bawah 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;
}
.bawah 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;
}
xHTML Animated Show Hidden Content
<div class="fr_onmos">
<h3>CSS3 Show Hidden Content</h3>
<div class="bawah">
<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>
- 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. 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.
0 komentar:
Posting Komentar
silahkan tinggalkan komentar