Beranda  ›  Blogger  ›  Tutorial

    Cara Membuat Tombol Demo dan Download Di Blog Keren

    Nyampling << N >> Cara Membuat Tombol Demo dan Download Di Blog Keren. Seringkali ketika kita mengunjungi sebuah blog yang menawarkan sebuah template blog ataupun blog streaming film. Selalu menggunakan kedua tombol ini. Kedua fungsi tombol ini memang sangat berguna untuk mengalihkan kehalaman lain ataupun ke link sebuah drive tempat file tersebut untuk diunduh.

    Cara Membuat Tombol Demo dan Download Di Blog Keren

    Pada kasus diatas maka kedua tombol ini sangat penting karena sebelum membeli sebuah template ataupun sebelum mengunduh file film maka biasanya visitor dapat melihat demonya ataupu trailernya dulu. Sehingga visitor dapat mempertimbangkan apakah harus didownload ataupun tidak.

    Cara Membuat Tombol Demo dan Download Di Blog Keren


    Nah, kali ini nyampling akan memberikan tutorial bagaimana cara membuat kedua tombol ini diblog sehingga memudahkan visitor untuk menuju link tanpa harus ribet beralih ke tab lain. Oke, simak tutorialnya dibawah ini ya.

    Style 1. Bentuk  Sederhana


    Langkah 1. Login Blogger >> Template >> Edit HTML
    Langkah 2. Pasang kode berikut ini di atas kode ]]></b:skin> atau </style>
    .buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#f78d1d!important;background:0} .buttonx:active{position:relative;top:1px}
    Langkah 3. Simpan Template!
    Langkah 4. Untuk memanggil kode CSS di postingan blog, maka tempelkan kode berikut pada halaman HTML postingan. (Jangan di Compose)
    Langkah 5. Tempelkan kode dibawahsetiap kali akan membuat tombol.
    <div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://www.nyampling.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.nyampling.com/" target="_blank">Download</a>
</div>
    Jika mau menambah tombol lain maka, tinggal tambahkan kode:

    <a class="buttonx" href="http://www.nyampling.com/" target="_blank">Nama Tombol</a>
     Ganti alamat blognya dengan link blog sobat
    Langkah 6. Lihat dipratinjau atau Publish.

    Style 2. Efek Rainbow (Efek Pelangi)


    Langkah 1. Login Blogger >> Template >> Edit HTML
    Langkah 2. Pasang kode berikut ini di atas kode ]]></b:skin> atau </style>
    a {
  text-decoration:none;
  color:#FFF;
}
.rainbow-button {
  width:calc(10vw + 10px);
  height:calc(4vw + 10px);
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:2vw;
  font-weight:bold;
}
.rainbow-button:after {
  content:attr(alt);
  width:10vw;
  height:4vw;
  background-color:#191919;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rainbow-button:hover {
  animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
  to {
    background-position:30vw;
  }
}
    Langkah 3.  Simpan Template!
    Langkah 4. Untuk memanggil kode CSS di postingan blog, maka tempelkan kode berikut pada halaman HTML postingan. (Jangan di Compose)
    Langkah 5. Tempelkan kode dibawahsetiap kali akan membuat tombol.
    <a href="#" class="rainbow-button" alt="Demo"></a>
    Langkah 6. Lihat hasilnya dipratinjau atau dipublish

    Style 3. Efek Animasi Ripple (Gelombang Air)


    Script By Arlina https://www.arlinadzgn.com/2017/01/tombol-demo-dan-download-material-ui.html
    Langkah 1. Login Blogger >> Template >> Edit HTML
    Langkah 2. Pasang kode berikut ini di atas kode ]]></b:skin> atau </style>
    /* Arlina Design 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
    Langkah 3. 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
    Langkah 4. kemudian simpan template.
    Langkah 5. Sekarang untuk kode pemanggilnya, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan compose)
    <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
    Langkah 6. Selesai! Dan lihat hasilnya

    Style 4. Alternatif Paling Sederhana


    Pada style alternatif ini kalian tidak perlu memasang kode ditemplate alias kalian tinggal pasang kode di html postingan (Jangan di Compose ya). Untuk dapat memasangnya, kalian tinggal pasang kode dibawah ini ya.
    Script By Jagoan Kode https://www.jagoankode.com/cara-membuat-tombol-demo-download-keren-di-blog/

    Alternatif 1

    Baca Juga:



    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.jagoankode {
  margin-right:9px;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #009688;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #000;
}
/* Darker background on mouse-over */
.jagoankode:hover {
    background-color: #a5a6a7;
}
.jagoankode:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<br />
<center>
<a href="https://nyampling.com" target="_blank">
<button class="jagoankode"><i class="fa fa-eye"></i> Demo</button></a>
<a href="https://nyampling.com" target="_blank">
<button class="jagoankode"><i class="fa fa-download"></i> Download</button></a>
</center>









    Alternatif 2


    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.jagoankode1 {
    margin-right:9px;
    padding: 15px 25px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #357ae8;
    background-color: #ffffff;
    border: solid;
    border-radius: 25px;
    box-shadow: 7px 0px #000;
}
.jagoankode1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.jagoankode1 span:after {
  content: '0bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.jagoankode1:hover span {
  padding-right: 25px;
}
.jagoankode1:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
<br />
<center>
<a href="https://nyampling.com/" target="_blank">
<button class="jagoankode1" style="vertical-align: middle;"><i class="fa fa-eye"></i><span>Demo</span></button></a>
<a href="https://nyampling.com/" target="_blank">
<button class="jagoankode1" style="vertical-align: middle;"><i class="fa fa-download"></i><span>Download</span></button></a>
</center>









    Demikian tutorial Cara Membuat Tombol Demo dan Download Di Blog Keren yang telah nyampling rangkum untuk sobat. Semoga dapat bermanfaat dan dapat diaplikasikan diblog sobat, tinggal pilih saja mana style yang paling praktis dan mudah digunakan.

    Artikel Terkait

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel