Senin, 09 April 2018

Cara Membuat Tombol Download & Demo Simpel di Blog

Cara Membuat Tombol Download & Demo Simpel di Blog

Cara Membuat Tombol Download & Demo Simpel di Blog
Blog Mang Otep | Cara Membuat Tombol Download dan Demo Simpel di Blog lebih tepatnya akan terletak pada setiap Postingan Blog anda, sebenarnya tombol ini tidaknya hanya untuk demo dan download saja tetapi bisa juga untuk tombol menu, tombol belanja atau beli, tombol kunjungi, dan masih banyak lagi kegunaannya.

Cara Membuat Tombol Download & Demo Simpel di Blog - Untuk blog atau website yang berisi template blogspot / wordpress atau lain - lain, tombol ini sangat berguna untuk menunjukkan dimana letak untuk download dan melihat demo nya. Tombol ini bisa mempercantik tampilan blog anda dengan beberapa editan CSS yang baik dan benar.

Ada 2 cara sebenarnya untuk Membuat Tombol Download & Demo Simpel di Blog ini, akan saya jelaskan satu persatu sampai selesai, dan semoga anda bisa memahami apa yang saya sampaikan. Untuk singkatnya mari kita laksanakan tutorial ini langsung sekarang juga.

Cara Membuat Tombol Download & Demo Simpel di Blog (1) :

Cara Setting kedalam edit HTML
1. Masuk ke Blogger.com
2. Masuk ke Menu Tema >> edit HTML
3. Copy dan Paste kode berikut ini diatas 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}

4. Warna Background bisa kalian ganti sendiri dengan keserasian template anda.
5. Save Template.

Cara Penerapan dalam Postingan
1. Saat menulis artikel kalian masuk mode HTML
2. Copy kode berikut ini sesuai posisi tombol yang kalian inginkan.


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

3. Ganti link diatas dengan alamat yang anda inginkan.
4. Publish !!

Cara Membuat Tombol Download & Demo Simpel di Blog (2) :

1. Langsung masukkan CSS dan HTML ketika ingin posting artikel
2. Masuk mode HTML pada postingan
3. Copy kode dibawah ini sesuai posisi tombol yang ingin anda tampilkan


<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.mangotep.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.mangotep.com/" target="_blank">Download</a>
</div>

4. Ganti url dan nama yang kalian mau dan Publish !!

Jadinya kayak gini gan :
Nah demikianlah informasi dari Blog Mang Otep tentang artikel Cara Membuat Tombol Download & Demo Simpel di Blog, semoga bermanfaat untuk anda. Dan jika menyukai artikel kami silahkan klik like and subscribe untuk mendapatkan artikel terbaru melalui email pribadi anda. Terima Kasih.

Salam Blogger.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments