Friday 12 July 2013

JQuery MP3 Player Hover Like Mine

Hello, readers'-')/
Teman kita, Zahra, dia request tutorial ini.
Coba lihat pojok kiri atas blog Salsa, ada icon hati warna-warni kan? coba arahkan cursor-mu ke icon itu~! Ada mp3 player-nya kan? Nah, itu dia yang ingin Salsa bahas. Ada yang minat? Ayo kita buat~!
  • Template > Edit HTML > Tekan Ctrl + A > Tekan Ctrl + C > Tekan Delete > Tekan Ctrl + V
  • Tekan Ctrl + F di keyboard, lalu cari kode ini
]]></b:skin>
  • Done? Copy kode ini dan paste-kan di atas kode yang kamu cari tadi. 
.love{ padding:10px; border-bottom-right-radius:5px; background:#fff; } #note{ text-align: center; position:fixed; left:28px; top:-50px; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; z-index:999; } #note:hover { top:-5px; } #open-note { height:45px; background:transparent border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; width: 50px; text-align:center; }
  • Preview dulu, kalo gak ada error, save~! 
  • Go to Layout > Add a Gadget > HTML/JavaScript
  • Copy kode di bawah ini 
    <div id="note"> <div class="love"> CODE LAGU </div> <div id="open-note"><br /><img src="Url Icon Music" /></div></div>
  • Silahkan save dan lihat hasilnya ^^
 http://sl.glitter-graphics.net/pub/439/439087zf2mcug0by.gif
 http://dl5.glitter-graphics.net/pub/220/220645u9r9sjvsfp.gif
 http://dl.glitter-graphics.net/pub/695/695351ug3twpiwlh.gif
  http://dl2.glitter-graphics.net/pub/122/122842r9l2jjtjaf.gif

2 comments:

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