Membuat Tombol Demo & Download dengan kode CSS

Unknown   January 05, 2017   Internet, TUTORIAL   Comment  

Link adalah tautan yang menghubungkan antara halaman satu dengan halaman yang lain. Sesuai dengan judul yaitu Cara Membuat Tombol Demo & Download dengan kode CSS.

Yiatu dengan menggunakan kode CSS yang diletakkan di </style> atau ]]></b:skin> Langsung ikuti langkah - langkah berikut ini, jika ingin memasangnya.

Screenshoot :

Cara Pertama :

1. Buka Blogger - Kemudian login.
2. Dashboard - Template.
3. Edit HTML.

Proses Pembuatan : 

1. Temukan kode </style> atau ]]></b:skin>

2. Copy&paste kode CSS berikut ini, dan letakkan diatas kode </style> atau ]]></b:skin>

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn 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;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:&#39;\f135&#39;;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:&#39;\f019&#39;;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;}

 3. Terakhir, anda buat Postingan / Entri Baru. Pilih HTML Bukan Compose.
Perhatikan gambar berikut ini!

 

4. Copy Lalu paste kode HTML berikut ini dan letakkan di bagian HTML bukan Compose pada Postingan atau Entri Baru.

 <div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="http://www.tikuspintar.ga/" target="_blank">DEMO</a></li>
<li><a class="download" href="http://www.tikuspintar.ga/" target="_blank">Free Download Template</a></li>
</ul>
</div>

Note:

Silakan ganti http://www.tikuspintar.ga/ dengan link Demo / Download Anda .

5. Selesai. Tinggal buat postingan anda .


NOTE : Bila Anda Kurang Mengerti Kalian Bisa Chat Saya Di Facebook .

ADMIN