Memasang Tombol Demo/Download di Blog

Agar link download menjadi lebih menarik dan keren maka kita harus membuat tombol download khusus. Tujuannya adalah untuk membedakan link download dengan link-link yang lainnya. Supaya pengunjung tidak salah klik juga. Dengan menambahkan css maka kita bisa membuat tombol demo dan download.

Tombol demo dan download dikhususkan untuk blog download template tapi jika anda memiliki blog download lain anda bisa menghapus tombol demo dan hanya menyertakan tombol download saja. Selain itu anda bisa mengatur css tombol demo dan download sesuka kalian sesuaikan dengan tema tampilan blog anda biar serasi.

Cocok untuk blog download dengan memasang tombol demo dan download maka akan menarik perhatian pengunjung. Pengunjung tidak bingung membedakan mana link download. Keren dan menarik.

Apa tombol demo dan download ini responsive? Aman tombol download dan demo ini responsive dan mobile friendly. Jadi ketika dibuka di hp tidak pecah atau terpotong. Tertarik untuk memasang tombol download dan demo? Berikut langkah-langkahnya.

Cara Membuat Tombol Download dan Demo

Langkah 1 (Lompati langkah ini jika anda sudah memasang js font awesome di blog)

Buka blogger, pilih Tema → Edit HTML. Salin kode dibawah ini dan letakkan diatas kode </head>

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> 

Langkah 2

Salin kode berikut dan pastekan diatas kode </style>

 .whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
} 

Simpan template.

Langkah 3

Untuk memanggil/menggunakan tombol demo dan download silakan salin kode ini dan pastekan di postingan anda ketika mode tab HTML bukan Compose

 <div class="whitebuttondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">1.6TB.rar</span></div> 

Ganti # dengan url link demo dan link download anda.

Selesai dan pratinjau postingan anda tersebut untuk melihat hasil sebelum dipublikasikan. Nah itu dia tutorial cara membuat tombol download dan demo keren. Semoga bisa membantu dan bermanfaat.

Kiraky Kiraky adalah penulis utama dari blog ini yang sudah aktif dalam menulis di blog sejak 2008 dan suka membuat artikel tentang informasi, tips, dan trick.

Berbagi :