Membuat Tombol Demo dan Download Dengan Font Awesome Keren
Membuat Tombol Demo dan Download dengan Font Awesome Keren - Tombol Demo dan Download sudah banyak ditemui di blog dengan niche Share Template. Namun Tidak sedikit pula di lain blog. jadi kali ini saya akan memberikan tips bagaimana cara untuk membuat tombol demo dan download tersebut
Untuk melihat seperti apa. anda bisa melihatnya dibawah ini 
Langkah pembuatan
1. Masuk ke blogger> pilih blog yang akan di edit > Template Lalu Edit HTML2. Simpan kode dibawah ini diatas kode
]]></b:skin> atau </style>
.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. Lalu Simpan Template
4. Penggunaannya anda hanya menggunakan HTML di bawah ini disaat membuat postingan dengan Mode HTML:
<div style="text-align: center;">
<ul class="buttonx">
<li><a class="demo" href="http://hollabacktexas.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://hollabacktexas.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Oke sekian dari saya untuk klai ini Semoga postingan Tentang Membuat Tombol Demo dan Download Dengan Font Awesome Keren ini dapat bermanfaat bagi anda. Terimakasih
Posting Komentar
Terimakasih sudah berkunjung. sempatkanlah diri anda untuk berkomentar