CARA MEMBUAT WIDGET SLIDE DEMO & DOWNLOAD DI BLOG


ONEPOIN.COM - untuk kali ini saya akan mebagikan sebuah tutorial yang sangat bagus yang banyak di gunakan oleh orang lain akan tetapi tampil beda dari yang lain ya sesuai dengan topik kita saya akan membahas bagaiamana Cara Membuat Widget DEMO & DOWNLOAD di blogger dengan tampilan yang sangat bagus dan keren Oke langsung saja je TKP bagi sobat yang membutuhkan bisa mengikuti caranya di bawah ini :

  • Masuk ke akun blogger sobat masing-masing
  • Pilih Menu Template ==> Edit Template ==> COPY kode di bawah ini dan letakkan tepat di atas kode ]]></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;
}

  • Simpan template 
  • Langkah selanjutnya yaitu untuk kode pemanggil sobat bisa menggunakan kode di bawah ini silahkan terapkan pada tab postingan HTML
    Agar tampilan rapi saat memasukkan kode HTML ke dalam postingan sebaiknya anda gunakan Tekan "Enter" untuk baris baru" pada Menu "Pilihan" seperti gambar di bawah ini :


      • KODE PEMANGGIL UNTUK WIDGET DOWNLOAD
      <div id="wrap">
      <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>
      • KODE PEMANGGIL UNTUK WIDGET DEMO
      <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>
      </div>
      • KODE PEMANGGIL UNTUK KEDUA-DUANNYA DEMO & DOWNLOAD
      <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>


      CONTOH HASILNYA DARI WIDGET YANG AKAN DI BUAT


      Subscribe to receive free email updates:

      0 Response to "CARA MEMBUAT WIDGET SLIDE DEMO & DOWNLOAD DI BLOG"

      Post a Comment