Cara Membuat Tombol Demo dan Download di Postingan Blog

Cara Membuat Tombol Demo dan Download di Postingan Blog - Dalam dunia blog tombol demo dan download ini mempunyai banyak kegunaan. Tombol ini digunakan tidak hanya sebatas untuk jalan menuju link demo dan download tapi juga digunakan untuk tombol menu blog, tombol link untuk menampilkan sebuah popup atau jendela kecil dan lain-lain sesuai dengan keperluan masing-masing blogger.

Para blogger yang suka mendesin template untuk website dan membagikan template tersebut baik secara gratis atau bayar, tentunya tombol ini akan sangat berguna ditambah lagi dengan bentuk tombol yang lebih menarik sehingga dapat memperlihatkan keprofesionalan blog anda. Berikut langkah-langkahnya.

Cara Membuat Tombol Demo dan Download di Postingan Blog

Disini saya memiliki dua cara untuk penerapan tombol ini.

Meletakkan kode CSS ke template dengan edit HTML.
1. Masuk ke dashboard blogger anda, pilih menu Template atau Tema >> Lalu klik Edit HTML.
2. Letakkan kode css di bawah ini tepat diatas kode ]]></b:skin> atau </style>.

CSS

.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#696969!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#A8A8A8!important;background:0}
.buttonx:active{position:relative;top:1px}

Catatan :
Warna background pada ketikkan berwarna merah bisa anda rubah sesuai dengan warna keinginan anda.
3. Simpan Template atau Tema.
Penerapannya.
1. Gunakan mode HTML ketika membuat postingan.
2. Masukkan kode di bawah ini ke posisi dimana anda ingin meletakkannya.

HTML

<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="https://harmansh.blogspot.com/" target="_blank" title='Demo'>Demo</a>
<a class="buttonx" href="https://harmansh.blogspot.com/" target="_blank" title='Download'>Download</a>
</div>

Catatan :
Apabila anda ingin menambahkan tombol, anda tinggal menambahkan kode berikut
<a class="buttonx" href="https://harmansh.blogspot.com/" target="_blank" title='Nama_Tombol'>Nama_Tombol</a>
Ganti tulisan berwarna hijau dengan link yang anda inginkan.
Ganti tulisan berwarna biru dengan keperluan anda.
3. Terakhir klik Publish atau Publikasikan.

Meletakkan kode CSS langsung ke dalam postingan beserta kode HTML.
1. Gunakan mode HTML saat membuat postingan.
2. Masukkan kode di bawah ini ke dalamnya.

<style>
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#696969!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#A8A8A8!important;background:0}
.buttonx:active{position:relative;top:1px}
</style>
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="https://harmansh.blogspot.com/" target="_blank" title='Demo'>Demo</a>
<a class="buttonx" href="https://harmansh.blogspot.com/" target="_blank" title='Download'>Download</a>
</div>

Catatan :
Apabila anda ingin menambahkan tombol, anda tinggal menambahkan kode berikut
<a class="buttonx" href="https://harmansh.blogspot.com/" target="_blank" title='Nama_Tombol'>Nama_Tombol</a>
Ganti tulisan berwarna hijau dengan link yang anda inginkan.
Ganti tulisan berwarna biru dengan keperluan anda.
3. Terakhir klik Publish atau Publikasikan.

Berikut hasil dari kode tombol yang kita buat.

Demo Download

Dengan membuat tombol demo dan download yang keren di postingan blog yang bertema download, maka akan membuat tampilan blog menjadi lebih keren, unik, dan lebih profesional
Demikian tutorial sederhana tentang bagaimana cara membuat tombol demo dan download yang tentunya enak dilihat di postingan blog. Semoga bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG