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

Box Posting Kode HTML dg Animasi: Animated Box for HTML Post

Bagi beberapa sobat blogger yang demen ngelayap cari info baru tentang kode html dan segala bentuk desainnya pasti pernah menjumpai box posting kode html yang dibuat dalam bentuk animasi. Yang teramat sering terlihat adalah box yang ketika tersentuh cursor ukurannya bertambah lebar. (he ... he ... nggak bertambah panjang kaya punya sampeyan, broer! Asal tersentuh sedikit saja sudah molor sepanjang tiang listrik, he ...). Jika mungkin diantara sampeyan ada yang membatin tentang kode html seperti apa yang digunakan, mungkin melalui posting ini semua akan terjawab. Kita nggak akan terlalu merumitkan diri dengan javascript yang sering menjadi penambah lemotnya loading blog. Cara terpraktis dan termudah aku kira akan jadi solusi yang paling tepat untuk mendapatkan box serupa dengan fungsi yang setara. Ya ... kita manfaatkan saja CSS3. Asyik, lho hasil box yang berhasil kita buat. Nggak kalah dah sama yang biasa terlihat. Ada dua bentuk box, malah. Silahkan sampeyan pilih yang mana yang akan digunakan. Oye ... silahkan lihat saja demonya. KLIK yang di bawah ini:

D E M O

Cara Membuat Box Beranimasi untuk Posting Kode HTML

Super Animated CSS3 Navigation Menu

Membuat navigasi menu horizontal ini amatlah mudah dan cepat. Yah ... ini semua karena hanya kode CSS yang digunakan. Kode tak seberapa banyak tapi coba sampeyan lihat bentuk hasil akhirnya. Wuh ... nggak ngira, dah, klo navigasi menu ini tanpa jQuery, motool atau javascript yang lain. Animasinya, mbul ... Sangar, kata orang. Gimana? Mo lihat tampilannya? Ho ... ho ... Jangan lewatkan pokoknya. Nih, buka link demonya dan cermati sensasionalnya si menu.

D E M O

Kode CSS Super Animated CSS3 Navigation Menu

Simple CSS3-jQuery Animated Collapsible Menu: Collapsible jQuery-CSS3

Simple Animated Collapsible Menu menggunakan jQuery-1.3.2.js dan CSS3 merupakan perpaduan menarik yang menggabungkan kesederhanaan script yang berbasis kinerja jQuery dan kemampuan penciptaan animasi dari CSS3. Perpaduan di antara keduanya mampu memberikan suguhan menu vertical yang sangat menarik, atraktif dan memberikan kemampuan fungsi secara maksimal. Kemampuan prima menu ini telah terbukti dengan uji coba yang dilakukan di template blogger dengan hasil cukup menakjubkan baik dari animasi yang tercipta ataupun fungsi dasarnya sebagai sebuah wadah menu. JQuery-1.3.2.js dapat anda ganti pula dengan jQuery-1.3.2.min.js atau jQuery-1.4.2.js dan jQuery-1.4.2.min.js.

Bentuk dasar Animated jQuery-CSS3 Vertical Colapsing Menu berbentuk sederhana dengan kode dasar seperti di bawah ini :
<div>
<ul>
<li><a href="javascript:;">Menu-1</a>
<ul>
<li><a href="">Isi Menu-1</a></li>
</ul>
</li>
<li><a href="javascript:;">Menu-2</a>
<ul>
<li><a href="">Isi Menu-2</a></li>
</ul>
</li>
<li><a href="javascript:;">Menu-3</a>
<ul>
<li><a href="">Isi Menu-3</a></li>
</ul>
</li>
</ul>
</div>
Untuk menggunakan menu ini, silahkan jQuery dan javascript collapsible menu disimpan di atas kode <head> secara berurutan dengan bentuk seperti di bawah ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
Javascript Collapsible Menu
</script>

<head>
Kode CSS diletakkan dan disimpan di atas kode ]]></b:skin> seperti berikut:
Kode CSS Animated Collapsible Menu

]]></b:skin>
xHTML simpan melalui penambahan widget. Setelah nantinya semua kode dan script terpasang dengan benar, maka sampeyan tinggal menikmati cantiknya si collapsible menu dan mengisinya dengan menu-menu atau link-link yang diperlukan untuk di wadahi di sini.

