Cara Membuat Tombol Demo & Download Keren

Cara Membuat Tombol Demo dan Download Keren. Tutorial cara membuat button / tombol demo dan download mungkin sudah banyak di bagikan di blog-blog lain, namun barangkali saja anda suka dan berminat dengan tutorial yang saya bagikan sekarang dengan tampilan tombol demo download yang lumayan cukup enak dan keren di pandang mata, bagi anda yang mempunyai blog yang bertema atau niche download atau share template, maka akan sangat cocok sekali dengan tampilannya yang terlihat lebih profesional.

Tombol demo download ini sengaja saya pasangkan icon font awesome supaya terlihat lebih bergaya dan juga bisa di ganti sesuka anda untuk gambar icon tersebut, oke sobat blogger, saya rasa tidak banyak sekali penjelasannya, untuk yang berminat membuat tombol demo download ini, silahkan simak baik-baik.

Cara Membuat Tombol Demo & Download Keren.

1. Buka akun blogger anda.

2. Pilih menu template dan klik edit html.

3. Lalu letakan kode di bawah ini tepat di atas kode </head>

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

4. Selanjutnya letakan kode di bawah ini tepat di atas kode </b:skin> atau </style>

/* Button demo download By www.oktavialie.web.id */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px; padding:2px;font-size:14px;clear:both;} .button ul {margin:0;padding:0} .button li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download {padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;} .demo {background-color:#5a6269;} .download {background-color:#ff9e47;} .demo:hover {background-color:#ff9e47;color:#fff;opacity:1;} .download:hover {background-color:#5a6269;color:#fff;opacity:1;} .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

5. Klik save / simpan template.

Cara penggunaan.
-Letakan kode dibawah ini pada mode "HTML"

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.oktavialie.web.id/" target="_blank" title='Demo'>Demo</a></li>
<li><a class="download" href="http://www.oktavialie.web.id/" target="_blank" title='Download'>Download</a></li>
</ul>
</div>
<div class="clear"></div>

Ganti link http://www.oktavialie.web.id/ dengan link yang anda inginkan.


Oke sobat blogger, sekian untuk tutorial bagaimana cara membuat tombol demo download dengan background dan lebih keren, lebih dan kurangnya saya mohon maaf. salam sukses