Membuat Tombol Demo Dan Download Dengan Css Di Blogger
Teman-sobat blogger pasti sudah tidak aneh dengan ulasan yang akan saya suguhkan kali ini, adalah wacana tips blogging bagaimana caranya menciptakan tombol atau button Demo dan Download untuk konten yang biasanya sahabat-teman bagikan kepada pembaca blog kalian.
Sedikit berbeda untuk ulasan kali ini button atau tombol Demo dan Download bukanlah berupa image atau gambar. Tombol Demo dan Download kali ini full atau murni ialah sentuhan dari CSS (cascading style sheet) yang tentunya mempunyai kelebihan tersendiri.
Berikut di bawah ini yaitu acuan dari tombol yang akan aku posting pada ulasan kali ini.
Selain itu kau juga bisa memakai cara yang lebih sederhana mirip yang sering aku pakai, mirip yang ada di bawah ini.
Silahkan kau coba salah satu dari kedua cara di atas, jangan lupa untuk mengganti link atau url di atas ke target url tujuanmu.
Semoga ulasan singkat saya kali ini dapat berguna dan bermanfaat bagi sobat-teman yang ingin memasang tombol demo dan download dengan CSS di blogger. Kembali aku ingatkan untuk jangan sungkan membagikan artikel yang bermanfaat melalui tombol share yang ada di bawah ini. Terima kasih.
Sedikit berbeda untuk ulasan kali ini button atau tombol Demo dan Download bukanlah berupa image atau gambar. Tombol Demo dan Download kali ini full atau murni ialah sentuhan dari CSS (cascading style sheet) yang tentunya mempunyai kelebihan tersendiri.
Demo Download
2. Setelah aba-aba di atas kau pasang, jangan lupa kamu "Save Template". Untuk melihat kesannya berikut ini yakni cara pemasangan tombol Demo dan Download tersebut pada postingan.
Untuk dapat memakai tombol Demo dan Download menggunakan CSS mirip di atas, silahkan kamu ikuti trik singkat berikut.
1. Silahkan kamu pergi ke sajian Edit/HTML dan tepat di atas isyarat ]]> tambahkan isyarat CSS yang ada di bawah ini.
/* -- Tombol demo dan download thesigit.net --*/ .buttonfloat:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both; .button ul margin:0;padding:0 .button lidisplay:inline;margin:0;padding:0 .demo border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; .download border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px; .demo:hover background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 .download:hover background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 2. Setelah aba-aba di atas kau pasang, jangan lupa kamu "Save Template". Untuk melihat kesannya berikut ini yakni cara pemasangan tombol Demo dan Download tersebut pada postingan.
Ingat! Jika cara pemasangan tidak bekerja dengan baik pada tab compose, silahkan kamu coba melalui tab HTML pada postingan.
Selain itu kau juga bisa memakai cara yang lebih sederhana mirip yang sering aku pakai, mirip yang ada di bawah ini.
Demo Download Silahkan kau coba salah satu dari kedua cara di atas, jangan lupa untuk mengganti link atau url di atas ke target url tujuanmu.
Semoga ulasan singkat saya kali ini dapat berguna dan bermanfaat bagi sobat-teman yang ingin memasang tombol demo dan download dengan CSS di blogger. Kembali aku ingatkan untuk jangan sungkan membagikan artikel yang bermanfaat melalui tombol share yang ada di bawah ini. Terima kasih.