Cara Membuat Tombol Demo Dan Download Pada Blog

Cara Membuat Tombol Demo Dan Download Pada Blog

Nah kesempatan kali ini saya mau update posting tentang Cara Membuat Tombol Demo Dan Download Pada Blog. Memang tombol seperti ini banyak dicari oleh orang yang punya blog download seperti download software atau download template . Tombol ini digunakan oleh admin blog tersebut untuk mempermudah pengunjung untuk mendownload software ataupun template yang dibagikan oleh sang admin.

Tombol ini dimodifikasi dengan responsive mungkin agar tidak dapat memberatkan blog. Jadi, tidak perlu khawatir untuk menggunakan tombol seperti ini. Tombol ini tentunya dibuat cerah agar mempermudah pengunjung untuk dapat mencari tombol download ataupun  demo. Jika anda berminat, silahkan ikuti langkah dibawah!

Langkah-Langkah

1. Buka Blogger Kamu

2. Masuk Template dan Klik Edit Htm
3. Letakkan Kode Dibawah Ini Diatas 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; 
} 

3. Lalu Simpan Template
4. Penggunaannya anda hanya menggunakan HTML di bawah ini disaat membuat postingan dengan Mode HTML:

<div style="text-align: center;">

<ul class="buttonx">
<li><a class="demo" href="http://www.kangmasarif.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.kangmasarif.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div> 

Nah mungkin sekian saja dari saya semoga bermanfaat , sampai jumpa !!!!