Cara Mudah Membuat Tombol Download Keren dan Penuh Warna di Blog

Pada kesempatan kali ini Saya akan berbagi tutorial memasang tombol demo dan download dengan efek slide. Tutorial ini Saya buat atas permintaan sobat disini untuk membuat tombol demo dan download dengan efek animasi yang menarik. Ok langsung saja disimak caranya.

Catatan : Sebelumnya sobat sudah diharuskan menerapkan fontawesome pada blognya.

1. Membuat Tombol Demo dan Download Dengan Efek Slide

Demo

#1. Buka blogger > pilih menu template > pilih edit html. 

#2. copy dan pastekan kode di bawah ini tepat sebelum </style> atau  ]]></b:skin>

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

#3. Simpan template.

#4. Langkah selanjutnya, untuk kode pemanggil silahkan terapkan pada postingan tab HTML Kemudian agar tampilannya rapi saat memasukkan kode HTML kedalam postingan, sebaiknya gunakan Pilihan Tekan "Enter" untuk baris baru" pada menu "Pilihan". Lalu copy dan pastekan kode dibawah kedalam tab HTML.

<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>

#5. Selesai.

2. Membuat Tombol Demo dan Download Dengan Efek Bayangan

Demo

#1. Buka blogger > pilih menu template > pilih edit html. 

#2. copy dan pastekan kode di bawah ini tepat sebelum </style> atau  ]]></b:skin>

/* Andreas Material Button */
#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e67e22}
.tombolripple.tdua{background:#3498db}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

Untuk warna tombol dan fungsi lainnya bisa sobat sesuaikan kembali.

#3. Kemudian tambahkan kode jQuery ini sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>

Kode jQuery berfungsi untuk memunculkan efek Ripple pada tombol.

#4. kemudian simpan template.

#5. Sekarang untuk kode pemanggilnya, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML.

#6. Selesai.

<div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div>

Tambahkan link tujuan pada kode yang ditandai.

3. Membuat Tombol Demo dan Download Dengan Efek Flat UI

Demo Style 1Demo Style 2

#1. Widget ini menggunakan Font Awesome, jadi silahkan tambahkan terlebih dahulu link CSS berikut di atas </head>

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

#2. Masuk ke blogger.

#3. Pilih menu template > pilih edit html.

#4. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

Style 1

/* CSS Button Style 1 by andreas */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.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:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download: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:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

Style 2

/* CSS Button Style 2 by andreas */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;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}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';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}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

#5. Simpan template.

#6. Untuk penggunaannya, silahkan gunakan kode berikut ini ketika membuat posting. Copy dan pastekan kode dibawah dengan tab HTML dalam postingan.

Style 1

<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="#" target="_blank">Demo</a></li>
    <li><a class="download" href="#" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

Style 2

<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="#" target="_blank">Demo Link</a></li>
    <li><a class="download" href="#" target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>

#7. Selesai.

Keterangan : ganti "#" dengan link tujuan sobat.

4. Membuat Tombol Demo dan Download Dengan Waktu

Demo 

#1. Masuk ke blogger.

#2. Pilih menu template > pilih edit html.

#3. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

.ttan{display:inline-flex;border-radius:4px;cursor:pointer;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);font-size:13px;font-weight:700;text-transform:uppercase;color:#FFF!important;background-color:#22a1c4!important;margin:5px;padding:8px 20px;text-shadow:none;transition:all 1s}
.ttan:hover,.ttan:hover,.ttan.link:hover{background:#1D7891!important;box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 15px 0 rgba(0,0,0,0.12)}
.ttan:focus{background:#1D7891}
#dtan{display:none}

#4. Salin kode html dibawah ini dan pastekan ke dalam artikel postingan yang akan menggunakan tombol download ini (tab HTML).

<div style="text-align: center;">

<a class="ttan" href="#" id="dtan" target="_blank">Download</a>

</div>

<div id="daplong">

<script type="text/javascript">

//<![CDATA[

var seconds = 60;

setInterval(

    function() {

        if (seconds <= 1) {

            daplong.style.display = "none";

            dtan.style.display = "inline-block";

        } else {

            document.getElementById('credits').innerHTML = --seconds;

        }

    },

    1000

);

document.write('<b>Link download</b> will be appear <span id="credits">60</span> seconds');

//]]>

</script>

</div>

</div>

Keterangan : "#" - Ganti dengan url atau link | "60" - waktu perdetik download - bisa diganti teksnya.

5. Membuat Tombol Demo dan Download Dengan Efek Show dan Hidden

Demo 

#1. Masuk ke blogger.

#2. Pilih menu template > pilih edit html.

#3. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

 /* skin-design buttons */ 
.skin-design {display:block;background-transparent:blue;max-width:350px;padding:0 auto 0px auto;margin:0 auto 0px auto;text-align:center;padding-top:50px}.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: #073763; border-radius: 15px; 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: #ffbd00; color: ##073763; border-radius: 15px; 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; }

#4. Setelah itu klik "Simpan Tema"

#5. Kemudian sobat pergi ke postingan artikel yang akan dipasangi tombol download. Copy dan pastekan script dibawah ini pada kolom HTML bukan COMPOSE.

<div class="skin-design">
<div class="dlbutton"><a href="#" target="_blank">Download</a><div class="slide top">Marimaos</div><div class="slide bottom">SEO Website</div></div></div>

Keterangan : ganti url/link "#" dengan URL situs download yang akan dituju.

#6. Untuk mencobanya klik pratinjau terlebih dahulu.

#7. Jika dirasa cocok, silahkan klik publikasikan.

#8. Selesai. 

Beberapa tombol download diatas menggunakan javas script dan css, yang katanya konon membuat blog lelet. Tapi setelah aku coba-coba, ternyata tidak berefek apa-apa kok ke blog aku. Apalagi misalnya kalau kita parsekan kode diatas, maka kodenya akan berjalan dengan sangat baik. Itu aja sih dari aku. Semoga dapat bermanfaat. Terima kasih.

Share this post