Membuat Tombol DEMO dan DOWNLOAD Dengan Efek SLIDE

Membuat Tombol DEMO dan DOWNLOAD Dengan Efek SLIDE - Sobat blogger semua kali ini ANDIKNET akan membagikan tutorial yaitu membuat tombol DEMO dan DOWNLOAD dengan efek slide,,

Membuat Tombol DEMO dan DOWNLOAD Dengan Efek SLIDE



Cara Membuat Tombol DEMO dan DOWNLOAD dengan Efek SLide.

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> dan letakkan kode berikut di bawahnya, atau di atas code </style>
.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover h1{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.download-info h1{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info h1{background-color:#fff;}

4.Simpan template.
5. Gunkan kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML) untuk menerapkannya dalam postingan.

<div class="download download-info">
<h1>DOWNLOAD</h1><ul>
<li><a href="http://www.andiknet.com/" target="_blank"> DEMO </a></li>
<li><a href="http://www.andiknet.com/" target="_blank"> DOWNLOAD </a></li>
</ul></div>

Silahkan ganti url warna merah diatas dengan link DEMO dan Link DOwnload milik anda.
Anda baru saja membaca artikel yang berjudul Membuat Tombol DEMO dan DOWNLOAD Dengan Efek SLIDE Silahkan baca artikel dari ANDIKNET Tentang , , Yang lainnya. Dan Anda juga bisa bookmark halaman ini dengan URL :

2 Responses to "Membuat Tombol DEMO dan DOWNLOAD Dengan Efek SLIDE"

  1. keren mas gan tombol downloadnya... boleh tak cobain buat blog download saya

    BalasHapus

Berkomentarlah dengan sopan.. dan jangan membuat spam,,,