Cara Membuat Tombol Demo dan Download Lebih Keren

Tombol Download ataupun Demo yang biasa biasa saja dapat membuat kita bosan,apalagi pengunjung,oleh karena itu disini saya akan berbagi tentang Bagaiamana Cara Membuat Tombol Demo dan Download Lebih Keren

Untuk model tombol Demo / Download bisa kalian lihat dibawah ini

Cara Mempersingkat URL Link yang Panjang

1.Pertama buka Blogger
2.Masuk ke Blog anda yang ingin dipasang
3.Pilih bagian Template dan klik Edit HTML
4.Cari kode ]]></b:skin> dan letakan kode ini tepat diatas ]]></b:skin>

/* CSS Shortcodes */
.button{list-style:none;text-align:center;border:0;margin:10px;padding:2px;font-size:14px;clear:both;text-decoration:none;color:#fff}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:10px 15px!important;color:#fff!important;font-weight:400;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;border-radius:2px;border:1px solid #209bbd;letter-spacing:1px;transition:background-color .2s ease-out}
.demo,.download {background-color:#26a8cc;}
.demo:hover,.download:hover {background-color:#fff;color:#26a8cc!important;}
.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;transform:rotate(0deg);transition:rotate .2s 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;transform:rotate(0deg);transition:rotate .2s ease-out;}
.demo:hover:before,.download:hover:before{transform:rotate(360deg);}
.first-letter{float:left;color:#f77c6a;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}
.widget .post-body ul,.widget .post-body ol{line-height:1.5;font-weight:400}
.widget .post-body li{padding:0;line-height:1.5}
#flippy {text-align:center;}
#flippy button {margin:10px auto;cursor:pointer;font-family:'Open Sans',sans-serif;background-color:#4399cd;color:#fff;padding:10px 15px!important;text-transform:uppercase;border:none;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;}
#flippy button:hover, #flippy button:focus {outline:none;opacity:1;color:#fff;}
#flippanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e3e3e3;}
#flippanel {padding:24px;display:none;}
#flippanel img {background:#f5f5f5;margin:10px auto;}

Jika sudah silahkan klik Save Template dan belum selesai disini

Cara Penerapan-nya di artikel postingan

1.Untuk menerapkan di artikel/postingan kalian cuma harus menambahkan kode

<a class="demo" href="LINK TUJUAN">DEMO</a><br />

<a class="download" href="LINK TUJUAN">DOWNLOAD</a><br />

Untuk DEMO silahkan copy kode yang paling atas
Untuk DOWNLOAD silahkan copy kode yang paling bawah
dan jangan lupa ganti LINK TUJUAN dengan URL yang akan kalian siapkan jika di klik

Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.