How to Create Elastic Box using CSS3

Elastic Box dapat digunakan di posting atau di widget. Box spesial ini berupaya memaksimalkan penggunaan beberapa kode CSS3 seperti drop shadow (box shadow), border radius, text shadow dan tentu saja CSS3 transition yang merupakan "nyawa bagi Elastic Box". Dengan kemampuannya yang "cukup aduhai", diharapkan Elastic box mampu membuat posting "lebih seronok" (he ... he ...) sekaligus bisa dimanfaatkan untuk memuat bagian posting yang "bersifat khusus". Apa pengaruhnya terhadap blog? He ... he ... Yah ..., Elastic Box tak ubahnya "sebuah gincu (lipstick, mbul! masa' gincu saja nggak ngerti!) bagi seorang wanita! Sedikit polesan akan membuat nafas lelaki ngos-ngosan! (he ... he ... nafas ku, broer. bukan nafas sampeyan! klo sampeyan nggak ngos-ngosan tapi justru nafas jadi "senin-kamis" he ... he ...).

Elastic Box didesain dengan menggunakan ukuran lebar 170px dan tinggi 200px. Gambar/image dalam box dibuat dalam ukuran lebar 70px dan ketika box bertambah besar gambar akan berubah berukuran lebar 170px dengan tinggi berbanding lurus dengan skala gambar sebenarnya (gambar orisinil-nya). Box-nya sendiri ketika tersentuh cursor akan bertambah besar dengan ukuran lebar 400px dan tinggi 300px. Untuk menjaga apabila isi box cukup melimpah (banyak), maka box kita lengkapi dengan sebuah scroller dalam arah vertical. Sampeyan dapat memuat banyak hal di dalam box spesial ini. Mo gambar, mo teks, mo link atau bentuk yang lain boleh-boleh saja.

D E M O

Cara membuat Elastic Box

• Login : Login ke Blogger.
  • Tuliskan User Name (Nama Pengguna) atau bisa juga gunakan Email Address.
  • Ketik Password (Sandi) milik sampeyan pada box yang tersedia.
  • Jika semua sudah benar, silahkan klik "Login".
• Beberapa saat setelah klik login maka halaman dasboard akan nongol di hadapan sampeyan. Cari dan klik link "Design (Rancangan)".
• Di Page Elements (Elemen Laman) ini juga terdapat beberapa link. Satu di antaranya "link Edit HTML". Temukan link ini dan klik.
• Setelah halaman Edit HTML terbuka, silahkan sampeyan cari kode ]]></b:skin>.
• Copy dan pastekan kode CSS di bawah ini tepat di atas ]]></b:skin>, kemudian klik "SAVE Templates (Simpan Template)".

Kode CSS Elastic Box

.GRrelative {
       float: left; 
       position: relative;
       width: 170px;
       height: 200px;
       margin: 0 10px 5px 0;
}
.GRabsolute {
       top: 0; left: 0; position: absolute;
       width: 150px; /* original code by: http://gubhugreyot.blogspot.com */
       height: 188px;
       background: rgba(0,0,0, 0.1);
       border: 2px solid #999999;
       border-radius: 6px;
       -moz-border-radius: 6px;
       -webkit-border-radius: 6px; 
       border-top-left-radius: 12px; border-bottom-right-radius: 12px;
       -moz-border-radius-topleft: 12px; -moz-border-radius-bottomright: 12px;
       -webkit-border-top-left-radius: 12px; -webkit-border-bottom-right-radius: 12px; 
       overflow-x: hidden;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 9px;
       padding: 8px 8px 15px;
       overflow: hidden;
       -o-transition: all 0.9s ease-out;
       -moz-transition: all 0.6s ease-out;
       -webkit-transition: all 0.9s ease-out; 
}
.GRabsolute:hover {
       width: 400px; 
       height: 300px;
       color: #eee;
       text-shadow: 1px 1px 1px #000; 
       background: #666666;
       font-size: 14px;
       overflow: auto; 
}
.GRabsolute img {
       float: left;
       margin: 0 10px 5px 0;
       border: 2px solid #888;
       border-radius: 8px;
       -moz-border-radius: 8px;
       -webkit-border-radius: 8px;  
       box-shadow: 1px 1px 10px #fff;
       -moz-box-shadow: 1px 1px 10px #fff;
       -webkit-box-shadow: 1px 1px 10px #fff;
       width: 70px;
       height: auto; 
}
.GRabsolute:hover img {
        width: 170px; 
}

xHTML Elastic Box

<div class="GRrelative"><div class="GRabsolute"><img src="images.jpg" /> Tuliskan teks di sini! (setelah gambar). Sampeyan dapat juga masukkan link yang berbentuk teks di sini!</div></div>Tuliskan artikel atau posting di luar yang akan di masukkan box di sini!

• Masukkan link image (gambar) di bagian depan kemudian di susul dengan teks atau teks link.
• Sebenarnya bisa juga untuk menggunakan 2 (dua) gambar atau lebih dengan cara setiap perpindahan dari gambar yang di ikuti teks diberikan spasi.
• Ukuran bisa dilakukan perubahan untuk disesuaikan dengan lebar ruang yang tersedia dengan merubah nilai width pada box dan jika diperlukan termasuk ukuran gambar. (perubahan terutama pada syntax hover-nya).

