Membuat Tombol Demo Dan Download Otomatis

Author : Oktavialei

Membuat Tombol Demo Dan Download Style Otomatis. Sobat blogger kali ini saya akan membuat posting yang tentu saja akan bermanfaat untuk blog sobat tentunya karean ini akan berguna untuk blog yang menggunakan niche atau label dengan tema template providing gratis atau tidak di husus kan juga, maka dengan cara ini blog sobat bisa terlihat lebih profesional dalam menyajikan suguahan untuk link demo dan download, tentu ini sangat penting untuk blog sobat, jika link dimanipulasi dengan font awesome yang cukup keren maka akan lebih efektiv , untuk artikel ini saya akan memberikan metode sederhana membuat sebuah tombol demo dan download dengan lebih bergaya untuk sebuah blog blogger, dan ini akan lebih terlihat lebih menarik di bandingkan dengan hanya mengguanakan teks yang berisi link saja dan itu akan terlihat asal-asalan, maka dari itu mari kita buat sedikit lebih berbeda dan lebih profesional, untuk cara pembuatannya sangat mudah :

1) Cara pertama sobat harus memasang CSS plugin Font Awesome.

• Buka akun blogger sobat.
• Pilih menu Template ,Klik Edit HTML
• Silahkan Cari Kode </head> , Gunakan CTRL+F untuk memudahkan pencarian.
• Lalu Copy kode di bawah ini dan letakan di atas kode </head> tadi.

 

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

3) Selanjutnya ke kode script pembuatan Tombol demo dan download style otomatis

• Sekarang silahkan sobat cari kode ]]></b:skin> atau </style>
• Lalu copy kode di bawah ini dan letakan tepat di atas kode tadi

.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; 
}

• Klik simpan template.

Cara menggunakannya silahkan perhaitkan.

• Gunakan kode HTML di bawah ini , gunakan saat membuat posting di menu HTML.

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

• Ganti Link http://0x.blogspot.com sesuai keinginan sobat.

Nah itulah tutorial cara membuat tombol demo download style secara otomatis pada blog.
kalo ada keluhan untuk tutorial ini silahkan ajukan di kolom komentar, lebih dan kurnagnya saya mohon maaf.