Cara Membuat Tooltip Keren di Blog - Pada kesempatan  kali ini masimal akan share bagaimana cara membuat tooltip di blog. Seperti yang kita tahu, tooltip merupakan tulisan yang muncul saat mouse diarahkan atau berada pada link yang mempunyai atribut "title" . Nah, Kali ini masimal bagikan tooltip keren dengan background hitam. Langsung simak saja tutorialnya ..

Membuat Tooltip Title Link Blogger

• Masuk ke Dasboard blog, klik "Template" lalu "Edit HTML".
• Cari kode </head>, lalu paste kode JavaScript berikut ini tepat di atas tag </head> :
  
  

  <script src="http://yourjavascript.com/1439114575/tooltips.js" type="text/javascript"></script>
  <script type="text/javascript">
  $().ready(function() {
  $('[title]').style_my_tooltips( {
  tip_follows_cursor: 'on', //tooltip mengikuti gerak cursor 'on' atau 'off'
  tip_delay_time: 200 //delay waktu tooltip muncul
  })
  });
  </script>

• Jika template sobat belum memiliki script jQuery, maka paste kode berikut tepat di atas kode yang tadi. Namun jika sudah, maka tidak perlu.
  
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

• Terakhir, copy dan paste kode berikut ke dalam CSS template sobat :
  
  

  #tooltip {
    background-color: #161616;
    border: 1px solid #333;
    border-radius: 4px;
    color: #fff;
    display: none;
    font-size: 11px Arial;
    position: absolute;
    z-index: 9999;
    padding: 3px 5px
  }

• Sobat bisa menyesuaikan warna background tooltip kesukaan sobat masing-masing dengan mengganti kode warna di :
  
  

  background-color: #161616;

• Atau warna teksnya dengan mengganti kode warna :
  
  

  color: #fff;

• Tooltip ini akan berfungsi hanya untuk setiap link yang memiliki attribute "title".

Demikian sudah Tutorial Membuat Tooltip Keren kali ini, semoga bermanfaat untuk sobat semua, dan tak lupa Mas imal ucapkan terima kasih untuk sobat yang sudah berkunjung. Jangan lupa, bagi Sobat yang memiliki akun Google mohon support untuk blog ini hanya dengan mengklik tombol +1 di bawah. Dukungan sobat sangat berarti bagi blog ini. Terima kasih

Cara Membuat Tooltip Keren di Blog

Description: Cara Membuat Tooltip Keren di Blog

Uploaded by: Unknown

Views:

Category: Blogging, Tutorial

Share

Tweet