Kode CSS Collapsible Menu

Membuat Efek Pada Background dengan CSS3 (Background Effects onmouseover using CSS3)

Ini adalah sebuah teknik sederhana untuk menciptakan perubahan pada background blog, yang terutama banyak dimanfaatkan untuk widget blog. Jika sebelumnya untuk menciptakan efek atraktif yang menyertai fungsi ini hanya dapat dilakukan dengan bantuan jQuery, motool dan javascript yang lain, kini berkat CSS3, beberapa efek fantastis bisa kita buat hanya dengan kode CSS. Perubahan background (background color dan background image) dapat dibarengi dengan menyertakan bentuk animasi pada efek transparansi, transisi warna dan mungkin jika diinginkan bisa kita sertakan juga perubahan pada border (border-color, border-width), serta dapat juga dengan menambahkan perubahan di border-radius(efek rounded corners).

Untuk mendapatkan hasil seperti gambaran di atas, beberapa kode baru yang berupa CSS3 harus kita tambahkan pada syntax yang ada di template blog. Satu kunci utama yang lain adalah dengan menambahkan hover pada syntax yang ingin di rubah backgroundnya, sehingga perubahan akan terlihat ketika cursor berada di atas bagian dimaksud (onmouseover). Supaya lebih jelas bagaimana bentuk perubahan background dan efek yang tercipta, silahkan KLIK link DEMO di bawah ini.

Kode CSS "Background Effects onmouseover using CSS3" (box-1).

.bgboxtunggal {
width: 450px;
margin: 15px auto;
background: #111;
border: 1px solid #666;
padding: 30px;
color: #eee;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-webkit-transition: all 2.5s ease-in-out;
opacity: 0.6;
filter: alpha(opacity=60); /* for IE */
}
.bgboxtunggal:hover {
background: #000099 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgGradRedBlackV300H1.gif) top left repeat;
border: 1px solid #777;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 1px 1px 8px #fff;
-moz-box-shadow: 1px 1px 8px #fff;
-webkit-box-shadow: 1px 1px 8px #fff;
opacity: 1.0;
filter: alpha(opacity=100); /* for IE */
}

xHTML box-1

<div class="bgboxtunggal">Letakkan isi box disini!</div>

Kode CSS Box ganda : Box dengan dua elemen DIV sebagai penyusunnya seperti yang terlihat di DEMO

.bgboxgandaluar {
margin: 20px auto;
padding: 5px;
width: 450px;
border: 2px solid #999;
border-radius: 10x;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-webkit-transition: all 1.5s ease-in;
background: #888;
opacity: 0.6;
filter: alpha(opacity=60); /* for IE */
}
.bgboxgandaluar:hover {
box-shadow: 1px 1px 18px #000;
-moz-box-shadow: 1px 1px 18px #000;
-webkit-box-shadow: 1px 1px 18px #000;
background: red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgFadeBlackV411H1.gif) bottom left repeat;
border: 2px solid #43b1fd;
opacity: 1.0;
filter: alpha(opacity=100); /* for IE */
}
.bgboxgandadalam {
background: #111;
border: 1px solid #666;
padding: 15px 10px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-webkit-transition: all 2.5s ease-in-out;
color: #eee;
}
.bgboxgandadalam:hover {
background: #000099 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgGradRedBlackH1V300.gif) top left repeat;
border: 1px solid #777;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 1px 1px 8px #fff;
-moz-box-shadow: 1px 1px 8px #fff;
-webkit-box-shadow: 1px 1px 8px #fff;
}

xHTML Box Ganda

<div class="bgboxgandaluar">
<div class="bgboxgandadalam">Letakkan Isi Box di sini!</div>
</div>
  1. Atur lebar (width) sesuai kebutuhan.
  2. Kode untuk box ini dapat dimanfaatkan di widget blog.
  3. Simpanlah kode CSS di atas kode ]]></b:skin> atau bisa juga melalui penambahan widget.

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

