Auto Hide Navbar dengan CSS3

Auto Hide Navbar merupakan pengembangan Cara Membuat Show Hide Navbar, Cara Membuat Navbar Otomatis ataupun Cara Membuat Efek Transparansi di Navbar Blogger dengan memanfaatkan kemajuan yang telah di capai CSS3. Meskipun saat ini belum semua browser mendukung CSS3 secara total, namun masalah ini hanya tinggal menunggu waktu serta kesiapan browser dalam melengkapi diri dengan software yang support CSS3. Beberapa browser kuat seperti Mozila Firefox secara simultan terus berpacu diri melakukan penyempurnaan dukungannya terhadap CSS3 yang terbukti dengan telah diluncurkannya Mozilla Firefox 4.0 beta 1 hingga saat ini telah direlease versi beta 6. Tampaknya Mozilla juga tak mau kehilangan pasar besarnya akibat mengabaikan CSS3. Terlebih kini Google Chrome begitu gencar melakukan berbagai promosi hingga tampak kemajuan pesat yang terbukti dengan semakin meningkatnya jumlah pengguna browser yang sebelumnya amat jarang dilirik ini. Opera bahkan sudah lepas dari versi betanya. Opera 1063 sudah banyak dipersenjatai dengan beberapa dukungan CSS3 hingga yang terakhir berupa CSS3 transition. Jika Anda menggunakan Google Crhome dan Safari maka banyak hal lain yang lebih spektakuler dapat dibuat dengan CCS3. Ke dua browser ini sudah support terhadap CSS3 animation yang mampu memberikan berbagai efek animasi terhadap desain blog tanpa perlu penambahan javascript. Ya..., dimasa ke depan kode CSS ini memang akan menjadi pilar pembangunan website/blog.

Jika anda melihat kode CSS dalam tutorial di gubhug reyot, maka mungkin anda juga bisa melakukan sedikit pengembangan dengan menambahkan efek transparansi hingga saat navbar tersembunyi dia akan terlihat sedikit samar-samar (seperti terlihat di atas!). Efek seperti ini tercipta berkat ditambahkannya efek opacity. Jika anda menyukai hal ini, anda bisa menggantikan kode CSS yang terdapat di tutorial dengan kode baru seperti yang terlihat di bawah ini:

#navbar-iframe{
   height:30px;
   padding-bottom:30px;
   background: url(http://i51.tinypic.com/2h2jh3c/gubhugreyot/images/navbar.gif) bottom right no-repeat;
   background-position:99.5% 30px;
   position:absolute; 
   margin-top:-30px;
  -o-transition:all 1.5s ease-in;
  -moz-transition:all 1.5s ease-in;
  -webkit-transition: all 1.5s ease-in;
   opacity:0.5;
}
#navbar-iframe:hover{
   margin-top:0px;
   cursor:pointer;
   opacity:1.0; /* original code by: gubhugreyot.blogspot.com */
}

Simpan kode CSS di atas syntax body { .... }, atau di atas kode ]]></b:skin>

Back to Tutorial

Tutorial: Show Hide Navbar Using CSS3 (gubhug reyot)

Tutorial by: http://gubhugreyot.blogspot.com

Cara Membuat dan Memasang Widget SMS Gratis dengan Auto Scroller CSS3

Widget SMS gratis merupakan widget yang amat tepat untuk blogger dan pengunjung di tanah air. Semua yang serba gratisan selalu mempunyai pasar dan penggemar ngudubilah banyaknya. Hal yang benar-benar amat wajar untuk bangsa yang tak kunjung lepas dari kemiskinan. Widget SMS Gratis yang pada saat ini banyak digunakan di blog mempunyai dua lebar yang berbeda. Widget dengan ukuran kecil mempunyai lebar berkisar 200px sedang yang berukuran besar lebarnya tak lebih dari 300px. Memperbaiki penampilan widget ini adalah sebuah kewajiban jika tak ingin wajah blog terlihat awut-awutan. Sebuah auto scroller cantik akan mampu mengubah segalanya. Dari sebuah widget dengan wajah kocar-kacir menjadi widget dengan tampilan super menarik yang terlihat sangat profesional. Hooo hooo bagaimana caranya? Sangat mudah, cepat dan super luar biasa detail tutorialnya. Silahkan baca kembali di tutorial dengan KLIK link di bawah ini. O ..., ya... Silahkan sampeyan coba berkirim SMS melalui widget SMS Gratis di ujung kanan bawah!

Keterangan:

• Aku sudah mencoba beberapa kali. Kadang langsung terkirim dan kadang juga harus menunggu cukup lama.
• Demo dan tutorial sama sekali tak berkaitan dengan si empunya layanan widget gratis sms.

Tutorial: Auto Scrolling Widget SMS Gratis

Tutorial by: http://gubhugreyot.blogspot.com

Cara Membuat Elemen Baru di dalam Header Blog

Slide Show di atas adalah satu bentuk penempatan widget baru yang pemasangannya dilakukan berkat ditambahkannya sebuah elemen baru di dalam header blog dengan posisi di sebelah kanan. Sampeyan bisa mengisi ruang itu dengan segala macam widget yang cocok dan diharapkan memberi nilai lebih pada blog. Wisget bisa berupa teks , gambar atau yang lain karena elemen baru di atas mempunyai fungsi atau kegunaan yang tidak berbeda dengan elemen blog yang lain.

Back to tutorial

Tutorial by: http://gubhugreyot.blogspot.com