Cara membuat menu tooltip | OOM RIO

Friday, June 3, 2011

Cara membuat menu tooltip

Menu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link atau kita bisa gunakan menu ini sebagai daftar artikel, menu ini juga dilengkapi dengan tooltip yang berisi gambar dan informasi singkat tentang artikel atau link lain yang ada pada daftar tersebut. Cara membuat menu ini sangat mudah, yang kita perlukan hanya kode HTML dan beberapa kode CSS, tanpa menggunakan Javascript. Berikut ini anda bisa lihat contoh menu tooltip dibawah ini :

  • Cara membuat code color picker interaktif color picker interaktif dilihat dari bentuk dan fungsinya memang sangat berbeda dengan tabel kode warna yang saya bahas pada waktu yang lalu dalam artikel cara buat tabel kode warna. tabel kode warna yang ini lebih interaktif dan lebih banyak fungsinya, diantaranya adalah kita dapat menyesuaikan warna dengan menyeret panah keatas dan kebawah pada bar warna sebelah kanan, dan dapat menyesuaikan saturation dengan menarik lingkaran kecil disekitar area gradasi. dan pada kotak output disebelah bawah selain muncul kode color hex, juga kode color rgb, dan nilai-nilai hsv, serta dilengkapi sebuah kotak warna yang muncul sesuai dengan warna yang ada pada area gradasi ketika lingkaran kecil ditempatkan pada posisi tertentu.
  • Cara membuat tab menu Accordion bentuk tampilan tab menu accordion ini sangat menarik, sangat bagus bila kita pasang pada web atau blog kita. tab menu accordion ini dilengkapi dengan efek animasi sliding. yaitu animasi sliding yang bekerja ketika kita mengklik pada salah satu tab menu accordion, maka ketika itu pula muncul sebuah kotak bergerak kebawah yang berfungsi menampilkan sebuah dokumen informasi singkat tentang link yang kita klik tadi.
  • Cara membuat gambar memutar fitur css memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. pada waktu yang lalu saya sudah banyak mengulas tentang fitur css dan contoh - contohnya. kali ini saya akan berikan contoh lagi tentang bagaimana kita membuat gambar memutar menggunakan css transitions. cara kerjanya sangat sederhana, yaitu ketika pointer mouse diletakkan diatas gambar maka secara otomatis gambar akan memutar dan membesar.
  • Cara agar blog cepat diakses dengan HP saat ini sudah bukan hal yang baru lagi, orang mengakses internet menggunakan hp. hal ini karena selain hp sudah dilengkapi fitur gprs atau 3g, tapi karena memang sudah banyak situs yang menggunakan fasilitas tersendiri sehingga dapat lebih mudah dan cepat diakses menggunakan hp, misalnya seperti facebook, twitter, yahoo, google, dan lain - lain.
  • Cara mengganti forum komentar blogger dengan Disqus disqus adalah platform komentar yang membantu membangun komunitas yang aktif dari pengunjung web atau blog kita. forum komentar ini memiliki banyak fitur dan bisa digunakan pada banyak platform seperti wordpress, blogger, tumblr dll, sama seperti forum komentar intensedebate
  • Cara mengganti forum Komentar Blogger dengan IntenseDebate forum komentar intensedebate memiliki banyak fitur menarik dibanding dengan forum komentar default milik blogger. forum komentar intensedebate bisa digunakan pada banyak platform seperti wordpress, blogger, tumblr dll.
  • Gimana... bagus kan...?
    OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :
    1. Login ke blogger dengan ID anda.
    2. Klik Rancangan.
    3. Dan KLik tab Edit HTML.


    4. Cari kode di bawah ini atau yang mirip dengan kode ini :

    </head>

    5. Copy kode di bawah ini dan taruh sebelum kode </head> :


    6. Simpan Template.
    Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan langkah berikut :
    1. Klik Rancangan dan pilih Elemen Laman






    2. Tambah Gadget






    3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







    4. Copy dan paste kode dibawah ini pada gadget tersebut :
    Catatam :
    • Untuk menambah daftar, anda tinggal menambah kode hiperlink seperti dibawah ini sesuai kebutuhan anda :
    <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li>

    5. Simpan.
    Selamat mencoba ya...
    Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

    Judul: Cara membuat menu tooltip; Ditulis oleh Unknown; Rating Blog: 5 dari 5

    Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:


    2 comments:

    AKI AGUNG SAMUDRA said...

    Assalamu`alaikum Wr.Wb...
    Hakikat kehidupan adalah bermanfaat bagi orang lain dan memiliki kepekaan sosial yang tinggi.Dengan mengucap Bismillahir rahmaannir rahiim, perkenalkanlah kami dari INTIH TUNGGAL hadir bagi saudara/i, Kami merupakan lembaga non pemerintah yang bergerak dalam bidang jasa olah kebathinan, pemondokan pesantren dan pembinaan diri baik mental dan spritual.Muncul keprihatian kami dalam melihat situasi kehidupan sosial ekonomi didalam masyarakat kita pada masa sekarang ini, meningkatnya angka kemiskinan, penggangguran dan tingkat krimal sebagai akibat dari kesengajangan kehidupan sosial ekonomi yang sangat memprihatinkan.Berangkat dari permasalahan dan situasi tersebut, kami hadir melalui program kami yaitu PROGRAM "HIBAH DANA GAIB" dengan maksud membantu saudara/i yang mengalami kesulitan ekonomi ataupun yang membutuhkan dana.

    Program tersebut merupakan program bakti sosial yang diselenggarakan oleh Majelis kami yang mana berbentuk memberikan dana berupa uang kontan bagi saudara/i yang membutuhkan.

    Dana ini diperoleh melalui media doa-doa dzikir khusus bersama anak-anak yatim/piatu dan muda/mudi pesantren kami sehingga jauh dari hal-hal klenik/mistik yang tentunya dilarang oleh Agama. Dalam program ini dengan sangat terpaksa kami mewajibkan bagi saudara/i untuk menyediakan Mahar seperti yang telah kami sebutkan dibawa, mohon maaf yang sebesar-besarnya dengan tidak bermaksud mengkomersilkan hal tersebut kami perlukan sebagai "biaya pengganti" guna penggadaan biaya transportasi antar-jemput anak-anak yatim, biaya jamuan konsumsi para undangan dzikir dan dana sedekah bagi pihak-pihak undangan tersebut. Bagi kami segenap pengurus Majelis sangat dipantangkan untuk mengambil bagian dari dana yang dimohonkan tersebut, hanya sumbangan dari saudara/i lah yang dapat kami terima sekiranya saudara/i telah berhasil dalam memanfaat dana hibah tersebut.

    It tahi'uu mal laayas'alakum ayraw wahum -muhtasuun[a]

    "Ikutilah orang yang tidak meminta upah kepadamu sedangkan mereka adalah orang-orang yang mendapat petunjuk."

    akhir kata kami segenap pengurus MAJELIS INTI TUNGGAL mengucapkan "tetaplah berpengharapan, karena pada hakikatnya Allah swt tidak akan mengecewakan hamba-NYA yang meletakkan pengharapan kepada-NYA dan dibalik permasalahan pasti ada solusi dan hikmahnya.

    100% BUKAN Pesugihan, Halal, Tanpa Tumbal, Berkah, Bebas untuk semua agama, Proses 1 hari Dana langsung kami transfer Ke Rekening pribadi anda, Tanpa mengembalikan, Tidak mengurangi rejeki keturunan, dibekali juga pegangan khusus guna mempertahankan Kekayaan anda. Dana berasal dari permohonan Kepada yang maha kuasa Melalui Doa-Doa Dzikir Khusus.

    Tingkat 1: Untuk Hasil 250 Juta, Mahar Ikhlas Rp. 1.500.000
    Tingkat 2: Untuk Hasil 500 Juta, Mahar Ikhlas Rp. 2.500.000
    Tingkat 3: Untuk Hasil 1 milyar, Mahar Ikhlas Rp. 5.000.000
    Tingkat 4: Untuk Hasil 5 milyar, Mahar Ikhlas Rp. 15.000.000
    Tingkat 5: Untuk Hasil 10 Milyar, Mahar Ikhlas Rp. 35.000.000

    Syarat dan ketentuan bagi para pemohon:
    Umur minimal 20 tahun, bebas untuk semua Agama, memiliki nomer rekening pribadi, setiap permohonan hanya untuk satu (1) kali seumur hidup, harus menjauhkan diri dari perbuatan yang dilarang oleh Agama (perjudian, prostitusi, miras).

    KETENTUAN :
    Setiap pemohon diwajibkan berpikir secara arif dan bijaksana dalam memohonkan jumlah dana yang diinginkan untuk mencegah perbuatan diri ke hal yang bersifat komsumtif.

    Diwajibkan bagi saudara/i yang telah menerima dana untuk melakukan sedekah seikhlasnya pada setiap hari jum`at.

    dana gaib

    GARANSI 100% JIKA TIDAK BERHASIL, MAKA SELURUH KERUGIAN ANDA AKAN DIKEMBALIKAN UTUH TANPA ADA POTONGAN SEPESERPUN JIKA ANDA BERMINAT SILAHKAN HUBUNGI DI 0852-2649-8778

    Rejeki Dana Gaib said...

    @Rejeki Dana Gaib

    Post a Comment

    Informasi Pilihan Identitas:
    Google/Blogger : Khusus yang punya Account Blogger.
    Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
    Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).