Membuat Tombol Demo & Download dengan Efek Slide

Kesalahan yang Dilakukan oleh Seorang Blogger Pemula
Memasang 3 Komentar Disqus, Blogger, dan Facebook
9 Alasan Seseorang Menjadi Blogger

Tidak henti hentinya saya akan membagikan tutorial untuk para anda pecinta blogger. Kali ini Saya akan membagikan Cara memasang Tombol demo dan download yang di mana ini mempunyai fungsi untuk menuju link yang telah tersimpan di dalamnya apabila di klik.

Membuat Tombol Demo & Download dengan Efek Slide

Tombol Demo dan Download yang saya bawakan ini cocok untuk Anda yang blognya Flat Design.

Membuat Tombol Demo & Download dengan Efek Slide

1. Login Blogger

2. Template – Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

#wrap {
    margin: 20px auto;
    text-align: center;
}
#wrap br {
    display: none;
}
.bie-slide, .bie-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #F9690E;
    margin: 10px;
    transition: .5s;
}
.bie-slide2 {
    border: 2px solid #36D7B7;
}
.bie-slide:hover {
    background-color: #F9690E;
}
.bie-slide2:hover {
    background-color: #36D7B7;
}
.bie-slide:hover span.circle, .bie-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #F9690E;
}
.bie-slide2:hover span.circle2 {
    color: #36D7B7;
}
.bie-slide:hover span.title, .bie-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}
.bie-slide:hover span.title-hover, .bie-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}
.bie-slide span.circle, .bie-slide2 span.circle2 {
    display: block;
    background-color: #F9690E;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.bie-slide2 span.circle2 {
    background-color: #36D7B7;
}
.bie-slide span.title,
  .bie-slide span.title-hover, .bie-slide2 span.title2,
  .bie-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #F9690E;
    transition: .5s;
}
.bie-slide2 span.title2,
  .bie-slide2 span.title-hover2 {
    color: #36D7B7;
    left: 80px;
}
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {
    color: #fff;
}

4. Tambahkan kode di bawah ini di bawahnya kode <head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika kode di atas sudah terdapat pada template anda maka tidak perlu lagi memasangnya

5. Save template Untuk kode format pemanggilan tombol tersebut pada Postingan Anda dengan menggunakan kode di bawah ini pada mode HTML

<div id="wrap"> <a href="http://www.juhdialfarhan.id/" class="bie-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="http://www.rumahmedia.id/" class="bie-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>

Ganti URL di atas dengan URL tujuan Anda

Cukup sekian tutorial ini selamat mencoba, dan semoga work

COMMENTS

WORDPRESS: 2
  • comment-avatar

    Tips ini sangat bagus sekali untuk diterapkan di blog yang untuk software atau template ya, Untuk artikel di atas Terimakasih banyak

  • comment-avatar

    mantap gan, makasih banyak atas tutorialnya 🙂