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 demo

Pilih 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}

Note : Kita bisa mengganti warna background tombol tersebut sesuai selera. Cari warna favorite di Color Generator

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;}

Style #3
 

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

Share :

Facebook Google+ Twitter

Related Posts :