Mengingat kematiannya chester bennington yang baru saja terjadi maka saya akan membagikan tombol demo dan download pada artikel ini. //ganyambung ih
Memasang tombol demo dan download yang digunakan pada blog ini sangatlah mudah. Kalian tinggal simpan kode css diatas tag ]]></b:skin> atau </style> dan untuk memanggilnya kalian tinggal gunakan kode html yang nanti saya berikan. Desain tombol ini juga sangatlah simpel. Untuk demonya akan saya berikan dibagian bawah artikel ini.
Cara Membuat Tombol Demo dan Download di Blogger
Tombol ini menggunakan Font Awesome. Jika kalian belum memasang link Font Awesome silahkan simpan kode dibawah ini diatas tag </head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
1. Masuk ke Blogger > Tema > Edit HTML
2. Simpan kode dibawah ini diatas kode ]]></b:skin> atau </style>
/*Button CSS*/
.post-body .button{width:100%;padding:0!important;list-style:none;margin:10px auto!important}
.post-body .button li{display:inline-block;width:49%;line-height:normal;margin:0}
.post-body .button li a{position:relative;display:block;padding:15px;margin:5px;color:#fff;text-align:center;text-transform:uppercase;border-radius:3px}
.post-body .button li a.demo{background:#dda245;}.post-body .button li a.demo:hover{background:#c18e3d;}
.post-body .button li a.download{background:#529cce;}.post-body .button li a.download:hover{background:#4686b0;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}Jika kalian ingin menggunakan tombol ini cukup gunakan kode dibawah ini di mode HTML
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="#">DEMO</a></li>
<li><a class="download" href="#">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear">
</div>Jika kalian hanya ingin menggunakan tombol demo saja, kalian tinggal hapus baris kode dibawah ini.
<li><a class="download" href="#">DOWNLOAD</a></li>Jika kalian hanya ingin menggunakan tombol download saja, kalian tinggal hapus baris kode dibawah ini.
<li><a class="demo" href="#">DEMO</a></li>DEMO TOMBOL DEMO DAN DOWNLOAD
Jika kalian memiliki permasalahan atau pertanyaan dalam pemasangan widget ini, silahkan berikan komentar di artikel ini. Terimakasih.