Contoh penggunaan xHTML (Posting)

Silahkan di copy untuk nyoba!

<div align="justify"><div class="GRrelative"><div class="GRabsolute"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3uj6LDCKTCm1nHvaFWHOjGOkjiu5fjAPA3Bgx0zhpnp75JhRBwdXHt7NAz9vwX55xOj2xqskMRTgUVLG3Dify1b4RU0HDtgOWpgefG76858myER2HKTc0d80YvV9wdi_UF77ZvaemEAhY/s1600/Manusia+%26+anjing.jpeg" id="BLOGGER_PHOTO_ID_5525083467433901602"/>Melihat gambar seperti di sebelah, saya harap sampeyan semua tidak perlu kaget, jijik atau marah. Gambar ini hanyalah sebuah gambaran betapa manusia dan anjing mempunyai kedekatan hubungan yang luar biasa. Bukan hanya bisa dekat secara fisik, namun pada dasarnya beberapa sifat anjing bersarang dalam jiwa manusia. Nggak percaya? Coba renungkan dalam hati untuk melihat apa yang selama ini telah sampeyan atau tetangga, para pemimpin negeri dan banyak lagi orang lakukan dalam hidup. Mencuri adalah salah satunya! Bagi yang masih sekolah pasti pernah curi-curi hasil kerjaan temannya, yang sudah perjaka pasti pernah suka curi-curi hati lawan jenisnya dan yang kerja jadi pegawai pasti pernah curi waktu atau bahkan curi uang rakyat! He .... he ... itu baru salah satu sifat anjing. Masih ada lagi beberapa sifat jelek anjing, selain sifat baiknya yang dimiliki banyak manusia dan tak perlu di bahas satu persatu. (<a href="http://gubhugreyot.blogspot.com/">gubhug reyot</a>) 

Ada yang lebih penting dari pada hal tersebut di atas. Dimasa ke depan haruslah sifat-sifat yang seperti milik si anjing itu harus kita buang. Kita harus jauh lebih baik dari anjing (anjing kadang lebih baik dari manusia, lho! Dia nggak pernah mengumpat sesama anjing dengan kata kasar "manusia, loe!", tapi manusia sering melakukannya dengan teriakan keras, "anjing, loe!", dibarengi dengan air liur yang mengalir nerocos disela-sela gigi ompongnya!).  (<a href="http://gubhugreyot.blogspot.com/">gubhug reyot</a>) 

Ada lagi yang lebih baik untuk kita lakukan sambil berupaya menghilangkan sifat-sifat buruk yang seperti binatang. Marilah bersama-sama kita nyanyikan "lagu bang Rhoma" yang syairnya seperti ini "Ada Sunda , .... Ada Jawa .....dan  masih banyak lagi yang lainnya , ha .... ha ... ha .... ha ....(<a href="http://gubhugreyot.blogspot.com/">gubhug reyot</a>) 
</div></div>Sebelum saya menuliskan apa yang menjadi pemikiran saya ini, aku harap rekan rekan tidak langsung menanggapinya dengan emosional. Sebenarnya antara manusia dan hewan diciptakan dalam keadaan dan bentuk yang sama sekali berbeda. Bahkan kalau kita pernah belajar tentang sejarah penciptaan manusia (moga-moga jangan nggak pernah), sangat jelas sekali perbedaan proses penciptaan antara keduanya. Disebutkan dengan jelas bahwa manusia diciptakan sebagai satu-satunya makhuk ciptaan Tuhan yang paling sempurna, yang dibuat tidak hanya dengan kata-kata Tuhan tetapi harus melalui proses yang rumit. Sangat berbeda jauh jika dibandingkan dengan penciptaan hewan atau bahkanalam semesta yang luar biasa dahyatnya ini. 

Sesungguhnya,harusnya manusia memang harus berbeda jauh dengan binatang, karena manusia diciptakan dengan keunggulan yang jauh dari binatang. Kita sebagai manusia dikaruniai dengan akal budi yang hebat, yang membuat manusia mampu melakukan hal-hal yang luar biasa. Sangat jauh jika dibandingkan dengan hewan. Hewan yang paling pintar sekalipun! Tetapi sayangnya, kelebihan itu tidak bisa dimanfaatkan manusia dengan sebaik-baiknya. Yang lebih menyedihkan, manusia, baik dimasa sebelum kita lahir hingga detik ini cenderung meniru sifat-sifat binatang. Tidak hanya seperti kancil yang dikatakan suka menipu, manusia juga seperti kucing yang suka mencuri. Ada yang lebih dari itu. Manusia banyak yang doyan membunuh sesamanya. Salahkah kalau dikatakan tak ada bedanya manusia dan binatang. Banyak sekali contoh yang ada dalam kehidupan di sekitar kita. Dari yang sederhana seperti ngomongin tetangga, bentrok hingga tega membunuh tetangga atau teman hidupnya hanya karena masalah yang sederhana. dst .....</div>

div align="justify" digunakan untuk membuat teks rata kanan-kiri!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 


• 

» Happy Blogging - gubhugreyot «