√ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger

√ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger - Selamat berjumpa kembali sahabat SMK NEGERI 1 SERI KUALA LOBAM, Senang dapat bertemu anda kembali untuk membahas materi atau artikel √ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Semoga pembahasan postingan atau artikel kategori Artikel Blogger, yang kami tulis ini dapat anda pahami. Tanpa memperpanjang basa-basi lagi, kami sampaikan selamat membaca.

Seberapa dalam artikel √ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger ini dapat kami bahas dan jabarkan kepada anda, kiranya tidak mengurangi makna. Kami hanya berpesan kepada pembaca SMK NEGERI 1 SERI KUALA LOBAM, jadikan artikel kami ini sebagai materi tambahan. Jika masih kurang lengkap, pembaca dapat menambah wawasan dengan mencari artikel serupa diblog lainnya atau menanyakan langsung kepada pakar yang mahir dengan masalah √ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger. Selamat menambah wawasan!

√ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger

Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger - Halo sobat blogger, pada artikel kali ini saya akan membagikan CSS untuk membuat button download, demo dan buy now yang akan membuat tampilan blog Anda semakin keren dan rapi.

Tombol download keren, demo dan buy now keren untuk blog ini bisa digunakan diberbagai template dan tentunya cocok bagi Anda yang mempunyai blog dengan niche download template dan aplikasi yang memerlukan button responsive untuk mendownload file.

Selain itu tombol keren ini memiliki efek hover yang keren, yaitu berupa efek transisi dan pergantian warna. Untuk menggunakan button ini diperlukan icon dari font awesome, namun jika Anda tidak menggunakan font awesome, Anda bisa menggantinya dengan icon SVG.

Cara Membuat Tombol Keren di Blogger

Berikut tutorial cara membuat tombol download, demo dan buy now keren di blog beserta cara memasang button di artikel.

1. Silahkan masuk ke blogger.com → pilih menu Tema → lalu Edit HTML.

2. Copy kode untuk Font Awesome berikut sebelum tag , biasanya kode sudah ada ditemplate Anda.

(Opsional) jika Anda tidak ingin menggunakan Font Awesome maka Anda tidak perlu mengcopy kode tersebut, untuk menggantinya dengan ikon SVG silahkan ikuti langkah dibawah.

3. Copy dan pastekan kode CSS berikut diatas tag . Setelah itu klik Simpan.

#btn-keren {margin: 10px auto; text-align: center;} #btn-keren br {display: none;} .btn-keren1, .btn-keren2, .btn-keren3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fdfdfd;border: 2px solid #009688;margin: 10px;transition: .5s} .btn-keren2 {border: 2px solid #3f51b5;} .btn-keren3 {border: 2px solid #d83500;} .btn-keren1:hover {background-color: #009688;} .btn-keren2:hover {background-color: #3f51b5;} .btn-keren3:hover {background-color: #d83500;} .btn-keren1:hover span.circle, .btn-keren2:hover span.circle2, .btn-keren3:hover span.circle3 {left: 100%;margin-left: -45px;background-color: #fdfdfd;} .btn-keren1:hover span.circle{color: #009688;} .btn-keren2:hover span.circle2 {color: #3f51b5;} .btn-keren3:hover span.circle3 {color: #d83500;} .btn-keren1:hover span.title, .btn-keren2:hover span.title2, .btn-keren3:hover span.title3 {left: 40px;opacity: 0;} .btn-keren1:hover span.title-hover, .btn-keren2:hover span.title-hover2, .btn-keren3:hover span.title-hover3 {opacity: 1;left: 40px;} .btn-keren1 span.circle, .btn-keren2 span.circle2, .btn-keren3 span.circle3 {display: block;background-color: #009688;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius: 50%;} .btn-keren2 span.circle2 {background-color: #3f51b5;} .btn-keren3 span.circle3 {background-color: #d83500;} .btn-keren1 span.title,.btn-keren1 span.title-hover, .btn-keren2 span.title2,.btn-keren2 span.title-hover2,.btn-keren3 span.title3, .btn-keren3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #009688;transition: .5s;} .btn-keren2 span.title2,.btn-keren2 span.title-hover2 {color: #3f51b5;left: 80px;} .btn-keren3 span.title3,.btn-keren3 span.title-hover3 {color: #d83500;left: 80px;} .btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 {left: 80px;opacity: 0;} .btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 { color: #fff; }

4. Setelah itu silahkan masuk ke postingan yang ingin di tambahkan tombol keren ini, lalu pilih mode HTML.

5. Copy dan paste kode berikut untuk memasang tombol keren. Pada href="#", silahkan ganti dengan url yang dituju, misalnya href="drive.google.com".

   Demo Click here    Download Click here    Buy Now Click here

Apabila Anda hanya ingin memasang salah satu tombol saja, misal tombol download saja, silahkan hapus kode lain dari tag yang terdapat diantara tag dan . Maka hasilnya akan seperti berikut.

    Download Click here

Langkah 3. Silahkan cari CSS line-height: 42px lalu ganti menjadi 55px.

Selesai...

Demo
Click here

Penutup

Itu tadi tutorial cara membuat tombol demo, download dan buy now keren dengan animasi di blogger. Sekian artikel singkat ini, selamat mencoba dan semoga bermanfaat.

Penutup Artikel √ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger

Demikian artikel √ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger kali ini, semoga bisa memberi manfaat untuk anda semua pembaca blog SMK NEGERI 1 SERI KUALA LOBAM. Allright, sampai jumpa pada postingan artikel lainnya.

Baru saja anda membaca artikel √ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger dengan alamat link https://smkn1serikualalobam.blogspot.com/2015/03/cara-membuat-tombol-download-demo-buy.html

Artikel √ Cara Membuat Tombol Download, Demo & Buy Now Keren di Blogger ini kami arsipkan pada kategori Blogger.