» Happy Blogging - gubhugreyot «

Cara Buat Blink Efek di Internet Explorer (IE)

Kode CSS Blink effect atau efek kedip memang hanya dapat berfungsi diluar Internet Explorer (IE). Membuat blink efek sebenarnya amatlah sederhana dan gampang karena hanya dengan menuliskan sedikit kode CSS maka teks akan ditampilkan berkedip. Kedipan seperti ini cukup bermanfaat untuk teks-teks tertentu karena akan terlihat lebih kentara (menonjol) dibandingkan teks yang lain. Menjadi sangat bermanfaat tatkala beberapa bagian teks ingin kita tampilkan dalam bentuk berbeda hingga pengunjung blog dengan amat cepat akan mengenali teks dimaksud. Bagaimana mengatasi persoalan blink efek di IE?

Tanpa bantuan sebuah javascript, sebuah blink effect tetaplah tak mampu kita wujudkan untuk bisa terlihat di IE. Tak terlalu banyak memang script yang dibutuhkan, akan tetapi javascript ini tidak berdiri sendiri. Kita akan memanfaatkan jQuery-1.3.2.js atau jQuery-1.3.2.min.js (bisa juga menggunakan menggunakan jQuery-1.4.2.js) sebagai sumber pembentuk fungsi kedip dengan pertimbangan karena jika membuat script tersendiri maka akan terlalu besar dan merepotkan. Penggunaan jQuery ini juga membuat blink effect ini ditanggung bisa berfungsi secara optimal di Internet Explorer. Keuntungan yang lain adalah irit dan praktisnya script serta dengan gampang kita dapat mengatur interval waktu kedip. Semoga posting tentang mengatasi kesulitan menciptakan blink efek yang bisa kompatibel di semua browser ini bermanfaat dan dengan script ini pula semoga persoalan blink effect tidak lagi menjadi kendala atau gangguan yang meresahkan pikiran.

Cara Buat Menu Tersembunyi dg CSS3: Animated Slide Menu - Box Using CSS3

Mungkin yang ini belum pernah sampeyan lihat karena barangnya benar-benar weton pabrik (keluaran pabrik). Masih kinyis-kinyis dan belom ada goresan sama sekali. Jika sampeyan sudah membuka Hidden Menu yang terpostingkan beberapa waktu yang lalu (menggunakan javascript), kini cobalah bandingkan dengan yang satu ini. Ho ... ho ... pasti sampeyan akan geleng kepala. Ya ..., karena yang satu ini biar tanpa secuilpun javascript akan tetapi mampu menampilkan sebuah bentuk slide menu dengan animasi yang sangat cantik. Secara keseluruhan tampilannya cukup jauh dengan yang pakai script tersebut. Yah ... ini memang kelebihan yang saat ini dimiliki CSS3. Banyak hal yang dulu nggak mungkin, kini bisa kita lakukan dengan amat baik. Sayangnya di IE semua animasi yang ada tak dapat tertampilkan sesuai harapan, yah ..., meski secara umum slide menu/box ini tetap mampu menjalankan peran utamanya sebagai sebuah box/menu tersembunyi. Tak apalah, toh ... tak lama lagi IE-pun pasti akan meluncurkan produk terbarunya yang mampu mengakomidir semua fungsi CSS3. Lhoh ... jelas, toh! Pastinya mereka nggak akan mau kehilangan daya saing dan pasar bisnis yang selama ini mereka raih dan sekaligus banyak menggelemmbungkan kantong mereka. Eman-eman kata wong Jowo.

Untuk membuat CSS3 Animated Slide Menu/Box yang tersembunyi di samping blog ini, kita dapat menyimpan seluruh kode CSS dan xHTML melalui penambahan widget (Add Gadget/Tambah Gadget), atau dengan cara menyimpan kode CSS-nya di template, sedang xHTML melalui penambahan widget. Sangat mudah dan pasti tak akan membutuhkan waktu lama. (He ... he ... yang lama membuatnya, ya , bung! He ... he ... ngabisin 7 piring nasi plus sambal sama tempe bacem 2 biji!).

Silahkan lihat dulu DEMO CSS3 Animated Slide Menu dengan KLIK link demo di bawah ini.

