hhhmmm, Jumpa lagi update lagi, demo lagi.
Apakabar nih sahabat, tentu baikkan ? Kali ini admin ingin berbagi langkah tentang membuat tombol / button untuk download dan demo di blog yaaa....... sebenarnya button seperti ini sudah banyak jenisnya dan penampakannya juga banyak serta keren-keren karya para blogger tanah air, salah satu contohnya disini dan disini, baiklah kawan kita intip 👀 dulu demonya yaaaaa
DEMO
Bagaimana demonya, tertarik untuk membuatnya ? yuukkk ikuti langkah-langkahnya.
saya beranggapan kawan-kawan sudah berada di template editor yaa, lalu silahkan kawan - kawan copy dan paste kode dibawah ini dan letakkan tepat diatas tag
]]></b:skin> atau diatas tag </style>.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both;border: 1px solid rgba(0,0,0,0.1)}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:14px 48px 14px 16px;background:#303030;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button li a.download{background:#f44336}
.button li a.demo:hover{background:#f44336}
.button li a.download:hover{background:#202020}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button li a.download:after{content:'\f019';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button li:hover a.demo:after,.button li:hover a.download:after{background:transparent;-webkit-animation:fadeinup .3s alternate ease infinite;animation:fadeinup .3s alternate ease infinite}
@-webkit-keyframes fadeinup{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateX(3px)}}
@keyframes fadeinup{from{transform:translateX(0)}to{transform:translateY(3px)}}
Selanjutnya temukan
</head> dan paste kode dibawah ini diatasnya yaaa.<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"></link>
jika pada template sudah ada kode diatas maka tidak perlu dipasang lagi
Sekarang untuk penerapannya di blog kawan - kawan hanya menggunakan kode dibawah ini saja.
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="https://www.infoalya.com.com/" target="_blank">Demo</a></li> <li><a class="download" href="https://www.madrasah.infoalya.com/" target="_blank">Download</a></li> </ul> </div> <div class="clear"> </div>.
silahkan ganti link yang saya tandai dengan link demo serta link unduhan milikmu kawan
ya wessslaaahhh sampai disini dulu kawan, lain hari jumpa lagi. 💓 byee..............