Hello Sobat blogger saya akan memberikan Tutorial untuk memercantik Tampilan atau mengasah skill kita dalam mempelajari koding di blog dengan menambahkan Tombol donwload atau Tombol demo saat menulis postingan di dalam blog kita
Oke sebenarnya Tombol Dowload dan Demo ini sangat berguna jika blog kita berisi informasi seputar pengunduhan file atau data karena dengan menerapkan Tombol tersebut Link yang kita tempelkan itu berada didalam sebuah Tombol yang sudah dibuat sebelumnya
Fungsi Tombol
Fungsi tombol download dan demo bisa kamu gunakan sesuai keperluan kamu aja, semisal ingin menampilkan link apapun bisa mengguanakn dengan tombol donwload dan demo yang sebentar lagi admin jabarkan sebentar lagi
Gunakan Mode HTML
Nah untuk membuat Tombol snda harus memasang kode CSS didalam Template blog anda, dan untuk 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 icloudice.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://icloudice.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://icloudice.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://icloudice.com" target="_blank">View</a>
</li><li><a class="dntrah" href="https://icloudice.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