Customize Tooltip #3

       Assalamu'alaikum semuanyaa! Awali harimu dengan senyuman /korban iklan/ Oke oke back to topic. Aku buat kode ini sendiri dan khusus untuk template classic! Bagi yang ingin repost or tutorial, don't forget to put the clickable credits:)

After being customize...
Live preview

• Go to template > cari kode </head>
• Paste kode ini tepat dibawah 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>

• Kemudian, cari lagi kode </style>
• Letakkan kode ini tepat diatas kode </style> tadi.

#s-m-t-tooltip {
    max-width:250px;
    background: #f1f1f1;/* change the background color */
    font-size: 10px;/* change the font size */
    line-height: 13px;
    border: 2px solid #ededed;
    font-style:italic;
    font-family: consolas;/* change the font */
    letter-spacing: 2px;
    text-transform: none;/* 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: 0px;
    position: absolute;
    margin-left:10px;
    margin-top:16px;
}

• Sebelum disave, edit terlebih dahulu kode kode yang berwarna.
• Setelah itu, silahkan save.

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest