Cara Membuat Tombol Button di Posting Blog

berikut Ini Saya Akan Berbagi Tips tentang Cara Membuat Tombol Button di Posting Blog,
Tombol Button Sering Kita Jumpai, sa'at Kita Berkunjung ke situs- situs Blog, Website, Toko Online dan Masih Banyak lagi.

Tombol Buton Pada Umumnya Berfungsi Untuk Mengalihkan Halaman Pencarian, Dengan Begitu Pembuat Situs Tidak Selalu Menulis Apa yang Sudah di Tulis.

Contoh Salah satunya Tombol Button di Pakai Untuk Menuju Ke Kontak, Alamat,dll.
Tombol Button Sangat Bermanfat Bagi Para Publiser Untuk menunjuk'kan Ke Halaman Post Lainya,

berikut ini adalah Kode Tombol Button Yang mungkit Bermanfa'at Untuk Anda,


Cara membuat Tombol Buton Pada Postingan Blog.


1. Button Tanpa Menggunakan Link:

<button>www.irinmedia.com</button>

 

2. Button Dengan Link , Tapi Tidak meninggalkan Blog Kita.

<a href="http://www.irinmedia.com/2017/04/cara-membuat-tombol-button-di-posting.html"><button>www.irinmedia.com</button></a>

 

3. Button dengan Link Tab Baru.

<a href="http://www.irinmedia.com/2017/04/cara-membuat-tombol-button-di-posting.html" target="blank"><button>www.irinmedia.com</button></a>

 


Keterangan : Ganti Tulisan warna Merah dengan Link dan Tulisan Sobat.

Ada Lagi Tombol Button Keren Seperti di Bawah Ini,
Tapi ada Penerapan Tambahan Untuk Memasang di Halaman HTML Blog Anda.

Demo Download

Cara Penerapanya sebagai Berikut ;

1. Masuklah ke blog Anda.

2. Klik Template => Edit HTML.

3. Cari kode </b:skin> atau </style> . ( Untuk Mempermudah Klik Ctrl + F ).

4. Copy kode CSS dibawah ini dan pastekan diatas kode </b:skin> atau </style>

.button-demo{width:95%;margin:10px;padding:2px;font-size:14px;position:relative;font:bold 20px/35px Lato,serif;border:solid 1px #333;border-radius:5px;background: #27C100;text-decoration:none;color:#fff;text-shadow:1px 2px 2px #111;padding:10px 15px;box-shadow:2px 2px 0 #333,3px 3px 0 #333,4px 4px 0 #333,5px 5px 0 #333;transition:top 0.25s, left 0.25s, box-shadow 0.25s;-webkit-transition:top 0.25s, left 0.25s, box-shadow 0.25s;-moz-transition:top 0.25s, left 0.25s, box-shadow 0.25s;-o-transition:top 0.25s, left 0.25s, box-shadow 0.25s}
.button-demo:hover{box-shadow:none;top:5px;left:5px;}

4. Simpan Template.

5. gunakan kode berikut ini ketika Anda membuat posting ( Tambahkan dalam tab HTML ).


<div style="text-align: center;margin: 100px 0;">
<a class="button-demo" href="www.irinmedia.com" target="_blank">Demo</a>
<a class="button-demo" href="www.irinmedia.com" target="_blank">Download </a>
</div>

Keterangan : www.irinmedia.com dengan Url Link Anda.



Begitulah Cara Membuat Tombol Button di Posting Blog,

Semoga Artikel ini Bermanfa'at Untuk Anda Semua.

Bila ada Yang ingin di Tanyakan, silahkan Menulis di Komentar.

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://irinmedia.blogspot.com/. Terima kasih.