√ Cara Menciptakan Tombol Demo Dan Download Pada Blog

Mungkin anda pernah melihat tombol demo dan d0wnl0ad ini pada ketika mengunjungi blog yang membagikan template gratis. Cara menciptakan tombol demo dan d0wnl0ad ini tidaklah sulit. Jika anda ingin membuatnya, berikut langkah-langkahnya.

1. Seperti biasanya, yang pertama silahkan anda login dulu ke Blogger

2. Pilih Template » Edit HTML

3. Pasang isyarat dibawah ini sempurna diatas isyarat ]]></b:skin>

.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:#008000!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. Simpan template

5. Langkah selanjutnya, anda buat postingan baru

6. Untuk menciptakan tombol demo dan d0wnl0ad, pilih HTML

7. Pasang isyarat dibawah ini

<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="https://goo.gl/XltEvr" target="_blank">Demo</a>
<a class="buttonx" href="https://goo.gl/ggLcE1" target="_blank">Download</a>
</div>

8. Pilih Compose kemudian Publikasikan


Namun kalau anda tidak ingin repot, dapat menggunakan cara dibawah ini :

1. Langsung buat postingan baru

2. Pilih HTML, kemudian pasang isyarat 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:#008000!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="https://goo.gl/XltEvr" target="_blank">Demo</a>
<a class="buttonx" href="https://goo.gl/ggLcE1" target="_blank">Download</a>
</div>

Baca juga :
» Cara Memasang Profile Keren Pada Blog
» Cara Praktis Membuat Kolom Permalink Keren
» Cara Praktis Membuat Widget Banner Iklan Link Teks Pada Blog

3. Pilih Compose kemudian Publikasikan

Maka kesannya akan menyerupai ini :

Demo  Download

Tidak sulit kan menciptakan tombol demo dan d0wnl0ad ini! Semoga artikel ini dapat membantu dan bermanfaat. Terima kasih atas kunjungannya and happy blogging.


Sumber http://ap-thea.blogspot.com