Sobat PB Blog, kali ini saya akan membagikan cara membuat tombo demo dan download di dalam postingan blog. Tombol demo dan download memang bisa di akali dengan menggunakan fitur <table></table> dengan sangat mudah, tapi kali ini agar menjadi ilmu bagi kita semua, maka kita coba modifikasi tombol demo dan download dengan melibatkan penambahan Tag di dalam template.
Style dari download demo dan downlod ini menggunakn CSS3
Langsung saja.
| Sangat Penting : Sebelum
melakukan pengeditan pada HTML Template Blog, masuk ke
Template>>Cadangkan/Pulihkan, download template anda biar kalau
ada kendala masih bisa mengembalikan format template sebelumnya atau
gunakan fasilitas key CTRL + Z untuk Undo fungsi. |
 |
| Fig. Contoh style 3 demo dan download button |
Langkah membuatnya :
Step 1>> Login ke Blogger Account
Step 2>> Masuk ke Template >>pilih Edit HTML
Step 3>> Cari kode ]]></b:skin> atau </style> dengan menekan CRTL + F pada keyboard, dan copy pastekan kode di bawah ini tepat di atas ]]></b:skin> atau </style>
Step 4>> Simpan Template, dan setiap sobat ingin membuat tombol demo dan download, pada saat melakukan postingan atau membuat artikel. Masuk ke mode HTML dan masukkan kode ini :
Untuk Style #1 :
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://www.URL.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.URL.com/" target="_blank">Download</a>
</div>
Untuk Style #2 :
<div style="text-align: center;">
<ul class="btn">
<li><a class="Demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="Download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
Untuk Style #2 :<a class="by-downloadbutton button" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: right;" target="_blank"><span style="display: inline-block;">Download</span></a>
Note : Ganti warna merah dengan URL atau alamat website untuk mendownload atau demoPilih salah satu tombol demo dan download di sini
Style #1
 |
| Fig. Tombol Demo dan Download |
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#f78d1d!important;background:0} .buttonx:active{position:relative;top:1px}
Style #2
 |
| Fig. Demo dan Download Button |
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn 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;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;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;}
|
| Fig. Contoh style 3 demo dan download button |
.button {-moz-border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);background:url("#") repeat-x scroll 0 0 #252424;border-bottom:1px solid rgba(0, 0, 0, 0.25);color:#FFFFFF !important;cursor:pointer;font-weight:bold;line-height:1;overflow:visible;font-size:17px;padding:8px 19px 9px;position:relative;text-decoration:none;text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);width:auto;}.by-demobutton {background-color:#222222;text-align:center;width:150px;}.by-demobutton:hover {background-color:#00A0EE;}.by-downloadbutton {background-color:#bcf50b;text-align:center;width:150px;}.by-downloadbutton:hover {background-color:#00AC00;}.button:hover {-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);}Demikian cara membuat tombol demo dan download