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>

Baca Juga:  Cara Menciptakan Blog / Website Dengan Wordpress.Org (Selft Hosted)
#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.

Advertisement
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

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.

Baca Juga:  Halaman Penting yang Harus dimiliki Sebuah Blog Agar Cepat Diterima Pihak Adsense
Advertisement