Cara Membuat Tombol Demo Dan Download Pada Blogger

Cara Membuat Tombol Demo Dan Download Pada Blogger


Pelajar Design - Pada kesempatan kali ini saya akan membagikan Cara Membuat Tombol Demo Dan Download Pada Blogger, tombol download pada sebuah website sangatlah penting terutama untuk website yang membahas tentang download aplikasi dan sebagainya.

Tombol Demo Dan Download Pada Blogger yang keren dan elegan dapat mempercantik tampilan website kalian. Nah saya akan membagikan Cara Membuat Tombol Demo, Download Dan Buy Now Pada Blogger.

Cara Membuat Tombol Demo Dan Download Pada Blogger

1. Silahkan login ke blogger.com dengan menggunakan akun Gmail kalian.
2. Karena tombol download pada tutorial ini menggunakan Font Awesome, silahkann kalian masuk ke menu TEMA > Edit HTML dan cari kode </head> dan letakkan kode dibawah ini tepat DIATAS kode tersebut.

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

3. Silahkan cari kode ]]></b:skin> atau </style> dan pastekan kode dibawah ini tepat diatas kode tersebut.

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

4. Untuk penerapannya silahkan masuk ke mode HTML dan pastekan kode dibawah ini pada mode HTML tersebut. Silahkan hapus tombol yang tidak digunakan.

<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>

5. Selesai. Bagaimana artikel tentang Cara Membuat Tombol Demo Dan Download Pada Blogger? Mudah bukan. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya.

You may like these posts