Tutorial membuat tombol Demo dan Download

Tutorial Cara membuat tombol Demo dan Download responsive -  bagi blogger newbie mungkin mereka masih bingung mencari tutorial Bagaimana cara membuat tombol demo dan download pada postingan blog . terutama untuk pembuatan artikel seperti template ,script koding dan lain-lain ,sebagian dari mereka akan membutuhkan tombol Demo Dan Download untuk kepuasan si pengunjung ,tidak hanya itu blog  anda juga akan terlihat professional .

Namun bagaimana kah contoh tombol demo dan download yang kami buat ini ?

Seperti yang anda lihat pada gambar postingan ini , itulah contoh tombol demo dan download yang akan kita buat pada kesempatan kali ini , memang terlihat sederhana dan sudah banyak yang share namun sangat bermanfaat .


sebelum itu saya ucapkan terima kasih kepada anda karena anda telah berkunjung ke blog kami yang sederhana ini  dan terima kasih pula karena anda telah membaca artikel dari kami .

Perlu anda tahu " tombol demo download ini juga sangat bergaya di bandingkan dengan hanya menggunakan teks saja, jadi bagi anda yang ingin membuatnya, silahkan ikuti tutorial ini.

Berikut tutorial Membuat tombol DEMO dan DOWNLOAD by Bloggergov :


1. Masuk ke Akun Blogger Anda
2. Pilih akun blogger anda
3. Pilih menu Template > Klik Edit Html
4. Silahkan anda Copy kode CSS di bawah ini dan letakan tepat di atas kode </head>  

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Note: " untuk mempermudah pencarian kode yang ada di Edit html ,tekan CTRL+F pada keyboard anda lalu ketikan/paste kode yang akan anda cari ,lalu enter "

5. copy dan paste code dibawah ini dan letakan tepat di atas kode ]]></b:skin> atau </style>

.buttonx{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:14px;
clear:both;
}

.buttonx ul {
margin:0;padding:0
}

.buttonx li{
display:inline;
margin:0;
padding:0
}

.demo {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #E55E48;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.download {
border: none;border-radius:2px;
padding: 8px 19px !important;
background: #2ecc71;
color: #fff !important;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}

.demo:hover {
background: #454242;
text-decoration:none
}

.download:hover {
background: #454242;
text-decoration:none
}

.download:before {
content : "\f019";
font-family : FontAwesome;
font-weight : normal;
padding :11px 11px 9px !important;
background : #27ae60;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}

.demo:before {
content : "\f06e";
font-family : FontAwesome;
font-weight : normal;
padding : 11px 11px 9px !important;
background : #c0392b;
margin-left : -19px;
margin-right : 6px;
border-radius : 3px 0 0 3px;
font-size : 16px;
}

6. Selesai , Silahkan Save Template Anda

Untuk Cara penggunaannya :

Cara penggunaan ini bertujuan untuk supaya tombol Demo Dan Download muncul pada setiap postingan yang anda butuhkan .

Copy dan paste kode di bawah ini setiap kali anda membuat postingan yang memerlukan Tombol Demo dan Download , dengan catatan sudah mengikuti cara pemasangannya di atas .

<div style="text-align: center;">
<ul class="buttonx">
<li><a class="demo" href="www.bloggergov.com target="_blank">Demo</a></li>
<li><a class="download" href="www.bloggergov.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Jangan lupa anda save kode untuk menampilkan tombol demo dan download diatas .






Incoming Search :

Cara mudah membuat tombol demo dan download
Cara membuat tombol demo donwload lengkap
cara membuat tombol download dan dewmo
tutorial cara membuat tombol demo dan download
tutorial mudah membuat tombol demo dan download
Tutorial bagaimana cara membuat tombol Demo dan Download
Bagaimana cara membuat tombol demo dan download
langkah membuat tombol demo download
langkah-langkah membuat tombol demo dan download
langkah-langkah membuat tombol demo
cara membuat tombol demo download untuk blogger
membuat tombol demo download untuk blog

Tweet