Cara Menciptakan Tombol Download Animasi Blink

Cara Menciptakan Tombol Download Animasi Blink

Cara Menciptakan Tombol Download Animasi Blink

Button Animasi Blink - Animasi sanggup dipadukan dengan tombol Download , pada perpaduan ini mempunyai effeck blink yang muncul dari image berformat GIF  membuat tampilan tombol menjadi hidup . Image sanggup juga di padukan dengan background pada Button .



Berikut ini cara pembuatannya :

1. Anda login keakun Blogger
2. Pilih Template , kemudian klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>
4. Kemudian salin instruksi dibawah ini dan pasangkan diatasnya

.button_block {
position: relative;
top: 55px;
right: px;
width: auto;
height: auto;
z-index: 4;
background: transparent;
}
#container {
width: 728px;
height: 90px;
overflow: hidden;
position: relative;
background: #FFFFFF;
color: #000;
font-size: 12px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}
#Button5 {
left: 0px;
top: -50px;
position: relative;
display: inline-block;
white-space: nowrap;
}
a.left_Button5 {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJouatA0zzttLLWR8TnDfNDfmnQHnpNLP6qX7BGX6g12ZzDqxx0FiEoy2fxkZ0V_Ft1ZQ2qPWUf_d19isyUYupXtLPK4lQHwrrHrln_MGSev3C0Bga8c8U2fyci2xDPNhO0ehtuwIjtsQ/s1600/www.aak-share.com-Green.gif) top left no-repeat;
height: 30px;
width: 110px;
font-size: 12px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
color: #ffffff;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-align: center;
padding-left: 1px;
margin-top: -100px;
}
a.left_Button5:hover {
color: #000000 !important;
text-decoration: underline !important;
}

5. Simpan Template
6. Selanjutnya Anda menuju Entri gres , salin instruksi di bawah ini dan terapkan pada Mode HTML

<span class="button_block">
<span class="spacer_Button">
<!--  -->
<span id="container_Button5">
<span class="right_Button5">
<span class="Button5">
<a class="left_Button5" href="http://www.aak-share.com/" target="_blank">
<span id="Button5">
<!--  -->
Continue</span>
</a></span>
</span>

7. Publikasikan

Semoga bermanfaat!

Sumber http://www.websiteedukasi.com/
Blogger
Disqus
Pilih Sistem Komentar

No comments

Advertiser