Membuat tombol download dan demo yang keren di bloggersebenarnya sangatlah mudah sama seperti membuat text link biasa, namun bedanya link tersebut kita ubah menjadi sebuah tombol atau button menggunakan css agar lebih menarik dan memberikan kesan yang berbeda dari link biasanya.
Nah penggunaan tombol download dan demo ini sangatlah berguna untuk anda yang memiliki niche download atau tutorial, karna dengan menggunakan tombol download dan demo yang keren ini akan membuat blog anda terasa sangat profosional.
Bagi anda yang ingin mencobanya
silahkan simak tutorial berikut ini
Cara membuat tombol download dan demo yang keren di blog
Berikut Tampilan Tombol Download Dan Demonya
Nah pertama tama silahkan login akun blogger anda terlebih dahulu
Setelah itu pada halaman dashbord klick tema > edit html
Kemudian copy dan paste script di bawah ini tepat di atas code ]]></b:skin>atau </style>
.download, .demo {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #49ACE1;
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;
}
.download:hover, .demo:hover {
opacity: .85;
}
.download:before, .download:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.demo:before, .demo:after {
content: '\f06e';
font-family: FontAwesome;
display: block;
position: absolute;
left: 5%;
top: 20%;
}
.download:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.download: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;
}
.download:hover:after, .demo: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;
}Terakhir klick simpan tema
Untuk penggunaannya silahkan simak tutorial berikut
Cara Menggunakan Tombol Downoad Dan Demo Di Postingan Blog
Nah untuk menggunakannya sangatlah gampang anda hanya perlu menambahkan code class="demo"untuk tombol demo dan class="download" untuk tombol download
Caranya silahkan login akun blogger anda
Setelah itu pada menu postingan klick edit pada artikel yang ingin anda tambahkan tombol download atau demo di dalamnya
Silahkan masuk ke mode HTML bukan
Kemudian cari link yang ingin anda ubah dan tambahkan class sesuai button yang anda inginkan
Contohnya :
<a href="https://link-yang-dituju/">Demo / Download</a>menjadi
<a class="demo" href="https://link-yang-dituju/">Demo</a>atau
<a class="download" href="https://link-yang-dituju/">Download</a>Penutup
itulah tadi artikel mengenai Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog, semoga dapat bermanfaat bagi anda.
Dan jika anda mempunyai pertanyaan mengenai artikel di atas silahka kirim pertanyaan anda melalui kolom komentar di bawah
akhir kata
see you next time and happy blogging
Advertisement