Membuat Tombol Demo dan Download Slider Responsive di Blogger

Tombol Slider Responsive

Tombol slider adlah merupakan satu di antara beberapa fitur website yang sering digunakan. Fitur ini akan menampilkan gambar yang berganti secara otomatis atau ketika Anda melakukan klik, maka gambar akan melakukan transisi dengan sendirinya.

Tombol Demo & Download Slider Responsive

Tombol demo & download slider responsive ini di buat dengan bantuan kode script HTML, CSS, dan Font Awesome, dengan beberapa keunggulan diantaranya.

Fitur Tombol Demo dan Download

Murni CSS.
Loading Ringan.
Penggunaan Icon Font Awesome.
Kombinasi sederhana antara HTML dan CSS.
Efek Hover keren.
Teks berubah saat melayang.
Responsive.

Tutorial

Bagaimana cara membuat dan menambahkan tombol slider responsive ?.
Cara membuatnya, ikuti langkah-langkahnya di bawah ini untuk menambahkan Tombol Demo atau Download Slider Responsive di postingan blogger.

Langkah 1 - Menambahkan Kode Font Awesome

Pertama Masuk ke Dashboard Blogger
Pilih Tema
Pilih Edit HTML
Kemudian cari kode </head> kemudian salin kode script di bawah ini dan tempelkan di atas atau sebelum kode </head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>

<script type="text/javascript">
  //<![CDATA[
  function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
  loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
  //]]>
</script>
<noscript>
  <link
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
    rel="stylesheet"
  />
</noscript>

Setelah copy paste kode script tadi, kemudian lanjut ke langkah ke-2.

Langkah 2 - Menambahkan Kode CSS

Untuk menambahkan kode script CSS tombol demo dan download slider, cari kode ]]></b:skin> kemudian salin kode script di bawah ini dan tempelkan di atas atau sebelum kode ]]></b:skin>.

/* CSS Demo & Download Buttons*/

  .bie-slide,
   .bie-slide2 {
    position: relative;
    display: inline-block;
    height: 40px;
    width: 170px;
    line-height: 40px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #f84f4f;
    margin: 10px;
    transition: all 0.5s ease-in-out;
   }
   .bie-slide2 {
    border: 2px solid #36D7B7;
   }
   .bie-slide:hover {
    background-color: #f84f4f;
   }
   .bie-slide2:hover {
    background-color: #36D7B7;
   }
   .bie-slide:hover span.circle,
   .bie-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #f84f4f;
   }
   .bie-slide2:hover span.circle2 {
    color: #36D7B7;
   }
   .bie-slide:hover span.title,
   .bie-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
   }
   .bie-slide:hover span.title-hover,
   .bie-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 28px;
   }
   .bie-slide span.circle,
   .bie-slide2 span.circle2 {
    display: block;
    background-color: #f84f4f;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 30px;
    height: 30px;
    width: 30px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
   }
   .bie-slide2 span.circle2 {
    background-color: #36D7B7;
   }
   .bie-slide span.title,
   .bie-slide span.title-hover,
   .bie-slide2 span.title2,
   .bie-slide2 span.title-hover2 {
    position: absolute;
    left: 65px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #f84f4f;
    transition: .5s;
   }
   .bie-slide2 span.title2,
   .bie-slide2 span.title-hover2 {
    color: #36D7B7;
   }
   .bie-slide span.title-hover,
   .bie-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
   }
   .bie-slide span.title-hover,
   .bie-slide2 span.title-hover2 {
    color: #fff;
   }

Setelah selesai melakukan langkah 1 dan 2, kemudian Simpan.

Langkah Terakhir - Menambahkan Kode HTML

Untuk menambahkan Tombol Demo dan Download Slider di halaman postingan blog , copy paste kode script html di bawah ini pada halaman postingan anda dengan mode Editor HTML .

<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="nofollow" target="_blank">
  <span class="circle"><i class="fa fa-laptop"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="#" rel="nofollow" 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>

<div id="wrap" style="text-align:center">
<a class="bie-slide2" href="#" rel="nofollow" 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>

<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="nofollow" target="_blank">
  <span class="circle"><i class="fa fa-laptop"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
</div>

Kemudian Pratinjau dan Publikasikan.