Hello Sobat Bloggermuda kali ini admin akan membahas mengenai cara membuat tombol download atau tombol demo saat menulis postingan di dalam blog kita
Info: Jikakmau penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Fungsi Tombol
Fungsi tombol download dan demo bisa kamu gunakan sesuai keperluan kamu aja, semisal ingin menampilkan link apapun bisa menggunakan dengan tombol donwload dan demo yang sebentar lagi admin jabarkan sebentar lagi
Gunakan Mode HTML
Nah untuk membuat Tombol anda harus memasang kode CSS di dalam Template blog anda, dan cara menggunakan atau menerapkan anda harus menulis atau mengedit dalam mode HTML bukan mode Compose ya 👌
Kalau anda tidak mengetahui bagaimana atau apa itu mode HTML, kamu bisa periksa Tampilan atau gambar dibawah ini
Info: Kamu bisa melakukan seperti gambar diatas jika kamu sudah memasang kode CSS nya, Jika belum maka tombolnya gak akan berfungsi lah, bagaimana sih 😁
Pasang Font Awesome
Untuk memulainya kamu bisa memasang font Awesome yakni dalam format kode, kamu bisa menyalin kode dibawah ini, kemudian letakkan diatas kode </head> atau sebelum kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Perhatian : Jika font Awesome nya sudah terpasang lewatin aja kelangkah berikutnya, ok
Pasang kode CSS
Apakah kamu tahu bahwa Tombol tersebut dibuat atau diciptakan dengan kode Program CSS, kamu harus memasang kode CSS nya didalam Template kamu ya, oke 🤔
Nah salin kode CSS berikut kemudian tempelkan kode CSS nya tepat diatas kode ]]></b:skin> atau sebelum kode ]]></b:skin>
/* Tombol donwload - demo by Bloggermuda.com */
.btnrah{float:left;list-style:none;text-align:center;width:98%;margin:10px;padding:2px;font-size:14px;clear:both}
.btnrah ul{margin:0;padding:0}
.btnrah li{display:inline;margin:5px;padding:0;list-style:none}.btnrah li a.viewrah,.btnrah li a.dntrah{position:relative;padding:9px 48px 9px 16px;background:#20409A;color:#ffffff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.btnrah li a.dntrah{background:#f80000}
.btnrah li a.dntrah:hover{background:#f80000}
.btnrah li a.viewrah:hover{background:#20409A}
.btnrah li a.viewrah:active,.btnrah li a.dntrah:active{cursor:pointer}
.btnrah li a.viewrah:after,.btnrah li a.dntrah:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.btnrah li a.dntrah:after{content:'\f019'}Saran : Atau lagi kamu bisa menaruh kode CSS nya, dibawah kode </style> atau sebelum kode </style>
Cara penggunaan
Jika kamu sudah memasang kode CSS nya, berarti Tombol sudah berhasil terinstall didalam Template kamu
Sekarang bagaimana cara untuk membuat atau manempilkan tombolnya 🤷? Tenang saya akan memberikan penjelasan yang selengkap lengkapnya ok, hehehe
Dibawah ini ada dua menu Tombol yang bisa kamu Tampilkan yaitu Download dan Demo, atau kamu ingin tampilkan keduanya, tidak masalah! Perhatikan penjelasan berikut
Gunakan Tombol Dowload
Untuk menggunakan Tombol Download, kmau bisa menggunakan kode pemanggil Untuk Tombol Download
Salin kode Pemanggil Tombol Download dibawah ini, kemudian letakkan sesuai dengan keinginan kamu
<div style="text-align: center;">
<ul class="btnrah"><li>
<a class="dntrah" href="https://Bloggermuda.com" target="_blank">Download</a></li>
</ul></div><div class="clear"></div>Info: 🤨 ingat harus menggunakan mode HTML saat meletakkan kode pemanggil nya
Gunakan Tombol Demo
Sama halnya dengan Tombol Demo kamu juga harus menggunakan kode pemanggil untuk menampilakn Tombol Demo nya
Salin kode pemanggil Tombol demo dibawah ini untuk menggunakan, kemudian letakkan sesuai keinginan kamu
<div style="text-align: center;">
<ul class="btnrah"><li>
<a class="viewrah" href="https://Bloggermuda.com" target="_blank">View</a></li></ul></div><div class="clear"></div>☹️ Sudah pahamkan, gunakan mode HTML
Gunakan Tombol Download dan Demo
Nah kamu juga bisa menampilkan kedua Tombol tersebut yakni Tombol download dan Tombol Demo didalam postinganan kamu
Untuk menampilkannya, salin dan tempelkan kode pemanggil berikut ini, dan letakkan sesuai keinginan kamu aja ☺️
<div style="text-align: center;">
<ul class="btnrah"><li>
<a class="viewrah" href="https://Bloggermuda.com" target="_blank">View</a>
</li><li><a class="dntrah" href="https://Bloggermuda.com" target="_blank">Download</a></li></ul></div><div class="clear"></div>Info: 😬 Cuma mau ngingetin, pakai mode HTML ya
Hehe bagaimana penjelasan saya diatas apa sudah mengerti untuk membuat atau menampilkan Tombol Download dan Tombol Demo nya, Jika belum mengerti juga silahkan komen dibawah, jika nggak pengen ribet Hubungi saya untuk menggunakan jasa membuat Tombol Download dan Tombol Demo nya hehehe, jadi promosi nih ye 🤑, hahaha, oke semoga bermanfaat