Cara Membuat Tombol Demo dan Download dengan Balutan Font Awesome
Membuat Tombol Demo dan Download dengan Font Awesome - Cara ini sangat dibutuhkan bagi blogger yang ingin share template hasil buatannya sendiri. atau hasil karya orang lain. pokoknya tidak lepas dari template atau blog download
Untuk lebih meyakinkan. agan bisa lihat dibawah iniHow to
1. Masuk dulu ke Blogger > Edit HTML
2. Simpan kode CSS 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. Gunakan HTML dibawah ini. untuk memasang Tombol Download Dan Demo
<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>4. Save Template
Sekian dari saya semoga bermanfaat. Terimakasih
0 komentar:
Posting Komentar
Terimkasih kepada anda yang sudah komen yang relevan