Cara Membuat Menu/Box Tersembunyi (CSS3 Animated Slide Menu)

Cara Membuat CSS3 Animated Image Enlarge

Dengan desain ini maka gambar yang berukuran sebesar apapun hanya akan ditampilkan dalam ukuran lebar (width) sebesar 100px. Tinggi akan secara otomatis menyesuaikan diri dengan perbandingan sama terhadap gambar/image yang digunakan. Skala pembesaran gambar di atur sebesar 2.5x gambar yang tertampilkan. Sampeyan bisa memperkirakan sendiri jika lebar berukuran 100px, keika pembesaran dilakukan dengan perbandingan 2.5x, maka gambar berubah menjadi sebesar apa. Atau jika sampeyan lagi pusing hingga tambah pening lagi untuk membayangkan hal ini, silahkan nanti lihat demo-nya.

Desain Animated Image Enlarge sama sekali tanpa bantuan sebuah script pun, oleh karena itu hanya akan berfungsi secara sempurna di browser selain Internet Explorer (IE). Memang kode yang dipergunakan hanya diperuntukkan bagi Mozilla, Opera, Safari dan Google Chrome, oleh karena itu jika ada yang menggunakan browser selain tersebut di atas (yang CSS-nya tidak kompatibel), bisa juga menambahkan kode CSS baru untuk meningkatkan kompabilitasnya.

Dalam desain, digunakan juga kode CSS "Unordered List" (ul) dan "List Item" (li) dengan tujuan supaya gambar yang ditampilkan tidak mengalami perubahan posisi ketika salah satu gambar mengalami proses perbesaran saat tersentuh cursor. Dengan cara seperti ini seluruh bagian blog sama sekali tidak akan terganggu (mengalami pergeseran) dan blog tetap enak di nikmati.

Untuk menciptakan lebih dari satu bentuk animasi, telah disertakan 4 (empat) macam animasi yang menyertai perbesaran gambar. Sampeyan dapat menggunakannya hanya dengan menambahkan "class" pada list item (li) untuk menciptakan animasi yang berbeda di setiap gambar. Supaya perbesaran gambar tetap terjadi di bagian (ruang) yang ada, kita harus jeli untuk menentukan posisi gambar berkaitan dengan animasi yang telah tersedia. Jika menginginkan perubahan animasi pada skala (scale), posisi (translate) dan rotasi (rotate), silahkan lakukan perubahan pada nilai yang digunakan pada variabel di atas (scale=ukuran, translate=posisi kanan dan kiri, rotate=sudut putar). Sebagai bahan pertimbangan, sekali lagi untuk melakukan percobaan-percobaan terhadap desain-desain baru, sebaiknya sampeyan buat sebuah blog khusus percobaan, sehingga ketika desain baru digunakan diblog aktif, maka semua sudah dalam bentuk siap pakai dan telah di uji coba.

Kode CSS "CSS3 Animated Image Enlarge"

CSS3 Full Animated Show Hidden Content Onmouseover

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

Animated Hover Link Using CSS3

Ini hanyalah sebuah bentuk sederhana penggunaan CSS3 yang berfungsi menciptakan animasi pada hover link yang mungkin akan dapat kita manfaatkan bersama untuk memperindah penampilan blog. Bentuk kode yang akan kita gunakan amatlah sederhana sehingga tak akan sulit untuk dipasang di blog, baik sebagai tambahan kode atau menggantikan kode css yang sudah ada.

Penggunaan CSS3 yang kini juga mulai terdukung secara menyeluruh oleh browser yang ada, menjadikan lebih banyak peluang dan kesempatan bagi blogger untuk menciptakan berbagai kreatifitas baru dengan hanya memanfaatkan kode CSS. Salah satunya adalah hover link yang akan coba kita bahas.

Animasi yang coba kita terapkan pada hover link bisa dikatakan hanyalah bentuk yang teramat simple dan terlebih memang pemberian animasi yang berlebihan justru akan membuatnya mejadi tidak sedap dilihat. Untuk itu kita hanya akan melibatkan dua hingga tiga bentuk animasi dengan CSS3 transition dan CSS3 transformation. Hal yang coba kita animasikan adalah pada background-color, text-shadow, dan font-size melalui transformasi skala.

