Cara Membuat Slide Download dan Demo Button Ala Kang Sebas

Halo Sob. Kali ini saya akan kembali memposting tentang Tutorial Blogger, Kali ini saya memposting cara membuat Download dan Demo Button ala Kang Sebas yang baru saya pakai untuk postingan baru baru ini :v jika anda ingin melihat demonya silahkan lihat dibawah

Demo Click here Download Click here

Sudah lihat Demonya ? Bagaimana kerenkan ? daripada basabasi lagi langsung saja praktekan di blog anda ya, silahkan lihat tutorialnya dibawah.

Tutorial

1.  Buka Blogger, Pilih menu Template dan pilih Edit HTML, Letakkan Script ini sebelum kode </head>. Tetapi jika sebelumnya anda sudah memasukkan FontAwesome Lewati langkah ini

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

2. Jika langkah diatas sudah dilakukan, sekarang letakkan Script dibawah ini sebelum 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;
}

3. Setelah Kedua langkah diatas dilakukan klik Simpan Template dan letakkan script dibawah ini pada menu HTML pada postingan anda

<div id="wrap">
<a class="btn-slide" href="#" 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 class="btn-slide2" href="#" 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>

• Ganti Tulisan "#" yang berwarna Biru dengan Link tujuan anda.
• Ganti Tulisan yang berwarna merah dengan kata anda.

 Sekian dari saya, Semoga Artikel ini bermanfaat :) .

Blog Kang Sebas : Klik Disini

Tweet