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