For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat tombol download dan demo (View) di blogger

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.