Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Minggu, 28 Agustus 2016

Cara Memunculkan Pesan Melayang Saat Di Sorot Mouse

Cara Memunculkan Pesan Saat Di Sorot Mouse - Pernah melihat atau menemukan link atau gambar yang jika di sorot dengan mouse akan muncul pesan melayang dengan beberapa kalimat didalamnya? Sebenarnya pesan melayang saat di sorot mouse tersebut merupakan fungsi yang dinamakan tooltips blog. Untuk tooltips blog sendiri silahkan baca di Macam Macam Tooltips Blog

Cara Memunculkan Pesan Melayang Saat Di Sorot Mouse
Cara Memunculkan Pesan Melayang Saat Di Sorot Mouse

Sudah banyak yang membahas cara memunculkan pesan melayang saat di sorot mouse ini, dan pada artikel sebelumnya saya pernah membuat tutorial yang hampir memiliki fungsi yang sama namun sayang artikel yang merupakan request dari teman di Group FB tersebut tidak sesuai dengan keinginan karena memiliki fungsi tab view yang muncul di tab baru

Cara memunculkan pesan melayang saat di sorot mouse ini sangat simpel dan mudah dipasang di blog sobat, selain tidak menggunakan script sehingga tidak akan mempengaruhi loading blog karena hanya menggunakan kode CSS sederhana saja

Berikut caranya:
  • Masuklah ke akun Blogger sobat
  • Bukan halaman Editing Template
  • Cari kode ]]></b:skin> dan salin kode berikut tepat diatas kode ]]></b:skin>

    .icontandatanya {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    padding: 0 4px 0 0;
    background: url('http://4.bp.blogspot.com/-vQdCqXudTBE/Uh7G6tt8LoI/AAAAAAAABlw/jyBvYw09toY/s1600/all-trick-blogs.com-qeustwarnnoicons.png') no-repeat;
    }
    .tooltipblog {
    display: none;
    width: 200px;
    position: absolute;
    padding: 8px;
    margin: 4px 0 0 4px;
    top: 0;
    left: 16px;
    border: 1px solid #76B6D7;
    border-radius: 0 8px 8px 8px;
    background: #bedffe;
    font-size: 10px;
    box-shadow: 0 1px 2px -1px #21759B;
    z-index: 999;
    }
    .tandatanya {
    color:#000;
    background-position: 0 0;
    }
    .tandatanya .tooltipblog {
    border-color: #76B6D7;
    background-color: #bedffe;
    box-shadow-color: #21759B;
    }
    .icontandatanya:hover .tooltipblog {
    display: block;
    }
  • Simpan template
  • Untuk memasang kode tersebut terserah sobat mau dipasang dimana seperti contoh berikut ini
    Penulisan dalam kode HTML seperti berikut ini
    <span class="icontandatanya tandatanya">
    <span class="tooltipblog">Sebelah kiri adalah icon tandatanya
    Silahkan isi beberapa kalimat disini</span>
    </span>
    Untuk DEMO silahkan sorot dengan mouse tanda tanya dibawah ini

    Ini adalah icon tandatanya
    Silahkan isi beberapa kalimat disini


    Cara memasang disebelah kanan artikel Cara memasang disebelah kanan artikel

    Cara memasang ditengah artikel Cara memasang ditengah artikel cukup mudah juga

    Didalamnya ada link juga loh LINK

Untuk pemasangan didalam gambar blog, cukup membuat background gambar yang sesuai lalu pasang kode pesan melayang ini diatas background tersebut atau baca di membuat tombol diatas background

Gimana mudah bukan? Jika masih mengalami kesulitan mari kita diskusikan bersam-sama dengan meninggalkan komentar di artikel ini, Cara Memunculkan Pesan Melayang Saat Di Sorot Mouse




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP