Cara membuat Tombol Otomatis untuk Demo dan Download ~ BLOG MINAN

Tombol yang seringkita liat di dalam sebuah WEBSITE online yang terlihat bagus itu bisa kita pakai di blogger dengan cara yang berbeda dengan WEBSITE, dikarnakan didalam blogger semua kita lakukan secara manual melalui cara yang akan saya bahas kali ini.

Sekarang saya akan memberitahu cara membuat Tombol Otomatis untuk Demo dan Download seperti gambar diatas.

Cara membuat tombol demo download menggunakan font awesome.
1. Buka akun blogger anda
2. Pilih menu Template > Klik Edit Html
3. Lalu silahkan anda Copy kode CSS di bawah ini dan letakan tepat di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Baca Juga

4. selanjutnya silahkan anda copy code dibawah ini dan letakan tepat di atas 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;

}

5. Klik save template.

Cara menggunakannya.
Gunakan kode Html dibawah ini di mode Tab Html.

<div style="text-align: center;">

<ul class="buttonx">

<li><a class="demo" href="http://www.blogminan.blogspot.co.id" target="_blank">Demo</a></li>

<li><a class="download" href="http://www.blogminan.blogspot.co.id" target="_blank">Download</a></li>

</ul>

</div>

<div class="clear"></div>