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, jika sempat kunjungi blog download template saya yaitu Pejuang Template. Tombol ini membuat artikel anda keren ,jika yang biasa kan hanya tulisan saja, pengunjung sering tidak melihat tulisan itu dan kebingungan mencari tulisan itu, ayo coba tombol seperti ini!!!!
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 !!!!