Cara Untuk membuat animated hover link menggunakan CSS3

Kode CSS-1 :

CSS3 Rounded Corners: Cara Membuat dan Menuliskan Kode CSS3 Border Radius

Meskipun penulisan kode css rounded corners sudah teramat sering kita lihat dalam berbagai bentuk posting, namun kiranya tak ada salahnya jika kita mencoba untuk kembali mencoba mengupas bentuk dasar penulisan kodenya yang menggunakan CSS3. Disamping manusia jaman sekarang teramat pelupa, mungkin melalui posting ini beberapa manfaat bisa dipetik oleh para sobat blogger yang masih dalam tahap awal ngeblog ataupun yang mulai mencoba untuk mengenal lebih dalam tentang desain web/blog dan kode HTML.

Rounded corners sebenarnya adalah nama yang diberikan untuk box dengan sisi-sisi yang berbentuk lengkung. Jika sebelum CSS3 bentuk box lebih banyak hanya berupa kotak-kotak dengan sisi-sisi tanpa lengkungan, (atau lengkung dengan background gambar), berkat CSS3 maka sebuah box dengan sisi lengkung menjadi teramat mudah untuk membuatnya. Hingga saat ini hampir seluruh browser besar sudah mengaplikasikan CSS3 rounded corner terkecuali Internet Explorer (IE). Kode yang digunakanpun tidaklah terlalu jauh berbeda antara browser satu dengan yang lain. Perbedaan yang tidak terlalu mencolok ini membuat kita dengan mudah mengingat setiap kode di setiap browser. Kode dasar/standart untuk penulisan CSS3 rounded corners adalah border-radius: ..px; atau dalam satuan lain bisa dituliskan border-radius: ..em;. Satuan standar yang paling sering digunakan dalam penulisan kode HTML. Bila di antara sampeyan ada yang ingin mengetahui lebih dalam tentang perbedaan ke dua satuan ukuran ini, silahkan sampeyan bisa KLIK link di bawah ini (1em berkisar 18px).


Penulisan kode CSS Rounded Corners di beberapa browser mempunyai ciri tersendiri yang membedakan satu browser dengan browser yang lain.

Download: Mozilla Firefox 4 beta dan CSS3

Buih ... Terbukti sudah ketangguhan sang kaisar browser! Mozzilla Firefox tampaknya akan semakin menggila dengan sudah di release-nya Mozilla Firefox 4 beta. Sebuah bukti ketangguhan, keuletan dan respon tinggi terhadap kebutuhan pengguna serta CSS3 khususnya. Perkembangan yang tampaknya secara diam-diam direspon dengan amat serius oleh Mozilla. Dengan ledakan hebat ini tampaknya para pengelana internet, terutama blogger akan semakin dalam tengkurap di pelukan sang kaisar sakti.

Sebuah bukti betapa CSS3 akan semakin merayap menghantam kedigdayaan javascript tak terelekkan lagi. Kini banyak fungsi blog tak perlu lagi harus menggunakan javascript yang nyata-nyata menambah beban blog semakin menumpuk hingga loading terseok-seok bagai kuda lumpuh kehilangan sepatu besinya. Tampilan menarik akan semakin mudah dibuat hanya dengan kode CSS. Ho ... ho .... Kegilaan Mozzila ini kiranya patut kita rayakan dengan menuangkan "segelas cendol dan sebungkus kerupuk" sebagai rasa syukur. Ha ... ha ... Rasa prihatin yang selama ini menggerogoti hati akibat begitu lamanya Mozilla merespon perkembangan CSS3 terobati sudah. Download ...! Download ...! Yo .... secepatnya dan tersenyumlah hai sobat blogger!

