Senin, 13 Juni 2016

Sweet Tooltips


Halloooo!!
Kali ini mau kasih tutorial cara membuat tooltips. Kalau mau tau, readmore aja


Gimana? Tertarik untuk mencoba membuatnya di blog kamu? Caranya gini:
  • Login ke blogger
  • Dasbor blogger >> Template
  • Edit HTML
  • -Cari kode ini untuk Denim Template dan Simple Template
]]></b:skin>
          -Cari kode ini untuk blogskins
</style>

  •  Copy Paste kode ini diatas kode yang tadi telah kamu cari
#s-m-t-tooltip {
background: url(URL BACKGROUND);
font-size: 9px;
line-height: 11px;
font-family: arial;
letter-spacing: 2px;
text-transform: lowercase;
color: #fff;
text-align: center;
padding: 5px 10px 5px 10px;
display: block;
border-radius: 5px;
margin: 24px 14px 7px 12px;
}

  • Cari kode di bawah ini untuk denim dan simple template
</head> 
          Cari kode di bawah ini untuk blogskins
</html>

  • Copy kode ini diatas kode yang baru saja kamu cari ya
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>
Note :
Untuk pasang pada link :
<a href="http://chiaki-tachikawa.blogspot.com/" title"chiaki tachikawa" />
Ganti dengan yang kalian inginkan ^^
Untuk pasang pada gambar :
<img src="http://blablabla.com/" title="terserah kalian" />

Oke, semoga berhasil ya :D
Credit: Chiaki

1 komentar: