Membuat Menu Tool Tips

Halo sobat-sobat blogger, apa kabar kalian??

Hari ini saya akan memberi tahu cara membuat Menu Tool Tips, seperti yang ada di blog saya.

Sobat mau tau kan cara nya??

langsung saja cara beri tahu cara nya, yaitu sebagai berikut:

• Langkah pertama adalah login dulu di Blogger
• Setelah itu sobat pilih Tab Rancangan > Lalu pilih Edit HTML.
• Untuk jaga-jaga, sobat Klik Download Template Lengkap, agar apabila terjadi sesuatu blog sobat bisa di kembalikan seperti semula.
  
• Jangan Lupa Expand Template Widget nya sobat centang dulu.
• Setelah itu sobat cari kode ]]></b:skin>
• Setelah itu sobat letakkan kode di bawah ini di atas kode ]]></b:skin>
  
  
  

  
  

  
  

  
  

  .menu2 {
  margin-top: -11px;
  padding: 12px;
  list-style: none;
  }
  .menu2 li {
  padding: 0;
  margin: 0 2px;
  float: left;
  position: relative;
  text-align: center;
  }
  .menu2 a {
  padding: 14px 10px;
  display: block;
  color: #CCF2FF;
  width: 121px;
  text-decoration: none;
  font-weight: bold;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh6dLFPo1VW9_m0xkq99fLgNwPGLLBn8A7jFgpq1GyGShoKye_K_gr00ebUYMkS_MuSj2zF8n9TJuvRfnW3mZF4GslwRuDduUZpFOyvzXAcpjEf35xFnuvbPSYRGkpD6Nbux4KBkPSKs4/s1600/button.gif) no-repeat center center;
  }
  .menu2 li em {
  font-weight: normal;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGP07QezwFOwayRyZ8UGtFWOu-6NgZwAee2u-2t-vt0j9hIvEvJeJYo8iFUIhKCCbRhWdOMxYD8qS_gTvVNfJPkAiLbpcHbk_RZ5ap6ui7LlW2IpgqSYIPltxWfkbDb5o9_gHNHXeWI0A/s1600/black_arrow.png) no-repeat;
  width: 180px;
  height:35px;
  position: absolute;
  top: 25px;
  left: -25px;
  text-align: center;
  color:#fff;
  padding: 20px 12px 10px;
  font-style: normal;
  z-index: 2;
  display: none;
  }

  
  
• Setelah itu letakkan kode di bawah ini di atas </body>
  
  
  

  
  

  
  

  
  

  <ul class='menu2'>
  <li>
  <a href='/' title='Go to Homepage'>Home</a>
  </li>
  <li>
  <a href='http://mr-mrs-noname.blogspot.com/search/label/Tip%27s%20n%20Trick%27s%20Blog' target='blank' title='Tips n Trick Blogger'>Tips n Tricks</a>
  </li>
  <li>
  <a href='http://mr-mrs-noname.blogspot.com/search/label/Komputer' target='blank' title='Pengetahuan Tentang Komputer'>Komputer</a>
  </li>
  <li>
  <a href='http://mr-mrs-noname.blogspot.com/2010/12/tuker-link-yuuuk-sooob.html' target='blank' title='Tukeran Link Yuk,Jadi Teman Gitu'>Link Exchange</a>
  </li>
  <li>
  <a href='http://mr-mrs-noname.blogspot.com/2010/11/buku-tamu.html' target='blank' title='Comment Or Request'>My Shoutmix</a>
  </li>
  

• Selesai sudah!. Kini sobat tinggal simpan template dan lihat hasilnya.

Contoh :



Sekian terima kasih, mohon komentarnya ya sob..
Share juga ke teman-teman sobat yang lain ya..