Aku kini tak lagi akan memikirkan IE atau browser manapun yang tak secepatnya menyesuaikan diri. Cukup sudah dengan hadirnya Mozilla 4 beta. Harapan sudah dipelupuk mata. Cukup sudah dengan semakin mantapnya Opera, Safari dan Google Chrome. Ha ... ha .... Biarlah yang lain semakin tenggelam dalam kenestapaan. Biarlah .... biarlah karena merekapun tak secepatnya berubah! Ha .... selamat tinggal kepusingan javascript rounded corners, selamat tinggal kerumitan drop shadow .... selamat tinggal kode-kode aneh yang membuat umur semakin terkurangi dan bothak semakin memenuhi bathok kepala! Ha .... ha ... aku benar-benar menyukai ini! Ha ....

Buat sobat blogger yang ingin mencoba bagaimana rasanya menikmati Mozilla Firefox Terbaru ini (meskipun masih dalam versi beta), silahkan sampeyan KLIK link download di bawah ini. Jangan kuwatir. Aku hantar sampeyan sampai tujuan hingga pulang kembali dalam keadaan utuh. Jangan pernah kuwatir akan keselamatan sampeyan, karena kita nggak akan naik kereta yang suka anjlok atau pesawat yang suka lepas rodanya. Ha ... ha ... kita juga nggak akan pakai trans jakarta yang suka nyolong jalan dan membunuh banyak kaum miskin penunggang motor. Ha ... ha ... kita akan naik kerbau sambil meniup seruling .... kerbau yang sangat cepat ... ha ... klo dirasa kurang cepat biar nanti ada yang mencungkil sekitar pantatnya. Ha ... biar dia terbang bersamamu ...

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


» Happy Blogging - gubhugreyot «

Memahami CSS3 Transition - Transformation

Asal usul biasanya sering dianggap penting bagi banyak orang. Asal-usul, lhoh, bukan "asbun"! Ya ..., beberapa posting tentang CSS3, yang telah terbit beberapa waktu belakangan ini semuanya sudah dalam bentuk barang jadi. E ... kali-kali saja sampeyan juga ada yang pingin tahu asal-usul atau asal-muasal kode-kode CSS tersebut bisa membentuk sebuah fungsi baru yang bahkan membentuk beberapa animasi yang cukup menarik. Hal seperti ini mungkin akan cukup penting untuk kita pelajari dan pahami bersama. Yah ..., barangkali saja nanti kita butuhkan di saat kita pingin memodifikasi blog biar kelihatan lebih gaya, gitu lhoh! He ... he ... lhah-lhoh, lhah ...lhoh, kaya perjaka belasan tahun yang masih suka cinta munyuk saja, he ... he ... Nggak papa to ,Mbul? "Biar awet muda, dong! Biar kepala bothak dan rambut ubanan, yang penting rambut yang lain masih hitam tebal plus gondrong, khan?! He ... Bener, nggak?!" Ah , .., sampeyan ...! Kenapa justru malahan periksa punya sendiri? Punya aku nih, lhoh, yang sudah bothak ubanan? Atau justru milik sampeyan "yang itu" yang justru sudah bothak dan ubanan? He ... he ... Coba saja periksa sekali lagi ... He ... mumpung nggak ada orang, he ....

Memahami fungsi dan kegunaan CSS3 memang menjadi sesuatu hal yang baru dan aku rasa wajib bagi kita untuk mempelajarinya. Yah ... di masa ke depan kode ini mungkin saja menjadi kode yang mampu menggantikan hebatnya javascript, misalnya (dalam beberapa fungsi tertentu). Hal yang mungkin saja terjadi menilik beberapa kehebatan yang dapat kita lihat belakangan ini. Yap ... terutama dalam bentuk animasi yang ternyata cukup menjanjikan dan menakjubkan.

Dalam demo yang telah akau buat, sampeyan bisa melihat beberapa tampilan animasi yang hanya memfungsikan CSS3. Silahkan lihat dan cermati. O ..., ya, sementara demo bisa sampeyan buka dengan KLIK DEMO di bawah, untuk bentuk kode CSSnya, silahkan sampeyan lihat melalui posting ini. Biar tengok kanan, tengok kiri sambil mengolahragakan leher, gitu, lhoh, broer!

Kode CSS

Cara Membuat CSS3 Drop Down Panel

