July 26, 2019

Trik membuat tombol DEMO dan DOWNLOAD sederhana dan ringan hanya dengan CSS

editblogSOHO updated
Sederhana yang saya maksud adalah tidak menggunakan font awsome atau link gambar dengan deklarasi URL seperti contoh: https://1.bp.blogspot.com/-...jpg. Keunggulannya adalah:
  1. Sederhana
  2. Cepat loading atau tidak membebani loading
  3. Hanya HTML CSS
Langkah pertama Caranya adalah:
LETAKAN CSS
  1. Masuk kepengaturan blogger
  2. Pilih tema (atau theme kalau bahasa Inggris)
  3. Pilih sesuaikan (atau Customize kalau bahasa Inggris)
  4. Dari sini kita telah masuk ke opsi "Blogger theme designer" Pilih lanjutan (Advance kalau bahasa Inggris)
  5. Pada sebelah kanan muncul menu dropdown scroll menu keatas hingga ketemu tambahkan CSS (ADD CSS) yang letaknya paling bawah.
  6. Klik menu tersebut akan muncul kotak blanko CSS kosong.
  7. Selanjutnya copy kode css dibawah ini pastekan kedalam kotak blanko CSS kosong tadi:
.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;}
Save template.
Langkah kedua:
Buat tombol download.
Pada saat membuat konten tutorial atau link demo dan download, Masuk ke opsi HTML bukan Compose ya..Letakan kode berikut diposisi manapun sobat suka di dalam konten yang sobat buat:
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="taroh link demo disini" target="_blank">DEMO</a></li> <li><a class="download" href="taroh link konten download disini" target="_blank">DOWNLOAD</a></li> </ul> </div>
url merah adalah link halaman demo contoh dari editblogtema, sedangkan url warna pink adalah link konten yang di download. Kuning adalah deklarasi tombol.
Save template.
Silahkan download template ini. Karena menggunakan template ini blog sobat akan memiliki keunggulan:
  1. Template ori dengan sentuhan premium
  2. Memiliki semua opsi sebuah template premium
  3. Gratis tidak murahan
  4. Mudah di edit
  5. Sokongan abadi melalui halaman blog tutorial ini
  6. Keamanan Google yang tidak perlu diragukan
  7. dll

Selamat ngeblog!

www.editblogtema.net

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist

2 comments:

  1. Inspiratif, kebetulan lagi nyari CSS buat tombol untuk blogger. Terima kasih bang. Mungkin bisa dibuatkan link style sheet nya biar gak terlalu panjang kodenya.

    ReplyDelete
    Replies
    1. Maksudnya CSS style? itu sama saja karena:

      Kalau css pada tutorial ini di pastekan kedalam kotak CSS melalui pengaturan "theme blogger designer" itu malah jauh lebih sederhana ketimbang meletakan CSS style ke dalam blogger editor HTML. Karena tempatnya di dalam tag head yakni diatas : </style> atau dibawah : <style>

      Delete