Cara Membuat Tombol Demo dan Download Simpel di Blogger

Tutorial cara membuat tombol "Demo" dan "Download" di dalam posting blog Blogspot memang sudah banyak di bagikan oleh teman-teman blogger lain, baik blogger Indonesia maupun blogger luar negeri. Namun barangkali saja Anda suka dan berminat dengan tutorial yang saya bagikan sekarang. dengan tampilan tombol demo download yang lumayan cukup enak dan keren di pandang mata.

Biasanya tombol ini digunakan untuk berbagi template, atau link demo atau download saja.

Nah, untuk tutorial-nya mari kita simak sama-sama di bawah ini.

1. Pertama tentunya silahkan Anda login terlebih dahulu ke akun blogger Anda ⇨ klik template ⇨ Edit HTML.
2. Selanjutnya copy pastekan kode di CSS di bawah ini sebelum ]]></b:skin>. gunakan CTR + F untuk memudahkan pencarian.

.button {
  list-style:none;
  text-align:center;
  width:95%;
  font-size:14px;
  clear:both;
  margin:10px;
  padding:2px;
}

.button ul {
  margin:0;
  padding:0;
}

.post-body ul.button {
  list-style:none;
  text-align:center;
  font-size:14px;
  clear:both;
  z-index:2;
  margin:20px auto;
  padding:2px;
}

.button li {
  display:inline;
  list-style:none;
  margin:0 5px;
  padding:0;
}

.post-body ul.button a.demo,.post-body ul.button a.download {
  display:block;
  background:#97b28e;
  max-width:180px;
  color:#fff;
  font-weight:700;
  font-size:14px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.5px;
  border-radius:3px;
  transition:all .3s;
  margin:auto;
  padding:8px 12px;
}

.post-body ul.button a.demo {
  background:#375593;
}

.post-body ul.button a.download {
  background:#dd4b39;
}

.post-body ul.button a.demo:hover,.post-body ul.button a.download:hover {
  opacity:.9;
  color:#fff;
}

3. Kemudian klik Simpan template.

4. Untuk penggunaanya, silahkan gunakan kode berikut ini ketika membuat posting. (tambahkan dalam tab HTML)

<div style="text-align: center;">
<ul class="button">
<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>
</div>

Silahkan ganti tulisan ini YOUR-LINK-HERE dengan URL yang ingin Anda Gunakan.

Jika Anda ingin menggunakan satu tombol saja maka silahkan Anda hapus kode yang tidak di pakai. maka hasilnya akan seperti di bawah ini :

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
</ul>
</div>
</div>

Gimana sobat mudah bukan ?

Demikian tutorial yang bisa saya sampaikan. semoga bermanfaat.

Cara Membuat Tombol Demo dan Download Simpel di Blogger

Artikel Terkait