Cara Membuat Tombol Demo Dan Download Responsive Keren! Dalam suatu blog khususnya blog downlosd atau template tombol download dan demo adalah salah satu hal wajib untuk mempercantik postingan.
Namun fungsi tombol demo dan download dipostingan bukan hanya untuk mempercantik namun juga untuk mempermudah pengunjung dalam mencari link download template yang kita bagikan.
Seperti yang kita tahu kenyamanan pengunjung adalah no 1 dan bila postingan kita tidak tersusun rapi maka pengunjung tidak akan nyaman.
Maka dari itu kali ini saya akan membagikan cara membuat tombol demo dan download responsive keren.
1. Pertama buka halaman untuk mengedit template kamu di Tema > Edit HTML
2. Kemudian cari kode </head>
3. Bila sudah ketemu silahkan copy kode dibawah ini dan tempelkan diatas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel="stylesheet"/>
4. Selanjutnya tempelkan kode dibawah ini diatas kode </style> atau ]]></b:skin>
/* model flat ui 2 */ .button2{float:left;list-style:none;text-align:center;width:200px;margin:10px;padding:2px;font-size:14px;clear:both} .button2 ul{margin:0;padding:0} .button2 li{display:inline;margin:5px;padding:0;list-style:none} .button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#3498db;display:block;color:#fff !important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:200px;margin:auto;overflow:hidden} .button2 li a.download{background:#e74c3c} .button2 li a.demo:hover,.button2 li a.download:hover{background:#666} .button2 li a.demo:active,.button2 li a.download:active{cursor:pointer} .button2 li a.demo:after,.button2 li a.download:after{content:'\f054';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:16px 24px;font-family:fontawesome;transition:all .3s} .button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animaton:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} @webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
5. Untuk menampilkan tombol download dipostingan silahkan tempelkan kode HTML dibawah ini
<div class="text-align:center;"> <ul class="button2"> <li><a class="demo" href="your url name" target="_blank">Demo Link</a></li> <li><a class="download" href="your url name" target="_blank">Download Link</a></li> </ul> </div> <div class="clear"></div>
Note : Ganti your url name dengan link download atau demo kamu
Result
Itulah tadi cara membuat tombol demo dan download responsive keren, semoga bisa membantu
EmoticonEmoticon