Home Owner Affies Stuffs Themes


March 28, 2015

Customize Tooltips #1







Hai para readers... berhubung belum waktunya hiatus, aku mau post cara untuk customize your tooltips. Check it out!

  • Log In Blogger
  • Di template, kalian cari kode </head>
  • Copy kode ini dan paste 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>

  • Setelah itu, cari kode </style>
  • Copy code ini dan paste di atas kode </style> :
#s-m-t-tooltip {
font:8px Arial;
color:#ffbcbc;
text-transform:uppercase;
letter-spacing: 1px;
background: #eee;
display: none;
position: absolute;
z-index: 9999999;
padding: 2px 5px 2px 5px;
max-width: 150px;
margin: 10px;
border: 1px double #ffd9d9;
border-radius:15px;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
}

  • Merah : warna tulisan
  • Hijau : warna background
  • Oranye : jenis border
  • Ungu : warna border
  • Save dan done!
Note: Untuk Designer template, maka kode CSS di paste di atas kode ]]></b:skin>
Script Credit : kak Salsa
Re-Post? COMMENT PLEASE......... :-)


Thanks For Reading..... Leave Your Comments ^_^



4 comments:

  1. makasih ya tuto-nya. sangat bermanfaat!!!

    ReplyDelete
  2. Terima kasih Kak Nyimas. Menjadi lah tutorial ni :) Thanks a lot :)

    ReplyDelete

Just Comment Here! I'm not a Wolf...