Langsung ikuti langka-langkahnya di bawah ini :
1.Tambahkan link font awesome berikut di atas </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
2.Masuk Blogger-Template-Edit HTML dan letakan kode CSS di bawah ini di atas ]]></b:skin>
/* CSS Button Style by http://ariez28juli.blogspot.com */
.tombol{float:left;list-style:none;text-align:center;width:100%;margin:10px;padding:2px;font-size:14px;clear:both}
.tombol ul{margin:0;padding:0}
.tombol li{display:inline;margin:5px;padding:0;list-style:none}
.tombol li a.demo,.tombol li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;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}
.tombol li a.download{background:#3498db}
.tombol li a.demo:hover,.tombol li a.download:hover{background:#666}
.tombol li a.demo:active,.tombol li a.download:active{cursor:pointer}
.tombol li a.demo:after,.tombol li a.download:after{content:'\f101';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:10px;font-family:fontawesome}
.tombol li a.download:after{content:'\f0ed'}
3.Simpan atau save Template
4.Untuk Penggunaanya silahkan tambahkan kode berikut ketika akan membuat postingan tambahkan di HTML jangan di Compose
<div style="text-align: center;">
<ul class="tombol">
<li><a class="demo" href="http://ariez28juli.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://ariez28juli.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Silahkan ganti http://ariez28juli.blogspot.com dengan alamat anda, untuk melihat contohnya silahkan klik demo di bawah ini
Demikian tutorial cara mudah membuat tombol atau button pada blog semoga dapat membantu dan bermanfaat. Terimakasih
