Membuat Tombol Demo dan Download Dengan Icon Keren ala Ilmu Sementara - Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini.
Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.
Untuk demonya, nantinya seperti ini :
Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.
Untuk demonya, nantinya seperti ini :
Jika Kalian Ingin Mengganti Gambar Icon Nya Silahkan :
Cara Membuatnya:
Tambahkan kode di bawah ini diatas kode
]]></b:skin>/* -- Llylsll.blogspot.com Button --*/Lalu Setelah itu Tambahkan kode di bawah ini diatas kode
.button {
text-align: center;
width: 100%;
margin: 10px 0;
padding: 0;
font-size: 14px;
font-family: 'Tahoma', Geneva, Sans-serif;
color: #fff;
margin-left: 0em !important;
}
.button ul {
margin: 0;
padding: 0;
}
.button li {
display: inline-block;
margin: 10px 0;
padding: 0;
}
.demo {
border-radius: 3px;
padding: 8px 12px;
background: #e74c3c;
color: #fff !important;
transition: background-color 1s 0s ease-out;
}
.download {
border-radius: 3px;
padding: 8px 12px;
background: #3498db;
color: #fff !important;
transition: background-color 1s 0s ease-out;
}
.buton a {
color: #fff;
}
.demo:hover {
background: #c0392b;
color: #fff;
}
.download:hover {
background: #2980b9;
color: #fff;
}
.download:before {
content: "\f019";
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
background: #2980b9;
margin-left: -12px;
margin-right: 6px;
border-radius: 3px 0 0 3px;
font-size: 16px;
}
.demo:before {
content: "\f06e";
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
background: #c0392b;
margin-left: -12px;
margin-right: 6px;
border-radius: 3px 0 0 3px;
font-size: 16px;
}
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}
</head>
<link href='http://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Untul Penggunaannya, copas kode dibawah ini ketika membuat postingan (gunakan mode HTML)
<ul class="button"><li><a class="download" href="http://llylsll.blogspot.com/"><i class="icon-cloud-download"></i> Download</a></li><li><a class="demo" href="http://llylsll.blogspot.com/"><i class="icon-desktop"></i> Demo</a></li></ul></div><div class="clear">Sekian post dari saya.
SEMOGA BERMANFAAT
Jika anad ingin Copy + Paste Cantumkan Link Sumber nya,
Tolong hargai saya, jika kalian ingin di hargai maka hargailah orang lain...
Jika anad ingin Copy + Paste Cantumkan Link Sumber nya,
Tolong hargai saya, jika kalian ingin di hargai maka hargailah orang lain...
Diposting oleh
Yahya Suteja
di
nyimak sob.. :D
ReplyDeletekerennn mas, izin coba ya tambah keren nih blog saya pake ini
ReplyDeletethanks gan
ReplyDeleteTerimakasih kang atas infonya! :D ane terapin ahh..
ReplyDeleteNice gan info nya jangan lupa kunjungi blog ane :
ReplyDeletehttp://pentuelkureks.blogspot.com/
Salam Kenal Gan !
ReplyDeleteBagus Ni Tips Nya, Saya Mau Ekperimen dulu, sebelum saya terapkan ke blog saya!
mau saya coba di blog saya yang satunya, .
ReplyDeletetak coba dulu ya gan:)
ReplyDeleteMantaap..ijin praktek diblog ane gan..
ReplyDeleteCoba Dulu Nih :D
ReplyDeleteWah ini dia yang di cari akhirnya ada di sini..!! thanks Yoo Sob
ReplyDeletewih keren sob izin coba ya
ReplyDeletesaya coba gan, thanks dah share gan :)
ReplyDeleteTutor ini cocok buat blog yg menyediakan template :)
ReplyDeletewah keren nih, thanks udah share
ReplyDeleteijin nyoba gan, Thanks dah ngeshare..
ReplyDeleteReplyDelete
sudah berhasil sob hehe thanks!
ReplyDeletewah bnyak juga ya script nya, bikin lemot gak gan?
ReplyDeletesip gan, ane udah pasang :D
ReplyDeletebiar makin ganteng tampilannya ane dit sedikit :)
keren mas gan tombol downloadnya... boleh tak cobain buat blog download saya
ReplyDelete