Cara Menciptakan Tombol Button Link Keren Di Blogger

By | Desember 7, 2017
Membuat Button Link Keren dan sesuai template Cara Membuat Tombol Button Link Keren di blogger
Membuat Tombol Button Link di Blog yang keren

Tombol di sebuah posting selain berfungsi sebagai komplemen juga sanggup pula berfungsi sebagai alat untuk mempermudah navigasi pengunjung dalam mendownload sebuah konten. Cara menciptakan tombol sebetulnya sangat bermacam-macam.

Di bawah akan kami sajikan beberapa cara yang biasa dipakai dalam menciptakan sebuah tombol pada posting blog, fungsi dari tombol tersebut yaitu untuk mengarahkan pengunjung pada halaman konten tertentu. Kami sajikan tombol dan perintah cara menciptakan tombol tersebut
Bagaimana cara menciptakan tombol di HTML?
Membuat tombol sederhana sejatinya hanya dengan perintah pada HTML sebagai berikut

<button>…isi dengan nama yang dikehendaki..</button>

balasannya sebagia berikut :

Itu pola tombol sederhana dan belum di modifikasi atau ditambahkan link didalamnya. Pada artikel kali ini yang akan kita bahas yaitu menciptakan tombol yang sanggup ditambahkan link dan akan dimodivikasi sehingga menghasilkan tampilan yang sesuai dengan template blog yang kita miliki. Berikut kami sajikan beberapa pola tombol sederhana namun tidak terlalu mengecewakan.
1. Model Sederhana dengan link
untuk menciptakan tombol diatas anda hanya perlu memakai perintah

<a href=”https://www.semogaawet.com/” ><button>Tombol-ku</button></a>

Bagian warna merah anda ganti dengan link yang akan anda tuju sedang bab biru anda ganti dengan goresan pena yang ingin anda tampilkan
Praktis bukan?
2. Model Sederhana dengan Link yang dibuka pada halaman baru
untuk menciptakan tombol diatas anda hanya perlu memakai perintah

<a href=”https://www.semogaawet.com/” target=”_blank”> ><button>Tombol-ku</button></a>

Penambahan perintah sasaran blank akan menyebabkan tombol tersebut dikala di tekan (klik) akan membuka alamat yang dituju pada tab baru.

Seperti tadi, bab warna merah anda ganti dengan link yang akan anda tuju sedang bab biru anda ganti dengan goresan pena yang ingin anda tampilkan

kurang menarik?
3. Model dengan style sederhana dengan perubahan pada later
untuk membuatnya masukkan arahan berikut :
     <button onclick="window.location=     'http://semogaawet.com'"     style="background-color: #357ae8;     color: #fff;     height: 35px; width: 150px;">     <b>     Tombol-Ku     </b>     </button> 

Perubahan pada warna latar belakang di tunjukkan dengan adanya sajian style. Selain itu penempatan struktur kodenya berubah memakai button on click biar sanggup dimasukkan sajian style dan warna oranye sanggup di atur sesuai dengan impian anda.
4. Model dengan style dengan CSS

Langkah awal membuatnya yaitu anda memasukkan CSS tombol terlebih dahulu di 
/*tombol-tombolan*/ .pencet {display: inline-block;     padding: 8px 0px;     font-size: 16px;     margin-bottom: 5px;     width: 100%;     text-transform: uppercase;     outline: none;color: #fff;     background-color: #2770e7;     border: none;     text-align: center;     position: relative;     border-radius: 5px;     box-shadow: 0 5px #357ae8;     cursor: pointer;     font-weight: bold;} .pencet:hover {background-color: #1553b9} .pencet:active {background-color: #1553b9;     box-shadow: 0 5px #1553b9;     transform: translateY(4px);     -webkit-transition: all 0.3s;} .pencet a:visited {color: #fff;     text-decoration: none;} .pencet a:link {color: #fff;     text-decoration: none;     outline: none;     -webkit-transition: all 0.3s;} 

Saya kira anda sudah tahu cara memasukkan CSS tombol tersebut ke dalam template blog yang anda miliki.

Cara memanggil tombol tersebut sanggup dengan dengan cara berikut ini

 <button class="pencet" onclick="window.location=     'http://url yang akan dituju'"><b>     Nama tombolnya</b></button> 
Caranya sama menyerupai tadi anda setting menyerupai yang diatas.
Praktis bukan?

Semoga Bermanfaat

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *