Membuat Tombol Download Dan Demo Di Blogger Ibarat Arlina Design
Membuat tombol download dan demo tentu saja akan memudahkan pengunjung dalam mengetahui dimana link diletakkan.
Untuk menciptakan demo dan download tidak selamanya memakai cara yang sama, alasannya yakni ada begitu banyak cara yang sanggup dilakukan dengan hasil serta desain yang tentu saja berbeda-beda.
Meskipun berbeda tapi tujuan serta fungsi tombol demo dan download tentu saja sama.
Tidak hanya tombol demo dan download saja, tombol di bawah ini sanggup anda ubah dengan nama yang anda inginkan serta sanggup dibentuk banyak dalam satu postingan.
Membuat Tombol Demo Dan Download Seperti di Arlina Design
Pertama masuk ke "Blogger" > pilih sajian "Tema" > klik "Edit HTML".
Copy isyarat di bawah ini dan letakkan di atas isyarat </head>
<style type="text/css"> /* button by tuan siput */ body{ font-family: Arial, Helvetica, sans-serif; margin:0; } .container { display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; width: 50vw; margin: 0 auto; min-height: 0vh; } .btn { flex: 1 1 auto; margin: 8px; padding: 15px; text-align: center; text-transform: uppercase; transition: 0.15s; background-size: 400% auto; color: white; /* text-shadow: 0px 0px 0px rgba(0,0,0,0.2);*/ box-shadow: 0 0 20px #eee; border-radius: 3px; text-decoration: none; } .btn:hover { background-position: right center; /* change the direction of the change here */ } .gradien-tuansiput{ background-image: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} /* Magic End*/ </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> Untuk memasang tombol, maka masuk ke sajian "Postingan" > klik Entri baru.
Copy isyarat berikut dan masukan ke dalam "Tab HTML" bukan (compose)
<div class="container"> <a href="#" class="btn gradien-tuansiput">Demo</a> </div> <div class="container"> <a href="#" class="btn gradien-tuansiput">Download</a> </div> Kode di atas tidak selamanya harus Demo dan Download. Anda sanggup menggantinya dengan banyak sekali macam nama yang anda sukai. Sumber https://www.tikusmales.com/
