Cara Membuat Tombol Demo & Download di Posting Blog
October 5, 2015
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.
1. Template> Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin> atau </style>
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
Jika mau menambah tombol, tinggal tambahkan kode:
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:
Ganti link dan nama tombolnya!
3. Publish!
Hasilnya seperti ini:
Demikian Membuat Tombol Demo & Download di Posting Blog. Good Luck! (http://www.contohblog.com/).*
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>
<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>
.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
« Prev Post
Next
Next Post »
Next Post »
udah template baru aeee mas...ngerih.
ReplyDeletetepatnya... modif terbaru dari template lama :)
DeleteMantap.. New Johny Wuss V3 :)
DeleteMantap 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.
ReplyDelete1. Kode kotak pencarian bisa diambil di sini: http://genesisseo.blogspot.co.id/2015/06/kotak-pencarian-simple-search-box-html.html
Delete2. Ok, credit link gak masalah, intinya tidak menghapus link maskolis dan cb blogger. Thanks
1. Maaf gan saya sudah terapkan tapi hasilnya beda tapi sudah gpp gan
Deletesaya 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