Cara Menambahkan Tombol Efek Mengambang Di Blogspot

Menggunakan Tombol di Posting Blogger

 Dalam tutorial ini, Anda akan belajar cara mengatur Tombol CSS & HTML yang bagus dengan efek mengambang untuk posting blog blogger. Tombol digunakan untuk berbagai tujuan di blog Anda. Tombol status digunakan untuk mendapatkan informasi tentang hasil akhir dari topik yang sedang dibahas, dan tombol unduh digunakan untuk mengunduh data bagi pembaca blog. Hari ini, dalam tutorial ini saya akan menunjukkan kepada Anda beberapa kode CSS & HTML yang sangat bersih dan indah dengan efek hover setiap kali Anda mengarahkan kursor ke tombol unduh di posting blog Blogger .

Bagaimana Tombol Ini Bekerja?

Tombol - tombol ini dibuat menggunakan HTML dan CSS , beberapa di antaranya adalah tombol jQuery sederhana untuk dilihat dan diunduh . Dengan salah satu dari empat desain , Anda dapat membuat tombol di blogger  untuk berbagai tujuan, seperti tombol unduh dan demo , setiap kali Anda mengarahkan mouse ke tombol unduh untuk melihat efek animasi hover yang menakjubkan . Tombol lain yang  Anda buat sangat sederhana dan tidak begitu menarik . Tombol - tombol ini dibuat dengan tampilan font yang menakjubkan . Tidak seperti tombol lainnya, itu dilengkapi dengan tampilan gambar mengambang dan tombol unduh hover . Sekarang mari selami panduan untuk mempelajari cara menambahkan tombol unduh gaya untuk blogger .

Bagaimana Cara Menambahkan Tombol di Blogger?

Menambahkan Tombol ke blogger itu mudah dan sangat sederhana . Setiap pemula dengan keterampilan HTML & CSS yang baik dapat menambahkan kode HTML & CSS sederhana ini ke blog mereka. Blogger tidak mendukung plugin , jadi Anda harus mengedit HTML dan CSS untuk menambahkan kode ini secara manual ke template blogger Anda . Jangan takut untuk mencoba kode di template Anda . Anda dapat membaca panduan langkah demi langkah tentang  cara mengunggah kode HTML / CSS ini dan membuat tombol unduh ke dalam Posting blogger .

Bagaimana Cara Membuat Demo dan Tombol Download Di Blogger?

Tombol Demo - Tombol Demo adalah tombol blogger yang dapat diklik yang digunakan untuk menampilkan ikhtisar manual dan widget . Situs web yang menyediakan widget dan template memerlukan tombol demo untuk melihat tampilan widget atau template tersebut. Selain itu, ada blog dengan tombol demo untuk posting pendidikan yang memberikan pengalaman pengguna yang lebih baik bagi pengunjung.
Download Button-  The tombol download adalah blogger tombol yang dapat diklik digunakan untuk men-download target. Jika blog Anda Menyediakan Produk Digital untuk disimpan secara offlinemaka perlu tombol unduh di blog blogger Anda .
Jadi hari ini kita akan belajar cara menambahkan demo dan tombol unduh di posting blog blogger Anda .

Ini sangat sederhana dan mudah untuk menambahkan Tombol di posting blog Blogger , Cukup ikuti langkah-langkah sederhana yang diberikan di bawah ini.

Langkah:

Langkah 1: Buka Blogger.com

Langkah 2: Lalu pergi ke "Tema" dan Klik "Edit HTML".

Langkah 3:cari kode]]></b:skin>

Langkah 4: Kemudian Tempelkan/paste kode dibawah ini :

<style>
 @import url("https://fonts.googleapis.com/css?family=Muli:300,400,700,900");

body {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 100vh;
  font-family: "Muli", Arial, sans-serif;
}
.buttons > button{
  margin-right:30px;
} 
.btn-gradient{
  background:#1462ff;
  color:#fff;
  border-radius: 12px;
  padding:12px 48px;
  box-shadow: 0 6px 30px -10px #4a74c9;
  transition:all 0.5s ease;
  border:0;
  letter-spacing:1px;
  text-transform: uppercase;
}
.btn-gradient:hover{
  box-shadow: 0 0 0 0 rgba(0,40,120,0);
  transform:scale(0.93);
}
.gradient2{
  background-image: linear-gradient(60deg, #4aa5fb 10%, #1ccafa 50%, #00e1f9 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0px;
}
.gradient2:hover{
  border-top-left-radius: 0px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 12px;
}
.gradient3{
  background-image: linear-gradient(60deg, #8c38fe 10%, #b72ee4 50%, #9c66e5 100%);
  box-shadow: 0 2px 25px 0 rgba(111, 30, 138, 0.35);
}
.gradient3:hover{
  box-shadow: 0 10px 30px 0 #8c38fe, 0 5px 0 0 #9c66e5;
  transform:translateY(-5px);
}
.gradient4{
  background-image: linear-gradient(60deg, #43fa84 10%, #3afec0 50%, #38fee3 100%);
  box-shadow: 0 2px 25px 0 rgba(56,254,227,0.35);
}
.gradient4:hover{
  box-shadow: 0 10px 12px 0 #48f184b5, 0 8px 2px 0 #57b396;
  transform: rotateX(50deg);
}
</style>

Langkah 5: Sekarang "simpan tema".

Langkah 6: Tidak pergi ke Posting Blog Anda.

Langkah 7: Kemudian tempel kode HTML yang diberikan di bawah ini di posting Anda untuk membuat Tombol

//ganti'Link Anda'dengan link yang anda inginkan
<div class="buttons">
    <button class="btn btn-gradient" onclick="window.open('Link Anda')">Telegram</button>
    <br /><br />
    <button class="btn btn-gradient gradient2" onclick="window.open('Link Anda')">Telegram</button><br /><br />
    <button class="btn btn-gradient gradient3" onclick="window.open('Link Anda')">Telegram</button><br /><br />
    <button class="btn btn-gradient gradient4" onclick="window.open('Link Anda')">Telegram</button>
  </div>
<br /><br />
  <button class="btn btn-gradient gradient2" onclick="window.open('Link Anda')">Download</button>&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;<button class="btn btn-gradient gradient4" onclick="window.open('Link Anda')">Demo</button>

Langkah 8: Sekarang publikasikan posting.

Langkah 9: Selesai!

Demo