Cara Pasang Tooltip Tooltip di dunia blogger merupakan kata yang sudah tidak asing lagi .... masih terasa asing,tooltip adalah sebuah link yang apa bila disorot dengan kursor/mouse akan menampilkan sebuah keterangan untuk contoh nya silahkan arah kan kursor ke teks tooltip di atas nah untuk cara pembuatan nya :- Login ke blogger shobat
- masuk rancangan
- edit html>>>untuk menjaga kemungkinan download lengkap dulu tempate sobat
- cari kode <head> lalu letak kan kode di bawah ini tepat di bawah kode <head>
- lalu save template ......berikut kode nya
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ToolTips Example</title> <style type="text/css"> .tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; } .tooltip span { margin-left: -999em; position: absolute; } .tooltip:hover span { border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; } .tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; } .tooltip:hover em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; } .classic { padding: 0.8em 1em; } .custom { padding: 0.5em 0.8em 0.8em 2em; } * html a:hover { background: transparent; } .classic {background: #FFFFAA; border: 1px solid #FFAD33; } .critical { background: #FFCCAA; border: 1px solid #FF3334; } .help { background: #9FDAEE; border: 1px solid #2BB0D7; } .info { background: #9FDAEE; border: 1px solid #2BB0D7; } .warning { background: #FFFFAA; border: 1px solid #FFAD33; } </style>
dan untuk cara pemasangan tooltip nya pasang kode seperti di bawah ini
<a class='tooltip' href='link yang di tuju'>Judul <span class='custom critical'><img alt='Error' height='48' src='Url gambar' width='48'/><em>Judul dlam kotak tooltip</em>Keterangan Judul</span></a>
GANTI TEKS WARNA PUTIH DENGAN KATA KATA SHOBAT SENDIRI oke selamat mencoba semoga berhasil
assalamualaikum mas kalau artikel mas pada Cara Pasang tooltip di postingan blog setelah saya coba di website word press tidak bisa, apakah kode kode ini untuk website blogger saja ya. dan kalau bisa di update juga kode untuk website word press karna pengunjung tidak semuanya blogger terima kasih
BalasHapus