Cara membuat Tombol Download dan Demo didalam postingan blog Terbaru

Daftar Isi [Tampil]

Hello Sobat blogger disini saya 🤴 akan memberikan Tutorial untuk memercantik Tampilan atau mengasah skill kita dalam menulis di blog dengan menambahkan Tombol donwload atau Tombol demo didalam postingan 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

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 ap itu mode HTML, kamu bisa periksa Tampilan atau gambar dibawah ini

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'/> 

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>

/* CSS Button by Desain Limited */

.DLbutton{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}

.DLbutton ul{margin:0;padding:0}

.DLbutton li{display:inline;margin:5px;padding:0;list-style:none}

.DLbutton li a.DLdemo,.DLbutton li a.DLdownload{position:relative;padding:9px 48px 9px 16px;background:#f9c610;color:#fff!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}

.DLbutton li a.DLdownload{background:#000000}

.DLbutton li a.DLdemo:hover,.button li a.DLdownload:hover{background:#666}

.button li a.DLdemo:active,.button li a.DLdownload:active{cursor:pointer}

.DLbutton li a.DLdemo:after,.DLbutton li a.DLdownload: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}

.DLbutton li a.DLdownload:after{content:'\f019'}

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

• Download

Salin kode Pemanggil Tombol Download dibawah ini, kemudian letakkan sesuai dengan keinginan kamu

<div style="text-align: center;">

  <ul class="DLbutton">

    <li><a class="DLdownload" href="https://desain-limited.blogspot.com/?m=1" target="_blank">Download</a></li>

  </ul>

</div>

<div class="clear"></div>

🤨 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

• Demo

Salin kode pemanggil Tombol demo dibawah ini untuk menggunakan, kemudian letakkan sesuai keinginan kamu

<div style="text-align: center;">

  <ul class="DLbutton">

    <li><a class="DLdemo" href="https://desain-limited.blogspot.com/?m=1" target="_blank">Demo</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

• Demo
• Download

Untuk menampilkannya, salin dan tempelkan kode pemanggil berikut ini, dan letakkan sesuai keinginan kamu aja ☺️

<div style="text-align: center;">

  <ul class="DLbutton">

    <li><a class="DLdemo" href="https://desain-limited.blogspot.com/?m=1" target="_blank">Demo</a></li>

    <li><a class="DLdownload" href="https://desain-limited.blogspot.com/?m=1" target="_blank">Download</a></li>

  </ul>

</div>

<div class="clear"></div>

🙃 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 komen dibawah, tau jika nggak mau ribet Hubungi saya untuk menggunakan jasa membuat Tombol Download dan Tombol Demo nya hehehe, jadi promosi nih ye 🤑, hahaha, oke semoga bermanfaat

Follow

Desain Limited Content Creator, Writer, Vidio Creator, Design Website, Design Template, Design Grafis

Bagikan Artikel ini