Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

rgba Collapsible using CSS3 Transition-Transformation

Sebuah collapsible cantik dengan dilengkapi beberapa animasi yang mampu memberikan suguhan penampilan menarik hanya mungkin dilakukan jika sebuah javascript dipergunakan. Itupun harus melibatkan jQuery untuk bisa memberikan tampilan maksimal. Tapi hal seperti di atas hanya mungkin terjadi setahun yang lalu ketika CSS3 masih belum berkembang seperti saat ini, sobat! Kini banyak desain menarik cukup dilakukan dengan CSS istimewa ini. Sebuah kode yang nantinya akan jauh lebih dahsyat kemampuannya dan pasti bisa memberikan kontribusi luar biasa menarik bagi perkembangan dunia blogger. Yap ..., tidak hanya dalam bentuk desain yang akan semakin menakjubkan, akan tetapi pasti akan semakin memperingan beban sebuah blog hingga loading akan semakin lancar seperti layaknya waktu sampeyan membuang simpanan air di balik pohon beringin di pinggir jalan (ketika perjalanan sudah begitu melelahkan dan membuat pantat di jok mobil serasa dibakar di atas tungku bakul sate Madura). He ... he ... Iya, khan?! Pasti sampeyan suka melakukan hal seperti itu. Kencing di pinggir jalan sambil toleh kanan-kiri kuwatir ada orang lewat! Hi ...

Collapsibel ini aku beri nama seperti di atas bukan karena apa-apa. Hanya disebabkan desain yang dipergunakan menggunakan background rgba dan ternyata cukup simple dan mampu membuat tampilan semakin oye. Untuk membuatnya semakin mudah digunakan, dalam desain ini juga telah disertakan syntag yang khusus untuk mengatur tampilan image. Dengan width 100px aku kira cukup pantas bagi collapsible dengan ukuran lebar tak lebih dari 350px. Itupun jika sampeyan punya keinginan yang berbeda maka silahkan untuk dirubah beberapa CSS yang ada supaya bisa sesuai dan tepat untuk dipergunakan di blog sampeyan. Yah ..., memang apa boleh buat. Beberapa perubahan memang kerap harus dilakukan karena template semua blogger hampir tidak ada yang sama persis desain atau ukuran widgetnya.

Untuk membuat collapsible ini sampeyan harus login dulu ke blogger supaya bisa masuk ke halaman desain dasar blog (template) dan melakukan penambahan kode CSS serta mempergunakan xHTMLnya. Tak akan terlalu susah karena kita hanya perlu meletakkan kode CSSnya di atas kode ]]></b:skin> kemudian melakanjutkan dengan proses penyimpanan. Supaya lebih lengkap dan lebih jelas cobalah ikuti langkah-langkah di bawah ini.
  • Login : Lakukan login ke blogger (login to blogger).
    • Tulis User Name (Nama Pengguna) atau Email Address.
    • Tuliskan Password (Sandi).
    • KLIK "Login" dan tunggu beberapa saat hingga halaman dasboard terlihat.
  • Dasboard (Dasbor) : KLIK link "Design" atau "Rancangan". Tunggu lagi beberapa saat hingga muncul halaman baru (Page Elements).
  • Design atau Rancangan : Yang akan sampeyan jumpai saat pertama masuk halaman Design atau Rancangan adalah Page Elements yang merupakan satu bagian dari design/rancangan. Cari dan KLIK link "Edit HTML". Setelah bagian ini terbuka maka sampeyan akan menjumpai banyak kode yang berupa kode HTMl. Kode-kode inilah yang menjadi pembangun desain blog sampeyan.
  • Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya. Gunakan Ctrl+F untuk memudahkan pencarian kode. Tekan secara bersamaan (pada keyboard) kemudian lanjutkan dengan menuliskan kode baru KLIK Find-Next/Find-Previous.
  • Setelah kode CSS diletakkan pada posisi yang benar, silahkan KLIK SAVE Template/Simpan Template. Perlu diingat bahwa penyimpanan kode CSS di atas kode ]]></b:skin> (dalam bentuk desain apapun) tidak perlu harus menambahkan tag style yang berbentuk <style type="text/css"> dengan tag pentutup </style>. Penambahan kode seperti ini justru akan merusak desain yang telah dibuat hingga desain tampil dalam bentuk yang tidak sesuai rencana dan harapan.

