Monday 2 December 2013

Customize Tooltips

   Assalamu'alaikum! Aku bawa tutorial baru nih! Credit code ke kak Ehza. Khusus untuk template classic! Lihat versi kedua disini^_~
After being customize..
Follow steps nya baik baik ya, semoga berhasil!
  • Go to Template > cari kode </head>
  • Paste kode ini tepat di bawah kode </head>
<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>
  • Sudah? cari lagi kode </style>
  • Kemudian paste lagi kode ini tepat di atas kode</style>
#s-m-t-tooltip {
    max-width:250px;
    background: #F1F6FF;/* change the background color */
    font-size: 10px;/* change the font size */
    line-height: 13px;
    box-shadow:inset 0px 0px 2px 2px #E6EEFF;
    font-style:italic;
    font-family: Georgia;/* change the font */
    letter-spacing: 2px;
    text-transform: lowercase;/* can be lowercase, uppercase, none */
    color: #222222;/* change the text color */
    text-align: center;
    padding: 3px 4px 3px 6px;
    display: block;
    z-index: 100;
    border-radius: 5px;
    position: absolute;
    margin-left:10px;
    margin-top:16px;
}
Edit the code :
Merah : warna background
Biru : nama font
Fuchsia : warna tulisan tooltips
How to use the tooltips?
Copy below code and paste it anywhere you want it to appear...

<a href="http://www.anugerahsalsa.co.vu/" title="AnugerahSalsa♥">Hover here !</a>

The blue highlighted text : the link.
The pink highlighted text : the title of the tooltips.
Re-tutor? re-contribute? re-post? Please give my blog url under your post!

10 comments:

  1. Thank's For Tuto Kak ! Udah Lama Nyari Tuto Gini:*

    ReplyDelete
  2. Makasih udah share.. 100% worked!! hehe

    ReplyDelete
  3. Ya ampun kak Salsaa.. :) Makasih banget ya,. Dari dulu aku ngak ngerti tuto ini, setelah aku cermati, aku bisa kak :)

    ReplyDelete
  4. Mmhh Bisa sih kak,. Tapi kok.. Keluarnya ngak ada Background nya ya?

    ReplyDelete
  5. Huahaha.. Kaak.. Ternyata aku naronya harus di atas ]]>

    ReplyDelete

 
Copyright © 2013-2017 By Anugerah Mullia Ulfa Salsabella. All Rights Reserved.