Cara Membuat Slide Demo dan Download Di Blogger - Hallo sahabat Tips Seputar Blogger, Pada sharing tips kali ini yang berjudul Cara Membuat Slide Demo dan Download Di Blogger, saya telah menyediakan beberapa artikel lengkap dengan gambar2 yang mungkin kami sukai. mudah-mudahan isi postingan Cara Membuat Slide Demo dan Download Di Blogger yang saya tulis ini dapat an gitarnya.

Cara Membuat Slide Demo dan Download Di Blogger

Selamat siang sobat blogger..kali ini admin mau share sedikit nih buat sobat blogger,,
sebenarnya Cara Membuat Slide Demo dan Download Di Blogger sudah banyak yg tau namun kali ini admin akan membagikanya kembali buat sobat blogger,,saya rasa tombol demo dan download terkadang di spelekan yang terpenting kan link downloadnya bukan tampilannya..tp tak ada salahnya kita berkreasi sedikit untuk memanjakan mata pengunjung kita.
oke deh langsung saja pada topik utama kita kali ini Cara Membuat Slide Demo dan Download Di Blogger

Catatan : Sebelumnya Anda sudah menerapkan fontawesome pada blognya

Pertama buka blogger > Template > Klik Edit HTML dan terapkan kode di bawah ini tepat sebelum </style> atau ]]></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;
}

Kemudian Save Templete.
Langkah berikutnya untuk kode pemanggil silahkan terapkan pada postingan tab HTML.

Supaya tampilannya rapi saat memasukkan code HTML kedalam postingan,
sebaiknya gunakan Tekan "Enter" untuk baris baru pada menu "Pilihan" seperti gambar di bawah ini

Berikut ini adalah code untuk Slide Demo dan 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>

Demo

Selamat Mencoba semoga bermanfaat,,Salam Blogger

Demikianlah Artikel Cara Membuat Slide Demo dan Download Di Blogger

Sekian info Cara Membuat Slide Demo dan Download Di Blogger, mudah-mudahan bisa memberi manfaat untuk anda semua.

Anda sedang membaca artikel Cara Membuat Slide Demo dan Download Di Blogger dan artikel ini url permalinknya adalah http://tipseputarblogger.blogspot.com/2015/01/cara-membuat-slide-demo-dan-download-di_4.html Semoga artikel ini bisa bermanfaat.