CSS3 Drop Down Panel merupakan sebuah panel sentuh yang akan meluncur jatuh atau melorot ketika cursor menyentuh satu bagian tertentu yang merupakan bagian sensitif yang sengaja dibuat menjadi tempat khusus bagi "pengunjung blog yang suka meraba-raba" agar rabaan-nya nggak sis-sia dan satu helaan nafas panjang kelegaan akan terhembuskan ketika rangsangan yang berupa sentuhan tadi diberikan tepat pada sasarannya. He ... he ... Sampeyan jangan berpikiran jorok dengan membayangkan yang bukan-bukan! Melorot di sini bukan berarti celana, lho!? Wah ..., repot klo pikiran nyampe ke sono! Bisa gawat, mbul! Bukannya isi dalamnya jadi bisa di pelototi dan dinikmati serta dijelajahi titik demi titik, tapi ... e .... bisa-bisa yang di dalam justru pada rontok tersebar nggak karuan tertiup dengus nafas sampeyan yang ngos-ngosan, he ... he ...

CSS3 Drop Down Panel dapat digunakan untuk banyak fungsi yang berkaitan dengan fasilitas layanan untuk pengunjung blog, seperti "sarang menu", link sahabat, pusat informasi, iklan serta banyak yang lain. Drop Down Panel ini juga memanfaatkan css3 transition, sehingga ketika cursor menyentuh panel maka panel akan terbuka secara perlahan dan ketika cursor dilepaskan, maka panel akan tertutup pula secara perlahan seperti saat membuka. Pergerakan membuka dan menutupnya panel ini tak ubahnya seperti apabila kita gunakan javascript yang mampu menciptakan animasi gerak panel. Ya ... meskipun css3 transition ini hanya bekerja secara sempurna di Opera, Safari dan Google Chrome. Meskipun demikian kita tidak perlu berkecil hati atau kecewa, karena drop down panel ini dapat berfungsi secara normal di semua browser yang ada tanpa kecuali. Ya ... sekali lagi yang membedakan hanya pada masalah css3 transition dan kompabilitasnya terhadap browser yang saat ini digunakan. Tidak menjadi masalah besar, broer.

Bagaimana cara memasangnya di blog? Ouw .... Ditanggung nggak bikin pusing, broer! Sekali tempel langsung nyos! Lha gimana nggak gampang, wong kita bisa melakukannya hanya dengan memanfaatkan penambahan widget melalui "HTML/Javascript", ... copy-paste kode css, trus .... KLIK SAVE atau Simpan, dan ... byuh si drop down panel akan terlihat nongkrong di ujung teratas blog alias di header bagian atas. Ho ... ho ... Hanya butuh waktu 5 menit tak lebih dan satu penampilan baru dapat kita nikmati! Ho ... ho .... Nggak percaya? Yo ... bareng-bareng kita coba dan lihat hasilnya !

Kode CSS dan xHTML CSS3 Drop Down Panel

jQuery Vertical Accordion Menu

Sekali lagi..., meskipun belum lama berselang kita telah bahas pembuatan Vertical Accordion Menu dengan judul "Animated jQuery Accordion Menu Serba Guna", karena salah seorang sobat blogger menanyakan tentang bagaimana membuat vertical accordion seperti yang digunakan di blog ini, maka kita akan bongkar seluruh javascript dan kode css yang membentuk fungsi vertical accordion ini agar para sobat blogger bisa membandingkan keduanya. Meskipun kalau ditilik dari fungsi sebenarnya hampir tidak banyak perbedaan, namun sebenarnya jika ditinjau dari javascriptnya, maka akan kita lihat beberapa perbedaan, baik dari bentuk script maupun besar script yang digunakan.

Javascript maupun kode CSS yang nantinya kita perlihatkan, hampir tidak ada pengurangan atau penambahan dari kode aslinya, hanya beberapa kode CSS saja yang dirubah dengan pertimbangan supaya hasil akhir bentuk accordion akan sama disemua blog. Hal yang terpaksa dilakukan karena tanpa perubahan maka hasil yang didapat pastilah akan berbeda dengan bentuk accordion seperti yang terlihat di samping (beberpa kode css secara terpadu dipekerjakan juga untuk fungsi lain di keseluruhan blog!).

JQuery-1.3.2.min.js masih menjadi pilar utama bekerjanya accordion, yang dipadukan dengan sejumlah script lain hingga dapat membentuk sebuah fungsi dinamis dengan bentuk tampilan yang terbangun sepenuhnya melalui beberapa kode css dan background image.

jquery dan Javascript pembentuk jQuery Vertical Accordion Menu

Cara Buat Animated CSS3 Multilevel Drop Down Menu

Multilevel Drop Down Menu dengan beberapa bentuk animasi tidak hanya dapat tercipta menggunakan javascript. Berkat pengembangan yang terjadi pada kode CSS yang saat ini lebih dikenal sebagai CSS3, beberapa animasi cantik layaknya menggunakan javascript dapat kita buat. Animated CSS3 Multilevel Drop Down Menu yang coba kita buat ini adalah salah satu contohnya.

Meskipun hingga detik ini baru beberapa browser yang support secara penuh, seperti halnya Opera, Safari dan Google Chrome, serta Mozilla sekalipun tidak penuh, namun kita boleh yakin bahwa di masa ke depan, perkembangan yang terjadi pada css3 ini menjadi sesuatu yang wajib untuk diikuti secara total oleh browser manapun.

Satu keuntungan penggunaan kode css secara total tentunya sangat jelas terasakan pada beban yang harus ditanggung sebuah blog. Banyaknya posting, baik berupa teks ataupun gambar yang disertai beberapa bentuk fungsi sebagai pelengkap blog dengan memanfaatkan javascript, semakin lama akan terasakan bagaimana loading blog menjadi semakin bertambah berat. Kalau hal seperti ini dibiarkan bertumpuk dan selalu terus bertumpuk,... lama kelamaan tentunya loading blog menjadi semakin tidak terkendalikan hingga pada suatu titik tertentu akan kita dapatkan betapa loading blog menjadi seperti layaknya lari seekor siput yang menderita kelumpuhan.

Membuat Multilevel Drop Down Menu tidaklah sulit, hanya mungkin yang terasakan agak "njelimet" ketika menyusun "urutan/bagan setiap menu-nya", dimana di sini dibutuhkan sedikit ketelitian hingga output yang dihasilkan sesuai dengan apa yang diharapkan. Persoalan klasik yang hampir selalu di alami oleh setiap blogger ketika menyusun sebuah urutan/bagan sebuah menu. Jadi pada intinya bukan sebuah kesulitan teknis, akan tetapi hanya butuh ketelatena dan kesabaran dalam manata bagian menu saja.

Kode CSS Multilevel Drop Down Menu

Pasang Fasilitas Print di Halaman Posting

Javascript yang difungsikan sebagai fasilitas print sebenarnya telah terpostingkan beberapa waktu yang lalu, dimana kode html beserta javascriptnya bisa di simpan melalui penambahan widget di sidebar, bawah header atau footer. Namun demikian berkaitan dengan pertanyaan yang muncul tentang "bagaimana cara memasang dan menampilkan fasilitas print di halaman posting", maka pada posting kali ini kita akan bahas secara khusus tentang cara memasang fungsi atau fasilitas print tepat di salah satu bagian halaman posting.

Gambar atau teks yang merupakan link dimana fungsi print bekerja melalui "KLIK" sebenarnya dapat diletakkan di beberapa bagian tertentu di halaman posting, akan tetapi kita akan coba di bagian atas halaman posting dengan harapan akan lebih mudah dan cepat terlihat oleh pengunjung. Kita akan menempatkan di sebelah judul posting atau di bawah judul posting sebelah kanan. Gambar yang nantinya digunakan juga bisa sampeyan perkecil atau diganti dengan teks untuk penyesuaian dengan ruangan yang tersedia. Sebagai gambaran bisa kita lihat melalui contoh di bawah ini:

Print di Halaman Posting


Sekalipun semua kode dan javascript telah tersedia di posting sebelumnya, supaya kita nggak repot untuk bolak-balik membuka halaman, sekaligus akan kita ulang memuat kode html dan javascriptnya.

 
GR | Edited by | gubhug reyot