Membuat Button Demo dan Download Di Blogspot

Selamat datang kembali di tutorial demangfedi.com, kali ini saya mau memberikan cara bagaimana membuat button atau tombol demo dan download di blogspot, banyak yang sudah membahas cara ini, namun tentunya berbeda-berbeda jenis button nya, button demo dan download sering digunakan untuk memposting template blogger, entah itu template gratis maupun template berbayar, cara pemasangannya pun ada yang di simpan di postingan ada juga yang di simpan di sidebar.
lihat cara pemasangannya Pemasangan di postingan DISINI
Anda juga bisa membuat tombon/button di blog sendiri, tentunya dipahami dulu scriptnya, siapa tahu tombol anda lebih bagus hehe, atau mau edit warna dan iconnya juga bisa.

CARA MEMBUAT BUTTON DEMO DAN DOWNLOAD DI BLOG ikuti langkah-langkah dibawah ini,

• Silahkan Login ke akun blogger Anda ==> Pilih Tema ==> Pilih Edit HTML.
• Cari kode ini ]]></b:skin> atau </style> dengan menekan Ctrl + F didalam kotak HTML, atau apabila sudah ada style css silahkan simpan kode dibawah ini setelah /* comment css */ atau di css postpage  

/* button demo dan download */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px; padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button 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;letter-spacing:0.5px;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;}
.demo {background-color:#028271;}
.download {background-color:#ff9e47;}
.demo:hover {background-color:#ff471a;color:#fff;opacity:1;}
.download:hover {background-color:#ff471a;color:#fff;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;}

Simpan template / tema anda
Bila ingin merubah warna terlebih dahulu silahkan cari kode yang berwarna merah dan warna html button anda, bila ingin mencari warna html silahkan DISINI dan anda bisa mengganti hover button anda silahkan ganti

CARA MENERAPKAN BUTTON / TOMBOL DEMO DAN DOWNLOAD DI BLOG

• Buat postingan / entri baru
• Silahkan ketik dulu postingan anda 
• Lalu pindah ke mode HTML di sebelah COMPOSE
• Copy dan paste kode dibawah ini pada mode HTML

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.demangfedi.com/" target="_blank" title='Demo'>Demo</a></li>
<li><a class="download" href="http://www.demangfedi.com/" target="_blank" title='Download'>Download</a></li>
</ul>
</div>
<div class="clear"></div>

Catatan :
Ganti URL http://www.demangfedi.com dengan URL anda atau URL googledrive anda
Contohnya seperti ini

Nanti saya akan bahas bagaimana cara menerapkan button / tombol demo dan download di sidebar blog 
Terima kasih telah membaca tutorial ini, semoga bermanfaat

Share :