Langkah Membuat Tombol Demo dan Download Di Postingan Blog Anda

oleh
tutorial blogspot
sumber : flickr

Kegunaan tombol Demo dan Download antara lain untuk memunculkan page demonstrasi atau sebuah link untuk mendownload sesuatu yang berkaitan dengan topik tertentu pada artikel yang sedang di bahas. Tentunya agar pembaca lebih mudah dalam menerapkan ilmu dari bahasan topik serta memperjelas langkah secara tekhnis bagi sebuah langkah – langkah atau cara.

Kita bisa membuat tombol tersebut dengan menambahkan kode HTML tertentu. Namun, disamping dengan cara tersebut, ada cara yang lebih sederhana. Cara ini melalui tampilan di pilihan ubah tambah kode CSS. Langkahnya sederhana, ketika anda masuk ke dashboard blog anda carilah tab Sesuaikan yang berada di sebelah tab Edit HTML, kemudian anda pilih Tindak lanjut lalu Tambahkan CSS. Nah, di isian CSS ini silahkan anda masukkan kode di bawah ini :

.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;} .button ul {margin:0;padding:0} .button li{display:inline;margin:0;padding:0} .demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; } .download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;} .demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 } .download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 } 

Silahkan anda letakkan sembarang tempat.

Jika masih ada tempat kosong, ataupun jika terlalu banyak menyimpan script CSS silahkan pilih tempat paling bawah

Kemudian simpan dan kembalilah ke dashboard anda. Apakah cukup sampai disini saja? Tidak. Masih ada langkah selanjutnya. Jika anda setiap saat ingin menampilkan tombol Demo dan Download, maka masukkan script di bawah ini melalui mode HTML ( bukan compose ).

<div style=”text-align: center;”> <ul class=”button”> <li><a class=”demo” href=”http://infomawan.com” target=”_blank”>Demo</a></li> <li><a class=”download” href=”http://infomawan.com
target=”_blank”>Download</a></li> </ul> </div> <div class=”clear”></div>

Kode berwarna biru pada script diatas silahkan ganti dengan halaman demo yang telah Anda buat. Jika anda ingin menghapus atau menggunakan salah satu Demo atau Download saja, caranya hapus baris dari <li> sampai </li>

Demikian info untuk membuat tombol Demo dan Download secara sederhana, semoga bermanfaat.

Tentang Penulis: Eike

Gambar Gravatar
Just another person to writing world web!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.