Cara Membuat Tombol Download dan Demo di Blog

Cara Membuat Tombol Download dan Demo di Blog - Mungkin sebagian dari kita belum tahu bagaimana membuat tombol download/demo pada postingan blog. Maka sebab itu, pada tutorial blogging kali ini saya akan membagikan tutorial tersebut.

Membuat tombol download atau demo mungkin tidak berguna pada blog yang mempunyai niche selain blog download, namun tombol/button tersebut sangat dibutuhkan pada blog dengan niche download apk maupun niche template blog. Sebenarnya jika kita tidak membuat button download pada postingan juga tidak masalah.

Namun, dengan adanya tombol ini dapat memperbagus tampilan postingan dan juga terlihat rapih. Dari kelebihan diatas masih ada lagi keuntungan lain, yang paling utama adalah bisa membuat situs web download lebih terlihat profesional

dimata para pengunjung blog itu sendiri.

Blog yang membahas tentang download tidak sedikit bahkan bisa sampai ratusan ribu blog download. Oleh sebab itu, kita perlu memperbagus tampilan blog agar terlihat lebih profesional, salah satunya dengan cara membuat tombol download dan demo pada postingan blog.

Buat yang penasaran dengan tampilannya, kalian bisa lihat dibawah ini. Sepert inilah tampilannya.

Bagaimana, keren bukan. Buat kalian yang ingin membuat button tersebut, sebaiknya simak langkah-langkat berikut.

Membuat Tombol Download dan Demo di Blog :

1. Pastikan kalian sudah login ke dasboard blogger masing-masing.

2. Klik pada menu Template/Tema

3. Klik Edit HTML, sebelum mengedit html sebaiknya kalian backup dulu untuk berjaga-jaga jika ada masalah.

4. Copy dan Pastekan kode dibawah ini tepat diatas kode ]]></b:skin> agar lebih mudah mencarinya, tekan CTRL+F.

/* Tombol Download */
.buttonDownload {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #5673bb;
color: white !important;
font-weight: 500;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
}
.buttonDownload:hover {
opacity: .85;
}
.buttonDownload:before, .buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.buttonDownload:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.buttonDownload:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload:hover:after {
animation-play-state: running;
}
@keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
/* Tombol demo*/
.buttonDemo {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #ec3434;
color: white !important;
font-weight: 500;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
}
.buttonDemo:hover {
opacity: .85;
}
.buttonDemo:before, .buttonDemo:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.buttonDemo:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}

5. Jika kalian sudah selesai, klik save template, pemasangan CSS selesai.
6. Untuk menampilkan tombol di postingan, copy dan paste kode dibawah ini, pada mode HTML jangan Compose, untuk posisi bisa ditentukan sesuai keinginan.

<a class="buttonDemo" href="https://www.blogger.com/null">Demo</a>
<a class="buttonDownload" href="https://www.blogger.com/null">Download</a>

7. Ubah "https://www.blogger.com/null" dengan link file kalian.
8. Lalu klik Publikasikan, dan lihat hasilnya.

Kira-kira begitulah cara membuat tombol download dan demo menggunakan CSS di blog, gimana bukan buka. Buat yang masih bingung atau merasa kesulitan kalian bisa tinggalkan komentar di postingan ini, insyaalah akan saya bantu sebisa saya.

Baiklah cukup sampai disini dulu tutorial kali ini. Semoga dengan adanya tutorial ini dapat membantu kalian semua. Terima Kasih.

Share this post