Link Dan Gambar Dengan Effect Tooltip
Di season ke 2 ini saya kembali untuk berbagi buat sobat blogging semua
Kali ini saya akan bagikan cara membuat link atau gambar dengan effects
Tooltip, namun pada kesempatan kali ini yang saya sajikan bukan sebatas
Tooltip pada umum nya, karena ada sedikit berbeda dari yang ada simak
Silahkan cursor anda pada gambar di bawah ini sebagai DEMO nya :
Cara memasangnya :
Masuk account anda jangan lupa sign in, kemudian pilih edit template
Cari kode </head> tekan Ctrl + f untuk memudahkan pencarian kode
Selanjutnya copy kode di bawah ini dan paste tepat diatas kode </head>
<link rel="stylesheet" media="screen" href="css/jimp.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jimp.js"></script> <script type="text/javascript"> $(function() { $('#example a').jimp(); }); </script>
02.
Kali ini saya akan bagikan cara membuat link atau gambar dengan effects
Tooltip, namun pada kesempatan kali ini yang saya sajikan bukan sebatas
Tooltip pada umum nya, karena ada sedikit berbeda dari yang ada simak
Silahkan cursor anda pada gambar di bawah ini sebagai DEMO nya :
Cara memasangnya :
Masuk account anda jangan lupa sign in, kemudian pilih edit template
Cari kode </head> tekan Ctrl + f untuk memudahkan pencarian kode
Selanjutnya copy kode di bawah ini dan paste tepat diatas kode </head>
<link rel="stylesheet" media="screen" href="css/jimp.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jimp.js"></script> <script type="text/javascript"> $(function() { $('#example a').jimp(); }); </script>
Setelah terpasang kode CSS nya jangan lupa save template blog anda
Kostumisasi penerapan effects tooltip
Ada dua metode yang bisa Anda lakukan untuk mengaktifkan plugin ini pada elemen.
Pertama, mengarahkan tautan langsung kepada URL gambar.
Ke dua, mengarahkan tautan ke sebuah halaman situs, kemudian mengeset nilai tooltip
dengan URL gambar yang disimpan di dalam atribut data di bawah ini sript nya
01.
<a href="large-image.jpg" title="Your Title"><img src="thumbnail.jpg" alt="thumbnail" /></a>02.
<a href="page-url.html" data-preview="large-image.jpg" title="Your Title">This is an example link!</a>
Categories
:
Tutorial Blogger
Tes
BalasHapuswahhh kereeenn nih mbak Ilmunya bisa saya simpen :) hehe makasii yaaahh salam kenal dari Cinta Teknologi ^_^
BalasHapus