Tutorial Membuat Slide Demo dan Button di Blog

 

hidayatcode.com


Assalamualaikum warahmatullahi wabarakatuh.

Tutorial Membuat Slide Demo dan Button di Blog - Membuat sebuah tombol download maupun demo di blog sangatlah tidak asing bagi para blogger, dan kebanyakan menggunakan button tersebut membuat blog terasaa lebih menarik membuat pengunjung blog terasa mudah membedakan tombol download.


Sebenarnya membuat tombol download dan demo dapat menggunakan gambar, namun pada kesempatan ini admin akan membahasa cara membuat slide demo dan download agar blog teman-teman menjadi kelihatan menarik tentunya. Di maska kini terlebih banyak blog dan web yang menggunakan blog download dan ini sangat cocok buat kalian.


Sourch code Script Slide 


Sebelum masuk dalam tahapan pembuatannya, pastikan di blog kalian sudah di pasangin font awesome

Langkah selanjutnya ialah masuk blogger kemudian pada Edit HTML cari codeode ]]></b:skin> atau </style>.

Kemudian letakkan code ini di atas code ]]></b:skin> atau </style>.

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

Jika sudah save templatenya.


Untuk menggunakan demonya pastikan kamu menggunakan tampilan HTML, kemudian masukkan code di bawah 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>
Sebelum memasangnya, pastikan kalian sudah memasang font awesome, jika belum silahkan klik

 Wasallammualaikum Warahmatullahi Wabarakatuh.

0 Response to "Tutorial Membuat Slide Demo dan Button di Blog"

Post a Comment

Berkomentarlah dengan baik dan sopan

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel