5/05/2015

Cara Membuat Tombol Berganti - ganti Warna

Sesuai topik diatas pada kesempatan kali ini admin akan share cara membuat tombol berganti - ganti warna. Selain untuk mempercantik tampilan blog, tampilan tombol yang berganti - ganti warna menjadi daya tarik tersendiri bagi para pengunjung blog untuk mengklik tombol tersebut. Tapi nggak ada jaminan juga sih, hehe
Tombol ganti - ganti warna bisa agan gunakan semisal untuk membuat tombol Join This Site, tombol untuk link downoad dan masih banyak kegunaaannya. Untuk Demonya agan bisa lihat tombol Join this site yang ada di bagian navigasi web ini atau lihat dibawah ini. Sangat menarik bukan ? hehe.

Cara Membuat Tombol Berganti - ganti Warna
Jika agan pengen membuat tombol seperti itu agan cukup menambahkan CSS berikut di atas ]]></b:skin> atau di bawah <style>


.buttonz{
display:inline-flex;
border-radius:4px;
cursor:pointer;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
color:#FFF!important;
background:url(http://1.bp.blogspot.com/-8ajTcOaRwVU/VJ_Z9jExy2I/AAAAAAAAAwg/b-ae25VRCHM/s1600/rainbow.png);
background-size:cover;
padding:8px 25px;
text-shadow:none;
transition:all 1s;
}
.buttonz:hover, .buttonz:hover, .buttonz.link:hover {
box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);
}

Kemudian Jangan lupa tambahkan script berikut agar warnanya berjalan.


<script src='http://yourjavascript.com/1583214855/blanter-timeago.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(e){e(&quot;abbr.timeago&quot;).timeago()})
var intval = null;
var pos = 0;
$(document).ready(function() {
intval = window.setInterval(moveBg, 70);
});
function moveBg() {
pos++; 
$(&#39;.buttonz&#39;).css({backgroundPosition: (pos * 1) + &#39;% 1px&#39;});
}</script>

Untuk penerapan tombolnya Sebagai berikut :

<a class="buttonz" href="LINK-Kamu">DOWNLOAD</a>

Ganti LINK-Kamu dengan link yang akan dituju dan DOWNLOAD bisa agan ganti dengan nama Link tombol agan.
Tombol ini bisa agan ,modfikasi sesuai selera agan. Sekian tutorial cara membuat tombol berganti -ganti warna. Jika masih bingung silakan berkomentar.

My FB      : Anonymous Hacker

Sampai jumpa kembali
Terima Kasih telah mengunjungi Blog saya !!!

0 komentar: