Cara Membuat Tombol Demo & Download di Postingan Blog Terbaru
Nyampling ~ Cara Membuat Tombol Demo & Download di Postingan Blog Terbaru. Halo sobat nyampling ketemu lagi kita, setelah sekian lama saya tidak mengupdate postingan tentang tutorial, kali ini saya akan memberikan tutorial tentang gimana cara membuat tombol demo dan download di postingan blog.
Jika kalian pernah melihat suatu blog yang menampilkan link download atau suatu demo ada blog tutorial. Biasanya pada tombol tersebut sebisa mungkin untuk dibuat seunik mungkin sehingga dapat memberikan nilai plus pada si pengujung blog. Caranya adalah dengan memberikan desain yang unik pada tombol link tersebut, supaya dapat memberikan kesan 'waah' pada blog kita. Sebenarnya kalau tampilan defaultnya sudah ada tapi terlalu minim dan juga tidak ada kesan indah sama sekali.
Penerapan kode html tertentu juga berfungsi untuk memberitahu kepada pengunjung lokasi untuk mereka dapat melihat link tersebut. Pembuatan tombol ini juga bukan hanya untuk demo dan download saja tapi juga untuk kepentingan lainnya misalnya, registrasi, kunjungi, beli, ataupun unutk melihat sebuah trailer dari movie. Tinggal kalian ganti link yang menuju kemana, sehingga banyak sekali manfaat dari tombol ini.
Untuk langkah -langkahnya silahkan kalian simak ya...:
A. Dengan Edit Html Blog
#1. Masuk ke Blogger.com >> Tema >> Edit Html
#2. Cari ]]></b:skin> atau </style>, kemudian tempelkan kode berikut diatasnya
.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:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#f78d1d!important;background:0} .buttonx:active{position:relative;top:1px}Ganti background colornya agar dapat sewarna sama blog kalian.
#3. Simpan Tema
#4. Untuk cara menerapkan dipostingan, pada saat akan memasang tombol demo & download maka kalian masuk ke mode HTML dan letakkan kode berikut
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://www.nyampling.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.nyampling.com/" target="_blank">Download</a>
</div>Ganti link alamat blog dengan link blog kalian yang akan ditampilkan
#5. Publish dan lihat hasilnya.
B. Dengan Edit Postingan
Cara yang ini yang sering saya pakai karena tidak ribet tinggal menempelkan kode di postingan html artikel saja tanpa harus mengotak atik template.
#1. Pada mode edit artikel maka kalian tinggal ke mode HTML, kemudian tempelkan kode dibawah ini.
<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:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important}
.buttonx:hover{background-color:#f78d1d!important;background:0}
.buttonx:active{position:relative;top:1px}
</style>
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://www.nyampling.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.nyampling.com/" target="_blank">Download</a>
</div>#2. Ganti link blog dengan nama tombol yang akan kalian buat
#3. Tinggal kalian Publish dan lihat hasilnya, kira - kira seperti contoh dibawah ini
Penutup
Demikian sedikit postingan tentang "Cara Membuat Tombol Demo & Download di Postingan Blog Terbaru" Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.