Membuat Tombol Demo Dan Download Dengan Font Awesome

Membuat Tombol Demo dan Download dengan Font Awesome - Pada ketika kita membagikan template atau software tidak jauh dengan namanya demo dan download. kini aku akan membagikan tutorial pembuatan tombol demo dan download tapi pada postingan ini aku menggunnakan font awesome anda dapat baca bagaimana Memasang Plugin Font Awesome di Blogger.

Untuk penampakan lihat gambar diatas atau dapat menyerupai dibawah ini:

Demo Download

Tutorial pembuatan:

1. Masuk dashboard Blogger > Template dan Edit HTML
2. Simpan instruksi CSS diatas instruksi ]]></b:skin> atau </style>

Baca Juga

.buttonx{ float:left; list-style:none; text-align:center; width: 100%; margin:5px 0; padding:0; font-size:14px; clear:both; }  .buttonx ul { margin:0;padding:0 }  .buttonx li{ display:inline; margin:0; padding:0 }  .demo { border: none;border-radius:2px; padding: 8px 19px !important;  background: #E55E48;  color: #fff !important; text-align: center;  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color .4s ease-out 0s; }  .download { border: none;border-radius:2px; padding: 8px 19px !important;  background: #2ecc71;  color: #fff !important; text-align: center;  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color .4s ease-out 0s; }  .demo:hover {  background: #454242; text-decoration:none  }  .download:hover {  background: #454242; text-decoration:none  }  .download:before {  content : "\f019";  font-family : FontAwesome;  font-weight : normal;  padding :11px 11px 9px !important;  background : #27ae60;  margin-left : -19px;  margin-right : 6px;  border-radius : 3px 0 0 3px;  font-size : 16px;  }  .demo:before {  content : "\f06e";  font-family : FontAwesome;  font-weight : normal;  padding : 11px 11px 9px !important;  background : #c0392b;  margin-left : -19px;  margin-right : 6px;  border-radius : 3px 0 0 3px;  font-size : 16px;  }

3. Untuk penggunaan HTML menyerupai dibawah ini:

<div style="text-align: center;"> <ul class="buttonx"> <li><a class="demo" href="https://teritorinulled.blogspot.com" target="_blank">Demo</a></li> <li><a class="download" href="https://teritorinulled.blogspot.com" target="_blank">Download</a></li> </ul> </div> <div class="clear"></div>

4. Simpan Template

Semoga bermanfaat tutorial Membuat Tombol Demo dan Download dengan Font Awesome.