Tombol Back To Up Roket Meluncur
Tombol Back To Up Roket Meluncur - pada
postingan kali ini saya akan membagikan bagaimana caranya cara masang tombol
Back to UP yang unik dan beda dari lainya.Artikel ini sebenarnya saya dapetin
dari Blogger kece a.k.a cantik yaitu arlina dengan url webnya www.arlinadzgn.com
baiklah langsung aja ya.
1.Buka Blogger > Klik Template
> Edit Html > cari kode ]]></b:skin>
atau </style> kemudian
salin kode berikut tepat di atasnya
CSS/*
Back to Top Roket meluncur */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png)
50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s
cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform
.6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s
cubic-bezier(.6,.04,.98,.335),opacity .6s
cubic-bezier(.6,.04,.98,.335),-moz-transform .6s
cubic-bezier(.6,.04,.98,.335);transition:visibility .6s
cubic-bezier(.6,.04,.98,.335),opacity .6s
cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur
i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png)
50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform
.2s;-moz-transition:-moz-transform .2s;transition:transform
.2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50%
0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50%
-62px}
#rocketmeluncur:hover
i{background-position:50% 100%;-webkit-animation:flaming .7s
infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s
infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50%
-62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket
i{background-position:50%
100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}
2.Selanjutnya ,salin kedua kode di
bawah tepat di atas kode </body>
HTML
Jquery
3.Simpan dan Lihat hasilnya
style="text-align:
center;">
Result
Click here
EmoticonEmoticon