Cara memasang Slide Demo Dan Download

Dhika    November 10, 2018    CSS , HTML , TIPS BLOGGER   

Hi sobat blogger jumpa kembali bersama saya, disini saya akan mencoba membagikan kepada sobat setia pengunjung blog saya.
pada kesempatan kali ini saya akan memberika Cara memasang Slide Demo Dan Download, Mungkin cara seperti ini sudah tidak asing lagi untuk sebagian pengguna blogspot. Tapi tidak ada salahnya saya share lagi untuk sobat yang belum tahu cara membuatnya.

Nah agar tidak memakan banyak waktu lagi kita langsung saja kecara membuatnya dibawah ini.
Langsung saja jika berminat atau menggunakannya. 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 code 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;
}

DEMOLetakan code "CSS" Tepat sebelum </style> atau kalian bisa letakan 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>

Nah sobat mungkin dari saya cukupkan sekian sulu ya tentang Cara memasang Slide Demo Dan Download selamat mencoba dan semoga bisa bermanfaat.