Cara Membuat Tombol Demo Pada Template Viomagz

Preview Tombol Demo

Seperti yang kita tahu, bahwa Template Viomagz dari mas sugeng ini hanya menyediakan Tombol Download saja, tidak ada Tombol Demo. Dalam artikelnya; Mas Sugeng ini juga hanya menuliskan cara menampilkan tombol download saja. Maka dari itu Pemalang Otodidak akan membagikan caranya untuk membuat Tombol Demo sendiri pada template Viomagz ini.

Apa sebenarnya gunanya Tombol demo?
Tombol Demo ini berguna untuk konten yang membutuhkan halaman Demo atau halaman contoh, seperti misalnya Anda membagikan sebuah Template blog, tentu seseorang ingin tahu Demonya terlebih dahulu. Sehingga pengunjung dapat mudah mengetahui hasil dari apa yang anda bagikan.

Nah, untuk menuju ke halaman landing Demo, Anda membutuhkan tombol Demo agar lebih jelas dan ramah, seperti halnya Tombol Download, Tombol Demo juga tidak kalah pentingnya bagi blogger.

Oke Langsung saja.

Cara Membuat Tombol Demo Simpel Pada Template Viomagz

Saya akan membagi tutorial menjadi dua langkah, yang pertama memasang kode di HTML Blog dan yang kedua di HTML Artikel.

Memasang kode di dalam HTML blog

• Pergi ke Dashboard Blogger.com
• Klik Tema > Edit HTML
• Cari kode </style> atau tekan Ctrl + F untuk memudahkan pencarian,

Setelah ketemu, letakkan kode berikut ini tepat di atas </style>.

/* Tombol Demo */
.buttonDemo {
    display: inline;
    background: #2c5f8b;
    cursor: pointer;
    padding: 10px;
    border-radius: 3px;
    transition: all .3s;
    font-size: 13px;
    font-weight: bold;
    color: #fff !important;
}
.buttonDemo:hover {
    background: #e20075;
}

• Setelah dipaste, kemudian klik Simpan perubahan.

Untuk warna tombol pada kode warna yang saya block, Anda bisa mengubahnya sesuka Anda.

• Langkah pertama SELESAI.

Selanjutnya kita menuju ke langkah kedua.

Memasang kode di HTML Artikel

Untuk menampilkan tombol Demo di template Viomagz ini caranya hampir sama seperti menampilkan tombol Download, hanya saja ini yang di panggil "buttonDemo" bukan "buttonDownload".  Berikut akan saya berikan caranya yang paling mudah:

• Salin kode di bawah ini:

<p style="text-align: center;"><b><a class="buttonDemo" href="https://www.lutfisyafii.com/" target="_blank">DEMO</a></b></p>

Jangan lupa ganti https://www.lutfisyafii.com/ dengan url halaman Demo Anda sendiri.

• Letakkan kode tersebut pada HTML artikel.

Letakkan pada "Tampilan HTML"  jangan "Tampilan menulis".

Tampilan HTML

• Selanjutnya klik "Simpan" / klik "Pratinjau" untuk melihat hasilnya.
• Selesai.

Tutorial yang saya berikan di atas tidak berpengaruh pada kecepatan blog Anda, karena ini hanya menggunakan CSS saja, jadi tentunya sangat ringan.

Baiklah cukup sekian saja, Semoga artikel ini membantu kalian semua yang membutuhkan tombol demo. Jika kalian masih bingung silahkan berkomentar di bawah yah.

Terima Kasih.