Cara Membuat Tombol Download Dan Demo Di blog Keren Style Rocket


Cara Membuat Tombol Download Dan Demo Di Blog -  Yo WhatsApp sob :), jumpa lagi di blog bang ariel, pusat Nya berbagai macam informasi, malam ini saya bawa informasi tutorial spesial buat kalian semua para blogger yang doyan kreasi :)

Pada kesempatan kali ini, izinkan saya selaku admin blog bang ariel, untuk memberikan Tutorial Cara Membuat Tombal Download Dan Demo kepada kalian semua, di jamin tombol download dan demo nya akan sangat keren.

#Keterangan

Style tombol download dan demo ini buat oleh mbak arlina design, dengan tujuan untuk memperbagus tampilan dari blog kalian semua, biar terkesan profesional, jika kalian memang berminat untuk memasang nya, kalian perhatikan baik-baik arahan saya.

Note : Pastikan terlebih dahulu blog kalian telah di pasang font awesome, jika sudah mari kita lanjut ke inti pembahasan.

#Step Tutorial



1. Silahkan buka Blogger > Template > Klik Edit Html, Lalu terapkan kode CSS di bawah ini , tepat diatas kode ]]></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;
}

2. Lalu Simpan Template

Untuk langkah selanjutnya, kita akan menerapkan nya pada postingan blog, dengan menggunakan kode Pemanggilnya,

Berikut ini kode Pemanggilnya, kalian terapkan saja melalui mode html pada postingan artikel yang kalian inginkan.

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

Note : Silahkan kalian ubah tanda "#" (tanpa tanda kutip) Dengan link / url yang dituju.

Sekarang kode pemanggil untuk tombol download dan demo di blog telah jadi dan selesai, dengan demikian tombol download yang ada pada blog kalian, akan terlihat lebih ajib dan mantepps.

Begitulah rupanya tutorial cara membuat tombol download dan demo di blog, semoga dengan adanya tutorial ini bisa menjadi manfaat tersendiri untuk kalian semua,  aamiin.


Penutup

Demikianlah artikel ini bisa admin sampaikan kepada kalian semua, jika ada salah kata Mohon untuk di maafkan, jangan lupa untuk selalu mengunjungi blog saya ini, cukup sekian dulu dari saya:)

Terimakasih.

Berlangganan Via Email

Suka dengan artikel di atas? nggak ada salahnya untuk berlangganan artikel terbaru dari blog ini langsung via email.