Link Download Vertikal Dengan Animasi

Link vertikal adalah link bertingkat yang menghubungkan kepada suatu landing page untuk keperluan tertentu, seperti link download. Link ini untuk memudahkan pengunjung untuk mengakses file atau situs tertentu yang berhubungan dengan blog anda. Link vertikal ini menggunakan animasi, sehingga link tersebut terlihat aktif ketika bersentuhan dengan cursor. Tampilannya dijamin stylis dan dapat menjadi daya tarik tersendiri bagi blog anda. Sekarang mari kita bahas cara membuat link download vertikal dengan animasi, ikuti langkah berikut.

LIHAT DEMO
Log in ke blogger
Klik Template
Klik Edit HTML
Klik Lanjutkan
Masukkan kode berikut di atas kode ]]></b:skin>

.a-blogonol{background:#a9db80;background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));background:-webkit-linear-gradient(top,#a9db80 0%,#96c56f 100%);background:-moz-linear-gradient(top,#a9db80 0%,#96c56f 100%);background:-o-linear-gradient(top,#a9db80 0%,#96c56f 100%);background:linear-gradient(top,#a9db80 0%,#96c56f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9db80',endColorstr='#96c56f',GradientType=0 );padding-left:90px;padding-right:105px;height:65px;display:inline-block;position:relative;border:1px solid #80ab5d;-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 3px rgba(0,0,0,0.2);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 3px rgba(0,0,0,0.2);box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 3px rgba(0,0,0,0.2);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;float:left;clear:both;margin:10px 0px;overflow:hidden;-webkit-transition:box-shadow 0.3s ease-in-out;-moz-transition:box-shadow 0.3s ease-in-out;-o-transition:box-shadow 0.3s ease-in-out;transition:box-shadow 0.3s ease-in-out}
.a-blogonol img{position:absolute;left:15px;top:13px;border:none;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.a-blogonol .a-blogonol-slide-text{position:absolute;font-size:36px;top:18px;left:18px;color:#6d954e;     opacity:0;text-shadow:0px 1px 1px rgba(255,255,255,0.4);-webkit-transition:opacity 0.2s ease-in-out;-moz-transition:opacity 0.2s ease-in-out;-o-transition:opacity 0.2s ease-in-out;     transition:opacity 0.2s ease-in-out}
.a-blogonol-text{padding-top:5px;display:block;font-size:30px;text-shadow:0px -1px 1px #80ab5d}
.a-blogonol-text small{display:block;font-size:11px;letter-spacing:1px}
.a-blogonol-icon-right{position:absolute;right:0px;top:0px;height:100%;width:80px;border-left:1px solid #80ab5d;-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset}
.a-blogonol-icon-right span{width:38px;height:38px;opacity:0.7;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;position:absolute;left:50%;top:50%;margin:-20px 0px 0px -20px;border:1px solid rgba(0,0,0,0.5);background:#4e5c50 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq1x8q9abcvKHGLWn9RxEdmmF7TPhBbk3iL05byaon1tV-pGFVURxJf_aVGAWDHZuMV9y9CHyWojyU94xrG52WR_Aaa_bGuk9jgnI8C_y3Em8zsCyRmRzY4tb8FSQV8XjF8f8CNuW9V0lf/s1600/arrow_down_black.png) no-repeat center center;-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset,0px 1px 2px rgba(255,255,255,0.5);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset,0px 1px 2px rgba(255,255,255,0.5);  box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset,0px 1px 2px rgba(255,255,255,0.5);-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.a-blogonol:hover{-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 5px rgba(0,0,0,0.4);box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 1px 5px rgba(0,0,0,0.4)}
.a-blogonol img{margin-top:-15px}
.a-blogonol:hover img{-webkit-transform:scale(10);-moz-transform:scale(10);-ms-transform:scale(10);  -o-transform:scale(10);transform:scale(10);opacity:0}
.a-blogonol:hover .a-blogonol-slide-text,
.a-blogonol:hover .a-blogonol-icon-right span{ opacity:1}
.a-blogonol:active{position:relative;top:1px;background:#80ab5d;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;  border-color:#a9db80}
.a-blogonol:active .a-blogonol-icon-right span{-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);-o-transform:scale(1.4);transform:scale(1.4)}

Klik Simpan Template
Selanjutnya klik Tata Letak
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div class="content">
<div class="button-wrapper">
<a href="Link Anda di Sini" class="a-blogonol">
<span class="a-blogonol-slide-text">$10</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTF_F1mGjGhsMozj_vSVtfoZPVfb8VtByocsNPiCE2hlIGyRP3eweXIA6CI9etHgIu0YRxKf2b2UXYQNEkx2k_wO_hRxmAC0jFiLIFkzvxgFCEpDKI3P7znKOaBVGABw6g6ctIbLO6a3V-/s1600/1.png" alt="Judul Photo" />
<span class="a-blogonol-text"><small>Nama Produk</small> NAMA USAHA</span>
<span class="a-blogonol-icon-right"><span></span></span>
</a>
<a href="Link Anda di Sini" class="a-blogonol">
<span class="a-blogonol-slide-text">$25</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaLufusU2YYmOqc3rBHcgH-2x7fW4apFnpJ0Lr5AoA1V3nAUPKwrBGL7ITiRQLkb45YZE76yauXUL09NoXhDFto8Xv11uhK0JeG54w3Jn21qXazOn2VR0t-W_JJ6K6GdiCPsZU8otl1h0b/s1600/2.png" alt="Judul Photo" />
<span class="a-blogonol-text"><small>Nama Produk</small> NAMA USAHA</span>
<span class="a-blogonol-icon-right"><span></span></span>
</a>
<a href="Link Anda di Sini" class="a-blogonol">
<span class="a-blogonol-slide-text">$50</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTurl24p7qpKTC0eQ0enChgrZxAwFNgRZQztxKHIK_lhVOpJWBWyKhcHzTOvS-XC_Jl8q1DH0GFkLG9r7RqBEgsSPdk3EEEA98ygbF2YZ1-W0rXzfjn4W2ZjOqb228OGkHkV7G4ty83Zop/s1600/3.png" alt="Judul Photo" />
<span class="a-blogonol-text"><small>Nama Produk</small> NAMA USAHA</span>
<span class="a-blogonol-icon-right"><span></span></span>
</a>
<a href="Link Anda di Sini" class="a-blogonol">
<span class="a-blogonol-slide-text">$75</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-6ZHrLdJw0QDE0kkn66D2upouHVuZRWE0ZfZqkzcXpSLm7OMq-ShXXik4O0IQDaCQC6hRg50vMGclXD1hdccTcF-nQGyqA26qzJWhiJrA9uRmTq6BY9vq5Usi3K-DBgHmP-yYwdMZjkDu/s1600/4.png" alt="Judul Photo" />
<span class="a-blogonol-text"><small>Nama Produk</small> NAMA USAHA</span>
<span class="a-blogonol-icon-right"><span></span></span>
</a>
</div>
</div>

Ganti semua tulisan cetak tebal sesuai petunjuk. Kode dengan cetak tebal warna biru adalah kode gambar, silahkan ganti dengan kode gambar anda. Ukuran 64px X 64px.
Klik Simpan dan tempatkan sesuai keinginan lalu lihat hasilnya. Demikian tutorial cara membuat link download vertikal dengan animasi. Semoga bermanfaat bagi semua. Selamat mencoba dan sukses selalu.

Thanks to bloggertrix.com for script

"keep spirits and do the best"