Monday, June 26, 2017

Simple Tooltips Like Mine

Hasil gambar untuk pink peach tumblr photography
Assalamu'alaikum. Di pagi hari ini Shafia menerima request dari Sasha, cara membuat tooltips seperti milik Shafia. Mari kita lihat tampilannya di bawah ini, keep reading ya
sebelum dan sesudah {gambar di atas dari ka Salsa}

Let's follow this steps :
  • Masuk akun blogger seperti biasa
  • Pilih Template dan klik Edit HTML (bagi pengguna blogskin cukup pilih Template aja)
  • Cari kode di bawah ini dengan bantuan Ctrl + F
</head>
  • Copy kode di bawah ini dan paste di bawah kode yang dicari tadi
<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 :
]]></b:skin>
  • Paste kode ini tepat di atasnya :
#s-m-t-tooltip {
position:absolute;
    margin-top: 15px;font-family:'times new roman';
    z-index:9999;color:#797777;font-size:11px;
    background:#f8f8f8;padding:3px;font-style:italic;
    border-bottom:1px solid pink;
-webkit-box-shadow: 1px 1px 8px 1px rgba(247,247,247,1);
-moz-box-shadow: 1px 1px 8px 1px rgba(247,247,247,1);
box-shadow: 1px 1px 8px 1px rgba(247,247,247,1);
}
  • Lalu klik save template.
  • Apabila terjadi kesalahan, tolong segera konfirmasi kepada Shafia (wadeuh... 😝) nanti biar Shafia membantu kamu sebisa mungkin. Thankyou to Sasha for request.

No comments:

Post a Comment