gubhug reyot

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

Posted by cah ndeso kluthuk

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

Posted by cah ndeso kluthuk

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

Posted by cah ndeso kluthuk

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)

Posted by cah ndeso kluthuk

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.

D E M O

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>

Atur lebar (width) sesuai kebutuhan.
Kode untuk box ini dapat dimanfaatkan di widget blog.
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)

Posted by cah ndeso kluthuk

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.

Blink Effect Script

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

Posted by cah ndeso kluthuk

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Cara Membuat CSS3 Animated Image Enlarge

Posted by cah ndeso kluthuk

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

CSS3 Full Animated Show Hidden Content Onmouseover

Posted by cah ndeso kluthuk

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Animated Hover Link Using CSS3

Posted by cah ndeso kluthuk

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

Posted by cah ndeso kluthuk

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).

Konversi px, em, pt dan %(persen)

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

Posted by cah ndeso kluthuk

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 ...

Download Mozilla Firefox 4 beta

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

Posted by cah ndeso kluthuk

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!

D E M O

Kode CSS

Cara Membuat CSS3 Drop Down Panel

Posted by cah ndeso kluthuk

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

Posted by cah ndeso kluthuk

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

Posted by cah ndeso kluthuk

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

Posted by cah ndeso kluthuk

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.

Keterangan Penting

Cumulus swf - flash

Categories

Arsip...

Flag Counters

Pengikut

Recent Comments plus Kode CSS Box Gelap

Vertical Menu

Download Browser

Widget

CSS 3

Special Tutorials

Javascript-JQuery

Blog-Email-Modem

File Hosting

Promosi Blog

Adobe-Image-Animasi

Tutorial BlogDETIK

New BloGGER Templates

Panduan BloGGeR

Tutorial Blogger

Tips-Trik Blogger

Pengilon

Ge-eR

Sobat Ngeblogh

var ultimaFecha = 'Selasa, 31 Agustus 2010'; remplaza_fecha('Selasa, 31 Agustus 2010');

var ultimaFecha = 'Minggu, 29 Agustus 2010'; remplaza_fecha('Minggu, 29 Agustus 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Jumat, 27 Agustus 2010'; remplaza_fecha('Jumat, 27 Agustus 2010');

var ultimaFecha = 'Rabu, 25 Agustus 2010'; remplaza_fecha('Rabu, 25 Agustus 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Selasa, 24 Agustus 2010'; remplaza_fecha('Selasa, 24 Agustus 2010');

var ultimaFecha = 'Senin, 23 Agustus 2010'; remplaza_fecha('Senin, 23 Agustus 2010');

var ultimaFecha = 'Minggu, 22 Agustus 2010'; remplaza_fecha('Minggu, 22 Agustus 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Sabtu, 21 Agustus 2010'; remplaza_fecha('Sabtu, 21 Agustus 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Kamis, 19 Agustus 2010'; remplaza_fecha('Kamis, 19 Agustus 2010');