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 .
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>
<button class="btn btn-gradient gradient4" onclick="window.open('Link Anda')">Demo</button>
Langkah 8:Sekarang publikasikan posting.
>Langkah 9:
Selesai! Demo
