Cara Membuat Tombol DOWNLOAD dan DEMO Keren Di blog dengan 3 style

Cara Membuat Tombol DOWNLOAD dan DEMO di dalam postingan blog

Assalamualaikum wr.wb
Salam sobat blogger,Admin mau share nie cara membuat tombol download,cocok sekali dengan sobat yang punya blog berbagi Template blog,aplikasi,dan hal yang berkaitan dengan download,sebelum itu simak dulu apa sih yang dimaksud dengan download?

download ialah suatu proses pengunduhan/penerimaan data atau file yang berasal dari internet,berbeda dengan upload.
Upload sering dikatakan juga dengan Unggah, yaitu merupakan suatu cara untuk mengirimkan File (contohnya seperti file: gambar, program, musik, dokumen pdf, dan lain-lain) dari komputer pribadi ke sebuah sistem Server dan file atau data akan di publikasikan di internet sehingga data yang telah di upload dapat dilihat dan diambil (download) oleh orang lain atau orang banyak.

dengan memiliki blog download berarti kalian sudah melakukan kegiatan upload dan download,jadi tuorial kali ini berguna untuk membuat Link download kalian lebih wahhhh,modern,dan menarik pengunjung untuk mendownload.

Eiitss,bukan hanya tombol download saja yang ada ditutorial ini,tapi juga tombol DEMO,yang sangat berguna bagi kalian yang suka menshare template blogger maupun wordpres.

Terdapat 3 Style,pilih yang kalian suka 🙂

Tombol Download dan Demo Style #1

Kelebihan style 1 ialah memiliki desifn Flat ui,Design yang sangat elegan serta tidak berantakan,dengan fiture ketika kursor  mouse maupun blog download ditekan,maka icon akan bergerak melayang,penasaran?.scroll kebawah untuk meilihat DEMO

Cara membuat :

Buka Template>>Edit HTML>>Lalu letakan code dibawah ini di atas  ]]></b:skin>  atau  </style>  .( Untuk mempermudah pencarian gunakan CTRL + F  )
css

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

Untuk menerapkannya / Memangilnya sobat copy paste code dibawah ini di postingan sobat.lalu letakan dimode HTML bukan di COMPOSE

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.Caripengetahuan-id.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.Caripengetahuan-id.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>.

Style #2

Yang satu ini juga tidak kalah menarik,ketika tombol download ditekan maka icon akan bergeser ke arah kanan.lalu muncul tulisan “klick here”

Cara membuat :

Buka Template>>Edit HTML>>Lalu letakan code dibawah ini di atas  ]]></b:skin>  atau  </style>  .( Untuk mempermudah pencarian gunakan CTRL + F  )

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
} 

untuk meletakan tombolnya di postingan copy paste code dibawah ini lalu letakan di Mode html bukan di compose ya 🙂

 <div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Style 3

Kelebihan style tiga yaitu jika sobat menekan tombol download maupun mengarahkan kursor ke tombol download maka akan muncul Nama file Anda dan ukuran file.Nah dengan begitu pengunjung dapat mengetahui apa nama dan berapa size file yang akan di download.

Buka Template>>Edit HTML>>Lalu letakan code dibawah ini di atas  ]]></b:skin>  atau  </style>  .( Untuk mempermudah pencarian gunakan CTRL + F  )
css

/* DLBUTTON [Personal Change] */ 
.dlbutton br {display: none !important;} 
.dlbutton { margin: 0px auto; width: 200px; position: relative; z-index: 1; } 
.dlbutton a { color: white !important; display: block; width: 200px; height: 50px; background: #2DA5C6; text-align: center; text-decoration: none; text-transform: uppercase; font: 17px/50px Helvetica, Verdana, sans-serif; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); } 
.dlbutton a, .slide { -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } .slide { position: absolute; z-index: -1; display: block; margin: -50px 0 0 10px; width: 180px; height: 40px; background: #444; color: #fff; text-align: center; font: 12px/45px Helvetica, Verdana, sans-serif; -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; transition: margin 0.5s ease; } 
.dlbutton:hover .bottom { margin: -10px 0 0 10px; } 
.dlbutton:hover .top { margin: -80px 0 0 10px; line-height: 35px; } 
.dlbutton a:active { background: #00b7ea; background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); } 
.dlbutton:active .bottom { margin: -20px 0 0 10px; } 
.dlbutton:active .top { margin: -70px 0 0 10px; } 

<div class="dlbutton">
<a href="#" target="_blank">Download</a>
<div class="slide top">Nama_File anda</div>
<div class="slide bottom">Size file anda</div></div> 

• <a href=”#” Ubah tanda # dengan link download sobat.

•  Nama_File anda   ubah menjadi nama file yang sobat sudah sediakan.

• Size file anda ubah menjadi berapa besar ukuran file yang akan didownload

Penutup

 

Terimakasih telah mengikuti Tutorialnya sampai habis.oh ya,jangan lupa untuk membaca pengetahuan lainya mengenai blog di label blogger.Mohon maaf jika terdapat kesalahan kata maupun tutoral yang sulit dipahami.jika sobat masih belum bisa,sobat bisa menanyakan langsung lewat coment dibawah ini.jangan lupa share keteman teman blogger sobat dan jika berkenan sobat bisa memberikan reaksi dengan meng klik icon.

tag : cara membuat tombol dowload,tombol demo di blog,didalam postingan blogger

Oh yaa. ..Admin ada blog rekomendasi nie bagi kalian yang sangat suka dengan Teknologi.Blog tersebut bernama Panduan Code. https://www.panduancode.com
Disana sobat bisa menemukan ilmu pemrograman, informasi-informasi teknologi, dan hal-hal yang berkaitan dengan dunia IT lain-nya.