Cara Membuat Tombol Demo dengan Efek Show Off - Jarangopi

Cara Membuat Tombol Demo dengan Efek Show Off

Cara Membuat Tombol Demo dengan Efek Show Off
Sebelumnya aku pernah menjelaskan cara membuat tombol download dan demo secara bersamaan, namun pada kesempatan kali ini aku akan membagikan cara membuat tombol demo saja dengan efek terbaru.
Bang, lu suka amat buat postingan tentang materi yang sama, tapi banyak kreasi? gak bosan?
Gaklah. Lagian aku hobi menulis tentang materi yang sama, dan mencoba mencari cara baru untuk dikembangkan oleh semua orang. Yah, memang sedikit membosankan. Tapi mana tau ada dari sobat semua, ingin coba-coba tombol download dan demo yang keren. Aku coba buat, terutama tombol demo atau download yang selama ini aku posting berulang-ulang dalam versi lain hehehe. Untuk membuatnya, yuk langsung saja ikuti langkah-langkahnya dibawah ini.

1. Coddingnya

#1. Masuk ke blogger.
#2. Pilih menu tema.
#3. Kemudian pilih edit html.

Menu Tema Di Blogger

#4. Letakkan kode CSS ini tepat di atas kode ]]></b:skin> atau </style>

#buttondemo {margin:15px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#f24a4a;letter-spacing:.5px;padding:10px 50px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #202d3a;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#f24a4a;color:#fff;box-shadow:inset 0px -50px 0px #202d3a;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}

#5. kemudian pilih simpan tema.

2. Cara Memasangnya

#1. Pilih menu postingan. 
#2. Pilih entri baru.

Menu Postingan di Blogger

#3. Jika sudah dalam postingan > pilih tab HTML > kemudian letakkan kode ini di dalamnya.

<div id="buttondemo"><a class="btn" href="#">DEMO</a></div>
Nama Keterangan
# Ubah dengan alamat url yang anda tujuan anda
DEMO Ubah dengan kata-kata sesuai yang anda inginkan
Demo

Baca juga : cara membuat efek hujan salju yang menyenangkan.

Jika udah selesai dimasukkan semua kodenya, silahkan lihat hasilnya dengan cara menekan tombol demo diatas. Jika dirasa kurang cocok, sobat bisa berpindah ke artikel postingan yang lain seputar tombol download dan demo, caranya klik disini. Itu aja sih menurut aku. Terima kasih hehehe.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top