if (window.jstiming) window.jstiming.load.tick('headEnd');
Minal 'Aidin wal Faizin
Mampukah setiap tahun bertambah baik?
Sebuah tantangan bagi siapapun. Jadikan Idul fitri sebagai mement yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama.

CARA MEMBUAT TOOLTIPS DI BLOG

Pada saat pertama kali Education for all mengunjungi blog tetangga EFA sangat terpesona ketika mose EFA menyentuh links tiba tiba muncul descripsi atau keterangan dari links tersebut, sehingga EFA bertanya tanya bagaimana cara membuatnya. sehingga EFA mencari cari atau istilahnya blogwalking dari satu blog ke blog yang lain dan tak satupun EFA menemukanya. ada sih beberapa blog yang mencoba meneragkan tapi tak membuat EFA cukup mengerti. sehingga EFA mencoba dari snapshot, ternyata bukan. akhirnya setelah lama mencari cari ketemu juga yaitu dari blog tetangga  http://ecaknyo.blogspot.com  dan EFA coba untuk membuatnya alhamdulilah berhasil. Contoh Tooltips untuk di Postingan.. coba kalian MouseOver Link di bawah ini atau pada link Artikel education for all yang ada diwidget sebelah kiri :




  • cara membuat tooltip di blog
    Jangan heran seperti saya dulu ketika mose menyentuh kursor maka akan keluar deskripsi blog. Lengkapi blog sobat dengan tooltip





  • Apabila sobat blogger berniat untuk membuatnya silahkan ikuti langkah langkah berikut ini:

    Login ke Blogger > Rancangan > Edit HTML ...lalu Copy kode ToolTips dibawah ini..dan letakan diatas kode ]]></b:skin>



    li.sfhover .tooltips, li:hover .tooltips {
    display:block;
    }
    .tooltips {
    margin:6px 6px 0 6px;
    padding:15px 10px 15px;
    position:absolute;
    width:250px; >
    display:none;
    background:url(
    http://i1128.photobucket.com/albums/m493/wonglampung1/hitam.jpg ) bottom repeat-x;
    opacity: 0.8;filter:alpha(opacity=80);zoom:1;
    border:1px solid #FFFFFF;
    -moz-border-radius:10px;
    }
    .tooltips {
    margin-top:-50px;
    margin-left:-290px;
    }
    .tooltips:hover {
    display:none!important;
    }
    .tooltips p {
    font-size:12px;
    font-family:Rockwell;
    font-weight:bold;
    color: #0060C8;
    text-align:center;
    margin:0 15px 0 0;
    }

    Ket :

    background:url(http://i1128.photobucket.com/albums/m493/wonglampung1/hitam.jpg ) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna merah

    border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

    -moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

    opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

    margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
    margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

    font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan  sobat blogger mania. jika sudah selesai jangan lupa simpan template
    Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya berfungsi..


    <li><a href="http://.....URL yang berkaitan dengan ToolTips...." > Judul URL yang berkaitan dengan ToolTips </a><div class="tooltips"><p> Kata-kata untuk ditampilkan pada Pop-up ToolTips</p></div></li>
     
       
    Ket :
    > Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya maka tooltips-nya tidak akan berfungsi...  


    Contoh Pengunaannya... yang digunakan pada widget HTML/Javascripts.. (bisa juga sobat gunakan pada postingan  



    <li><a href='http://fajar7siblings.blogspot.com/2011/08/cara-memperlebar-kolom-dan-halaman-blog.html'>Cara Memperlebar Kolom dan Halaman Blog</a><div class="tooltips"><p>   Cara Memperlebar Kolom dan Halaman Blog</p></div></li>

    Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian widget artikel menu education for all di sebelah kiri Blog ini..

     
      


        

    The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :





    » Selamat Berkreasi - E F A «


    6comments:

    1. silaturrahmi ne kawan
      banner nya sdh aku pasang...
      info balik ya..trims

      ReplyDelete
    2. okok teman, mantab (pake B) tutornya.
      terima kasih atas sharenya, bermanfaat bagi saya sebagai orang yang masih beLajar di dunia bLogging.
      seLamat maLam dan seLamat istirahat aja, saLam sukses seLaLu.

      ReplyDelete
    3. wah.., hasil experiment yang keren tuh master.., ijin nyimak and praktek yach :)) slam kenal master.. :D

      ReplyDelete
    4. terimakasih
      berguna banget bagi pemula seperti saya

      ReplyDelete
    5. Cara redupin cahaya widget di sidebar blog punya om, gmna ya om??? yang saya temin di google cuma redupin gambar aja om... kalo ada disini mohon linknya om di shoutmix blog saya...

      ReplyDelete

    Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...

    NextPrev