October 5, 2015

Cara Membuat Tombol Demo & Download di Posting Blog

October 5, 2015

Cara Membuat Tombol Demo & Download di Posting Blog
CARA Membuat Tombol Demo & Download di Posting Blog ini tidak sebatas Demo & Download Button, tapi juga bisa untuk tombol, menu, atau link lainnya di posting blog, misalnya "BELI", "KUNJUNGI", atau link menu lainnya.

Jika Anda suka berbagi template gratis, tentu Tombol Demo & Download di Posting Blog ini sangat penting dan bagus, lebih menarik, sebagaimana gambar ilustrasi tulisan ini.

Cara Membuat Tombol Demo & Download di Posting Blog

CB ambil kodenya dari Leet Blogger. Berikut ini cara membuatnya:

1. Template> Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin> atau </style>

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

Catatan: Warna background bisa diubah sesuai dengan selera. Lihat: Kode Warna HTML.

3. Save Template!

CARA MENERAPKANNYA
1. Klik mode HTML saat menulis posting
2. Masukkan kode berikut ini beserta linknya

<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://www.contohblog.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.contohblog.com/" target="_blank">Download</a>
</div>

Jika mau menambah tombol, tinggal tambahkan kode:

<a class="buttonx" href="http://www.contohblog.com/" target="_blank">Nama Tombol</a> 

Ganti alamat blognya dengan link Anda!

3. Publish!

ALTERNATIF
Bisa juga Membuat Tombol Demo & Download di Posting Blog ini dengan langsung memasang kodenya di postingan, tanpa menyimpan kode HTML di dalam template. Caranya:

1. Klik Mode HTML
2. Copas saja kode berikut ini:

<style>
.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>
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://www.contohblog.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.contohblog.com/" target="_blank">Download</a>
</div>

Ganti link dan nama tombolnya!

3. Publish!

Hasilnya seperti ini:



Demikian Membuat Tombol Demo & Download di Posting Blog. Good Luck! (http://www.contohblog.com/).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

6 comments on Cara Membuat Tombol Demo & Download di Posting Blog

  1. udah template baru aeee mas...ngerih.

    ReplyDelete
    Replies
    1. tepatnya... modif terbaru dari template lama :)

      Delete
    2. Mantap.. New Johny Wuss V3 :)

      Delete
  2. Mantap gan tutornya, sorry gan oot nih, ane pake template agan yang NJW V3 tapi kotak searchnya gak ada ya gan? tlng gan dibantu, sama tlng agan liat bagian credit link saya ubah seperti itu diizin apa gak jika tidak saya akan kembalikan lg trima kasih.

    ReplyDelete
    Replies
    1. 1. Kode kotak pencarian bisa diambil di sini: http://genesisseo.blogspot.co.id/2015/06/kotak-pencarian-simple-search-box-html.html

      2. Ok, credit link gak masalah, intinya tidak menghapus link maskolis dan cb blogger. Thanks

      Delete
    2. 1. Maaf gan saya sudah terapkan tapi hasilnya beda tapi sudah gpp gan
      saya ingin yang natural saja

      2. Terima kasih atas izinnya dengan link yang saya pindahkan.

      3. Oot lagi gan maaf kebanyakan nanya, itu title di fanpage saya gak bisa
      warna putih gan tlng lagi bantuannya saya sudah kutak katik gak
      ketemu makasih sebelumnya. ini ss nya

      file:///C:/Documents%20and%20Settings/User/My%20Documents/Arsip%20blog/contoh.jpg

      Delete

Contact Form

Name

Email *

Message *