Inilah Cara Memasang Slide Demo Dan Download | Memperbaiki

Admin   11.41   tutorial blog   Comment  

Berjumpa kembali bersama saya, kali ini saya akan mencoba membagikan kepada teman teman pengunjung blog saya tentang Cara memasang Slide Demo Dan Download, barangkali cara seperti ini sudah tidak asing lagi untuk sebagian pengguna blogspot. Tetapi tidak ada salahnya saya share kembali untuk teman yang belum tahu cara dalam pembuatannya.

Baiklah, mari kita langsung saja ke pembahsan kita kali ini. Caranya adalah kalian pasang terlebih dahulu code "Font Awesome" dibawah ini.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Cara memasang kode diatas bagaimana dan cara meletakannya dimana? Letakan codenya tepat sebelum </head> . Setelah code diatas terpasang kita langsung saja ke bagian CSS, kalian bisa gunakan CSS dibawah ini.

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

Taruhlah code "CSS" tepat sebelum </style> atau kalian bisa meletakkannya sebelum </b:skin>. setelah itu kalian save kembali template yang sudah di edit tadi. Untuk menggunakan di postingan blog kalian bisa menggunakan "CODE HTML" dibawah ini.

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

Demikian cara dalam memasang slide demo dan download, selamat mencoba dan semoga bisa menambah wawasan teman teman.