Jika mungkin tertarik untuk melihat bentuk rgba Collapsible using CSS3, silahkan buka DEMO dengan KLIK link di bawah ini:

Kode CSS rgba Collapsible

.wadahmangap { 
width: 338px;
margin: 20px 5px;
padding: 3px 5px 5px;
border: 2px solid #888;
background: rgba(0,0,0, 0.2);
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.wadahmangap h3 {
text-align:center;
margin: 12px 5px;
color: #FFFF00;
font: 20px Times New Roman;
font-weight: bold;
text-shadow: 1px 1px 1px blue, -1px -1px 1px blue, -2px -2px 2px #000;
background: rgba(0,0,0, 0.4);
}
.mingkem { height: 40px; }
.mingkem, .mangap {
width: 320px;
margin: 0;
padding: 0 8px 0 8px;
background: rgba(0,0,0, 0.1);
overflow: hidden;
border: 1px solid #555;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-transition: 1.2s ease-in-out;
-moz-transition: 1.2s ease-in-out;
-webkit-transition: 1.2s ease-in-out;
text-shadow: 1px 1px 0.2em #000;
box-shadow: 1px 1px 6px #000, -1px -1px 2px #000;
-moz-box-shadow: 1px 1px 6px #000, -1px -1px 2px #000;
-webkit-box-shadow: 1px 1px 6px #000, -1px -1px 2px #000;
}
.mangap {
height: 410px;
background: rgba(0,0,0, 0.4);
color: #eee;
text-shadow: 1px 1px 1px #000;
padding-bottom: 12px;
}
.mingkem p.isimangap, .mangap p.isimangap {
background: rgba(0,0,0, 0.5);
color: #eee;
height: 335px;
text-shadow: 1px 1px 1px #000;
font: 12px Tahoma;
text-align: left;
overflow: auto;
padding-bottom: 20px;
}
.mingkem p, .mangap p {
margin-top: 5px;
background: rgba(0,0,0, 0.5);
padding: 3px 8px;
border: 2px solid;
border-color: #bbb #ddd #ddd #bbb;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
font: 16px Arial;
width: 300px;
color: #990033;
text-shadow: 0px 1px 1px #eee;
text-align: center;
font-weight: bold;
cursor: pointer;
}
.mangap p.isimangap img{
border: 2px solid #eee;
padding: 5px;
margin: 20px 10px 10px 0;
width: 100px;
float: left;
background: #999;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
Supaya desain Collapsible tetap bisa bekerja di Internet Explorer (IE), letakkan dan simpan kode CSS berikut di bawah kode]]></b:skin>

Kode CSS untuk Internet Explorer (IE)

<!--[if IE]>
<style type="text/css">
.wadahmangap {background: #999;}
.wadahmangap h3 {background: #444;}
.mingkem p, .mangap p {background: #555;}
.mangap {background: #666;}
</style>
<![endif]-->

xHTMl rgba Collapsible

Gunakan kode ini di bagian body (widget) atau ruang posting.
<div class="wadahmangap">
<h3>Menu Title</h3>
<div class="mingkem" onclick="if (this.className=='mingkem') { this.className='mangap' } else { this.className='mingkem' }">
<p>Expand - collapse</p><p class="isimangap">
Description: This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. It's a popular effect on many social networking/ comment sites. Three distinguishing features of this script are:<br /><br />
Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.<br /><br />
Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.<br /><br />
Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.<br /><br />
Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.<br />
<img align="center" src="http://img.theomegaproject.org/thumbs/2010/07/83.jpg" />Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.<br /><br />
Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.<br /><br />
Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.
</p>
</div>
</div>


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








» Happy Blogging - gubhugreyot «



1 komentar:

  1. Mantaf boss...,banyak sekali ilmu yang perlu di ambil dari gubhug reyot ini. Untuk itu mohon izin untuk menimba ilmunya.

    BalasHapus

 
GR | Edited by | gubhug reyot